[3주차 발자국] 최종 회고

🔍 학습한 주요 주제서버 액션(Server Actions)use server 지시어를 사용한 서버 컴포넌트 기반 액션 처리 방법 학습Form 기반 서버 액션과 클라이언트 이벤트 핸들러를 연결하여 사용자 요청 처리 실습캐시 전략unstable_cache를 활용한 서버 측 캐싱 전략 이해React Query와의 차이점 비교 및 클라이언트 캐시 전략도 함께 실습데이터 유효성 검증zod를 이용한 서버 액션 데이터 유효성 검증 적용useActionState를 통해 서버 응답 처리 및 상태 관리 방식 이해고급 라우팅병렬 라우트(Parallel Routes), 인터셉팅 라우트(Intercepting Routes)를 통한 유연한 UI 구성기존 페이지 전환 방식과의 차이점을 실습을 통해 체감SEO 및 메타데이터 설정metadata 객체를 활용한 페이지별 SEO 설정동적 메타데이터 처리 방식도 학습라우팅 메커니즘 & 코드 분할App Router가 페이지를 어떻게 구성하는지 내부 동작 방식 학습Prefetching을 통한 사용자 경험 최적화 전략 이해🧠 회고처음엔 use server나 고급 라우팅 개념들이 생소해서 따라가기 벅찼지만, 강사님이 정리해주신 강의자료 덕분에 하나씩 차근차근 익힐 수 있었다. 특히 서버 액션과 클라이언트 액션의 흐름, 그리고 캐시 전략의 차이점은 지금까지 단순하게만 생각했던 데이터 흐름에 대해 깊이 이해할 수 있는 계기가 되었다.이번 주의 가장 큰 수확은 "아, 이제 정말 내가 원하는 구조의 블로그를 만들 수 있겠다"는 확신이 생겼다는 것이다. 실습을 하며 블로그 구조를 직접 구현해보았고, 여기에 배운 내용을 바로 적용하면서 실전 감각도 함께 키울 수 있었다.아직 개념적으로 부족한 부분도 있지만, 공식 문서와 강의자료를 반복해서 보며 익숙해질 계획이다. 이번 스터디를 통해 Next.js에 대한 자신감이 훨씬 많이 생겼고, 이제는 새로운 기술도 두려움보다는 호기심으로 접근할 수 있을 것 같다.

[2주차 발자국]

Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI) 강의를 수강하며 작성한 1주차 발자국입니다. Notion API 연동 & MDX 렌더링Notion API를 활용해 콘텐츠 데이터를 가져오고, 이를 MDX로 렌더링하는 작업을 진행했습니다. 단순한 마크다운 렌더링이 아니라, MDX의 장점을 살려 리액트 컴포넌트를 함께 사용하는 방식으로 구현했습니다. 이 덕분에 정적인 글이 아니라 인터랙션이 가능한 요소들을 함께 구성할 수 있었고, 콘텐츠의 확장성 면에서도 훨씬 유연하다는 점을 느꼈습니다.렌더링 과정에서는 remarkPlugins와 rehypePlugins를 적절히 활용해 Notion 콘텐츠가 웹에서도 자연스럽게 표현되도록 조율했습니다. 마크다운 문법 특성상 발생할 수 있는 스타일의 어색함도 plugins와 components props 설정을 통해 상황에 맞게 커스터마이징하며 해결할 수 있었습니다. 실무에서 기술 블로그나 내부 문서 시스템 등을 구축할 때 응용할 수 있겠다는 가능성도 확인했습니다. Suspense, Loading UI, StreamingReact의 Suspense 개념과 Streaming 렌더링 방식을 함께 학습하며 사용자 경험을 고려한 로딩 처리 방법에 대해 고민해봤습니다. 기존에는 페이지 전체에 로딩 스피너를 띄우는 방식이었다면, 이제는 데이터가 필요한 컴포넌트 단위에서 스켈레톤 UI를 미리 보여주는 방식으로 전환했습니다. 특히, 페이지 전환 없이도 사용자에게 빠른 반응을 제공할 수 있어 실제 사용성 면에서 큰 차이를 느꼈습니다. Notion API Pagination & useInfiniteQueryNotion API의 페이지네이션 구조를 기반으로 React Query의 useInfiniteQuery 훅과 react-intersection-observer를 함께 활용해 무한 스크롤 기능을 구현했습니다. 마지막 요소가 뷰포트에 진입할 때 자동으로 다음 데이터를 불러오는 구조로 만들었고, react-intersection-observer의 사용 편의성과 성능 최적화 측면에서 인상 깊었습니다. 단순히 기능 구현을 넘어서 실제 사용자 흐름에 맞춘 경험 설계에 대해 한 단계 더 고민해볼 수 있는 계기가 되었습니다.

