[JS] 페이지 언로드 시에도 API를 안정적으로 호출하기

문제 상황 (beforeunload/unload 한계)새로고침을 하거나 페이지를 이탈할 때 API를 호출해야하는 상황이 생겼다. 이 때, 처음 떠오른 이벤트는 컴포넌트 unmount와 beforeunload 이벤트이다. 전자는 리액트나 Vue 등의 UI 라이브러리와 프레임워크에서 제공하는 이벤트이고, 후자는 브라우저에서 제공하는 Web API이다.여기서 컴포넌트 unmount 이벤트를 선택하는 것은 적합하지 않다. 컴포넌트 unmount는 SPA 내부 네비게이션에 의한 라우터 이동에서는 동작하지만, 새로고침/페이지 이탈(탭 /브라우저 종료)시 브라우저가 React/Vue 앱을 강제 종료하므로 실행되지 않는다. 따라서 브라우저가 제공하는 beforunload 이벤트를 써야한다. 아래과 같이 이벤트를 등록..

• format_list_bulleted JS
• · 2026. 2. 7.

[React] Suspense에서 발생하는 Waterfall 문제 해결

배경회사에서 2.0 프로젝트를 위해 PoC 업무를 담당하시던 시니어 분이 휴직하시면서 인턴인 나에게도 PoC(Proof of Concept) 보조 업무가 들어왔다. 첫번째 업무는 바로 Suspense에서 발생하는 네트워크 Waterfall을 해결하는 방법을 찾는 것이다. 지금부터 서술하는 내용은 리액트 19버전, tanstack query 5버전 기준이다. Suspense의 개념Suspense의 개념부터 간략하게 살펴보면, 자식 요소를 로드하기 전까지 화면에 대체 UI를 보여주는 렌더링 경계(boundary)이다. }> 만약 Suspense를 사용하지 않는다면 다음과 같이 구현될 것이다.const { data, isLoading } = useQuery(...)if (isLoading) return ..

• format_list_bulleted React
• · 2025. 12. 21.

[트러블 슈팅] Storybook에서 @svgr/webpack 사용하기

문제 상황기존 프로젝트의 디자인 시스템 컴포넌트들을 스토리북으로 문서화하고 있었다.기존 컴포넌트에서 @svgr/webpack을 사용하여 SVG를 리액트 컴포넌트처럼 쓰고 있었다. import ClosedEye from '../../assets/closed-eye.svg';처음에 컴포넌트를 그대로 TextField.stories.ts로 만들어서 실행했더니 svg가 로드되지 않았다. 따라서 storybook의 main.ts에도 @svgr/webpack 설정을 추가해주었다.config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'],});하지만 여전히 오류가 발생하고 있었다.태그 이름이 부적절하다는 것이다. 자세히 보니 로 쓰고 있었는데 OpenEy..

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

[CS] 리액트 프로젝트 배포하기(with AWS CloudFront + S3)

보통의 사이드 프로젝트 수준에서 프론트엔드 배포를 하게되면 vercel이나 netlify, 간혹 firebase를 사용해서 배포했을 것이다. 왜냐하면 이런 호스팅 서비스들은 Git 저장소를 연동하면 매우 간단한 설정만으로 프레임워크에 맞게 프로젝트를 알아서 배포해주고, CI/CD 파이프라인도 알아서 구축해주기 때문이다. 따라서 초보자들도 정말 쉽게 웹 사이트를 호스팅할 수 있다! 하지만 대부분의 실제 기업 사이트들은 AWS로 배포된다. AWS는 수동으로 설정해야할게 많고 복잡하지만, 그만큼 보안, 트래픽 처리, 캐시, 로드밸런싱 같은 인프라를 세밀하게 제어할 수 있기 때문이다. 또한 트래픽이 많아질수록 비용을 효율적으로 관리할 수 있는 구조이기 때문에 기업 환경에 잘 맞는다. 게다가 가장 큰 클라우드 ..

• format_list_bulleted CS
• · 2025. 5. 18.

[JS] CommonJS와 ESM을 모두 지원하는 라이브러리 만들기 (Feat. Vite)

모듈 시스템의 역사JavaScript 모듈 시스템은 크게 CommonJS와 ES Module(ESM)로 나뉩니다. 이 중 먼저 등장한 것은 CommonJS입니다. CommonJS원래 JavaScript는 모듈 시스템을 지원하지 않았습니다. 여러개의 script 태그를 이용하여 라이브러리들을 가져온다고 하더라도 모두 하나의 전역에서 객체를 정의하는 방식이었습니다. 이 방식은 당연히 변수명이 겹치는 등 많은 문제점이 있었습니다. 그래서 등장한 것이 CommonJS 모듈 시스템입니다. CommonJS는 다음과 같은 방식으로 모듈을 불러오고 내보냅니다.// add.jsmodule.exports.add = (x, y) => x + y;// index.jsconst { add } = require('./add')..

• format_list_bulleted JS
• · 2025. 3. 28.

[수상 후기] 2024 공개 SW 개발자 대회 후기

대회가 끝난 지는 좀 지났지만 이제서야 후기를 써본다.팀원 구성동아리 디스코드의 팀원 모집 게시판에 올라온 글을 보고 지원하게 되었다. 프로젝트 기획은 이미 되어있는 상태였고, BE와 디자이너도 모두 기존 팀원이 있고 FE만 새로 모집하고 있었다.일단 "청각 장애인 대학생들을 위한 실시간 음성인식 및 전공과목 문제생성 대학 강의 보조 서비스" 라는 기획이 마음에 들었다. 또 리액트를 사용하는 FE가 필요하다고 해서 나에게 딱 맞다고 생각해서 팀에 합류했다. 그리고 참가 신청이 하루밖에 남지 않은 상황에서 FE를 한명 더 모집했고, 그 분은 학생이 아니었다. 따라서 학생부로 지원하지 못하고 일반부로 지원하게 되었고, 프로젝트의 주제에 맞게 지정과제의 사회문제형의 교육 파트로 참가했다. 최종적으로 팀원은 B..

• format_list_bulleted 후기
• · 2025. 3. 3.