[포트폴리오] 프로젝트 준비 및 생성

Next.js와 TypeScript를 사용한 포트폴리오 사이트 구현

팀 프로젝트에서 사용한 경험이 있으며, 트렌디한 프레임워크와 언어이기 때문에 사용하기로 결정했습니다.

1. 원하는 디렉토리로 이동 후 터미널에 아래 명령어를 입력합니다.

npx create-next-app@latest --ts portfolio(프로젝트최상위 폴더명)

turbopack이란?

• Next.js 13버전부터 도입된 Turbopack은 기존 Webpack보다 더 빠른 빌드 속도를 자랑합니다. 인메모리 캐시 시스템을 도입하여 변경된 부분만 빌드하여 개발 속도를 대폭 향상시킵니다. 하지만 현재는 Webpack에 비해 플러그인 지원이 미비한 상태여서, 플러그인 사용 시 일부 제한이 있을 수 있습니다.

App Router란?

• Next.js 13버전부터 도입된 App Router는 기존의 Page Router 방식에서 폴더 기반 라우팅으로 전환되었습니다. 이를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 명확하게 구분하고, 레이아웃 관리와 에러 처리를 더 효율적으로 할 수 있습니다. 또한, 여러 페이지에서 공통 레이아웃을 단일 파일에서 관리할 수 있어 개발 효율성을 높이는 데 도움이 됩니다.

2. Editor 혹은 IDE에서 해당 Project를 열어줍니다.

npm run dev

• 해당 명령어를 입력하여 서버를 실행한 후, http://localhost:3000 로 접속이 가능합니다.

3. Github Repo를 생성하고 연결해줍니다.

echo "# 2025-Portfolio" >> README.md                       
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/사용자ID/프로젝트이름.git
git push -u origin main

4. 이번 프로젝트에선 Material-UI를 사용합니다.

• 과거에 사용했던 경험이 있고, CSS 지식이 부족한 저에게는 쉽고 빠르게 사용할 수 있는 UI 라이브러리입니다. TailwindCSS는 나중에 경험해볼 계획입니다. (TailwindCSS는 더 유연한 디자인 시스템과 커스터마이징을 제공하여 사용해볼 예정입니다.)

npm install @mui/material @emotion/react @emotion/styled
// yarn 을 사용할 경우
yarn add @mui/material @emotion/react @emotion/styled

5. 초기 생성 파일 삭제

6. 프리티어 설정 추가 및 .prettierrc파일 생성

npm i --save-dev prettier

// .prettierrc
{
  "printWidth": 120,
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true
}

• semi: false로 설정하는 것이 Next.js 공식 문서에서는 권장되지만, 개인적인 스타일에 맞춰 semi: true로 설정했습니다.