Next JS 선행학습

오늘 했던 것

• 공식문서 보고 next js 학습해보기

오늘 문제였던 것

• 시작부터 문제였다.

next js 시작

• 터미널에 npx create-next-app@latest 프로젝트이름 입력

  npx create-next-app@latest tutorial

next js run!!

• 터미널에 npm run dev 입력

  npm run dev

npm run dev 절망편

• 에러가 우수수수 쏟아졌다.
  아니 무슨 시작부터 우리 애 기를 죽여요..

referenceError: Request is not defined
    at Object.<anonymous> (C:\Users\Kyun\Documents\BootCampPre\next\dashboard\node_modules\next\dist\server\web\spec-extension\request.js:28:27)
    at Module._compile (node:internal/modul.......
    ......생략

에러 원인

• node 버젼이 낮은 것
• node 낮은 버전에서는 Request라는 것이 undefined
  높은 버전에서는 Request라는 것이 function 이다.

node version update 방법

1. 개발자스럽지 않은 느낌의 방법

1. node js 공식 홈페이지에 가서 lts 버전을 받아 설치한다.

node js 공식 홈페이지

2. 개발자스러운 느낌의 방법

2-1. NVM을 사용

• NVM gitHub 이곳에 들어가서
  설치 파일을 다운로드 한다! (운영체제에 맞게 다운로드 받자!)
• 다운 받은 파일을 압축 해제 하여 nvm-setup.exe 실행
  (설치 중 이미 node 몇 버전이 있다~~ 등의 안내창이 나오는데 예를 클릭하면 된다)
• 터미널을 열어 nvm version 을 입력하여 설치되었는지 확인

nvm 사용법

• 터미널에 nvm lts 입력 후 버전들을 확인
  nvm lts를 입력하면 아래와 같이 리스트가 나온다

  20.9.0
  18.17.1
  *16.20.2 (Currently using 64-bit executable)

• nvm use 입력 후 원하는 버전 입력

  nvm use 20.9.0

• 터미널에 node -v 입력하여 버전 확인

  v20.9.0

npm run dev 정상 작동 확인

• 멋쮠 next js 메인 화면
  

느낀점

시작부터 절망편이라니
기세가 꺾일뻔했다.
역시 공식문서는 제일 유익하지만,
제일 어렵구나 하는 생각이 들었다.

암튼 이제 next js의 튜토리얼 16개를 시작해본다!