본문 바로가기

React

 (35)
Next.js 간단한 웹사이트 만들기 앞서 정리한 Next.js의 기본 정리를 기반으로 직접 사용해 간단한 웹사이트를 만들어 보자 첫 페이지 만들기 웹사이트는 세 페이지로 구성되어 있으며 시작 페이지 하나와 뉴스 목록을 보여주는 뉴스 페이지, 뉴스의 세부 정보를 보여주는 페이지로 구성되어 있다. 뉴스를 클릭하면 해당 뉴스의 내용이 전체 페이지에 뜨게 된다. 이런 구조를 만들려면 pages 폴더에서 세 개의 파일을 만들어야 한다. index.js : 루트 경로의 페이지 news.js : domain/news 요청에 해당하는 페이지 something.js : 하나의 뉴스를 클릭하면 보이는 뉴스 상세 페이지 여기서 파일 이름이 중요하다. index의 경우 특수해서 / 뒤에 아무것도 없을 때 해당 파일을 불러오지만, 다른 파일 이름은 경로의 이름으..
Next.js Data fetching Next.js에서 Data fetching Next.js에서 데이터를 가져오는 방법은 여러 가지가 있으며, 애플리케이션 사용 용도에 따라 방법을 선택해 사용하면 된다. 보통 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져온다. 하지만 Next.js에서는 다른 방법을 사용해 가져온다. getStaticProps : Static Generation으로 빌드(build)할 때 데이터를 불러온다. (미리 만들어 준다.) getStaticPaths : Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅을 구현한다. (예 : pages/post/[id].js) getServerSideProps : Server Side Rendering으로 요청이 있을 때 ..
Next.js 기본 정리 Next.js 란 ? 리액트의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. CSR의 경우 브라우저가 서버에 요청을 보내고 응답으로 들어온 JS를 다운로드한다. 그다음 브라우저는 리액트를 실행시켜 로딩이 끝나면 화면에 렌더링이 된다. 또한 로딩 도중에는 크롤링이 불가능하기 때문에 검색 엔진에 최적화되지 못한다. 반면 SSR의 경우 서버에서 렌더링 준비된 HTML 파일을 브라우저로 보내준다. 때문에 브라우저에서는 별도의 로딩 없이 바로 렌더링이 가능하다. HTML을 바로 렌더링 한 뒤 JS를 다운로드하고 리액트를 실행시킨다. 일반적으로 리액트로 개발할 때 SPA(Sing Page Application)을 이용하며 CSR(Client Side Rend..
MobX 톺아보기 4 - MobX core - Reactions MobX 공식 문서의 MobX core Reations를 톺아보자. [ 부수효과와 함께 reaction 실행 ] reaction은 MobX의 모든 것이 모이는 곳이기 때문에 이해해야 할 중요한 개념이다. reaction이 목표는 자동으로 발생하는 부수효과를 모델링하는 것이다. 관찰 가능한 상태에 대한 consumer를 생성하고 관련 사항이 변경될 때마다 자동으로 부수효과를 실행하는 데 그 중요성이 있다. 하지만 이 점을 염두에 두고 여기서 설명하는 API는 거의 사용되지 않는다는 점을 인식하는 것이 중요하다. 이들은 종종 다른 라이브러리(예 : mobx-react)나 애플리케이션에 특정한 추상화에서 추상화되어 있다., 하지만 MobX를 이해하기 위해 reaction이 어떻게 생성되는지 살펴보자. 가장 간..
MobX 톺아보기 3 - MobX core - Computed MobX 공식 문서의 MobX core Computed를 톺아보자. [ computed 된 정보 도출하기 ] 사용법 : computed (annotation) computed(options) (annotation) computed(fn, options?) computed 값은 다른 observable들에서 정보를 도출하는 데 사용할 수 있다. 느리게 평가하여 출력을 캐싱하고 기본 observable 변수 중 하나가 변경된 경우에만 다시 computed 된다. 아무것도 관찰되지 않으면 완전히 중단된다. 개념적으로는 스프레드시트의 수식과 매우 유사하며 과소평가해서는 안된다. 저장해야 하는 상태의 양을 줄이는 데 도움이 되며 고도로 최적화되어 있다. 가능하면 수식을 사용하자. 예제 computed 값은 자바스..
MobX 톺아보기 1 - MobX core - observable state MobX 공식 문서를 본격적으로 톺아보자. [ Createing observable state : 관찰 가능한 상태 만들기 ] 프로퍼티, 전체 객체, 배열, Map 및 Set은 모두 관찰 가능하게 만들 수 있다. 객체를 관찰 가능하게 만드는 기본 방법은 makeObservable을 사용하여 프로퍼티별로 어노테이션을 지정하는 것이다. 가장 중요한 어노테이션은 다음과 같다. observable : 상태를 저장하는 추적 가능한 필드를 정의한다. action : 메서드를 상태를 수정하는 액션으로 표시한다. computed : 상태로부터 새로운 사실을 도출하고 그 출력을 캐시 하는 getter를 표시한다. makeObservable makeObservable(target, annotations?, options?..
MobX 톺아보기 0 - 컨셉, 원칙 상태관리 라이브러리 MobX를 React에 적용하기 위해 공식 문서에서 추천하는 순서에 따라 톺아보며 익히려 한다. [ Concept ] 우선 MobX의 컨셉을 살펴보자. MobX는 애플리케이션에서 다음 세 가지 개념을 구분한다. State (상태) Action (액션) Derivations (파생) 1. 상태를 정의하고 관찰 가능하게 만들기 상태는 애플리케이션을 작동하는 데이터이다. 일반적으로 할 일 목록과 같은 도메인별 상태와 현재 선택된 요소와 같은 보기 상태가 있다. 상태는 값을 지정하는 스프레드 시트 셀과도 같다. 상태는 일반 객체, 배열, 클래스, 순환 데이터 구조 또는 참조 등 원하는 데이터 구조에 저장이 가능하다. MobX의 작동 방식은 중요하지 않다. 시간이 지남에 따라 변경하려는 모든 ..
Redux 톺아보기 2 - (비동기 로직) 이번 톺아보기에서는 리덕스 공식 문서를 통해 비동기 로직을 작성하는 법을 배워보고자 한다. [ Redux 비동기 코드 다루기 ] 😬 담담한 척하며 공식 문서를 살펴보지만 비동기라는 단어가 왜 이렇게 무서운지. 공식 문서를 읽고 나면 조금 더 나아진 모습을 기대해 본다. 동기식 로직의 경우 액션이 디스패치되고 스토어가 리듀서를 실행하고 새로운 상태를 계산하면 디스패치가 완료된다. 그러나 자바스크립트에는 비동기식 코드를 작성하는 다양한 방법이 있으며 일반적으로 애플리케이션에는 API에서 데이터를 가져오는 것과 같은 작업을 위한 비동기 로직이 존재한다. 이 경우 리덕스에 비동기 로직을 넣을 장소가 필요하다. thunk는 비동기 논리를 포함할 수 있는 특정 종류의 리덕스 함수이다. thunk는 두 가지 기능을 ..

티스토리툴바