728x90
반응형
✅src - index.js 파일 (입구파일)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // ./ -> 현재 디렉토리를 의미한다.
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
<App / > 파일 안에서 ui가 React를 처음 켰을 때 나오는 화면을 구성하고 있다. 그 ui를 수정하면 되는 것!
✅public - index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
개발자 창을 켰을 때 보이는 코드이다!
✅npm run build : 배포 폴더 생성
※터미널에서 기존의 개발 환경 끄고 싶을 때 : ctrl + c
※ build는 배포판을 만드는 과정이다.
생성된 폴더 안에 index.html / 배포 할 때는 공백이 필요 없음으로 공백조차 없다
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.66e150a7.js"></script><link href="/static/css/main.31d6cfe0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
serve -s build
// 빌드한 결과를 서비스할 때 쓰는 명령어
// -s : 사용자가 어떤 경로로 들어오 건 index.html 이 열림
// build : 폴더명 지정
npx serve -s build
// build 안에 있는 index.html을 serve하는 웹서버가 실행이 됨
// 개발환경을 위한 버전이 아니라 실제로 서비스할 수 있는 버전의 파일이 만들어 진 것
참고자료
728x90
반응형
'Frontend > React' 카테고리의 다른 글
| 6일차 - react create (0) | 2023.02.12 |
|---|---|
| 5일차 - react state (0) | 2023.02.08 |
| 4일차 - react 이벤트 기능 (0) | 2023.02.02 |
| 3일차 - react component 와 props (0) | 2023.02.01 |
| react 설치하기 (0) | 2023.01.29 |
