패스트캠퍼스 챌린지 23일차 - 리액트의 생성과 빌드

0. 공부 인증 
공부 시작 22 : 33

공부 종료 22 : 58

과제 지옥이다...

너무 시간이 없다

 

1. Create-react-app

npx를 통해서 설치하면 로컬에 다운로드 하지 않고, 
바로 설치할 수 있음.

 

yarn 또한 npm 처럼 사용할 수 있음.

 

관련 실행 명령어는 package.json 에서 설정할 수 있음.

localhost 3000번이 기본 설정임.

 

리액트를 구성하나느 파일들은, 

우선 가장 중요한 것은 최상위 폴더에 있는 App.js 임

JSX를 통해서 화면을 렌더링 함.

 

index.js에서 리액트가 시작됨.

App.js 또한 여기서 호출이 됨 (React JSX 를 활용하는 것)

 

돔을 호출해서 직접 수정함.

JavaScript 파일이 JSX 를 활용하는 것.

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

index.html

    <div id="root"></div>

 

React 를 실행시키면 확인 할 수 있는 것

 favicon -> public : 폴더에 위치하여 있음.

 manifest.json : 웹사이트의 기본적인 정보들이 들어있음.

 

그리고 React에 기본 생성시 생기는 .test. 파일은 test용 파일임.

-> 테스트 명령이나 해당 코드를 직접 실행했을 경우에!

 

또한 Hot Reloading 을 통해서,

새로고침을 하지 않아도, 수정 사항이 반영됨.

 

 

2. 빌드하기

기본 파일만 실행하여도, 크롬의 네트워크 창을 찾아보면, 무려 2MB가까운 용량임.

페이지에 비해서 굉장히 큰 값임.

 

yarn build 를 통해서 이 문제를 해결할 수 있음.

 

바벨과 웹팩들을 다 실행을 시켜서, 배포하기 좋은 형태로 파일을 만들어 줌!

(해당 파일은 꽉꽉 차있음.)

 

그리고 출력된 결과물을 확인하고 싶다면, .html 파일을 단순히 열어보는 것은 불가능 하고,
npm install -g serve 혹은 npx serve -s(이후 오는 디렉토리를 설정 - 출력물이 있는 폴더) build

를 실행하면, 동일하게 확인할 수 있음.

 

이렇게 하면,  2MB에 가까운 파일을 193KB 까지 압축을 할 수 있음.

 

 

 

 

환급 챌린지 (23/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지