📝 React. Environment Setup

📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠAug 16 ~ 20, 2021

현재 상태
다 먹지도 못했고, 겨우 먹은 것도 다 소화하지 못한 체로 함께하고 있어서 부족한 점이 많은데, 특히 지금 나에게 부족한 점은 JavaScript 기초가 너무x345 부족하다.
복습은 복습대로, 진도는 진도대로 나가야 한다.

⚠️ 처음엔 초기 setting 하느라 하루를 다 소진해버릴 수 있음 주의

Installation

@ browser

• Node.js download 링크
  • Node.js를 설치하면 NPM이 tool이 딸려오는데, NPM으로 library들을 쉽게 설치할 수 있음
  • Create-React-App이라는 library를 쓰려면 Node.js를 깔아야 함
  • M1은 안정형보다 최신형이 더 호환이 잘 맞는다는 얘기가 있음

@ desktop

• project 진행할 directory 생성

@ terminal

• Create-React-App으로 React project 생성
  : npx create-react-app (project명)
  • npx : npm에 올라가 있는 package를 바로 실행하고 설치하는 것

@ editor

• node.modules, package.json, git-ignore라는 folder가 있는지 확인
  • Create-React-App 덕분에 개발 환경이 이렇게 알아서 setting되어 있는 것인데, 그렇지 않으면 Babel로 직접 환경을 setting해야 하는 번거로움이 있음
• .gitingnore에 .eslintcache 작성해서 추가
• folder와 file 중 불필요한 것 삭제
  ex. logo.js
• Routes.js에 code 입력
• 필요한 file import

@ editor terminal

• project 진행할 directory로 이동
• npm install react-router-dom --save
  • react-dom을 설치하는 것
• npm install node-sass@4.14.1 —-save
  • react-dom 설치
  • CRA ver "4.0.3" 과 node-sass ver 6.0이랑 호환이 되지 않는 문제가 있으므로 문제 해결 전까지 node-sass ver 4.14.1로 버전을 지정해서 설치해야 함
  • package.json에서 "react-dom" "^17.0.2"와 같이 설치된 내용 확인 가능
• npm start
  • browser가 열림
  • App.js에서 수정하면 바로 이 browser에 반영됨
    - 이것도 create-react-app이 해주는 기능
    - App.js가 main page에 들어갈 HTML을 작성하는 곳인데, 그렇다고 App.js file이 main page는 아니고, 실제 main page는 public이라는 folder 안에 있는 index.html file임
    : App.js의 내용이 index.js 안의 document.getElementById('root')를 통해 index.html에 그려지고 있는 것
• npm install react-router-dom
  • routing을 위한 router 설치

folders & files

node_modules

• 이 project를 실행할 때 사용되는 dependency module이 모두 모여있는 folder
• 여기에 설치되어 있는 내용은 package.json file에 기록되어 있음 ("dependencies" 부분)
• 이 folder를 지우면 project를 띄울 수 없음
  ㄴ 지우더라도 npm install 하면 다시 설치할 수 있음 (단 package.json file이 수정되지 않아야 함)
• 크기가 너무 크고 file도 많아서 Git에 올릴 때 이 folder는 올리지 않음

public

• 잘 변경되지 않는 static한 file을 보관함
• index.html의 body tag에 있는 <div id="root"></div>를 통해 React code를 실행해서 만들어진 DOM이 구현됨

src

• 대부분의 작업이 진행되는 folder
• index.js에 기재되어 있는 import App from './App';가 아까 띄운 browser의 화면을 구현하는 code
• App.js에서 code 구현하면 됨
  • 여기에 code 입력하면 browser에 바로 반영됨 (= HMR : Hot Module Replacement)
• 혹은 pages folder나 Footer.js 등 필요한 file을 생성해서 code 짜면 됨
  • 'Footer.js'에서 첫 글자 대문자여야 하고,; .js 대신 .jsx로 저장해도 동작될 수 있으나 엄연히 다르므로 js 파일로 생성해야 함
• reportWebVitals();랑 reportWebVitals.js (performance 관련임) 처럼 당장 필요없는 code는 삭제

package.json

• npm start같은 명령어도 이 file에 기록되어 있음 ("scripts" 부분)
  • start : 개발 mode로 program을 실행
  • build : 실제 배포 mode로 만듦
  • test : 그냥 test?
  • eject : 내부 설정 file을 꺼냄 (web page나 Babel 설정을 변경하고 싶을 때 사용)

index.html

• 켜진 browser (localhost:3000) 의 개발자도구에서 Elments tab을 보면 <div id="root"> 밑에 <div class="App">...</div> == $0가 있는 것을 알 수 있다.

기타 필요한 folder 및 file 생성

ex.

• 1️⃣ 'component' folder 생성 후 필요한 component file 추가
• component folder 밖에서 (.gitignore와 같은 level에서) .eslintcache file을 만들어서 .gitignore에 추가
• 2️⃣ 'styles' folder 생성 후 reset.scss, common.scss file 추가
• project directory 내에 Index.js처럼 Routes.js file 생성
  • Routes.js에 component 경로 기재
• .css는 public folder에 접근하는 게 불가능하므로 필요한 image는 src/assets/images 이런 곳에 저장

1️⃣ 
// 각 page의 component
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

// import한 component 경로 설정
<Route exact path='/signin' component={Sign-in} />
<Route exact path='/' component={Main} />

2️⃣
@mixin flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

// .css file에서
@import '../common.scss'
.logo {
  @include flexCenter;
}    

---

🙇 the source of this content

코딩앙마