이번주도 숨가쁘게 달려왔다.

(지난주에 회고를 작성하지 못한것이 마음에 걸린다.)

지난 2주간 많은 내용을 학습했다.

Next.js에서 제공하는 주요 내용들을 거의 다 다룬 것 같아보였다.

실무에서 많이 쓰이는 내용에 대한 인덱싱(Indexing)이 어느정도 된 것 같아 뿌듯하다.

아래 내용들에 대해 학습했다.

• Next.js 프로젝트 구조와 구성

• 페이지, 중첩 라우트 생성

   

개발자 입장에서 라우트 구성에 많은 시간을 쓰지 않고 비즈니스 로직에 집중할 수 있게 편의를 제공해준 것이라 생각한다. React에서는 React Router를 통해 제공되었다. 용법 차이가 있기 때문에, 잘 알고 사용해야 할 것 같다.

• 레이아웃

여러 페이지 간 공유가 되는 UI를 구성하기 위해 사용되는 파일이다. layout.tsx 파일에 정의하여 사용할 수 있다. 핵심 요소는 자식 요소를 전달해줄 수 있는 children 속성이다. 전체적인 UI를 올바르게 구성하기 위해 이에 대한 개념을 잘 알고 있어야 할 듯 하다.

• Notion API 연동

Notion은 단순한 메모 기능을 넘어, 문서 관리 및 블로그 작성에도 활용될 수 있는 범용 플랫폼이다. Notion 링크를 자체적으로 공유해도 되지만, Notion에 올라간 글들을 가져와서 예쁜 디자인을 가진 블로그로 보여주길 원할수도 있을 것이다. 이 때, Notion API를 활용할 수 있다.

• Markdown with JSX

작성 이루어진 블로그 글을 보여줄 때, 마크다운 형태의 문서를 예쁘게 렌더링하여 보여줘야 한다. 이 때 필요한 기능들에 대해 학습했다.

• Vercel 배포

Next.js로 개발한 프로젝트를 GitHub 원격 리포지토리에 Push하여 그대로 배포하는 프로세스에 대해 학습했다. 인프라 구성에 대해 복잡하게 신경쓸필요 없이, ENV에 Endpoint만 올바르게 지정하여 손쉽게 연동 가능하도록 구성해볼 수 있었다.

• 서버 컴포넌트와 클라이언트 컴포넌트

렌더링 주체가 서버인지 클라이언트인지에 따라 구분 가능하다. 사실 이 내용만 봐서는 어렵게 느껴지지 않을 수 있지만, 막상 깊게 들어가보면 많은 차이가 있는 것을 알게 되었다. 어느 상황에서 어떤 컴포넌트를 사용해야 하는지 잘 파악한 후, 구현이 이루어져야 할 것이다.

• React Suspense, Loading UI

페이지 로딩 시, 로딩 중일 때 보여줘야 하는 Skeleton UI 적용법을 익힐 수 있었다. Next.js에서 loading.tsx 파일을 통해 구성할 수 있었다.

• React Query 무한 스크롤링

글 목록, 댓글 목록 조회 시 자주 사용되는 무한 스크롤링 구현에 대해 학습했다. 생각보다 시행착오가 많이 있었던 파트였기 때문에, 숙련도를 많이 높일 수 있도록 잘 익혀두려 한다.

• Server Actions & 캐시(Cache)

서버에서 실행되는 비동기 함수인 서버 액션과 여러 캐시에 대해 살펴보았다. 서버와의 통신이 온전하게 되지 않은 상황에서 일부 컴포넌트만 보여줄 때 사용한다고 한다. 그리고 API Key나 비밀번호와 같은 민감한 정보를 가지고 통신할 때 유용하게 쓸 수 있다고 한다. 다만, 너무 생소한 부분이라 더욱더 많이 파봐야 할 듯 하다.

캐시에 대해서도 상당히 많은 양을 익힐 수 있었다. 여러 가지 적용법을 잘 살펴보고 적용하려 한다.

늘 느끼는 것이지만, 비동기의 세계는 참 어렵다. 서버 액션을 보고 더욱 그렇게 느낀다.

그렇지만 아무리 어렵다 하더라도, 브라우저를 사용하는 사용자 입장에서 가독성을 높이는데 필요한 필수 기술이라고 인지하게 되었다. 분명 러닝커브가 높은건 맞다. 그렇지만 Next.js를 제대로 활용하는 개발자가 되려면 반드시 넘어야하는 십자가라 생각하고 꼭 정복해야 할 것이다.

• Giscus, 다크모드

댓글 작성시 사용할수 있는 Giscus에 대해 살펴보았다. 블로그 구현에서는 한번쯤 사용해볼법한 기능인 것 같다.

다크모드에 대해서도 학습했다. 어떻게 적용할 수 있는지에 대한 기본적인 개념 위주로 익혀나갔다.

• 반응협 웹 & 에러 핸들링

TailwindCSS를 통한 반응형 웹(Responsive Web)에 대해 살펴보았다. 기존 CSS보다 훨씬 더 수월하게 구현할 수 있었다. 그렇다고해서 기존 개념을 몰라도 되는건 아닐 것이다. 기존 개념과 비교해보면서 잘 익혀야 할 것이다.

에러 핸들링 시, 어떻게 구현할 수 있는지에 대해 학습했다. 404 오류, 그 외 4xx/5xx 오류에 대한 공통 예외페이지 지정에 대해 알아보았다.

• 성능/SEO 최적화

ISR을 통한 성능 최적화와 Metadata 선언을 통한 SEO 최적화에 대해 익힐 수 있었다. 이 부분도 생소한 부분이지만, 중요한 내용이라 생각된다. 많이 복습해서 잘 익혀봐야겠다.

• 라우트 그룹/병렬 라우트/인터셉트 라우트

고급 라우팅 기술 세가지를 학습해보았다. 이 부분도 사실 놓쳐서는 안될 중요한 내용이라 생각한다. 다소 어렵긴 하지만, 잘 익혀서 활용해보려 한다.

정말정말 많은 것을 익혔다. 어느하나 중요하지 않은 부분이 없다 느껴질 정도로 레버리지 학습을 한번 돌렸다 생각한다.

이제는 꾸준한 복습 및 활용만이 남았다.

실무 혹은 개인 프로젝트에 잘 활용할 수 있다면, 좋은 자양분이 될 수 있을거라 생각한다.

생각했던 것보다 많이 어려운건 사실이었다. 짊어지게 될 십자가가 더욱 무겁게 느껴진다.

한차례 완강했으니, 좋은 결과물로 꼭 이어질 수 있도록 많이많이 노력하고 실천해보려 한다.