week2_1일차_PR

주요 작업

• 주간 계획 작성
• webpack 번들링 학습
• 제대로 하지 못했던 css 속성 부여
• webpack 번들링을 통한 csr 사용

학습 키워드

• fsd 패턴
• esm
• Webpack과 babel
• https://luxurious-share-af6.notion.site/2-bfaf16a16f8743eb9ee0e08af52673be?pvs=4

고민 및 해결과정

모듈을 활용한 CSR 방식

기존의 내 프로젝트의 경우, SSR로 데이터를 엔트리 포인트부터 전해주어 각 pug 템플릿에 이를 전해주고, 해당하는 값을 그대로 받아 렌더링시키는 방식으로 설계 및 구현을 하였다. 하지만 이러한 경우, 함수들을 활용한 방식에 대해서 어떻게 이를 활용해서 컴포넌트 별로 렌더링을 하기 위해서는 값이 변경되었을 때나 처음에 렌더링이 시작되고 이후에 데이터를 가져와 클라이언트 측에서 템플릿을 만들어야 할지 막막하기만 했다.

이에 해결책으로 내놓은 방식이 서버에서는 ssr 방식과 csr을 합치되, 기존에는 templating을 해서 보내줬지만 이벤에는 서버에서 데이터만 받아서 클라이언트에서 templating을 거친 뒤 리렌더링을 하는 방식으로 생각해보았다. 이를 위해서는 웹팩을 통해 번들링을 하고, 번들링 과정에서 라이브러리의 의존성을 넘겨주어 이를 사용하는 방식을 생각해보았는데, 현재 마스터클래스가 끝난 시점부터 지금까지 계속해서 웹팩 설정을 하고 있는데도 아직까지 제대로 되지가 않아 문제다.