[React] NextJS 새로운 프로젝트 생성하기

 

 

NextJS 프로젝트 생성하기

 

 

1. VS code 실행

로컬환경에서 NextJS를 사용하는 환경을 구축해 보려고 합니다.

1) 프로젝트를 넣을 폴더에가서 VS code 프로그램에서 폴더를 열어줍니다.

2) 화면 상단의 Terminal - New Terminal을 클릭하여 터미널을 하나 생성해 줍니다.

 

 

 

---

2. nextJS 명령어로 설치

https://nextjs.org/

NextJS사이트에 접속하면 Nextjs생성 가능한 명령어가 표시됩니다.

 

npx create-next-app@latest

로컬시스템에서 NextJS 프로젝트를 설정하려면 위 명령어를 터미널에서 실행하면됩니다.

 

 

1) nexJS 설치 명령어 입력 : npx create-next-app@latest

2) 파일 이름 입력 : next-first-app

3) 설치 방법 선택 : 기본 권장 defaults에서 yes를 선택해서 해도되고, no선택 후 개별 설치선택하여도 됩니다.

 

 

cd 프로젝트 폴더 이름

4) nextJS 설치한 폴더로 이동

 

npm run dev

5) 개발서버 가동

 

6) 터미널에 표시된 주소를 웹브라우저에 입력하면 서버가 가동중인것을 확인할 수 있습니다.

서버를 닫는 방법은 ctrl + c 를 눌러주면 닫힙니다.

 

 

---

 

3. github 연결하기(생략가능)

github-Repositories-New 버튼 클릭하여 프로젝트 올릴 Repository 하나 생성해 줍니다.

이후 VS code 터미널에 github에 나와있는데로 git init하여 github에 프로젝트 파일을 연결해줍니다.

 

완료하고 나면 github에 코드가 올라간걸 확인할 수 있습니다.

 

 

---

 

 

React.js란?

React는 인터랙티브(Interactive) UI 개발을 도와주는 javascript 라이브러리이다.

IT 및 기술 분야에서 인터랙티브(Interactive, 상호작용)는 사용자와 시스템(기기, 소프트웨어, 콘텐츠)이 서로 데이터를 주고받으며 
실시간으로 반응하는 상태를 의미합니다.

 

 

React의 장점

React를 이용하면 선언적 방식으로 코드를 작성할 수 있기 때문에 코드가 짧아지고, 실수가 줄고, 유지보수가 쉽다.

 

리액트는 ‘화면을 어떻게 바꾸는지’를 하나하나 코딩하지 않고,

‘상태가 이러면 화면은 이렇게 보여야 한다’라는 결과만 선언하는 방식이다.