오늘의 나는 무엇을 잘했을까?
2주간의 프로젝트 기간을 마치고 오랜만에 학습 기간이 돌아왔다. 기록을 하며 학습하는 것이 어느 정도 습관화가 되다 보니 정리하는 시간도 많이 줄었고, 어떻게 정리하면 좋을지 머릿속으로 생각하며 복습도 가능해진 것 같다. 앞으로도 좋은 습관은 잘 유지해야겠다.
오늘의 나는 무엇을 배웠을까?
CryptoMeter 프로젝트
지난주 금요일(5/26) 최종 발표를 마지막으로 2주간의 프로젝트가 마무리되었다. 우리 팀원들은 모두 프로젝트가 처음, React의 사용 조차도 처음인 인원들로 모여 많은 우여곡절이 있었지만, 생각 외의 좋은 결과를 만들어 낸 것 같아 매우 만족하고 있다. 앞으로 일부 기능을 수정하고, 리팩토링을 진행하여 좀 더 좋은 질의 서비스를 최종 결과로 만들어 보려 한다.
작업을 하면서 modal UI를 popover UI로 변경을 하고 이에 따라 새로운 라이브러리를 공부해야 했던 소요도 있고 해서 상당히 정신 없이 작업을 했었다. 정리를 잘 못해 둔 것 같아 이번 주에 프로젝트 작업 과정을 복기하며 따로 블로그 포스트를 정리해 보려 한다.
그래도 큰 문제 없이 프로젝트가 잘 마무리 된 것에 너무 감사하고, 앞으로 2주 정도 주어진 시간 동안 수정 작업에 매진해야겠다.
Next.js
Next.js 란?
Next.js(이하 넥스트)는 React의 프레임워크이다. 처음에 넥스트를 접했을 때는 라이브러리의 프레임워크...? 도대체 왜 사용하는 것일까 하는 의문이 들었는데, 넥스트가 제공하는 기능을 살펴보면 그 모든 의문이 해결 된다.
리액트는 기본적으로 Client Side Rendering 을 하는 라이브러리이다. 즉, 처음 웹 사이트를 요청하면 빈 html을 불러오고, script 파일을 로딩한 후에야 화면이 렌더링 (아래 사진) 되기 때문에 초기 로딩 속도가 다소 느리다. 또 SEO에 취약하여 우리가 만든 웹 사이트를 검색 엔진에 노출 시키는데 어려움이 있다.
이에 반해, 넥스트의 경우에는 pre-rendering 과정을 통해 사이트 요청 시 미리 렌더링 된 html 파일을 불러와 사용자에게 보여주고, script 파일이 로딩되면 사용자와 웹 사이트 간의 상호작용이 가능해진다. 이에 따라 첫째로, UX 측면에서 장점이 있고, 미리 데이터가 렌더링 된 페이지를 가져오므로 SEO에서도 CSR보다 장점을 가지게 된다.
넥스트를 활용하면 Server Side Rendering, Static Site Generation이 가능해 지는 것이다.
Next.js의 제공 기능
1. 파일 시스템 기반 라우팅
프론트엔드 개발에서 라우팅을 간단하게 설명하자면 어떤 주소에 어떤 페이지/컴포넌트를 매칭하여 보여줄지 정하는 것이라 할 수 있다. 리액트에서는 React-Router를 활용하여 path 와 component 를 매칭 시켜 특정 경로에서 보여줄 컴포넌트를 정해 주었다.
넥스트에서는 파일 시스템 기반 라우팅을 활용한다. 이는 파일의 경로가 주소에 매칭되는 라우팅 방식을 말한다. 마치 html 파일로만 웹 사이트를 구성할 때 파일의 경로 구조에 따라 페이지의 주소가 정해졌던 것과 동일하다고 볼 수 있다.
2. Client-Side-Navigation
넥스트는 <Link /> 컴포넌트를 제공하여 client-side-navigation이 가능하도록 해준다. client-side-navigation이란, 페이지 전환이 url을 통한 이동으로 일어나지 않고, JS 상에서 페이지 컴포넌트를 교체해 줌으로써 일어나는 것을 말한다.
이 특성 상 브라우저의 기본 navigation보다 훨씬 빠르게 작동하며, 리액트의 SPA 특성을 유지하며 페이지 전환을 할 수 있도록 해준다. 페이지를 리로딩 하지 않고, link 컴포넌트가 뷰포트에 나타날 경우 관련 페이지를 백그라운드에 미리 가져다 놓아 훨씬 빠른 속도로 페이지 이동을 가능하게 해준다.
3. 코드 분할 (Code Splitting)
넥스트는 기본적으로 Automatic Code Splitting 기능을 제공한다. 이 기능은 웹이 처음 로딩될 때 번들을 통째로 전송하는 방법이 아니라, 가장 필요한 부분만을 쪼개어 전송할 수 있게 해주는데, 이에 따라 애플리케이션의 로드 타임을 줄여주게 된다. 사용자는 빠른 로딩으로 최적화 된 경험을 얻게 된다.
오늘의 나는 어떤 어려움이 있었을까?
프로젝트를 하면서 쌓였던 피로가 아직 가시지 않은 것 같다. 공부하는데 너무 피곤해서 중간에 한 번은 졸았다. 오늘 좀 일찍 자서 내일 오프라인 활동부터는 제 컨디션으로 학습할 수 있도록 해야겠다.
내일의 나는 무엇을 해야할까?
- Next.js 강의 라우팅 챕터 마무리
- CryptoMeter 수정 (2시간)
- 코드잇 데일리 미션
