[Portfolio] Next.js 프로젝트 만들기 (with TypeScript, TailwindCSS)

yujin·2025년 10월 31일

portfolio project

프로젝트

목록 보기

8/26

💁‍♀️ Next.js와 TailwindCSS는?

Next.js는 React 프레임워크

Tailwind CSS는 CSS 프레임워크

✅ 선택한 이유

저는 이 세 가지 기술 스택이 현대 웹 애플리케이션이 갖춰야 할 성능, 안정성, 그리고 개발 속도라는 세 마리 토끼를 모두 잡을 수 있는 가장 효율적인 조합이라고 생각해 선택했습니다.

먼저 Next.js는 '성능'과 '사용자 경험'을 위해 선택했습니다.
App 라우터 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 통해 사용자에게 매우 빠른 초기 로딩 속도를 제공할 수 있습니다. 이는 포트폴리오를 방문하는 사람들에게 좋은 첫인상을 주고, 검색 엔진 최적화(SEO)에도 유리합니다.

둘째로, TypeScript는 '안정성'과 '유지보수성'을 위해 선택했습니다.
JavaScript만 사용했을 때는 런타임에 가서야 발견될 수 있는 타입 관련 오류들을, TypeScript는 개발 단계에서 미리 잡아주기 때문에 코드의 안정성이 크게 향상되고, 컴포넌트의 props 타입을 명확히 정의함으로써 나중에 코드를 수정하거나 기능을 추가할 때도 훨씬 수월할 것이라 생각해 선택했습니다.

마지막으로, Tailwind CSS는 '개발 속도'와 '일관성'을 위해 선택했습니다.
유틸리티 우선 접근 방식 덕분에, CSS 파일을 따로 열지 않고도 HTML 내에서 바로 반응형 디자인을 완성할 수 있어 개발 속도가 매우 빨르다는 장점이 있습니다. 또한, 미리 정의된 디자인 토큰을 사용하기 때문에 포트폴리오 전체의 디자인 일관성을 지키는 데 큰 도움이 될 것 같아 선택했습니다.

결론적으로, Next.js로 성능 좋은 뼈대를 만들고, 그 위에서 TypeScript로 안정적인 코드를 작성하며, Tailwind CSS로 빠르고 일관되게 디자인을 입히는 이 조합이, 완성도 높은 프로덕트를 만드는 가장 현대적이고 강력한 방법이라고 판단했습니다.

⭐ Next.js 프로젝트 시작

- Next.js 프로젝트 생성하는 명령어

npx create-next-app@latest

- TypeScript를 포함한 Next.js 프로젝트 생성하는 명령어

npx create-next-app@latest --typescript

- TypeScript와 TailwindCSS를 포함한 Next.js 프로젝트 생성하는 명령어

npx create-next-app@latest --typescript --tailwind

프로젝트 구성 설정

✔ Which linter would you like to use? › ESLint
✔ Would you like to use React Compiler? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack? (recommended) … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

어떤 린터(Linter)를 사용하시겠습니까? ESLint
: 린터(Linter)는 코드를 분석해서 버그가 될 수 있는 부분이나, 코딩 스타일이 통일되지 않은 부분을 찾아주는 '코드 문법/스타일 검사기'입니다. ESLint는 React/Next.js 환경의 표준이므로 ESLint를 사용했습니다.
React 컴파일러를 사용하시겠습니까? No
: Next.js의 문서를 보면 아직 실험적인 기능으로 나옵니다. 포트폴리오 같은 안정적인 프로젝트를 만들 때는 검증된 기본 기능으로 시작하는 것이 좋을 것이라 판단되어 No를 선택했습니다.
코드를 src/ 디렉토리 안에 만드시겠습니까? Yes
: src 디렉토리를 사용하면 프로젝트의 소스 코드와, package.json 같은 설정 파일들이 명확하게 분리되어 관리가 편해지기 때문에 Yes를 선택했습니다.
App 라우터를 사용하시겠습니까? Yes
- No: 구(舊) 방식인 'Pages Router'를 사용합니다.
- Yes: 새롭고 강력한 'App Router' 방식을 사용합니다.
: 새로운 방식이지만 안정화된 방식인 App Router 방식을 선택했습니다.
Turbopack을 사용하시겠습니까? Yes
: Turbopack은 npm run dev로 개발 서버를 실행할 때, 코드를 빌드하는 도구입니다.
Turbopack은 기존(Webpack)보다 훨씬 빠르고 효율적인 차세대 개발 서버 도구입니다.
코드를 수정하고 저장했을 때 화면에 반영되는 속도가 매우 빨라서 쾌적하게 개발할 수 있다고 하여 사용해보고 싶어 Yes를 선택했습니다.
경로 별칭을 수정하시겠습니까? No
: 기본값인 @/*가 가장 표준적이고 널리 쓰이는 방식이기 때문에 No를 선택했습니다.