nika-blog

안녕하세요.IT 연합 동아리 디프만 17기 4팀 Web 파트장 이성현입니다. 저희 팀은 이번 디프만 활동을 통해 배변 기록을 기반으로 장 건강을 관리하는 서비스 kkruk(꾸룩)을 개발했습니다.(iOS 앱 출시 완료 🎉)저는 이번 프로젝트에서 React Native 기반 App 파트와 Next.js 기반 Web 파트를 모두 담당하며 개발을 진행했으며, 파트장으로서 팀 운영과 기술 방향 설정도 함께 맡았습니다. 5년 차 개발자로서, 대부분 취업을 준비 중인 팀원들과 함께 프로젝트를 진행하면서 어떻게 하면 실무에 바로 도움이 되는 경험을 줄 수 있을까?를 가장 중요한 목표로 두었습니다.그중에서도 특별히 강조했던 부분이 코드 리뷰 문화와 PR 분할 전략입니다.이 두 가지는 신입·경력과 관계없이 많은 개발자들..

✨ 배경과 고민작년부터 저희 팀에서는 기존 CodePush 대체제를 본격적으로 검토하기 시작했습니다. 기존 CodePush는 Microsoft App Center의 일환으로 안정적으로 활용되어 왔지만, 다음과 같은 이유로 대체제가 필요하다는 판단을 내렸습니다:Microsoft가 App Center CodePush의 장기적인 지원을 중단할 가능성을 명시함CodePush의 New Architecture 미지원 문제로 인해 React Native 0.76 이상에서는 호환성 문제가 발생자체 유지보수를 고려한 self-hosting(code-push-server)은 관리 포인트가 많고 인프라 종속성이 높음metro 외의 번들러를 사용할 경우 CodePush와 충돌 가능성 존재이러한 이유로 CodePush 유지 비..

이 글은 React Native 기반 앱에서 스크롤, 제스처, UI 업데이트를 최적화하기 위해 CollapsibleTabView를 어떻게 개선했는지를 설명합니다. 특히 Reanimated를 활용한 UI Thread 기반 렌더링 구조와 그 구현 방식을 자세히 다룹니다.🧭 왜 이 구조가 필요했을까?Native 앱에서 성능이 중요한 이유Native 환경에서는 항상 UI Thread 관리가 핵심입니다.UI Thread가 막히면 ANR 또는 App Freeze 발생Android: AsyncTask → Coroutines, iOS: GCD → Swift Concurrency로 발전그런데… React Native는 다르다?React Native는 대부분의 UI 처리를 Native 엔진에 위임합니다.그래서 일반적으로..

최근 Xcode를 16.3으로 업데이트했다가 iOS 앱 빌드가 실패하는 이슈를 겪었습니다. 같은 문제를 겪는 분들께 도움이 될까 해서 정리해봅니다.🧨 발생한 이슈Xcode 16.3부터 std::char_traits 템플릿이 기본 제공되지 않으면서, 일부 앱에서 컴파일 에러가 발생합니다.에러 메시지 예시:use of undeclared identifier 'std::char_traits' 이로 인해 React Native 또는 Expo 기반 프로젝트에서는 정상적으로 iOS 앱을 빌드할 수 없게 되는 문제가 생겼습니다.🔍 원인Apple의 Xcode 16.3 릴리즈 노트에 따르면, std::char_traits 기본 템플릿이 제거되었다고 명시되어 있습니다.이는 Apple이 C++ 표준에 맞게 std::ch..

개발하다보면, 옵션널 체이닝을 사용할 일이 종종 생깁니다. 어느날, 함께 일하는 시니어 개발자분이 아래와 같은 질문을 했습니다.아래 코드 line 10 에서 왜 lint 에러가 안 생기나요? type Price = { localizedPrice: number;};type Subscription = { data: Price;};const targetPlan: Subscription | null = { data: { localizedPrice: 100 } };const price = targetPlan?.data.localizedPrice; // 100 저는 자연스럽게 필수값 뒤에 옵션널 체인닝을 사용하지 않고 있었는데, 이 질문을 통해 누군가에게는 이 부분이 물음표일 수 있겠다고 생각했습니다. 대표적으..

