리액트 앱에 도움을 주는 추가 라이브러리
- Webpack : 다수의 JS파일을 하나로 합쳐주는 모듈 번들 라이브러리
- Babel : 여러 JS코드를 작성할 수 있도록 도와주는 라이브러리
Create React App
- 리액트의 Boiler Plate
- 리액트를 사용하는데 필요한 패키지들을 모아놓은 패키지
Boiler Plate
- 어떤 기술에 대해 미리 기초설정 작업을 모두 다 해놓은 작업
npx
- npm을 편리하게 이용하는 도구
- 설치되어있지 않을 패키지를 딱 한번만 사용하고 싶을 때 사용
npx -v명령어를 이용해 설치가 되어있는지 확인 후 사용
- 만약, npx가 설치되어있지 않다면
npm install -g npx명령어를 이용해 npx설치
error
npx crate-react-app reactPJ1 실패
- 아래 두 명령어 따라한 후 재시도
npx crate-react-app reactPJ1 실패2 & 재시도
- 폴더 이름과 프로젝트 이름이 같을 수 없다해서 프로젝트명 변경하여 생성
만약, 다른 error가 발생한다면 아래 주소에서 확인
https://jeong-ran-e.tistory.com/entry/Create-React-App-%EC%98%A4%EB%A5%98-%EB%B0%9C%EC%83%9D%EC%8B%9C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95
폴더 및 파일 구조
앱 생성 후, 폴더 구조를 살펴보면 package.lock.json, package.json등 파일 구성이 node.js 패키지 구성요소와 동일함
- create-react-app 이라는 패키지도 node.js 패키지여서 기본적인 구성은 동일한 것!
앱 실행
npm start 명령어를 통해 앱 실행 시, localhost:3000 이라는 주소로 실행됨.
- React앱은 node.js기반의 웹 서버 위에서 동작하고 있음.
앱 종료
ctrl + c 입력 시 종료 가능
실행 파일
App.js
App() 이라는 함수 내에서 메인페이지의 html을 리턴하고 있음.
import "./App.css";
function App() {
let name = "성원";
return (
<div className="App">
<header className="App-header">
<h2>hi {name}</h2>
</header>
</div>
);
}
export default App;JSX 문법
- javaScript와 html을 합쳐서 사용할 수 있음
<h2>hi {name}</h2>
컴포넌트 방식
- App() 이라는 함수를 만들고 return으로 html을 리턴해서 index.html에서 사용할 수 있음
exprt, import
- ES모듈 시스템에서
export default App;와 같이 모듈을 내보내고, 다른 파일에서는import NAME from '경로'로 받아서 사용함 export default는 한 개만 내보낼 수 있음- common.js 모듈 시스템에서는
module.exports=로 사용했었음
index.js
(1)번에서 app.js라는 파일을 App이라는 이름으로 import하고 있음
(2)번에서 그렇게 불러온 App을 root라는 ID를 가진 엘리먼트 밑에 render함
index.html
public/index.html 경로에 위치
id="root"인 div가 해당 파일에 있음
기타 파일
node_modules
- node.js 패키지 구성요소 중 하나로, 외부 모듈을 저장하는 폴더
- react도 외부 모듈이기 때문에 node_modules에 포함되어있음
- node_modules는 매우 용량이 크기때문에 git등으로 관리하기 매우 어려움. 대신, package.json과 package-lock.json에 어떤 모듈을 받아야 하는지 명시되어어있음.
node_module이 없는 패키지를 받았을 경우,npm i라는 명령어만 입력하면 자동으로 node module이 모두 다운받아짐.
favicon
- 웹 브라우저 최상단에 보이는 웹사이트 이미지
robots.txt
- 구글, 네이버 등 검색엔진이 사이트 정보를 수집해갈 때 수집할 정보의 기준을 정함
