[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 AI

VS 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 작업을 줄이고 비즈니스 로직에 집중할 수 있어 효과적이라는 점이 인상 깊었습니다.