리액트를 시작하기전에는 IDE가 필요한데 보편적으로 많이 사용하는 비주얼 스튜디오를 통해 진행을 해보려한다.
공부를 진행하기 앞서 필수적으로 필요한 익스텐션 2가지만 설치하자.
1. 기본 플러그인 설정
- Prettier : 코드 서식에 도움이 되는 확장 플러그인
- Material icon: 파일아이콘을 바꿔주는 확장 플러그인
2. 리액트 프로젝트 만들기
Create React App을 사용하기위해서 아래와 같은 준비가 필요하다.
- 최신버전의 NodeJS 설치 (https://nodejs.org/ko/) -명령어 사용을 위한 준비
- 터미널안에서 경로를 설정한후 명령어 입력하기
[경로] $ npx create-react-app [생성될 프로젝트명]
ex) Desktop $ npx create-react-app react-complete-guide다음 명령어를 실행하면 각종 설치가 완료되며, 실행완료가 되었다는 문구가 나타나게된다.
이후 위에서 설정한 프로젝트로 들어간후, 개발 서버 구동명령을 진행한다.
cd [생성한 프로젝트폴더]
[생성한 프로젝트폴더]$ npm-start
ex) cd react-complete-guide
react-complete-guide$ npm-start이 후엔 다음과같은 화면이 뜨게되면 정상적으로 프로젝트생성이 완료되었다고 할수있다.
TIP) 만약 IDE 외부에 존재하는 터미널에서 작업을 실행해서 프로젝트 파일을 열기가 힘들다면 VS에서
File-open- 생성했던 프로젝트 폴더를 선택하면된다.
정상적으로 프로젝트 생성이 완료되었다면 다음과 같은 프로젝트 구조를 갖고있으면 된다.
package.json: 프로젝트에서 어떤 패키지들을 사용하고 있는지 보여준다.
src: 작업을 하게될 코드들을 갖고있다.
3. 리액트 서버구동 종료
구동중인 서버의 종료는 간단하다. 구동중인 터미널로 들어가 Ctrl+c를 누르게되면 서버는 종료된다.
4. 업데이트 서버 재 구동
여기서 다시서버를 구동하는 가장 좋은방법은 메뉴 - 터미널 - 새 터미널 열기
여기서 두가지 명령어를 실행하면된다.
첫 번째는, npm install이다. 이는 package.json 파일을 살펴보고, 프로젝트에 필요한 모든 패키지와 개발에 필요한것들을 다운로드하여 설치하게된다.
react-complete-guide$ npm install그럼 아래와같이 모든 종속요소를 갖고있는 node_module 폴더가 생성된것을 확인할수있다. 이 폴더는 따로 설정하거나 조작을 하면안된다.
두 번째는, 마찬가지로 npm start이다. 이 명령어를 통해 언제든 다시 시작할수있다.
react-complete-guide$ npm start다음과 같이 설정을 진행하면 리액트코드를 작성할수있는 최소한의 환경이 마련되게된다.
