ReactJS - #3 기초 및 실습

#3 기초 및 실습

 

node.js 설치

node.js 설치 후 terminal에서 node -v, npm -v 로 잘 설치 되었으면 위의 화면과 같이 설치된 버전이 출력됨

 

npm은 node.js를 설치하면 자동으로 설치됨

 

 

React를 빌드하는 방법은

 

순수 webpack이나 babel 를 설정해서 직접 빌드하는 방법, create-react-app을 통해 빌드하는 방법, next.js를 통해

 

빌드하는 방법이 있는데 여기서는 next.js를 이용해서 빌드

 

페이지 명명으로 라우팅이 쉽게 가능하고 seo라는게 원활하게 가능하고, SSR이 보다 쉽게 지원해주기 때문에 여기서는

 

next.js를 사용

 

 

next js검색 후

 

여기서 관련된 document들을 확인할 수 있는데

우리는 npm으로 설치할거니까

 

jaeho@jaehoiui-MacBookPro ~ % npm intall -g create-next-appx

명령어 실행

 

*  -g 는 전역으로 설치하겠다는 것

 

실행하면

 

권한이 거부되었다는 error가 발생하는데 이는 /user/local/lib/node_modules가 관리자 권한으로 설정되어 있어서 그렇다

jaeho@jaehoiui-MacBookPro ~ % sudo npm install -g create-next-app

sudo 를 붙여서 다시 실행하고 password를 입력하면 정상적으로 실행되는 것을 확인할 수 있다.

 

 

 

폴더 하나를 만들고 이제 폴더에서 설정

 

vsCode에 만든 폴더를 drag & drop 하면 해당 폴더가 open

 

REACT라는 폴더명이 보이고 Terminal -> New Terminal창을 열면 하단에 터미널 창이 나오는데

 

그 터미널에 

jaeho@jaehoiui-MacBookPro react % npm create next-app

그럼 이 폴더 내부에 새로운 폴더가 생성되고 terminal에 하단의 코드가 출력됨

 

 

✅ 정리

1. node.js 설치 -> 버전확인 해서 설치여부 다시 확인

 

2. 터미널에서  npm install -g create-next-app 실행

 

    * 관리자 권한이 필요한 경우 sudo 사용

 

3. 폴더 생성

 

4. 해당 폴더 vsCode에서 열고 해당 터미널에서 npm create next-app

 

  * 폴더 내부의 terminal아니고 그냥 terminal열어서 할거면 cd로 해당 폴더로

 

    들어가서 npm create next-app을 실행해줘야 함

 

 

 

이렇게 다하고

cd my-app
npm run dev

실행하면 하단의 화면이 출력되고 해당 url로 접속해보면

 

 

유튜브 양재동 코드랩

www.youtube.com/watch?v=yj5CTSX-iD0&t=161s