[인프런 워밍업 스터디 클럽 4기_FE] 1주차 발자국 회고
[웹 렌더링 방식 비교]
SPA: 클라이언트 사이드 렌더링, SEO 적합도 낮음, 초기 속도 느림, 실시간성 높음
CSR: 클라이언트 사이드 렌더링, SEO 적합도 낮음, 초기 속도 느림, 실시간성 높음
SSR: 서버 사이드 렌더링, SEO 적합도 높음, 초기 속도 빠름, 실시간성 중간
SSG: 빌드 타임 렌더링, SEO 적합도 높음, 초기 속도 매우 빠름, 실시간성 없음
ISR: 빌드+백그라운드 사이드 렌더링, SEO 적합도 높음, 초기 속도 매우 빠름, 실시간성 중간
[Cursor AI 공식문서 탐색]
Tab (AI 자동완성 및 다중 라인 편집)
Chat (코드 기반 대화형 AI 어시스턴트)
Inline Edit (인라인 코드 수정)
Context (코드베이스 인식 및 커스터마이징)
[Next.js 프로젝트 셋팅 가이드 ver.2025]
1. Next.js 프로젝트 생성 및 기본 설정
create-next-app을 통해 프로젝트를 시작.
기본 생성 명령어
npx create-next-app@latest my-app
2. TypeScript 통합 방법
프로젝트 생성 시 --typescript 옵션을 선택.
수동 통합 방법
npm install --save-dev typescript @types/react @types/node
이후 프로젝트 루트에 .ts, .tsx 파일을 추가하면 Next.js가 자동으로 tsconfig.json을 생성.
3. ESLint & Prettier 설정
ESLint (Next.js 내장)
--eslint 플래그로 활성화하면 자동으로 .eslintrc.json이 설정됨.
.eslintrc.json에 Prettier 연동
{
"extends": [
"next",
"next/core-web-vitals",
"plugin:prettier/recommended"
]
}
4. Tailwind CSS 적용
자동 설치 (추천)
create-next-app 생성 시 --tailwind 옵션을 추가하면 자동 설정.
globals.css에 Tailwind 디렉티브 추가
@tailwind base;
@tailwind components;
@tailwind utilities;
5. shadcn/ui 컴포넌트 라이브러리
shadcn/ui는 Tailwind 기반의 UI 컴포넌트 라이브러리.
설치 방법
npx shadcn-ui@latest init
설치 시 선택 사항:
App Router 사용 여부
Tailwind config 경로
컴포넌트 디렉토리 위치 (
components/ui)사용하려는 theme (
default,zinc,rose, 등)
[회고]
현재 회사에서 진행 중인 업무와 공통되는 부분이 많다. 기존 업무를 할 때는는 그냥 하던대로 진행하는 방식이었으나 학습을 진행하면서 왜 이 설정이 필요한지, 초기 세팅은 어떻게 해야하는지 짚고 넘어갈 수 있는 기회가 되었다. 무엇보다 Cursor에 대해서 관심이 있었는데 인강 수강하면서 Cursor에 대해 학습할 수 있어서 좋았다.
답변 0