[React] React 설치하기 및 개발환경 셋팅하기

💡 실습 포인트!

💜 Node.js 와 VSCode 설치하기

• 구글에 Nodejs 검색해서 필요한 버전으로 설치한다.
• 구글에 Visual Studio Code 검색해서 설치한다.
• 나의 경우 이미 설치가 되어있고 설치방법이 어렵지는 않다고 생각해서 굳이 설치방법까지 작성하지는 않았다.

---

💜 작업용 폴더 생성하기

• 코드를 담을 작업용 폴더를 하나 만들어준다.
• 본인이 기억할 수 있는 위치면 어디든지 가능!

---

💜 VSCode 에디터를 열어서 작업용 폴더 오픈하기

 

• Windows 를 사용하는 경우 Ctrl + K + O 단축키를 이용해서 작업용 폴더를 열어주면 된다.
• 메뉴에서 선택하는 경우 파일(File) - 폴더 열기(Open Folder) 를 선택하면 된다.

 

 

• 폴더를 선택해서 열어주면 위와 같이 VSCode 화면 왼쪽 상단에 작업 폴더명이 뜬다.

---

💜 VSCode 에디터에서 terminal 열기

• 작업 폴더에서 터미널을 열어주어야 하는데 여는 방법은 다음과 같다.
  • 작업용 폴더를 오픈해둔다.
  • 메뉴에서 터미널(Terminal) - 새 터미널(New Terminal) 을 선택하면 된다.

• 참고로 VSCode 에디터 하단에 커서를 가져다댔을 때, 위아래 양방향 화살표로 커서모양이 바뀌면 위쪽으로 드래그해줘도 터미널을 열 수 있다.

• 터미널에 작업용 폴더명이 제대로 뜬다면 React 설치 준비가 끝난 것이다.
• 뜬금없는 오류발생을 막기 위해서는 코드를 작성하거나 npm 명령어를 입력할 때 항상 폴더가 제대로 열려있는지 확인하자!

---

💜 터미널에서 명령어 입력하기

npx create-react-app 프로젝트명

// 터미널에서 npx 뒤에 라이브러리명을 입력한 후
// 한 칸 띄우고 프로젝트명(원하는 대로 작성)을 적어주면 된다.

• npx 는 라이브러리 설치를 도와주는 명령어로, Node.js 가 설치되어있어야 사용이 가능하다.
• create-react-app 은 React 셋팅이 다 된 boilerplate 로 React 프로젝트를 만들기 쉽게 도와주는 라이브러리라고 생각하면 된다.

 

• 나는 강의 내용과 동일하게 프로젝트명을 blog 로 작성해주었다.
• 설치하는 데에는 2~3분 정도의 시간이 걸리는데 인터넷 속도에 따라 차이가 있으므로 여유롭게 기다려주면 된다.

• 별다른 오류 없이 설치가 완료되었다면 위와 같은 화면이 뜨는 걸 확인할 수 있다.

---

💜 생성된 프로젝트 폴더를 VSCode 에디터로 오픈하기

• 위 과정에서 설치가 완료되면 작업용 폴더 안에 입력했던 프로젝트명으로 폴더가 생성되어 있을 것이다.
• 그러면 다시 프로젝트 폴더를 VSCode 에디터로 오픈해주어야 한다.
• (프로젝트 폴더를 오픈하지 않은 상태로 진행하면 코딩하다 문제가 발생할 수 있으니 꼭 오픈해주자!)

• 제대로 프로젝트 폴더를 오픈했다면 터미널을 열었을 때, 기존의 경로와 달리 작업용 폴더 하위의 프로젝트명까지 경로 확인이 가능하다.

---

💜 작성한 코드를 브라우저에서 미리보기

npm start

• 터미널에 위와 같이 입력해주면 브라우저가 자동으로 열리는데 그 브라우저에서 내가 작성한 코드가 제대로 실행이 되는지 확인이 가능하다.
• 만약에 뜨지 않는다면 크롬 브라우저를 열어서 localhost:3000 이라고 직접 입력해주어도 된다.

• 설치만 한 상태에서 npm start 를 입력했을 때 위와 같이 나온다면 제대로 작동하는 것이다.