[react] 시작 및 빌드

리액트를 사용하면 좋은 점

1. 사용자 경험
2. 재사용 컴포넌트
3. 데이터 화면 일치

시작하기

1. create-react-app 설치

npm install -g create-react-app
또는
npx create-react-app

npm은 한 번만 설치하면 되고 npx는 사용할 때 임시로 설치한 뒤 딱 한 번만 실행시키고 지워진다. npx의 좋은 점은 컴퓨터의 공간을 낭비하지 않으며 항상 최신 버전인 상태이다.

2. 개발환경 구축
   작업할 경로로 이동 후

create-react-app . 

.은 현재 폴더를 의미하며 . 대신 폴더 이름을 적어 넣으면 된다.

3. 실행

npm run start

종료를 원할 시 ctrl + c

빌드 하기

개발자도구 네트워크 -> 새로 고침 -> 오른쪽 마우스 :
캐시 비우기 및 강력한 새로 고침 (성능 높이기 위해서 다운로드해 보관해 놨다가 그다음은 접속을 안 하는데 강력한 새로 고침을 하면 캐시를 없앨 수 있다.)

리액트를 강력한 새로 고침을 해보면 1.7MB를 다운로드하는데 리액트가 개발의 편의성을 위해서 여러 가지 기능을 추가해 놓은 상태이기 때문에 create react app의 파일의 무게가 무겁다.

개발 환경에서는 괜찮지만 사용자가 사용하기에는 너무 용량이 크고 보안적인 문제도 있기 때문에 개발 환경을 실행시킬 때는 npm run start를 쓰지만 빌드 할 때는 npm run build를 사용하며 build라는 디렉토리가 생성된다.

npm run build

압축된 파일들 생성

-> 공백과 불필요한 용량을 줄이며 보안적인 문제도 해결, 에러 메시지, 경고등을 없앤다

웹서버의 document root(웹서버가 문서를 찾는 최상위 디렉토리)에다 build 안에 있는 파일들을 넣으면 된다.

babel

• babel은 jsx문법을 react의 createElement인 옛날문법으로 변환해준다. (그외 최신 문법을 사용가능한 문법으로 변환)

• 간단히 script태그 추가로 가능

< script src = "https://unpkg.com/@babel/standalone/babel.min.js" >
</script>

상위에 추가한 뒤

< script type = "text/babel">

로 가능

-> 문법만 최신 문법으로 바꿔주는 것이고 최신 객체나 메서드를 사용하려면
babel 폴리필 추가로 설치 필요

참고 : npm을 통해 설치할 수 있는 간단한 웹서버

npm install -g serve

-> 이 컴퓨터 어디에서나 serve라는 명령어로 웹서버 설치 가능

npx serve -s build 
// 한번만 실행

-> serve라는 웹서버를 다운받아서 실행시킬때 build라는 우리가 생성한 디렉토리를 document root로 하겠다는 의미

-> build로 하면 용량이 줄어있는 것을 확인