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

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

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

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

1. 공부 시작 시각

2. 공부 종료 시각

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

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

5. 학습 인증샷 1장

6. 학습 후기 700자

AJAX를 이용한 프래그먼트 통합 기법 학습 후기

이번 학습을 통해 AJAX를 활용한 프래그먼트 통합 기법에 대해 깊이 있게 이해할 수 있었다. 기존에는 전체 페이지를 새로고침하는 방식으로 데이터를 갱신하는 방법을 주로 사용했지만, AJAX를 활용하면 특정 부분만 동적으로 변경할 수 있어 사용자 경험(UX)을 크게 향상시킬 수 있다는 점을 다시금 깨달았다. 특히, 서버에서 HTML 조각을 반환하고 이를 클라이언트에서 삽입하는 방식은 단순하면서도 효과적인 방법이며, 적절히 활용하면 프론트엔드와 백엔드의 개발 부담을 줄일 수 있다.

이번 실습에서 가장 인상적이었던 점은 fetch API를 사용하여 서버에서 HTML 프래그먼트를 가져오는 과정이었다. 보통 RESTful API에서는 JSON 데이터를 주고받는 것이 일반적이지만, 이번 방식은 서버에서 HTML 조각을 직접 반환하기 때문에 클라이언트에서 추가적인 렌더링 작업이 필요하지 않다. 덕분에 클라이언트 측에서 데이터를 가공하는 부담이 줄어들고, 마크업을 서버에서 직접 생성하므로 보다 일관된 UI를 유지할 수 있다는 장점이 있다. 이러한 방식은 전통적인 서버 렌더링 방식과 SPA의 장점을 결합한 형태라고 볼 수 있으며, 레거시 프로젝트를 개선할 때도 유용하게 활용할 수 있을 것으로 보인다.

또한, 이번 학습을 진행하면서 AJAX를 활용한 프래그먼트 로딩이 가지는 몇 가지 단점도 발견할 수 있었다. 예를 들어, 동적으로 삽입된 HTML 내의 스크립트는 기본적으로 실행되지 않기 때문에 버튼과 같은 요소에 이벤트 리스너를 다시 등록해야 한다. 이를 해결하기 위해 addEventListener를 동적으로 적용하는 방식이 필요했으며, 이러한 부분을 사전에 고려하지 않으면 예상치 못한 버그가 발생할 수 있다는 점도 배울 수 있었다.

결론적으로, AJAX 기반의 프래그먼트 통합 기법은 비교적 간단하면서도 웹 애플리케이션의 성능을 개선할 수 있는 좋은 방법이라는 것을 알게 되었다. 특히, 부분적인 페이지 갱신이 필요한 대규모 프로젝트나, SPA로 전환하기 어려운 기존 웹사이트를 개선하는 데 매우 유용할 것으로 보인다. 이번 학습을 통해 실무에서도 활용할 수 있는 유용한 기술을 익힐 수 있어 의미 있는 경험이었고, 앞으로 다양한 프로젝트에서 이 기법을 응용해보고 싶다.

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

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