[웹 개발] 리액트 개발환경 세팅 및 Next.js 프로젝트 생성[Next.js 14]

나는 맥북을 사용 중이라 MacOS 기준으로 작성하겠다. 윈도우에 개발환경을 세팅하는 방법도 크게 다르진 않음.

 

1. node.js 설치

아래의 링크를 클릭한 후, 왼쪽의 LTS 버전을 눌러 다운로드 및 설치를 진행한다.

Node.js

 

2. terminal 실행하여 npm 설치 확인 및 next.js 설치

• npm 설치 확인 (node.js 설치 패키지 안에 함께 내포됨)

npm -v

• next.js 설치

npm install -g create-next-app
// 에러 발생 시 아래의 코드처럼 앞에 sudo를 붙여 재실행
// sudo npm install -g create-next-app

// 설치 완료 후 아래의 명령어를 통해 설치 확인
create-next-app --version

 

3. next.js 프로젝트 생성

• 프로젝트 폴더를 만들고 싶은 경로로 이동하여 아래의 명령어를 입력
  • cd 파일경로 이용
    • 해당 폴더를 파인더로 드래그하여 경로 입력 가능
  • 파인더에서 터미널 바로 여는 단축키 이용(개인이 설정해야 함)
    • 설정 방법은 이 글 참조

npx create-next-app 프로젝트명(e.g. my-app)

 

• 위 코드를 실행하면 아래와 같은 사항을 물어보는데, 원하는 설정을 선택하면 됨
  • Typescript: javaScript + 강화된 Type
  • ESLint: 정적 코드 분석 툴
  • Tailwind CSS: utility-first CSS 프레임워크

What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias (@/*)?  No / Yes

 

나는 그냥 추천해주는대로 진행했고, 폴더 관리를 깔끔하게 하기 위해 src/ directory 설정도 켜주었다.

제일 헷갈리는 건 App Router을 쓸 건지 묻는 옵션이었는데, App Router을 추천하길래 그냥 썼다. 여기서 No를 선택하면 자동으로 Pages Router을 사용하게 된다.

 

참고로 App Router은 NextJS 13 버전 이후에 도입된 기능으로, 이전 방식과 많이 달라보였다. 실제로 기존의 pages router은 pages 폴더에 index.tsx을 추적하고, 새로운 app router은 app 폴더 내의 page.tsx 파일을 추적하여 routing을 수행한다.

사실 아직까지 차이를 명확하게 설명할 수는 없지만, 설치 당시 검색을 해보니 pages -> app router로 migration을 진행하는 글이 꽤 보였고 굳이 이전 버전으로 개발할 필요를 못 느껴서 App Router을 사용하기로 했다.

다만 pages router에 비해 도입된 지 얼마 안 된 기능이라 문제가 생겼을 때 해결할 수 있는 자료가 많지 않은 게 복병이긴 했다.

내가 개척해나가면 되니까 오히려 좋나? 어쨌든 아래의 공식 문서를 많이 애용할 예정...

(공식 깃헙도 아직 app router 적용이 완벽히 안 되어 있다는 사실...은 비밀...)

Docs | Next.js

 

• 암튼 아래와 같이 프로젝트 폴더가 생성되는 것을 확인할 수 있음

public: create-next-app으로 개발할 Next.js 프로젝트의 Static 파일들(이미지 파일 등)이 저장된 폴더
(src/)app: Next.js 프로젝트에서 화면에 표시될 페이지들을 저장하는 폴더
(src/)app/page.tsx: root 페이지(/)에 해당하는 파일
(src/)app/layout.tsx: root 페이지 및 그 하위의 페이지에 레이아웃 등을 설정할 때 사용
(src/)styles: 스타일 파일(css)을 저장하는데 사용하는 폴더
(src/)styles/globals.css: 전체 페이지에 적용되는 스타일 파일
.eslintrc.json: ESLint 설정에 관한 파일
next.config.mjs: Next.js 프로젝트 설정에 관한 파일
package.json: 개발에 필요한 라이브러리를 관리하는 파일

 

4. 프로젝트 실행

• 생성된 프로젝트 폴더를 WebStorm에서 열기
  • VSCode도 물론 가능하다. 일반적으로는 VSCode + 관련 플러그인을 사용한다.
  • JetBrains가 만든 JavaScript 및 TypeScript IDE로, 유니티 개발할 때 Rider을 잘 쓴 기억이 있어 사용하게 됐다.
  • 유료 프로그램이지만 나는 아직 학생이라 Educational License(무료)로 사용 중이다.

• 좌측하단의 Terminal 탭을 눌러 터미널 열기
• 아래의 명령어를 입력한 후 브라우저로 http://localhost:3000에 접속
  • 명령어가 제대로 실행이 된 경우 샘플 페이지를 확인할 수 있음

npm run dev

• 추가로, 사용할 수 있는 명령어는 아래와 같음
  • dev: Next.js 프로젝트를 개발 모드(development mode)로 실행
  • build: Next.js 프로젝트를 production mode로 빌드
  • start: Next.js 프로젝트를 productoin mode로 실행
  • lint: Next.js에 기본 설정된 ESLint 설정을 사용하여 ESLint를 실행

 

⚠️ 이슈 발생 시 해결 방법

• 설치 시 발생하는 에러
  •  EACCES: permission denied, mkdir ...
    • cmd에 sudo chown -R $(whoami) ~/.npm 입력
      • 현재 사용자에게 ~/.npm 폴더의 소유권을 부여하겠다는 뜻
      • 패키지 설치 당시에 sudo 로 설치하면 mkdir touch 같이 CLI 명령어가 명령어를 실행한 유저의 소유자로 기본 지정되기 때문에 발생하는 문제임

• run dev 시 발생하는 에러 / 경고
  • One of your dependencies, babel-preset-react-app ...

 

+ 프로젝트 폴더 구조 설정

다른 포스팅으로 정리해두었으니 참고 바랍니당

[Next.js 14] 프로젝트 폴더 구조 구성 및 git repository 연결