리액트 폴더 알아보기 / 설치 실행 배포(간단히)

설치

리액트 설치

sudo npx create-react-app 폴더

• 나는 자꾸 오류가 나서 앞에 sudo를 붙였더니 설치됨

 

실행

npm start

 

포트번호 3000인 화면이 떠짐

 

 

---

수정

리랙트가 설치되면 아래와 같이 폴더와 파일이 생성됨

• index.js = 입구 : 여러 전역적인 설정

 

• app.js : 화면에 보여지는 ui

 

• app.css : 화면에 보여지는 디자인

 

index.js 코드를 보면 root 가 나옴 --> 이 루트는 어디에?

public -> index.html 에!

: 직접 표시되진 않지만, index.js에 의해 렌더링된 결과가 출력됨

 

 

---

배포

위의 실행 페이지는 개발을 위한 페이지 -> 배포하기엔 용량이 너무 크고 무거움

npm run build

• build : 배포판을 만드는 과정

 

• build 폴더가 생성됨
• index.html을 보면 공백도 허용하지 않음
  • 용량 줄기이 위함

 

위 html, 즉 서비스 버전으로 실행하기

npx serve -s build

• serve : 웹서버
  • -s 옵션 : 사용자가 어떤 경로로 들어와도 intex.html을 서비스
• build : 폴더 지정, build 폴더의 index.html 실행해줌

 

• 접속 주소