Next.js에서 MSW 도입하기... 그런데 dynamic import를 곁들인

Next.js의 이중환경Next.js에서 작성된 코드는 서버(Node.js)와 브라우저라는 두 가지 다른 환경에서 실행됩니다. SSR(또는 SSG)단계에서는 Node.js 환경에서 코드가 실행되고, CSR단계에서는 브라우저 환경에서 코드가 실행됩니다. 따라서, alert()나 localStorage같은 브라우저 전용 API는 브라우저 환경에서만, fs같은 Node.js 전용 API는 서버환경에서만 호출 가능합니다.MSWMock Service Worker는 자바스크립트 API 모킹 라이브러리입니다. 모킹 API를 이용하면 API가 준비되지 않은 상태에서도 프론트 엔드 개발이 가능하기 때문에 실제 개발에서 유용합니다. 다른 모킹 라이브러리리들은 주로 코드 레벨에서 요청을 가로채는 반면 MSW는 브라우저 전용..

• format_list_bulleted 트러블슈팅
• · 2025. 3. 10.

코드분할로 초기로딩속도 개선하기

문제상황전월세 실거래가 공공데이터를 활용한 지도 서비스(대방)은 SPA(Single Page Application)로 설계되었습니다. SPA란 하나의 HTML 페이지로 실행되는 웹 애플리케이션으로, 최초 페이지 로딩 후 JavaScript를 통해 동적으로 페이지 내용을 갱신합니다. 따라서, 동적이고 사용자와 상호작용이 많은 앱을 구현하는데 적절하지만, 처음 접속시 모든 JavaScript를 파일을 다운로드 해야함으로 첫 페이지 로딩이 오래걸린다는 단점이 있습니다. 특히 지도 서비스인 대방은 외부 지도API를 불러오는데 추가적인 시간이 소요되므로, 초기 로딩을 단축하여 웹 성능(Web Performance)를 향상시키는 것이 중요했습니다.번들링 (Bundling)우리가 코드를 import 문법이나 requ..

• format_list_bulleted 회고
• · 2025. 3. 9.