Chapter01. 리엑트 프로젝트 만들기

<< 학습 목표 >>

1. 프로젝트에 리엑트를 설치할 수 있다.

2. 리엑트 프로젝트를 생성할 수 있다.

3. 리엑트 프로젝트를 실행시킬 수 있다.

---

프로젝트를 생성하고 프로젝트에 리엑트를 설치할 수 있는 준비가 끝났음

프로젝트를 생성하고 프로젝트에 리엑트를 설치하자

 

전 글에서 언급했지만 리엑트는 프로젝트 마다 설치하는 것

그리고 리엑트는 npm 으로 설치함

 

npm으로 리엑트를 설치할 프로젝트를 지정하면 프로젝트가 생성되고 해당 프로젝트에 리엑트가 설치됨

괜히 말로 들으면 복잡하니 직접 실습해보자

 

우선 여러분의 컴퓨터 바탕화면 또는 어딘가에 리엑트 학습을 위한 폴더를 생성하자

그 후 vs code 내 상단 [ 파일 ] (1) -> [ 폴더 열기 ] (2) 후 해당 폴더를 선택하자

이제 리엑트 프로젝트를 생성하면 해당 폴더 안에 생성될 것

---

리엑트 프로젝트를 생성하기 위해 터미널을 열자

vs code 상단 [ 터미널 ] (1) -> [ 새 터미널 ] (2)

 

vs code 하단을 보면 [ 터미널 ] 콘솔(1)이 열렸을 것

터미널에 표시되는 경로를 주의 깊게 보자

터미널에 표시 되는 경로가 위에서 만든 폴더의 경로가 아니라면 위에서 폴더 선택이 되지 않은 것이니 다시 위 내용을 보고 폴더 선택을 하고 터미널 콘솔을 열여야함

 

터미널 콘솔에 [ npx create-react-app (프로젝트명) ] 명령을 입력하면 리엑트 프로젝트가 만들어짐

npx create-react-app first-project 명령을 입력해 리엑트 프로젝트를 생성하자

리엑트 프로젝트가 생성되는데 시간이 다소 소요되는데 그 이유는 해당 프로젝트에 리엑트를 설치하기 때문

 

! 여기서 알 수 있는 점 !

프로젝트를 생성하고 프로젝트에 리엑트를 설치한다고했는데 간단하게 위 명령을 입력해 프로젝트를 생성하고 프로젝트에 리엑트를 설치한 것

 

! 여기서 주의할 점 !

리엑트 프로젝트명에는 가급적 대문자가 들어가지 않는 것이 좋음

프로젝트 이름을 다른 이름으로 만든다면 대문자를 빼고 소문자로만 만들자

 

리엑트 프로젝트가 설치됬다면 아래와 같은 메세지가 보일 것

---

리엑트 프로젝트를 실행시켜보자

여기서 개발 경험이 있는 분들은 "프로젝트만 만들었지 그 안에 뭘 추가한건 아닌데?" 라고 생각할 수 있음

리엑트 프로젝트를 생성하면 샘플 페이지가 들어있기 때문에 프로젝트를 실행시키면 샘플 페이지가 보임

 

리엑트 프로젝트를 실행시키는 방법은 이미 알고 있음

리엑트 프로젝트를 생성하고 나온 메세지 중 이 메세지(1)가 리엑트 프로젝트를 실행시키는 메세지임

 

터미널 창에 먼저 cd first-project 입력 후 엔터

그 다음 npm start 입력 후 엔터를 쳐보자

 

잠시 기다리면 웹 페이지가 열리며 다음과 같은 화면이 보일 것

---

여기까지 리엑트 프로젝트를 생성하고 리엑트 프로젝트를 실행시켰음

 

리엑트 프로젝트를 생성하는 명령과 리엑트 프로젝트를 실행시키는 명령을 잘 기억해두자