하이퍼커넥트

RSS

게시글: 112
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
Azar iOS Team이 잊힌 코드를 추모 하는 법
Azar iOS 팀은 프로젝트에서 사용되지 않는 '잊힌 코드'로 인해 발생하는 유지보수 어려움, 성능 저하, 생산성 하락 등의 문제를 해결하기 위해 Periphery 라이브러리를 도입했습니다. Periphery는 Swift 프로젝트에서 사용되지 않는 코드를 탐지하고 제거할 수 있도록 개발자에게 알려주는 도구입니다. 글에서는 Periphery의 설치 방법(Homebrew, Mint, CocoaPods)과 초기 설정 과정(`periphery scan --setup`)에 대해 설명합니다. 특히, 분석 대상, 빌드 시 필요한 scheme, Objective-C 및 public 접근 제한자 사용 여부, 설정 저장 여부 등 질문에 대한 답변을 통해 `.periphery.yml` 파일이 생성되는 과정을 보여줍니다. 또한, `--report-exclude` 옵션을 사용하여 특정 파일들을 분석 결과에서 제외하는 방법도 소개하며, 잊힌 코드를 효과적으로 관리하고 코드 품질을 향상시키려는 Azar iOS 팀의 노력을 보여줍니다.
iOSAzarPeriphery
하이퍼커넥트·2023년 12월 15일
Frontend
Junior 개발자의 글로벌 서비스 경험기 1탄
하이퍼커넥트 아자르 Android 팀의 주니어 개발자들이 글로벌 서비스를 개발하며 겪었던 경험을 공유하는 글입니다. 특히, 여러 언어에서 발생하는 문자열 길이의 차이로 인해 발생하는 UI 문제를 다룹니다. 포르투갈어 환경에서 토스트 메시지가 길어 말줄임 처리되는 문제를 예시로 들며, Android 12의 토스트 2줄 제한 정책과 이로 인해 중요한 정보가 생략되는 상황을 설명합니다. 문제 해결 방안으로 문자열 줄이기, 방치하기, 스낵바로 노출하기를 제시하며, 결국 구글에서 권장하는 스낵바로 메시지를 노출하는 방식을 선택했음을 밝힙니다. 이 경험을 통해 글로벌 서비스 개발 시 언어별 문자열 길이 대응의 중요성을 강조합니다.
글로벌 서비스Android문자열 길이
하이퍼커넥트·2022년 7월 6일
Frontend
제목은 React Native 도입이라고 하겠습니다. 근데 이제 Hakuna 앱에 곁들여진
Hakuna 앱의 일부 화면을 Webview에서 React Native로 전환하는 PoC(Proof of Concept) 경험을 공유합니다. 기존 Webview 방식은 네트워크를 거쳐 로딩되어 로딩 시간이 발생했지만, React Native와 CodePush를 활용하면 번들 갱신 시점을 제외하고는 별도의 로딩 없이 화면을 제공할 수 있어 사용성 개선이 가능합니다. 또한, React Native는 JavaScript 코드를 네이티브 코드로 렌더링하여 Webview보다 더 네이티브에 가까운 사용자 경험을 제공합니다. 이 글에서는 이러한 전환 배경과 과정에서의 고민들을 다룹니다.
React NativeWebviewCodePush
하이퍼커넥트·2022년 3월 2일
Frontend
React Native에서 iOS 빌드 퍼포먼스 최적화
React Native로 iOS 앱을 개발할 때 발생하는 긴 빌드 시간을 개선하기 위한 경험을 공유합니다. 기존에는 iOS 빌드 시 cocoapods 의존성 매니저의 캐시를 활용하지 않아 빌드 시간이 Android에 비해 4.5배 이상 소요되는 문제가 있었습니다. 이를 해결하기 위해 fastlane의 gym 메소드를 사용하여 Xcode의 빌드 캐시 경로(derived_data_path)를 명시적으로 지정하고, pod 캐시를 저장 및 재활용하는 방식을 도입했습니다. 이를 통해 iOS 빌드 시간을 획기적으로 단축하여 개발 생산성을 향상시킬 수 있었습니다.
React NativeiOS빌드 최적화
하이퍼커넥트·2022년 1월 17일
Frontend
CRA(create-react-app) + TypeScript 환경 빌드 퍼포먼스 최적화
이 글은 Create React App(CRA)과 TypeScript 환경에서 발생하는 느린 빌드 속도 문제를 해결하고 배포 시간을 8배 단축한 경험을 공유합니다. 초기에는 소스맵 생성 및 Sentry 연결 제거, Terser Plugin의 병렬 프로세스 수 증량, 빌드 머신 사양 업그레이드 등의 방법을 시도했지만 큰 효과를 보지 못했습니다. 근본적인 해결을 위해 CRA의 TypeScript 빌드 프로세스를 분석하고, 타입 검사 시간을 단축하기 위한 `fork-ts-checker-webpack-plugin` 설정 최적화 및 Babel 설정을 통한 타입 정보 제거 등의 방법을 적용하여 빌드 퍼포먼스를 크게 향상시켰습니다. 이를 통해 개발팀의 빠른 반복 작업이라는 목표 달성에 기여했습니다.
CRATypeScript빌드 최적화
하이퍼커넥트·2020년 12월 14일
Frontend
WebRTC Library 다루기
이 글은 웹 브라우저 상에서 실시간 커뮤니케이션을 가능하게 하는 WebRTC API와 그 구현체인 libwebrtc 라이브러리를 모바일 환경에서 사용하는 방법에 대해 다룹니다. Google Chrome에 포함된 libwebrtc는 C++ 기반 API와 모바일(Android/iOS) API를 제공하며, 6주 주기 Chrome 릴리즈에 맞춰 버전 관리됩니다. Hyperconnect의 WebRTC Engine 팀은 안정성을 위해 libwebrtc 릴리즈 브랜치를 포크하여 사용하지만, 최신 업데이트 부재라는 단점을 극복하기 위해 유용한 수정사항을 백포트하는 과정을 소개합니다. 이를 위해 chromium depot_tools 설치, WebRTC 소스 코드 다운로드 및 컴파일, 모바일 라이브러리 배포 가능한 환경 구축 방법을 설명하며, 특히 안정된 릴리즈 브랜치로 이동하여 작업하는 Git 명령어와 브랜치 이름 변경에 대한 정보를 제공합니다.
WebRTClibwebrtc모바일 라이브러리
하이퍼커넥트·2020년 8월 12일
Frontend
안드로이드에 React Native 임베딩 후기
이 글은 안드로이드 네이티브 앱에 React Native를 임베딩한 경험을 공유합니다. 잦은 디자인 변경과 A/B 테스트 요구사항을 충족하기 위해 웹뷰 대신 React Native 도입을 고려하게 되었습니다. 기존 앱에 React Native를 통합하는 것이 흔한 경우는 아니지만, 공식 문서의 'Integration with Existing Apps' 가이드를 참고하여 가능성을 확인했습니다. 다만, React Native 프로젝트를 위한 별도 폴더 생성 및 기존 프로젝트 이동 요구사항은 받아들이기 어려워, 매뉴얼을 그대로 따르지 않고 행간을 읽으며 적용하는 과정에서 어려움을 겪었습니다. React Native 라이브러리를 의존성에 추가하는 과정부터 시작해야 했으며, 이는 기존 네이티브 프로젝트에 새로운 기술 스택을 통합하는 복잡성을 보여줍니다.
React NativeAndroid임베딩
하이퍼커넥트·2020년 7월 7일
Frontend
앱 내 Webview 개발기
이 글은 Azar 앱 내 Webview 개발 경험을 공유하며, Django와 React를 활용한 초기 아키텍처부터 개선 과정을 다룹니다. 초기에는 Django 템플릿에 React 번들을 삽입하는 방식으로 개발했으나, Hot Module Reload(HMR)의 불편함과 캐싱 문제에 직면했습니다. 특히, Django 템플릿 내에서 Webpack의 파일 해시를 직접 활용하기 어려워 Django의 ManifestFilesMixin과 WhiteNoise 미들웨어를 사용하여 캐싱 전략을 개선했습니다. 이 과정에서 겪은 기술적 어려움과 해결 방안을 통해 Webview 개발의 효율성과 유지보수성을 높이는 방법을 모색합니다.
WebViewDjangoReact
하이퍼커넥트·2019년 10월 24일
Frontend
JavaScript Bundle Size 최적화 (2/2)
이 글은 React와 Node.js 기반의 웹뷰 환경에서 JavaScript 번들 크기를 최적화하여 성능을 개선하는 두 번째 방법과 그 결과를 공유합니다. 이전 포스팅에서 소개된 국제화 라이브러리 변경 및 번역 파일 로딩 방식 개선에 이어, 이번에는 정적 파일 로딩 방식 변경을 통해 번들 크기를 추가적으로 줄이는 방법을 다룹니다. 구체적인 최적화 기법과 함께 실제 성능 측정 결과를 제시하여, 개발자들이 웹뷰 애플리케이션의 로딩 속도와 사용자 경험을 향상시키는 데 실질적인 도움을 줄 수 있는 내용을 담고 있습니다.
JavaScriptBundle SizeReact
하이퍼커넥트·2019년 8월 13일
Frontend
JavaScript Bundle Size 최적화 (1/2)
본 포스팅은 React와 Next.js로 구성된 웹뷰의 JavaScript Bundle Size를 최적화하여 성능을 개선하는 경험을 공유합니다. Azar 앱의 일부 화면은 동적 대응을 위해 웹뷰로 구현되어 있으며, 이 웹뷰의 성능 개선이 주요 KPI로 설정되었습니다. 최적화 전 번들 분석 결과, 공통 JS 모듈인 commons.{hash}.js에서 static assets, 번역 파일, react-intl 패키지가 큰 비중을 차지하는 것을 확인했습니다. 이를 해결하기 위해 첫 번째 단계로 국제화 라이브러리인 react-intl을 react-i18next로 변경하고, 번역 파일 불러오는 방식을 개선하는 방법을 다룹니다. 다음 포스팅에서는 static 파일 불러오는 방식 변경과 함께 본격적인 성능 측정 결과를 공유할 예정입니다.
JavaScriptBundle SizeReact
하이퍼커넥트·2019년 7월 28일
Frontend
날짜 변환, 과연 그리 간단할까?
이 글은 안드로이드 개발에서 자주 사용되는 SimpleDateFormat 클래스의 'lenient' (관대함) 특성에 대해 다룹니다. SimpleDateFormat은 기본적으로 입력된 날짜 형식이 정확하지 않더라도 유효한 날짜로 해석하려는 경향이 있습니다. 예를 들어, '2017년 13월 32일'과 같이 존재하지 않는 날짜를 입력해도 오류를 발생시키지 않고 유효한 날짜로 변환합니다. 이는 개발자가 의도하지 않은 동작을 유발할 수 있으며, 날짜 검증 로직을 더욱 견고하게 만들어야 할 필요성을 강조합니다. Strict 모드를 사용하기 위해서는 `setLenient(false)`를 호출하여 날짜 파싱 규칙을 엄격하게 적용해야 함을 설명합니다.
SimpleDateFormat날짜 변환안드로이드
하이퍼커넥트·2018년 3월 26일