돌핀코딩

팀 프로젝트에서 코드 푸시만으로 자동 배포되고, 배포 결과가 슬랙 채널로 바로 알림이 온다면 얼마나 효율적일까?이번 글에서는 GitHub Actions를 활용해 브랜치별 자동 배포는 물론, Slack Webhook을 연동해 배포 성공 또는 실패 여부를 팀에게 실시간으로 공유하는 방법까지 정리해보았다.목적develop, main 브랜치에 푸시되면 자동으로 서버에 배포배포 성공 또는 실패 여부를 Slack으로 알림Webhook URL은 GitHub Secrets에 안전하게 관리Slack 설정하기 – Webhook URL 발급 방법GitHub Actions가 Slack으로 메시지를 보내려면, Slack Webhook URL을 먼저 발급받아야 한다.1. Slack에 Webhook 앱 설치슬랙 웹에서 Incomi..

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

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

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