[ 생활 코딩 - react ] (4) JS 코딩하는 법 / CSS 수정 / 배포(build, 서비스 시 용량 줄이기)

 

[ JS 코딩하는 법 ]

1. Visual Studio Code를 연 후 [File] - [Open Folder] - [리엑트 개발환경이 구축된 폴더] 를 열어준다.

 

2. 해당 폴더를 열고 왼쪽 상단에 종이 두장이 그려진 카테고리를 누르면 다음과 같이 디렉토리가 나온다.

여기서 public이라는 폴더는 index.html이 있는 곳이다. index.html은 저번 시간에 서버를 돌렸을 때 웹브라우저에 뜨는 페이지이다. 

 

3. index.html에서 볼 부분은 31번째 <div id="root"></div> 이다.

편집기에서는 이게 끝이지만 서버를 실행 후 브라우저에서 F12를 누르고 Elements 부분에서 다음 부분을 확인하면

APP이라는 부분이 들어가 있는 것을 확인할 수 있다.

이 부분은 public폴더와 같은 위치인 src 폴더의 소스에서 수정이 가능하다.

src 폴더

 

4. index.js와 index.html을 보면 root라는 부분을 다음과 같이 볼 수 있을 것이다. id가 root라는 곳을 index.js에서 찾아서 부르는 것이다.

여기서 밑줄 친 APP은 사용자가 만든 컴포넌트 이다.

 

5. 현재 App.js를 보면 function type으로 되어있다. 이것을 class type으로 변경해 줄 것이다.

default인 function type

변경 후. class type

 

 

---

[ CSS 수정 ]

1. index.js를 보면 3번째 줄에 import './index.css'; 이 있다. 해당 파일로 가보자.

 

2. background-color: powderblue; 를 추가하고 새로고침(F5)하여 배경 색이 변경된 것을 확인해준다.

 

6. 이전에 index.js의 9번쨰 줄에 <App /> 이 컴포넌트이므로 4번째 줄의 동그라미 친 부분과 이름이 같아야한다.

따라서 App이 아닌 다른 이름으로 동일하게 바꿔도 정상작동 한다.

 

---

[ 배포 ]

1. 새로고침에서 오른쪽 마우스를 누르면 다음과 같은 옵션들이 나온다.

여기서 '캐시 비우기 및 강력 새로고침'은 강력한 리로드이다.

보통은 성능을 높이기 위해서 캐쉬를 삭제하는 것으로 쓰인다.

 

2. 누른 후 네트워크 쪽을 살펴보면 전체 용량이 1.8MB가 나온다.

단순히 출력과 배경화면 뿐만이 아니라, 리엑트 개발 환경에는 많은 요소들이 포함되어 있기에 그만한 무게가 있는 프로그램인 것이다.

 

3. 하지만 이렇게 무거우면 여러 문제가 있기 때문에 줄여주는 작업을 할 것이다.

먼저 터미널에 npm run build를 치면 디렉토리에 build폴더가 생긴다.

 

4. build안에 있는 index.html 파일을 들어가면 뺵빽하게 내용이 가득 차있다.

이것은 creact-react-app이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해 우리가 이미 가지고있는 index.html의 불필요한 내용들을 모두 삭제한 것이기 때문이다. 

용량도 훨씬 작다. 

따라서 서비스 할 때 빌드 안에있는 내용을 쓰면 된다.

npm install -g serve // 웹서버 생성

npx serve -s build //웹서버 실행 후 빌드 디렉토리에 만들어줌

5. npx serve -s build를 실행하면 용량이 줄어드는 것을 확인할 수 있다.

터미널