작은프론트이야기

최근 기존에 개발된 React 기반 프로젝트를 유지보수하면서, 중요한 보안 이슈 하나를 발견했었다. 바로 브라우저 개발자 도구로 소스코드가 거의 원본 수준으로 노출된다는 점이었다. 이 글은 해당 문제를 해결하기 위해 난독화를 도입한 과정을 공유하기 위해 작성했다.문제 인식처음 프로젝트를 인수받았을 때는 기능적으로 큰 문제가 없었다. 하지만 개발자 도구에서 Sources 탭을 통해 번들된 JavaScript 파일을 확인해보니함수명, 변수명, GraphQL 요청 구조가 모두 그대로 노출됐었다로그인, 인증, 데이터 처리 흐름까지 분석이 가능한 수준이었다즉, 누구나 손쉽게 주요 로직을 추적하고 분석할 수 있는 위험한 구조였다는 점을 인지했었다.난독화 전략 수립기존 아키텍처를 해치지 않으면서 난독화를 적용하고자 ..

프론트엔드 프로젝트에서 차량 위치를 표시하는 기능을 구현하던 중, 사업장마다 수천 대의 차량 정보를 Kakao Map에 마커로 표시해야 했다. 초반에는 react-kakao-maps-sdk의 를 그대로 사용했으나, 마커가 많아질수록 다음과 같은 문제가 발생했다.2천 개 이상의 마커를 렌더링할 경우 페이지 전체가 멈추거나 느려지는 현상지도 줌 조작 후 사업장 변경 시 무한 로딩 현상 또는 이미지 요청 지연다른 페이지로 이동 시에도 대기 중이던 마커 이미지 요청이 남아있어 성능 저하원인 분석기존 구현은 다음과 같았다. {carLocationList.map((item) => ( ))} 즉, 마커 하나당 컴포넌트가 생성되며 React가 이를 모두 렌더링하게 했다. 이는 렌더링 성능과 가비지 컬렉션 ..