[생활코딩] React - CSS / 배포

<CSS 코딩하는 방법>

 

리액트에서 css를 수정하는 방법을 알아보겠다.

저 부분을 수정해보자.

 

배경색을 설정

---

<배포하는 방법>

 

앱을 새로고침 했더니 전체용량 2.1MB를  다운로드 받았다고 나온다.

기능이 하나도 없는데 2.1MB이나 된다?

그건 리액트가 기능의 편의성을 위해서 추가해놓은것들 때문이다.

create-react-app의 개발환경의 파일의 무게는 무겁다.

 

여러 보안적인 문제도 그렇고 개발자가 아닌 사람들이 2.1MB를 쓰게 할수는 없다.

npm run build 명령어로 빌드를 해보면 디렉토리 구조에서 이전에는 없었던 빌드파일이 생긴다.

저 폴더에 있는 index.html 파일을 보니 읽기 불편할 정도로 띄어쓰기가 안되어있다. 

그 이유는 공백과 같이 불필요한 정보의 용량을 싹 날린거다.

그래서 용량이 훨씬 작다.

이렇게 create-react-app이 우리 대신에 알아서 용량을 줄여준다.

 

실제 서비스할때는 build안에 있는것을 사용하면 된다.

npm install -g serve 명령어로 설치

저 명령이 뭐냐면 서브라고 하는 npm을 통해 설치할 수 있는 간단한 웹 서버이다.

npx serve -s build 는  서브라는 웹서버를 받아서 실행시킬때 생성된 빌드라는 디렉토리를

다큐먼트 루트로 하겠다는것.

 

설치해보면 우리에게 주소를 알려준다.

 

저 주소로 들어가서 아까처럼 새로고침을 해서 네트워크를 확인해보니

이전 용량과 비교하면 가벼워졌다.

이전에는 2.1MB였다.

 

 

---

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.