-
React+ 001 설치, 수정, 배포React/React + 2023. 1. 3. 03:16728x90
실습 환경 구축
리액트를 사용해 사용자 정의 태그를 만든다.
사용자 정의 태그는 부품으로 사용되는데 남에게 공유할 수도 있고 남의 것을 사용할 수 있다.
이번 수업은 함수를 통해 리액트를 만드는 수업을 진행할 것.
node.js는 이미 설치 되어있으니 넘기고
- 프로젝트 폴더를 생성한다
- 터미널에 "npx create-react-app my-app" 입력해 "my-app"이라는 새 프로젝트 생성
- "npm start" 로 방금 만든 샘플 애플리케이션 실행
? Something is already running on port 3000. Would you like to run the app on another port instead? » (Y/n)- 위와 같은 메세지가 터미널에 뜬다면 이미 3000번 포트를 사용하고 있다는 것이니 "y"를 눌러주면 된다.
- 잠시 기다리면 샘플 애플리케이션이 브라우져 창에 뜬다.
짝짝짝 소스 코드 수정 방법
- src/index.js
- 입구파일이다 npm start를 하면 이 도구는 index.js파일을 찾고 거기에 적혀있는대로 동작하는 것
- <App/> 이라는 태그에서 샘플 화면이 보이는 것 ./App 으로 import 되어있다.
- src/App.js
- App() 함수가 return 하는 코드들이 샘플 화면을 구성 했던 것이다.
- ./App.css가 import 되어있다. src/App.css를 열면 확인할 수 있다.
질문? 그럼 App.js안의 코드가 나오는것은 알겠는데 위에 id값이 root로 된건 뭐지?
index.js에 보면 <App/>태그가 id값이 root인 태그로 렌더링 되라고 하는 코드가 있다.
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );이 root는 public폴더 안에 있다.
public/index.html
이곳에 style을 주게 되면 화면에도 구현이 된다. 배포
npm start는 개발을 위한 어플리케이션이다. 배포를 하기에는 적합하지 않다.
- 터미널을 열고 기존에 열려있는 서버를 끈다.
- "npm run 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.fcb11eea.js"></script><link href="/static/css/main.073c9b0a.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>- "npx serve -s build" 를 입력하면 빌드 폴더에 있는 index.html을 실행하는 주소가 나온다.
주소로 들어가본다 
소스를 보면 공백이 없는 코드가 나온다 짝짝짝 설치, 수정, 배포까지 마쳤다.
생활코딩 강의는 뭔가 성취감을 주는 느낌이 있다.
개인적으로는 말이 너무 느려서 배속으로 듣는 편
728x90'React > React +' 카테고리의 다른 글
React+ 005 State (0) 2023.01.03 React+004 Event (0) 2023.01.03 React+ 003 Props (0) 2023.01.03 React+ 002 컴포넌트 (0) 2023.01.03 React + 000 (0) 2023.01.03