728x90
React 홈페이지에서 프로젝트 시작하기를 따라했는데
풀스텍 React 프레임워크 Next.js를 권장하는것 같아서 프로젝트를 생성해 보겠습니다.
터미널에서 명령어로 설치하기
npx creat-next-app@latest
설치 과정중 다음과 같은 선택사항이 뜨는데 여기서
TypeScript, EsLint는 허용하여 설치 했습니다.
✔ What is your project named? … jest-next
✔ 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
Creating a new Next.js app in /Users/chae/IdeaProjects/jest-next.
이 방식은 템플릿을 사용해서 설치하는 방법이고
다음과 같은 dependencies, devDependencies 가 설치되었습니다.
package.json 파일을 열어 확인합니다.
//package.json
{
"name": "jest-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.7"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.7"
}
}
프로젝트 실행하기
ReadMe.md 파일을 참고하여 프로젝트를 실행해 봅니다.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
http://localhost:3000 를 접속하여 실행된걸 확인합니다.
서버 끄기
이때에 'Control + C'키를 눌러 종료합니다.
그냥 끄게되면 서버가 돌게되어 불필요한 자원이 낭비될 수 있습니다.
또 서버가 켜져있게 되면 다시 실행시 오류가 날 수 있으니 꼭 종료하고 닫아주세요!
> jest-next git:(main) ✗ npm run dev
> jest-next@0.1.0 dev
> next dev
▲ Next.js 14.2.7
- Local: http://localhost:3000
✓ Starting...
✓ Ready in 2.3s
(node:795) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
○ Compiling / ...
✓ Compiled / in 1795ms (546 modules)
GET / 200 in 1909ms
✓ Compiled /favicon.ico in 69ms (305 modules)
GET /favicon.ico 200 in 119ms
기본 구성만 해보았고 다음 글부터 jest 설정과 기본 예제를 작성해보겠습니다.
728x90