Next.js는 React를 기반으로 구축되고 서버에서 렌더링되는 React 애플리케이션용으로 설계된 인기 있는 오픈 소스 JavaScript 프레임워크이다. 간단하고 직관적인 개발자 경험을 제공하여 빠르고 확장 가능한 웹 애플리케이션을 쉽게 만들 수 있다. 이 글에서는 Next.js가 서버에서 렌더링되는 React 애플리케이션의 미래인 5가지 이유를 정리해보았다. 자동 코드 분할 (Automatic Code Splitting) Next.js는 요청 시 로드할 수 있는 작은 청크로 코드를 자동으로 분할하므로 로드 시간이 단축되고 사용자 경험이 향상된다. 서버 사이드 렌더링 (Server-Rendering) Next.js를 사용하면 서버에서 React 컴포넌트를 렌더링할 수 있으므로 웹 애플리케이션의 성능..

React 16.8 버전에서 Hook이 발표되고 난 후 React에서 컴포넌트를 선언하는 방법의 대세는 클래스 컴포넌트에서 함수 컴포넌트로 옮겨왔다. 많은 사람들이 익숙하고 이미 기존에 많은 코드들이 작성된 방법인 클래스 컴포넌트에서 함수 컴포넌트로 옮겨온 이유 중에는 함수 컴포넌트의 문법이 더 단순하고 교착상태로 인한 버그가 발생하지 않는다는 장점도 있지만, Custom Hook의 편리함과 유용성도 큰 비중을 차지하고 있다. 리액트는 UI를 구축하기 위한 라이브러리로 리액트가 가진 핵심적인 관심사는 UI와 UI를 변경시키는 로직이다. 이 중 UI는 실제 코드상에서는 JSX라는 형태로 표현되고, UI 변경 로직은 유저의 입력에 반응하거나 API를 호출하고 스크린의 변화에 반응하는 등 여러 동작들을 통해서..

Context API란? React에서 제공하는 내장 API로서 컴포넌트들에게 동일한 Context(맥락)을 전달하는 데 사용할 수 있다. 일반적으로 리액트에서 데이터를 전달하는 기본 원칙은 단방향성으로 부모 컴포넌트에서 자식 컴포넌트 방향으로만 데이터를 전달할 수 있다. 단방향성은 애플리케이션의 안전성을 높이고 흐름을 단순화하는데 유용하지만 때때로 너무 많은 단계를 거쳐서 자식 컴포넌트에 데이터를 전달해야 한다는 문제점을 야기하기도 한다. 예를 들어 5단계 아래에 위치한 자식 컴포넌트에게 데이터를 넘겨야 한다면, 중간에 4개의 컴포넌트는 해당 데이터를 사용하지 않을지라도 props를 계속해서 넘겨줘야 하는 문제가 발생하고, 형제 관계나 특정 범위 안에 있는 컴포넌트들에게 데이터를 넘기기 위해서는 더 복..

7주 차에는 실제 서비스하는 앱을 보고 따라 만드는 클론 코딩 프로젝트를 진행했다. 물론 모든 걸 따라 만들 수는 없으니 일주일 안에 가능한 최소 스코프를 정하고 개발을 시작했다. 우리 팀은 트위터를 주제로 정했고 팀원은 총 7명으로 프론트엔드 4명은 백엔드는 3명이었다. 나는 이번 부트캠프에서 팀장을 세번 맡았었는데, 이번 클론 코딩에서도 팀장을 맡았다. 처음에는 팀장이라는 자리가 부담스러웠는데, 계속 팀장을 하다 보니 팀의 리더로서 팀원을 챙기고 이끌어나가는 게 재밌어졌다. 어쩌면 나도 몰랐던 적성을 찾은 것 같다. 우리 팀의 개발 스코프는 아래와 같이 잡았다. User 로그인 회원가입 로그아웃 소셜 로그인 Profile 사용자 프로필 조회, 수정 팔로우, 언팔로우 조회, 추가, 취소 Tweet 작성..

CRA(create-react-app)으로 리액트 프로젝트 생성하기 리액트 프로젝트를 생성하는 방법에는 여러 가지가 있지만, 현재로서 가장 쉽고 보편적인 방법인 CRA(create-react-app)를 사용해서 생성해보려 한다. CRA 프로젝트를 생성하기 위해 npx를 사용할 것이다. 여기서 npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0 버전부터 새로 추가된 도구로 npm을 좀 더 편하게 사용할 수 있게 해 준다. Node.js를 설치했다면 기본적으로 npm도 같이 설치되므로 Node.js를 처음 설치했다면 바로 사용할 수 있다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or..

React Query React Query는 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 서버 상태 관리 라이브러리다. 기존에 Redux, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 되었다. QueryClientProvider 리액트 쿼리를 사용하기 위해 최상위 컴포넌트를 QueryClientProvider로 감싸준다. 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다. import { QueryClient, QueryClientProvider } from "react-query"..

벌써 주특기 숙련 주차가 지나고 심화 주차가 시작됐다. 숙련 주차에 학습한 내용 몇 가지를 글로 정리하며 복습해보자. React Hooks - useState useState는 가장 기본적인 hook이며, 함수형 컴포넌트에서 가변적인 상태를 가지게 해준다. const [state, setState] = useState(initialState); useState의 기본적인 형태는 위 코드처럼 생겼다. 비구조 할당 방식으로 선언하며, useState 함수 안에는 초기값이 들어가며, setState를 이용해서 state 값을 수정할 수 있다. 만약 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우 불변성을 유지해줘야 한다. setState를 사용하는 방식에는 또 다른 방식으로 함수형 업데이트가 있..