부트캠프 66일차 (리액트 번들링)

오늘의 생각

 

오늘은 리액트를 통한 번들링을 진행했다.

 

전체적으로 어제 배웠던 것들을 복습하는 느낌이 컸고, 기존의 프로젝트를 페어와 함께, 리액트로 진행하는 차이점이 있었다. 

 

오늘 페어 과정을 진행한 방식은

 

1. npx create-react-app {개인프로젝트명}로 기본 프로젝트 생성

2. src/index.js, src/App.js, src/index.css, public/index.html을 제외한 모든 파일들을 삭제 후 진행

3. 페이지 구현 (이에 따른 필요한 라이브러리 설치)

4. 웹팩 구성 및 빌드 확인

5. 웹팩 기능 추가하며 확인, 최종 마무리

 

이었다.

 

덕분에 어제 프로젝트에서 한 발 더 나아가 MiniCssExtractPlugin, BundleAnalyzerPlugin 등을 추가적으로 빌드 과정에 포함했다.

 

이 과정에서 플러그인이 어떤 역할을 하는지, 아웃풋과 엔트리를 어떤 식으로 조정해 동적으로 만들 수 있는지 등을 배울 수 있었다.

 

힘들었던 부분은 자잘한 오류들을 수정할 때였다.

 

의외로 가장 힘들었던 경우는 그리드를 활용한 이미지가 나오지 않고 검은색 배경만 나왔을 때였다.

 

에러의 원인은 컴포넌트화한 해당 파일에 return()문을 포함하지 않은 매우 기본적이면서도 확인하기 어려운 실수가 나왔다.

 

이런 점들은 에러창을 통해 추적했지만, 작성할 때 다시 한 번 파일을 천천히 둘러봐서 실수의 비율을 줄일 수 있도록 해야겠다.