[React] 리액트에서 CSS 수정 + Deploy(배포) 하기

리액트에서의 방법이라기 보다 create-react-app의 지배 하에서 css를 어떻게 할까? 에 대한 방법이다.

index.js 파일에 index.css를 import 한 것을 확인할 수 있다. 

 

index.css에 들어와서 배경색을 바꿔주면 적용된 것을 볼 수 있다.

 

 

Deploy(배포) 하기

그 전에 우리가 셋팅해놓은 리액트 앱을 살펴보았다.

보이는 웹 브라우저에서 새로고침 우클릭해서 캐시 비우기, 강력 새로고침을 한다.

보통 성능을 높이기 위해서 뭔가 다운받아서 보관하는데 이것을 캐시라고 한다.

강력 새로고침을 통해 캐시를 삭제한다.

 

이렇게 해서 실행을 하면 용량이 약 1.7MB 이라고 나온다.

기능이 없는데 왜 1.7MB 이냐, 리액트가 개발 편의성을 위해서 여러 기능들을 추가해놓은 상태이다.

create-react-app의 개발환경은 파일의 무게가 무겁다. 하지만 사람들이 1.7MB 를 사용하게 하면 용량, 보안적인 문제 등 어려운 부분이 많다.

 

 

 

그래서 create-react-app은

개발환경을 실행시킬 때는 npm run start 을 사용했는데

production mode 의 애플리케이션을 만들 떄, 즉 빌드를 할 때는 npm run build 명령어를 사용한다.

build로 실행을 하면 이렇게 build 디렉터리가 뿅 생긴다.

여기에도 우리가 아는 index.html 이 있다. index.html을 열어보면 공백없이 코드가 들어가있다.

create-react-app이 실제 production 환경에서 사용되는 앱을 만들기위해서 우리가 이미 가지고 있는 index.html 파일에서의 공백과 같이 불필요하게 용량을 차지하는 정보를 싹 없앤다.

src 도 마찬가지로 create-react-app이 용량을 줄인다던가, 보안적으로 좋지않은 것들을 없애는 작업을 한 뒤 index.html 파일이 그것을 로드할 수 있도록 우리 대신 알아서 처리해준다.

 

요약:

실제로 서비스할 때는 build 안의 파일을 써야한다.

웹 서버의 document root 즉, 웹 서버가 문서를 찾는 최상위 디렉터리에다가 build 디렉터리 안 쪽의 파일들을 위치시키면 된다. => 실서버 환경 완성!

 

 

npm run build 를 실행시키면 아래와 같은 안내가 나오는데

serve -s build 가 무엇이냐?

serve라고 하는 npm을 통해서 설치할 수 있는 간단한 웹 서버가 있다.

 

npm install -g server 

이 명령어를 치면 컴퓨터 어디에서나 serve라는 명령어로 웹 서버를 설치할 수 있다

npx serve

한 번만 실행시킬 웹 서버를 다운받아 실행

npx serve -s build

serve라는 웹서버를 다운받아서 실행시킬 때 build라는 우리가 생성한 디렉터리(이전에 npm run build로 생성)를 document root 로 하겠다(-s)

 

 

npx serve -s build 를 치고 엔터!

http://localhost:5000 로 들어가면 된다고 알려준다.

 

 

이렇게 해서 다시 reload를 해보면 1.7MB였던 용량이 147kB로 바뀐 것을 볼 수 있다.

개발환경의 앱은 동작하는 모습은 똑같지만 무겁다는 것을 알 수 있었다.