Binary Journey

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

빛과 소금 John Ahn 선생님의 online shop clone 강의를 다 들은 후 혼자서 온라인 쇼핑몰까진 아니지만 간단한 페이지를 만들어 보기로 했다.

(작업환경은 Windows 10 와 VSCode, React 17, ES6 기준)

우선 작업할 react 프로젝트를 생성해준다.

Camel Case 방식으로 입력 시 오류가 나기 때문에 '-'를 사용해야 한다.

* npx 는 오타가 아니다.

생성 이후의 모습

생성된 프로젝트를 한 번 실행시켜볼까

vscode extension 중 react extension pack 이나 react native full pack 이 설치된 이후라면

npm 관련 플러그인들이 이미 설치되어 있을 것이다.

이 플러그인은 리액트 프로젝트의 package.json 에서 scripts 부분을 읽어 보여준다.

npm scripts explorer 에서 package.json 아래 start 항목 부분에 마우스를 올려보면

run (재생버튼)과 debug(버그 버튼)가 나타난다.

run은 VSCode terminal에서 이뤄지고 debug는 debug console 창에 나타난다.

나는 일단 run 해보겠다.

종료를 원할 시 terminal 부분 오른쪽 상단 휴지통 버튼이 Kill terminal 역할을 한다.

리액트 앱이 실행될 때는 보통 포트번호 3000으로 실행되는데 

package.json 에서 "set PORT=포트번호"를 추가하여 하드코딩으로 바꿔줄 수도 있다.

포트번호를 변경해주고 같은 방법으로 npm run 한 모습

웹을 보면 포트 번호 5000 으로 실행된 것을 볼 수 있다.

하지만 포트 번호가 이미 사용 중일 때는 VSCode 에서 다른 포트 번호 사용을 먼저 제안해주기 때문에

꼭 필요한 상황이 아니면 set PORT를 해줄 필요는 없다.

+) 리액트 앱을 새로 생성하는 것이 아니라 깃헙과 같이 외부에서 받은 소스를 실행시키고 싶을 때는 

npm script explorer에서 해당 프로젝트의 package.json을 우클릭

위와 같이 Run Install이 뜨는데 이는  npm install 과 같은 역할을 한다.

그래서 package.json에 있는 모든 라이브러리들을 설치해준다.

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial