React.js 기초 #2 Create React App

#2 Create React App
< React App을 만드는 방법 >
- React.js: Node 기반의 Javascript UI 라이브러리
- Webpack: 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
- Babel: JSX 등 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
 
- Boiler Plate
: 이미 세팅 완료된 패키지
: 마치 보일러를 찍어내듯 서비스를 개발할 수 있는 빵틀의 역할을 하는 패키지
 

---

1. 바탕화면에 폴더 생성

 
2. VScode에서 폴더 열기

 
3. 터미널 열고 버전 확인하기

 
4. npx create-react-app reactexam1

*npm 버전이 오래되서 오류가 났다.
: npm install -g npm@10.2.3를 적어 새 버전으로 설치해준다.
 
설치한 후 다시 입력하니 리액트 프로젝트가 생성되었다.

*프로젝트를 생성한 후 처음 만들었던 reactexam1안에 들어가서 reactexam1을 바탕화면으로 꺼내야한다.
아니면 경로 오류가 발생하여 실행이 되지 않는다.
 
5. npm start
터미널에 npm start를 입력하면 localhost:3000으로 리액트 프로젝트가 실행된다.
*localhost:3000
- 내 주소(web server)
- 내 컴퓨터 안에서만 동작!

 
6. 종료
Ctrl + c로 강제 종료
 
7. 기본 세팅
- 필요없는 파일들은 삭제한다.
- 삭제한 파일을 import 부분 및 사용되는 코드도 함께 삭제해준다.
- 삭제하지 않으면 아래와 같이 오류가 생성되므로 꼭 함께 삭제해주어야 한다.

 
모두 삭제하면 아래와 같이 성공적으로 실행된다.

 

---

*폴더에서 react app 만들고 VScode에서 열기
폴더 생성 → 마우스 오른쪽 버튼 → 터미널에서 열기

 
터미널에 npx create-react-app reactexam1 입력 →  reactexam1 폴더 바탕화면으로 꺼내기

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.