React Native에서 In-App Purchase 구현하기목차In-App Purchase란?React Native에서 In-App Purchase 구현 방법react-native-iap 설치2. iOS 및 Android 설정iOS 설정Android 설정3. 인앱 구매 기능 구현3.1 인앱 상품 목록 가져오기3.2 인앱 구매 처리3.3 구매 복원In-App Purchase를 사용하는 이유관련 문서In-App Purchase란? In-App Purchase(IAP, 인앱 구매)는 모바일 앱 내에서 추가 콘텐츠나 프리미엄 기능을 구매할 수 있도록 지원하는 기능입니다. 이를 통해 앱 내 결제를 통해 수익을 창출할 수 있습니다. 다양한 앱에서 해당 기능을 접할 수 있는데요, 첨부한 사진과 같은 구매 방식입니..

React Native 기준 In-App Purchase 구독 프로모션 구현나는 In-App Purchase(IAP) 기능을 제공하는 서비스의 개발자이다.우리 서비스는 구독, 일회성 결제 등 다양한 수익 모델을 갖추고 있으며, 오늘은 그중 **구독(subscription)**에 대해 이야기하려고 한다.🔹 In-App Purchase의 구독(Subscription)이란?구독(subscription)은 쉽게 말해 유튜브 프리미엄과 같은 모델을 생각하면 된다.IAP는 Apple App Store, Android Play Store의 각 정책을 따라야 하며, 플랫폼별 구현 방식도 차이가 있다.🔹 구독 프로모션(Promotion) 구현 방법📌 Android (Google Play Store) 기준Androi..

오늘은 web 서비스 속도 개선을 위해 실무에서 어떤일들을 할 수 있는지 경험에 기반해서 작성해보고자 합니다.  1. 사이즈가 큰 이미지 체크하기웹 서비스 속도를 가장 쉽게 개선할 수 있는 방법 중 하나는 이미지 최적화입니다.브라우저의 캐시를 무효화하기 위해 강제 새로고침을 한 후, 개발자 도구의 네트워크 탭에서 img 필터를 적용하고 크기(size) 기준 내림차순 정렬을 해보세요.만약 1MB 이상의 이미지가 있다면,해당 이미지가 정말 필요한지용량을 줄일 수 있는지확인해보는 것이 좋습니다.실제 프로젝트에서도 2MB 이상의 이미지를 발견하고 최적화한 경험이 있습니다.이미지 압축이 필요하다면, 아래 사이트를 활용해보세요.👉 TinyPNG TinyPNG – Compress AVIF, WebP, PNG and..

자격요건: 대학교 4학년 재학/휴학 (증명서 떼면 4학년이라고 표기되어야 함),정처기 필기 합격 후 2년 이내(합격자 발표일 기준)필기 합격 후 면제 기간 확인 방법: https://hyunchang88.tistory.com/340#google_vignette 실기시험안내 -> 필기시험면제기간 메뉴로 들어가서 시험면제 탭을 눌러보면 위와 같이 2년의 유효기간을 확인 할 수 있습니다. http://www.q-net.or.kr/myp007.do?id=myp00701&gSite=" data-og-host="hyunchang88.tistory.com" data-og-source-url="https://hyunchang88.tistory.com/340#google_vignette" data-og-url="http..

*react-native 기준으로 작성한 코드입니다.  나는 글로벌 서비스를 담당하는 개발자이다. 글로벌 서비스를 개발하면서 마주할 수 있는 문제는 여러가지가 있으나 오늘은 그 중 currency 이슈에 대해 말해보려고 한다.  각 나라 사람들은 다양한 통화를 사용한다. 한국은 원화를, 일본은 엔화를, 미국은 USD를, 유럽은 유로를, 영국은 파운드를 사용한다. 그 밖에 다양한 통화는 모두 QA 하기 벅찰 정도이다.  그렇다면 다양한 통화에 대해 어떻게 대응해야 할까?먼저 현재 유저가 어떤 통화를 사용하고 있는지에 대한 정보가 필요하다. 회원가입 때 요청할 수도 있고, 결제할 때 확인할 수도 있을 것이다. 오늘은 in app purchase(약어: iap)를 사용한 케이스에 대해 말해보려고 한다.  in..