Dec.18.Mon.2023 [React] React 설치 방법 및 실행

 오늘 처음 리액트를 배웠다. 리액트를 설치하는 과정과 실행 방법이 그동안 Java를 실행했던 것과는 또 다른 느낌이라 복습할 겸 배운 내용을 정리 해보겠다.

 제일 먼저 Node.js 를 다운 받아서 설치한다.

 설치하는 방법은 http://nodejs.org/ko 에 접속해서 알맞는 환경에 맞춰 다운로드 받아 설치한다. 다운받은 파일을 설치하는 과정은 간단하므로 쭉쭉 진행 후 설치가 완료 되면 cmd 창에

node -v

를 입력하면 그 아래 버전이 뜬다. 아래 사진과 같이 나오면 잘 설치가 완료된 것이다 !

 이제 본격적으로 React를 설치하고 실행 해보자 !

1. React를 사용하고자 하는 워크스페이스(폴더)에서 cmd 창을 열고

npx create-react-app 사용할리액트폴더이름

 을 입력하고 그 뒤에 진행할 거냐는 물음이 나오면 y만 입력해주면 된다.

그러면 혼자서 알아서 쭉 설치가 되는 데 아래 사진에 나온 것처럼 Happy hacking! 이 나오면 끝이다.

2. 설치 후 실행하기는 두 가지 방법으로 진행할 수 있는데, cmd 창으로 실행하는 법부터 설명하겠다.
   먼저 리액트를 설치한 폴더로 이동해야 하는데,

cd 사용한리액트폴더이름

을 입력 후 해당 폴더로 이동해준 뒤

npm start

를 입력한다. 그러면 알아서 인터넷 창이 켜지면서 리액트 기본 화면이 나온다.

3. 다른 방법은  VScode로 실행할 수 있는데, 화면 위에 …이 있으면 …을 클릭, 혹은 터미널이 있다면 터미널을 누르고 New terminal을 누른다.

그러면 화면 아래에 터미널 창이 뜨는데, 거기에 cmd창에 입력한 것과 같이 npm start를 입력하면 실행되며 똑같은 React기본 화면이 뜨는 걸 볼 수 있다.

참고로 작업을 끝내려면 Ctrl 과 c 버튼을 눌러주면 아래와 같이 Y/N를 묻는 질문이 뜨는데, 이때 Y를 입력하면 끝낼 수 있다!