챕터 2: Next.js 프로젝트 생성과 실행

서론

개발 환경이 모두 준비되었으니 이제 실제로 Next.js 프로젝트를 만들어볼 시간입니다. Next.js는 React라는 JavaScript 라이브러리를 기반으로 한 강력한 프레임워크입니다. 프레임워크라는 단어가 생소하실 수 있는데, 이것은 이미 많은 기능이 준비되어 있는 도구 모음이라고 생각하시면 됩니다. 마치 조립식 가구를 구매하면 필요한 부품과 설명서가 모두 들어있는 것처럼, Next.js는 웹사이트를 만드는 데 필요한 모든 것을 제공합니다.

이번 챕터에서는 첫 번째 Next.js 프로젝트를 생성하고, 프로젝트 구조를 이해하며, 개발 서버를 실행하여 브라우저에서 확인하는 과정까지 진행하겠습니다. 이 과정을 통해 여러분은 진짜 웹 개발자가 되는 첫 발을 내딛게 될 것입니다.

본론

작업 폴더 준비하기

프로젝트를 만들기 전에 먼저 작업할 폴더를 준비해야 합니다. 컴퓨터의 적절한 위치에 프로젝트들을 모아둘 폴더를 만드는 것이 좋습니다. 예를 들어, 바탕화면이나 문서 폴더에 'web-projects' 또는 'my-coding'과 같은 이름의 폴더를 만들어보십시오. 이 폴더는 앞으로 여러분이 만들 모든 프로젝트들의 집이 될 것입니다.

VS Code를 실행하고 File 메뉴에서 'Open Folder'를 선택한 다음, 방금 만든 폴더를 선택합니다. 이제 VS Code가 이 폴더를 작업 공간으로 인식하게 됩니다. 왼쪽 사이드바의 Explorer 패널에 폴더 이름이 표시되는 것을 확인할 수 있습니다.

