목록문제 해결 (5)

작은프론트이야기

React 프로젝트 보안 강화 난독화 및 소스코드 비노출 처리

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

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

React Native로 하이브리드 앱을 개발하면서 WebView를 활용하는 경우가 많다.하지만 iOS 환경에서 특정 페이지를 반복적으로 접근하거나 무거운 리소스를 로드할 때,예상치 못한 흰 화면(백화) 현상이 발생했다. 에러 로그를 확인해보니 아래와 같은 메시지가 찍혔다.Webview Process TerminatedonContentProcessDidTerminate triggered 이번 글에서는 이 문제의 원인과 해결 과정을 정리 해볼까한다.문제 상황환경React Native WebView 사용주요 대상: iOS 디바이스 (Android에서는 발생하지 않음)현상특정 페이지(WebView로 로드된 지도 화면 등)를 반복 접근갑자기 화면이 흰색으로 멈춤, 백화 현상 발생 (렌더링 중단)콘솔에 Proce..
문제 해결 2025. 4. 24. 17:13
Gradle 8, SDK 34 대응을 위한 React Native 버전 업그레이드

최근 Google Play 콘솔을 통해 앱을 제출하는 과정에서 다음과 같은 에러 메시지를 마주했다.Your app currently targets API level 33 and must target at least API level 34 to ensure it is built on the latest APIs optimized for security and performance. 이는 Google이 2024년 8월 31일부터 시행하는 새로운 정책에 따른 것으로, 모든 신규 앱과 업데이트가 Android 14(API 34)를 대상으로 빌드되어야 한다는 의미였다. 기존에는 targetSdkVersion 33으로 문제없이 앱을 빌드하고 배포할 수 있었지만,이제는 targetSdkVersion을 34 이상으로 ..
문제 해결 2025. 4. 21. 17:35
이전 Prev 1 2 Next 다음