[React] Create react app으로 리액트 앱 생성하기

지금까지 노마드코더 니꼬쌤의 강의를 수강하며 해온 실습은 스크립트를 import 해서 진행했었다.

강의 내용 너무너무 좋고 재밌어서 블로그로 복습해야겠다 😊

 

이제 진짜 프로젝트를 만들어보기 위해 나만의 리액트 애플리케이션을 생성해보자!

---

📌 Node.js 설치

Node.js

추천 버전에서 OS에 맞는 파일을 설치해준다.

시키는대로 따라가면 끝.

 

설치 다 하고 터미널에 node -v 써봤을 때 버전이 출력되면 정상적으로 설치되어 실행이 가능하다

 

📌 폴더 생성

애플리케이션을 생성할 폴더에 접근 후 새로운 애플리케이션을 생성해주자.

npx create-react-app [생성할 앱 이름]

엔터 누르면 여러 개가 load 되고, 이것 저것 install 된다.

유능한 개발자가 된 느낌 하하하,,, 😎

기다리기만 하면 끝

 

그럼 이렇게 폴더가 생성됨

나는 이제 src 디렉토리의 소스들만 수정해주면 된다.

 

💻 /src/index.js

익숙한 아이들이 여럿 보인다.

render, ReactDOM..

<App /> 컴포넌트를 호출해주는 역할을 한다.

 

💻 /src/App.js

 

💻 /public/index.html

App.js는 단순한 함수 컴포넌트다.

이렇게 여러개의 컴포넌트를 생성해 작성하고 index.js에서 호출하면 된다!

index.js의 내용은 public 폴더의 index.html의 root에 출력된다.

 

root 요소를 직접 만들어 줄 필요도 없고, 자동으로 폴더와 파일을 다 생성해준다니 너무나 간단하다.

 

📌 개발용 서버 생성

npm start

이제 터미널에 npm start만 입력해주면 자동으로 개발용 서버가 웹 브라우저에 열린다.

짜잔 ✨

이렇게 열린 개발용 서버는 Auto-Reload (자동 재실행)가 된다.

수정-저장 후 새로고침을 하지 않아도 자동으로 화면을 Reload 해준다... 너무 좋아

 

이렇게 creat-react-app을 사용하여 애플리케이션 만들 준비 완료!

 

열심히 강의 듣고 더더욱 공부해야겠다 👍