Today I Learned

Next.js를 공부하다보니 와 이거 진짜 최고다 하는 생각과 하... 이거 프레임워크 안 쓰면 못 쓸 기능이네... 하는 생각이 동시에 든다. 어마어마한 의존성이 아닌가 이거...

그럼에도 불구하고

유용한 기능들이 너무 많다. 일단 오늘 진행한 부분까지의 주요 기능/특징 을 정리해보자.

1. CSS Styling
   • Tailwind CSS : pre-defined classnames 를 이용해서 스타일링한다.
   • CSS-modules, clsx
2. Optimizing fonts and images
   • next/font 모듈 : 애플리케이션에서 사용하는 폰트를 빌드 시점에 다운로드해서 static asset에 포함시킨다. 그 결과 페이지 로딩 과정에서 폰트를 다운받을 필요가 없게 되었다.
   • <Image> 컴포넌트 : 자동으로 이미지 크기를 최적화해 ,layout shift(로드 과정에서 화면 요소의 크기가 변경되어 레이아웃이 바뀌는 현상)을 최소화했다.
   • Hero Image : 웹 페이지에서 중요한 또는 이목을 집중시키는 이미지를 말한다.
3. Creating Layouts and Pages
   • file-system routing : 페이지를 라우팅하는 기준이 파일 시스템 구조이다.
   • layout.tsx : file 이름으로 routing 하는 framework 답게 file/folder 명에 따라 역할이 정해져있다. 그리고 layout 파일(컴포넌트) 는 한 페이지에 대한 것으로 unique 하기 때문에 이름이 같은 것에 대해 걱정할 필요가 없다.
   • Partial Rendering : 한 페이지 안에서 바뀌는 부분만 렌더링하는 방식.
4. Navigating Between Pages
   • <Link> 컴포넌트(react-router-dom 아니고 Next.js의 컴포넌트) : client-side navigation, <a> 링크를 대체한다.
   • Automatic code-splitting : 초기 로드 시점에 모든 code를 로드해두는 전통적인 React SPA 와의 차별점이 되는 부분으로, 라우트에 맞게 code splitting을 시행하는 것은 각기 다른 페이지들은 서로에 대해 고립된다는 것을 의미한다. 일부 페이지에서 에러가 발생해도 나머지 부분은 원래대로 동작할 것이다.
   • Code prefetching : Next.js 로 만든 웹 페이지는 프로덕션 단계(개발 단계 아님!)에서는 <Link> 컴포넌트가 브라우저의 뷰포트에 나타날때마다 해당 라우트의 코드를 prefetching 한다.
   • usePathname() hook : 현재 브라우저가 위치한 path를 반환한다. 스타일링에도 사용할 수 있고, 조건부 렌더링 등에도 사용할 수 있을 것으로 보인다.
5. Setting Up your Database
   • Project Deploy
   • PostgreSQL : 서버리스 RDB

이 밑으로는 이제 남은 단계들이다. 세상에나...

6. Fetching Data
7. Static and Dynamic Rendering
8. Streaming
9. Partial Prerendering
10. Adding Search and Pagination
11. Mutating Data
12. Handling Errors
13. Improving Accessibility
14. Adding Authentication
15. Adding Metadata

튜토리얼을 통해 만든 앱에 대한 정리는 내일 다시 해봐야겠다. 잠이 너무 부족하다...

Links

Next.js 튜토리얼 소개