패스트 캠퍼스 챌린지 16일차 미션 (2월 16일) : 마이크로 FE 강의 후기

이 글은 네이버 블로그에 2025년 2월 16일에 올렸던 것을 그대로 옮겨온 것입니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

[ 마이크로 프론트엔드(MFA:Micro Frontend Architecture) : 대규모 서비스 설계부터 운영까지 (feat.모노레포&모듈페더레이션)

1. 공부 시작 시각

2. 공부 종료 시각

3. 클립 1번 수강 인증 사진

4. 클립 2번 수강 인증 사진

5. 학습 인증샷 1장

6. 학습 후기 700자

Webpack과 Vite 학습 후기 및 느낀점

프론트엔드 개발에서 번들러는 필수적인 도구이며, Webpack과 Vite는 각각 다른 접근 방식으로 프로젝트를 빌드하고 최적화한다. 이번 학습을 통해 Webpack과 Vite의 차이점, 강점, 그리고 적절한 활용 방안에 대해 깊이 이해할 수 있었다.

Webpack 학습 후기

Webpack은 강력한 설정과 다양한 플러그인을 제공하는 범용 번들러다. Webpack을 처음 접했을 때는 설정 파일이 복잡하게 느껴졌지만, 구조를 이해하니 강력한 커스터마이징이 가능하다는 점이 인상적이었다. 특히 코드 스플리팅, 트리 쉐이킹, 캐싱 전략 같은 고급 기능을 적용해 보면서 성능 최적화의 중요성을 체감했다. 하지만 개발 서버가 상대적으로 느리고, HMR(Hot Module Replacement)이 빠르게 적용되지 않는 경우가 있어 개발 경험이 다소 답답했다.

Vite 학습 후기

Vite는 Webpack과 달리 ES 모듈을 기반으로 빠른 개발 환경을 제공하는 도구다. Webpack을 사용하다가 Vite를 접했을 때 가장 크게 와닿았던 부분은 빌드 속도와 개발 서버의 응답 속도였다. ES 모듈을 활용한 네이티브 브라우저 기능 덕분에 서버가 거의 즉각적으로 반응했고, HMR이 매우 빠르게 적용되었다. Vite는 기본적으로 설정이 간결하고 직관적이어서 Webpack보다 학습 곡선이 완만했다. 단, 플러그인 시스템이 Webpack만큼 강력하지 않아 커스텀 빌드 설정이 필요할 때는 제한이 있다는 점도 발견했다.

느낀 점 및 활용 방향

Webpack은 대규모 프로젝트나 세밀한 빌드 최적화가 필요한 경우 유용하지만, 설정이 복잡하고 개발 서버 속도가 느리다는 단점이 있다. 반면 Vite는 빠른 개발 환경을 제공하므로, Next.js 또는 React 프로젝트에서 개발 속도를 중요하게 여긴다면 좋은 선택이 될 수 있다.

결국, 프로젝트 규모와 요구사항에 따라 적절한 도구를 선택하는 것이 중요하며, 두 도구를 모두 학습함으로써 번들링과 최적화의 원리를 깊이 이해할 수 있었다.

필수 URL https://bit.ly/4gL1f1o

#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완