본격적으로 Next.js 기능들을 배우기 전에 Next.js가 어떻게 돌아가는지 이해한다면 보다 도움이 될 것이다. 앞서 리액트는 라이브러리라는 특성상 애플리케이션 빌드 및 구조화 방법이 자유롭고, 때문에 여러 방법이 있다고 언급한 바 있다. 반면 Next.js는 프레임워크로써 더 빠른 앱 개발과 최적화에 필요한 도구들을 제공한다. 여하튼 Next.js의 코드가 돌아가면서 각 단계별로 어떤 일이 벌어지는지 한번 뜯어보자. 아래 개념과 같은 사항들에 대해 알아보고, Next.js가 코드의 백그라운드에서 어떤 프로세스를 거치는지 논의해볼 예정이다. 코드가 실행되는 환경 : Development vs Production 코드가 실행되는 단계 : 빌드 타임 vs 런타임 렌더링이 일어나는 곳 : 클라이언트 vs ..

1. Next.js 시작하기 지난 챕터에서 아주 기본적인 리액트 코드를 작성해봤다. 이제 해당 코드를 Next.js로 옮겨볼건데, 작성된 코드는 아래와 같고 만약 이전 챕터를 보지 않았더라도 아래 코드를 그냥 복붙해서 사용해도 된다. index.html 1.1 Next.js 추가하기 프로젝트에 Next.js를 추가할 예정이므로 unpkg.com에서 끌어온 react와 react-dom 스크립트는 더이상 필요없다. 대신 npm으로 해당 패키지들을 로컬 환경에 설치해주자. 이 작업을 위해 package.json파일을 만들어 빈 객체 형태를 하나 만들어주자. 그 후 터미널에 npm run install react react-dom next을 입력하면 아래와 같이 의존성이 주입될 것이다. // package.j..

1. UI 업데이트 1.1 UI 렌더링 리액트가 어떻게 동작하는지에 앞서 브라우저가 어떻게 코드를 해석하고 UI를 그려내는지 이해해야 한다. 기본적으로 어떤 웹 페이지를 들어가게 되면 서버는 HTML 파일을 리턴하는데, 대강 아래와 같은 모양새를 띤다. 그 후 브라우저는 서버로부터 전달받은 HTML 파일을 읽어 DOM을 그려내게 된다. 1.2 DOM? DOMThe Document Object Model은 쉽게 말해 HTML 문서를 객체 형태로 표현한 것이다 (자세한 의미는 여기를 참고하자) DOM은 트리 구조로 부모-자식 관계를 갖는 모양새를 하고 있는데, 코드와 UI 사이에서 일종의 브릿지 역할을 담당한다. 이게 무슨 말인가 싶을 텐데, 개발자가 DOM 메서드와 JS 같은 언어를 통해 유저의 동작을 인..

1. About Next.js 1.1 웹 애플리케이션 구현 근래엔 최신 애플리케이션 구현 시 아래와 같은 사항들을 고려해야 한다. 유저인터페이스 : 유저가 어떻게 소비하고 상호작용하는지 라우팅 : 유저가 애플리케이션의 페이지나 여러 요소(파트)들을 탐색하는지 데이터패칭 : 데이터가 어디에 존재하며 이를 어떻게 가져올지 렌더링 : 정적/동적 콘텐츠를 어디에 어떤 방식으로 렌더링할 지 통합integration : 어떤 써드파티 서비스를 사용할 것이며, 이를 어떻게 애플리케이션과 연결할지(CMS, auth, 결재 등등) 인프라 : 애플리케이션 코드를 어디에 배포, 저장, 실행시킬지(서버리스, CDN, Edge 등등) 성능performance : 어떻게 최적화할지 확장성 : 애플리케이션이 조직이나 관련 데이터,..