코드숨 6주 차 회고

🔥 글의 목적: 코드숨의 6주 차 학습 내용을 정리하고, 한 주를 정리한다.

📌 학습 내용

• React Router
• webpack historyApiFallback
• SPA

📌 회고

이번 주는 개인적으로 코드숨을 진행하면서 가장 힘들었다고 생각이 들지만 그만큼 값진 한 주였다.

webpack을 설정하면서 정확하게 이게 어떤 것을 설정한 것인지 잘 모르고 초반에 넘어간 것들이 많았다. 그러다 보니 이번 주 강의와 과제를 진행하면서 전반적인 것들을 이해하지 못해 힘들었다. 그리고 이 문제는 React Router에서 설정하지 않은 URL을 입력했을 때 발생했다. 잘못된 URL일 경우, App 컴포넌트에서 NotFoundPage로 이동하도록 설정해두었는데, 실제로 URL을 입력해 보면 NotFoundPage 컴포넌트를 렌더링 하지 못하고 404 에러를 발생시켰다.

그러다 문뜩 MPA 방식에서는 화면에 어떠한 변화를 주려고 화면을 전환하면 그때마다 서버로부터 새로운 HTML 파일을 전송받아서 이를 다시 렌더링 해야 한다는 부분이 떠올랐다. 지금 우리가 하고 있는 것은 SPA 방식이기에 화면에 변화를 줄 때에는 새로운 HTML을 전송받는 것이 아니라 component를 렌더링 하여 변화를 주는 것이고 우리에게 HTML 파일은 최초에 처음 서버로부터 받게 되는 index.html로 동적으로 태그와 스타일을 생성해 페이지를 만드는 것이라는 내용을 이해하게 되었다. 그렇게 index.html로 webpack의 fallback 설정을 하는 부분들도 배울 수 있었고 SPA에 대해서도 공부하고 복습하는 한 주였다.