React 프로젝트를 생성해보자
설치할 것들
-
node.js , npm 설치 (node.js 설치시 npm 자동 설치)
-
CRA 설치
cd 프로젝트 폴더 ->npx create-react-app my-app
-> cd my-app ->npm start(로컬 서버 시작)
터미널에 표시된Local: url에서 url 클릭 (맥: cmd + click)
아래와 같은 화면이 뜨면 성공!
-
SPA를 위한 react-router 설치
npm install react-router-dom --save
(--save는 package.json의 "dependencies" 객체에 기록을 남기는 옵션이다)
"dependencies"에 기록은 왜? 🤔
npm install시 "dependencies"에 있는 속성들이 자동으로 받아진다
git을 통해 해당 프로젝트를 공유할 경우 모든 패키지가 들어있는 node_modules 폴더는 너무 무거우니 .gitignore를 통해 제외시키고, 공유 받은 쪽에서 npm install을 통해 해당 프로젝트에 필요한 패키지를 받는 것이 옳기 때문에--save를 통해 "dependencies"에 기록을 남기는 것이다
- SASS(SCSS) 설치
npm install node-sass --save
주의 ❗️ 현재 CRA와 버전 호환이 안맞는 오류가 있다고 하니 알맞은 버전을 설치하도록 하자
원하는 버전 설치 : npm install node-sass@원하는 버전 --save
파일 & 코드 정리
CRA(툴체인)을 통해 초기 세팅을 완료했을시 쓸모없는 파일 & 코드가 있다
필요한 것만 남기고 모두 정리해보자
파일 정리
- public 폴더 -
index.html외 모두 삭제 - src 폴더 -
App.js,index.js외 모두 삭제
코드 정리
index.html
- 내용 모두 삭제 후 html 초기 세팅 내용만 삽입
- body안에
<div id="root"></div>추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js
function App() {
return <h1>MY REACT !</h1>;
}
export default App;return (원하는 html요소 JSX로 작성)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));모두 정리 했다면 아래와 같은 화면이 나온다
이제부터 React로 나만의 웹 페이지, 사이트를 만들어 보자..! 🚀