[1주차 발자국] 렌더링 방식, CursorAI, 프로젝트 세팅

Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI) 강의를 수강하며 작성한 1주차 발자국입니다. 1일차: 렌더링 방식 학습Next.js에서 사용되는 CSR, SSR, SSG, ISR, SPA의 개념과 특징을 중심으로 학습을 진행했습니다.CSR: 브라우저가 빈 HTML을 받아와 자바스크립트로 렌더링하는 방식으로, 사용자 경험이 부드럽지만 초기 로딩 시간이 상대적으로 느릴 수 있다는 점을 이해했습니다.SSR: 서버에서 HTML을 미리 생성해 보내주기 때문에 초기 화면이 빠르게 로드되고 SEO에 유리하지만, 서버 부하가 높아질 수 있다는 장단점을 확인했습니다.SSG: 빌드 시점에 정적 파일을 미리 생성해 배포하므로 성능이 뛰어나지만, 실시간 데이터 업데이트가 필요한 페이지에는 적합하지 않다는 부분이 와닿았습니다.ISR: SSG와 비슷하게 정적 파일을 사용하되, 주기적으로 페이지를 새로 생성해 데이터 변화에 대응할 수 있다는 유연함이 흥미로웠습니다.SPA: 한 번 로딩한 뒤 필요한 자원만 동적으로 가져오는 방식으로, 라우팅 전환이 자연스럽지만 SEO 최적화가 어려울 수 있다는 점을 정리했습니다.짧은 시간 동안 다양한 렌더링 전략을 비교하며 “어떤 상황에 어느 방식을 선택해야 할지” 기준을 고민하게 되었고, 특히 SEO, 초기 로딩 속도, 서버 비용 등을 균형 있게 고려해야 함을 깨달았습니다. 2일차 - Cursor AIVS Code 기반 독립 실행형 AI 코드 에디터인 Cursor AI의 설치부터 주요 기능 사용법까지 실습했습니다.설치 및 환경 설정공식 웹사이트에서 Cursor AI를 다운로드하여 설치하고, 기본 에디터 테마 및 폰트 설정을 완료했습니다.Next.js 프로젝트 폴더를 열어 Cursor AI가 정상적으로 동작하도록 경로를 확인했습니다. Cursor AI 주요 기능 실습AI Chat사이드바를 통해 프로젝트 전체 맥락을 유지하면서 질문할 수 있었습니다.예시: “이 컴포넌트에서 useEffect 훅을 도입하려면 어떻게 작성해야 하나요?” 라는 질문을 입력하자, Cursor AI가 해당 파일의 컨텍스트를 파악하여 구체적인 코드 스니펫과 설명을 제시해 주었습니다.덕분에 모르는 API나 라이브러리 사용법을 매번 검색하지 않고도 빠르게 학습할 수 있다는 것을 알았습니다. 인라인 명령 (Inline Command)코드 블록을 직접 선택한 뒤 단축키로 명령어를 입력하여 즉시 변환 및 생성 작업을 수행할 수 있었습니다.예시: JSX 컴포넌트를 선택하고 “Refactor: extract to custom hook” 명령을 입력하면, Cursor AI가 자동으로 hook 분리 코드를 제안해 주었습니다.기존 코드에 주석이나 토큰을 남기지 않아도 즉시 명령을 수행할 수 있어 작업 흐름이 끊기지 않고 편리했습니다. 자동 완성 & 리팩토링 제안Next.js 페이지나 API 라우트 파일을 생성할 때, 기본 템플릿을 자동으로 완성해 주어 getStaticProps, getServerSideProps 등 초기 코드 작성 시간을 크게 단축할 수 있었습니다.JSX 구조 리팩토링: 새로 만든 컴포넌트에 Tailwind CSS 클래스를 적용하거나, 중복된 스타일을 통일해 주는 제안이 제공되었습니다. 반복적인 유틸 함수 구현이나 간단한 레이아웃 작성 시, Cursor AI를 적극 활용하면 업무 효율이 크게 향상될 것 같습니다.다만 프로젝트 전체 맥락을 고려하지 못할 때도 있으므로, 중요한 로직이나 보안 민감 코드 작성 시에는 반드시 직접 검증 후 적용해야겠다는 교훈을 얻었습니다. 3일차 - 프로젝트 세팅Next.js 초기 프로젝트 생성npx create-next-app@15.2.7를 통해 강의와 동일한 버전의 Next.js 프로젝트를 생성했습니다. ESLint · Prettier 설정ESLint 플러그인과 Prettier를 설치하여, VS Code에서 저장할 때 자동으로 코드가 정리되도록 settings.json을 작성했습니다.다양한 플러그인을 설치해 보다 효율적인 작업이 가능하도록 했습니다. Tailwind CSS & Shadcn/ui 적용Tailwind 공식 사이트에 접속하여 최신 TailwindCSS설치 및 Extension설치로 효율적으로 적용이 가능하도록 했습니다.Shadcn/ui 라이브러리를 설치하고, Button 컴포넌트를 import하여 간단히 테스트해 보았습니다. ESLint와 Prettier 설정은 개발 생산성을 높이는 데 필수적이며, 다수의 개발자가 협업할 때 코드 품질을 일정 수준으로 유지하는 데 큰 도움이 된다는 사실을 깨달았습니다. 또한Shadcn/ui처럼 검증된 컴포넌트 라이브러리를 도입하면, 반복적인 UI 작업을 줄이고 비즈니스 로직에 집중할 수 있어 효과적이라는 점이 인상 깊었습니다.