생활코딩 - React 소스 코드 수정 방법

directory 구조

📁 sec / index.js

• 입구 파일
• npm start 을 이용해서 create-react-app을 구동시키면 index.js를 찾아 적혀있는대로 동작하게 된다.

index.js

• 브라우저에 보이는 화면은 부분이다.
• import App from './App';의 App과 아래 코드의 은 같은 아이이다.
• import App from './App';의 './App'은 App.js파일이다.

App.js

• <div className="App"> </div> 태그 안의 내용을 바꾸면 브라우저의 내용이 바뀐다.

• Hello, React! 글자가 브라우저 가운데에 위치하는 이유는 css가 적용되어있기 때문이다.
• import를 보면 App.css가 적용되어 있다.

App.css

• css 내용 모두 삭제

• 내용 작성

index.css

• 내용을 지우면 샘플앱에서 사용하고있는 css를 초기화 하는 것

🐷 정리

• index.js
  • 입구
  • 전역적인 설정이 들어간다.
• App.js
  • 내용 편집하여 UI를 만들어 가게 된다.
• App.css
  • 브라우저에 보이는 css

---

index.js

• <App /> 태그는 id값이 'root'인 태그로 랜더링 되어라.

index.heml

• index.js의 root 태그는 index.hteml에 있다.

---

배포

• 위에서 본 파일들은 불필요한 메세지들이 많아 용량이 크다.
• 서비스에 최적화 된 효율적인 배포본을 만들기

1. 터미널 열기

• npm run build
  • 배포판을 만드는 과정
• 📁 build/index.html
  • 공백을 포함한 불필요한 메세지들이 삭제되어있다.
  • 파일의 용량을 줄이기 위해 최대한으로 다이랙트 한 것
• npx serve -s build
  • build한 결과를 서비스 할 때 사용
  • -s : 사용자가 어떤 경로로 들어왔던 간에 index.html 파일을 서비스하게 된다.
  • build 폴더에 있는 index.html 파일을 서비스하게 된다.
• - Local:http://localhost:3000 Network:http://192.168.123.103:3000
  • 우리가 접속할 수 있는 주소가 터미널에 뜬다.
  • 개발환경에서 사용할 주소가 아닌 실제 서비스에 사용 할 수 있는 버전의 파일이 만들어지고 서비스 된 것이다.