[주간회고] 2025년 6월 둘째주

이번주도 숨가쁘게 달려왔다.(지난주에 회고를 작성하지 못한것이 마음에 걸린다.) 지난 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 최적화에 대해 익힐 수 있었다. 이 부분도 생소한 부분이지만, 중요한 내용이라 생각된다. 많이 복습해서 잘 익혀봐야겠다. 라우트 그룹/병렬 라우트/인터셉트 라우트고급 라우팅 기술 세가지를 학습해보았다. 이 부분도 사실 놓쳐서는 안될 중요한 내용이라 생각한다. 다소 어렵긴 하지만, 잘 익혀서 활용해보려 한다. 정말정말 많은 것을 익혔다. 어느하나 중요하지 않은 부분이 없다 느껴질 정도로 레버리지 학습을 한번 돌렸다 생각한다. 이제는 꾸준한 복습 및 활용만이 남았다. 실무 혹은 개인 프로젝트에 잘 활용할 수 있다면, 좋은 자양분이 될 수 있을거라 생각한다.생각했던 것보다 많이 어려운건 사실이었다. 짊어지게 될 십자가가 더욱 무겁게 느껴진다. 한차례 완강했으니, 좋은 결과물로 꼭 이어질 수 있도록 많이많이 노력하고 실천해보려 한다.

[주간회고] 2025년 5월 다섯째주

React와 Next.js에 대한 갈망이 늘 있어왔다.실무에서 React를 1년 반 정도 다루었지만, 좀 더 깊이있게 공부할 필요성을 느끼고 있었다. 그러던 도중, 짐코딩 TailwindCSS, React, Next.js 강의를 마주하게 되었다. 5월 초부터 하나하나 진도를 빼고 있는 중이다.우선 TailwindCSS 강의부터 먼저 수강했다. styled-components도 충분히 좋은 라이브러리라고 생각되지만, 전체적인 진입장벽 자체가 많이 높다는 느낌을 받았다. 특히 container 정의하는 부분에서 일관성을 가지고 구현하는게 너무 힘들었다. 중복되는 코드를 어떻게 줄여나가야 하는지.. 어떻게 간결하게 코딩할 수 있는지에 대한 스트레스가 꽤나 심했다.그리고 많은 개발자들을 좌절에 빠지게 만드는 레이아웃 구성.. 어쩌면 UI 개발의 꽃이라 생각되는 부분인데, 늘 부담을 느낄수밖에 없었다. TailwindCSS는 이러한 부담을 조금 덜어주는 훌륭한 프레임워크라는 느낌을 많이 받았다.계속 사용해보면서, 그 진가를 하나하나 알아가려 한다.차후에 v0.dev를 사용하게 될텐데.. 그것도 결국 TailwindCSS 기반으로 스타일링 이루어지는 부분이기 때문에 잘 알고 대응해야 할 것 같다. 아무리 AI Assistant가 코드를 잘 짜준다 하더라도, 어디까지나 도구로써의 가치가 있는것이지 그것이 메인이 될수는 없을거라 생각한다. React 강의에서는 JavaScript로 진행되었으나, 현 시점에서 TypeScript를 안쓰면 안되는 상황에서 스스로 TypeScript로 구현해보았다. TypeScript 숙련도를 높이기 위한 일환이었는데, 조금 멀리 가더라도 타입 강제에 대한 중요성을 느낄 수 있었다. 이번주부터는 라는 강의를 수강하기 시작했다. Next.js가 다루는 내용이 워낙 방대하기에, 핵심적인 부분부터 빠르면서도 정확하게 해야한다는 것을 느끼게 되었다.일단 Next.js를 왜 사용하는지?? 에 대한 해답을 줄 수 있는 여러가지 웹 렌더링 방식에 대해 정리해보았다.CSR, SSR, SPA, SSG, ISR에 대하여 학습했다. 각각에 대해 잘 설명할 수 있도록 꾸준히 익혀야 할 것이다. 어떠한 상황에서 어느 기술을 이용해야 할 지 잘 판단하여 사용해야 할 것이다. 그리고 Cursor AI에 대해 학습해보았다. 실무에서 사용해본적이 없기 때문에 다소 생소하게 느껴졌으나, Perplexity와 JetBrains AI Assistant를 활용해본 경험을 토대로 AI Chat(구. Composer)의 적응에 총력을 기울였다.단순히 문답만 하는 것을 넘어서, 어떻게 템플릿을 구성하여 질의해야 하는지에 대한 기반을 다질 수 있었다.어떻게 구현하는지도 중요하지만, 어떻게 질문하는지도 중요한 능력이 되어간다는 것을 느끼게 되었다. Next.js 프로젝트 구성에 대해서도 살펴보았다.현재 기준 최신버전은 15.3.3인데, 강의에서는 13 이후부터 지원되는 App Router 기반으로 학습할 수 있도록 구성되어 있었다. App Router 기반으로 구현해보고싶었던 나로서는 좋은 기회라 생각된다. TypeScript, ESLint, Prettier 설정을 통해 프로젝트 내의 코드 규칙들을 일관성있게 가져갈 수 있도록 구성하였다.그 후, TailwindCSS v4와 shadcn/ui를 통해 스타일링에 도움을 줄 수 있는 요소들까지 구성해보았다.모든 구성을 마친 후, App Router 기반 페이지 라우트와 동적 라우트에 대해 학습했다.블로그 메인 UI와 상세 목차 UI도 구성해보았다. 이 과정에서 Notion과의 연동까지 진행했다.이번주에 익힌 것들을 확인해보니, 굉장히 흥미로운 주제들을 아주 밀도있게 학습했다. 솔직히 버겁긴하다. 생각했던 것보다 많이 어렵다는것을 느낀다. 그렇지만 최대한 긍정적으로 생각해보려 한다. 어렵다는건 돌려말하면, 가능성이 있다는 것이다.단지 익숙하지 않아서 발생하는 하나의 과정일 뿐이다. 쉽다면 누구나 다 뛰어들었을 것이다. 어쩌면 어려운 것은 당연한 것이다.어렵기 때문에 희소가치가 있는 것이고, 그것을 이겨내야만 비로소 원하는 목표에 도달할 수 있을거라 생각한다. 이번 주 학습을 통해 느낀 점AI Assistant -> 훌륭한 도구거칠게 보자면, 도구일 뿐이지 그것이 메인이 될수는 없다.AI가 구현해주는 것에 전적으로 의존해서는 안된다. 오답을 정답처럼 꾸며내는 행위도 적지않게 하므로, 공신력있는 문서를 통해 반드시 교차검증을 진행해야 한다. Next.js 프로젝트 구성shadcn/ui에 대한 이해