다음으로 VS Code에서 터미널을 엽니다. 상단 메뉴에서 Terminal → New Terminal을 선택하거나, 단축키 Ctrl+` (백틱)을 사용하면 됩니다. 터미널이 열리면 현재 위치가 우리가 선택한 폴더인지 확인합니다. 터미널 프롬프트에 폴더 경로가 표시될 것입니다.

Next.js 프로젝트 생성하기

이제 가장 중요한 순간입니다. 터미널에 다음 명령어를 정확히 입력합니다:

npx create-next-app@latest my-first-website

이 명령어를 자세히 설명드리겠습니다. npx는 npm 패키지를 일시적으로 다운로드하여 실행하는 도구입니다. create-next-app은 Next.js 프로젝트를 자동으로 생성해주는 프로그램이고, @latest는 가장 최신 버전을 사용하겠다는 의미입니다. my-first-website는 우리가 만들 프로젝트의 이름입니다. 원하신다면 다른 이름으로 변경하셔도 됩니다.

Enter 키를 누르면 설치가 시작되고, 곧 여러 가지 질문이 나타납니다. 각 질문의 의미와 초보자에게 권장하는 답변을 자세히 설명드리겠습니다.

첫 번째 질문은 "Would you like to use TypeScript?"입니다. TypeScript는 JavaScript의 확장 버전으로, 타입을 명시할 수 있는 기능이 추가된 언어입니다. 초보자는 JavaScript부터 시작하는 것이 좋으므로 화살표 키로 No를 선택하고 Enter를 누릅니다.

두 번째 질문은 "Would you like to use ESLint?"입니다. ESLint는 코드의 오류를 자동으로 찾아주고 일관된 코딩 스타일을 유지하도록 도와주는 도구입니다. 매우 유용하므로 Yes를 선택합니다.

세 번째 질문은 "Would you like to use Tailwind CSS?"입니다. Tailwind CSS는 유틸리티 클래스를 사용하여 스타일을 쉽게 적용할 수 있게 해주는 CSS 프레임워크입니다. 나중에 자세히 배우겠지만, 초보자도 쉽게 사용할 수 있으므로 Yes를 선택합니다.

네 번째 질문은 "Would you like to use src/ directory?"입니다. 이것은 프로젝트 구조에 관한 질문입니다. 처음에는 단순한 구조가 이해하기 쉬우므로 No를 선택합니다.

다섯 번째 질문은 "Would you like to use App Router?"입니다. App Router는 Next.js 13부터 도입된 새로운 라우팅 시스템입니다. 최신 방식을 배우는 것이 좋으므로 Yes를 선택합니다.

여섯 번째 질문은 "Would you like to use Turbopack for next dev?"입니다. Turbopack은 Next.js를 위한 새로운 번들러로, 개발 서버의 시작 속도와 코드 변경 시 반영 속도를 크게 향상시켜주는 도구입니다. 하지만 아직 실험적 기능이므로 초보자는 안정성을 위해 No를 선택하는 것이 좋습니다.

마지막 질문은 "Would you like to customize the default import alias?"입니다. 이것은 import 경로를 커스터마이징하는 옵션인데, 지금은 필요없으므로 No를 선택합니다.

설치 과정 이해하기

모든 질문에 답하면 Next.js가 프로젝트를 생성하기 시작합니다. 터미널에 여러 메시지가 빠르게 지나가는 것을 볼 수 있습니다. 이것은 필요한 패키지들을 다운로드하고 설치하는 과정입니다. 인터넷 속도에 따라 1-5분 정도 소요될 수 있습니다.

설치가 진행되는 동안 무엇이 일어나고 있는지 설명드리겠습니다. create-next-app은 먼저 프로젝트 폴더를 생성하고, 그 안에 Next.js 애플리케이션의 기본 구조를 만듭니다. 그다음 package.json 파일을 생성하여 프로젝트의 의존성(dependencies)을 정의하고, npm을 통해 필요한 모든 패키지를 다운로드합니다. React, Next.js, 그리고 우리가 선택한 Tailwind CSS 등 수백 개의 패키지가 설치됩니다.

프로젝트 폴더로 이동하기

설치가 완료되면 "Success! Created my-first-website" 메시지가 나타납니다. 이제 생성된 프로젝트 폴더로 이동해야 합니다:

cd my-first-website

cd는 'change directory'의 약자로, 폴더를 이동하는 명령어입니다. 이 명령어를 실행하면 터미널의 현재 위치가 my-first-website 폴더로 변경됩니다.

개발 서버 실행하기

이제 가장 흥미진진한 순간입니다. 다음 명령어를 입력하여 개발 서버를 실행합니다:

npm run dev

이 명령어는 package.json 파일에 정의된 'dev' 스크립트를 실행합니다. 개발 서버가 시작되면 터미널에 다음과 같은 메시지가 나타납니다:

▲ Next.js 14.x.x
- Local:        http://localhost:3000
- Environments: .env.local

✓ Ready in 2.1s

브라우저에서 확인하기

Chrome 브라우저를 열고 주소창에 http://localhost:3000을 입력한 후 Enter를 누릅니다. 짜잔! 여러분의 첫 Next.js 웹사이트가 화면에 나타났습니다. Next.js 로고와 함께 몇 가지 링크와 설명이 보일 것입니다.

localhost는 '내 컴퓨터'를 의미하는 특별한 주소입니다. 3000은 포트 번호로, 컴퓨터에서 실행되는 여러 프로그램을 구분하는 번호입니다. 이 주소는 오직 여러분의 컴퓨터에서만 접속할 수 있는 개발용 서버입니다.

프로젝트 구조 살펴보기

VS Code의 Explorer 패널을 보면 여러 폴더와 파일들이 생성된 것을 확인할 수 있습니다. 각각의 역할을 간단히 설명하겠습니다.

app 폴더는 우리의 웹페이지들이 들어갈 가장 중요한 폴더입니다. 이 안에 있는 page.js 파일이 홈페이지의 내용을 담고 있습니다. layout.js 파일은 모든 페이지에 공통으로 적용되는 레이아웃을 정의합니다.

public 폴더는 이미지, 폰트 등의 정적 파일들을 저장하는 곳입니다. 이 폴더에 있는 파일들은 웹사이트에서 직접 접근할 수 있습니다.

node_modules 폴더는 설치된 모든 패키지들이 저장되는 곳입니다. 이 폴더는 매우 크고 파일이 많으므로 직접 수정하지 않습니다.

package.json 파일은 프로젝트의 설정과 의존성을 관리하는 파일입니다. 프로젝트에 필요한 패키지 목록과 실행 스크립트가 정의되어 있습니다.

첫 번째 수정해보기

이제 우리의 웹사이트를 수정해보겠습니다. app 폴더 안의 page.js 파일을 열어보십시오. 복잡한 코드가 보이지만 걱정하지 마십시오. 모든 내용을 지우고 다음과 같이 간단하게 작성해봅니다:

export default function Home() {
  return (
    <div>
      <h1>안녕하세요! 저의 첫 웹사이트입니다!</h1>
      <p>Next.js로 만든 첫 번째 페이지입니다.</p>
    </div>
  )
}

파일을 저장하고(Ctrl+S 또는 Cmd+S) 브라우저를 확인해보십시오. 놀랍게도 새로고침하지 않아도 자동으로 변경사항이 반영됩니다! 이것을 Hot Reload라고 하며, Next.js의 편리한 기능 중 하나입니다.

결론

축하합니다! 여러분은 방금 첫 Next.js 프로젝트를 성공적으로 생성하고 실행했습니다. 더 나아가 코드를 수정하여 여러분만의 콘텐츠를 화면에 표시하는 데도 성공했습니다. 이것은 정말 대단한 성취입니다.

지금은 프로젝트 구조가 복잡하고 파일들의 역할이 명확하지 않을 수 있습니다. 하지만 걱정하지 마십시오. 다음 챕터들에서 하나씩 자세히 배워나갈 것입니다. 중요한 것은 여러분이 이미 작동하는 웹사이트를 가지고 있다는 사실입니다.

개발 서버를 종료하려면 터미널에서 Ctrl+C를 누르면 됩니다. 다시 시작하려면 npm run dev를 입력하면 됩니다. 이제 여러분은 진정한 웹 개발자의 길에 들어섰습니다. 다음 챕터에서는 HTML의 기본 개념과 가장 중요한 태그인 div에 대해 자세히 알아보겠습니다.

Next.js 학습 자료