React #2 Source 코드 수정, 배포

src 폴더 내 index.js

입구 파일.  index.js에 적힌 코드 내용대로 실행된다.

 

index.js 내 <App />가 실제 홈페이지 화면 UI의 전체.

import App from './App'에서 가져온 것.

즉 같은 디렉터리에 있는 App.js의 App() 함수가 동작.

 

index.js는 전역적인 설정이 들어간다.(입구)

App.js 내 App() 함수 내에서 실제 코딩을 통한 UI 구현.

App.css는 스타일 관리.

 

index.js 내

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>

document.getElementById('root')

)

는

<App> 태그가 Id 값이 root 인 태그로 렌더링 되어라는 의미.

Id 값이 root인 태그는 public 폴더 내 index.html에 존재.

 

 

 

이전 npm start는 배포가 아닌 개발을 위한 것.

배포하기 위해

CTRL+C 통해 nps start 끄고

npm run build

배포를 위한 웹 빌드를 시작.

위 코드 실행시

build 폴더 생성된다.

build 폴더 내 index.html.

빌드 한 것을 서비스할 때,

serve -s build

즉, serve라는 웹 서버(node.js 앱)와 -s(index.html을 먼저 서비스하게 해준다.)라는 옵션을 줘서

build 폴더 내 index.html을 서비스 해준다.

serve는 node.js 앱이므로 npx 명령어 사용.

npx serve -s build 커맨트 입력. 웹 서버 실행된다.