더핑크퐁컴퍼니

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
Next.js App Router에서 prefetchQuery와 Suspense로 뚜루루뚜루 데이터 스트리밍하기
이 글은 Next.js App Router 환경에서 React Query의 prefetchQuery와 Suspense를 활용하여 데이터 스트리밍을 구현하는 경험을 공유합니다. 기존 Pages Router에서 App Router로 마이그레이션하는 과정에서 Server Components, React 18의 Concurrent Features, 개선된 개발 경험을 목표로 했으나, SSR과 클라이언트 데이터 로딩이 겹치면서 발생하는 UX 문제를 마주했습니다. React Query v5.40.0의 변화를 바탕으로 세 가지 접근 방식을 실험하고, v5 스트리밍 적용 및 성능 비교 결과를 제시합니다. 이를 통해 데이터 로딩 및 렌더링 최적화에 대한 인사이트를 얻을 수 있습니다.
Next.jsApp RouterReact Query
더핑크퐁컴퍼니·2025년 9월 26일
Architecture
핑크퐁의 통합 데이터 환경 구축기 (feat. Snowflake)
더핑크퐁컴퍼니는 핑크퐁, 아기상어 IP를 활용한 다양한 플랫폼에서 발생하는 데이터를 통합하고 효율적으로 분석하기 위해 Snowflake를 중심으로 한 새로운 데이터 환경을 구축했습니다. 기존에는 Data Silo 문제로 인해 데이터 활용에 비효율이 많았으나, 이를 해결하기 위해 IDC 기반의 자체 관리 로그 시스템을 클라우드 기반으로 전환하고 AWS Kinesis, Data Firehose, Lambda 등을 활용하여 로그 수집 파이프라인을 개선했습니다. 초기에는 Elasticsearch와 Kibana를 사용했으나 한계가 있었고, Google BigQuery를 고려하기도 했지만 최종적으로 Snowflake를 메인 데이터 웨어하우스로 도입했습니다. 이 과정을 통해 데이터 사일로를 극복하고 중앙화된 데이터 플랫폼을 구축하여 데이터 분석 및 활용의 효율성을 크게 높였습니다.
Snowflake데이터 아키텍처Data Silo
더핑크퐁컴퍼니·2023년 9월 6일
Frontend
Retool을 활용한 로그 데이터 시각화
이 글은 The Pinkfong Company의 프론트엔드 개발자가 Retool을 활용하여 로그 데이터를 시각화하는 과정을 공유합니다. 기존에는 Elastic Search와 Kibana를 사용했으나, Snowflake로 로그 데이터가 이관되면서 통합된 시각화 도구가 필요해졌습니다. Tableau와 Retool을 비교 검토한 결과, Retool이 빠른 개발 속도와 데이터 연결성, 커스텀 기능 측면에서 장점을 보여 로그 시각화 도입에 효과적인 도구로 선택되었습니다. 글에서는 Retool을 이용한 로그 시각화 도입 과정에서 얻은 지식과 팁을 제공하며, 특히 프론트엔드 개발자가 내부 툴을 구축하는 데 유용하게 활용할 수 있는 방법을 제시합니다.
Retool로그 시각화데이터 시각화
더핑크퐁컴퍼니·2023년 8월 30일
Frontend
텍스처 압축으로 유니티 모바일 게임 메모리 최적화하기
이 글은 유니티 모바일 게임의 메모리 최적화를 위한 텍스처 압축 기법을 다룹니다. 저사양 기기에서도 원활한 게임 실행을 위해 텍스처 최적화의 필요성을 강조하며, 텍스처의 개념과 GPU 메모리에서의 효율적인 사용 방식을 설명합니다. 특히, JPG, PNG와 같은 일반 이미지 포맷이 아닌 GPU에서 직접 읽을 수 있는 전용 압축 포맷으로 변환하는 과정의 중요성을 강조합니다. 픽셀당 비트(bpp)를 낮춰 텍스처가 차지하는 메모리 용량을 줄이는 것이 핵심이며, 이를 통해 게임의 전반적인 성능 향상을 목표로 합니다.
Unity모바일 게임메모리 최적화
더핑크퐁컴퍼니·2023년 1월 2일
Etc
Next.js 프로젝트 Migration과 Refactoring 과정을 공유합니다.
해당 글은 Next.js 프로젝트의 마이그레이션 및 리팩토링 과정을 공유하려 했으나, 기술적인 문제로 인해 본문 내용이 "Apologies, but something went wrong on our end."으로 표시되어 구체적인 내용을 파악할 수 없습니다. 따라서 이 글은 특정 기술 스택이나 개발 방법론에 대한 깊이 있는 정보를 제공하기보다는, 프로젝트 진행 중 발생할 수 있는 기술적 오류나 예상치 못한 문제 상황에 대한 간접적인 경험을 보여주는 것으로 해석될 수 있습니다. 정상적인 내용이 제공되었다면 마이그레이션 전략, 리팩토링 기법, 발생 가능한 문제점 및 해결 방안 등에 대한 정보가 포함되었을 것으로 예상됩니다. 현재로서는 프로젝트 관리 및 기술적 장애 대응이라는 넓은 범위의 주제로 분류될 수 있습니다.
Next.jsMigrationRefactoring
더핑크퐁컴퍼니·2022년 9월 15일
Frontend
Jotai는 조-타이 라고 읽습니다.
해당 글은 React의 상태 관리 라이브러리인 Jotai에 대한 소개를 담고 있습니다. Jotai는 '조-타이'라고 읽으며, 원자(atom)라는 개념을 기반으로 동작합니다. 각 atom은 독립적인 상태 조각을 나타내며, 필요한 atom만 구독하여 렌더링 성능을 최적화할 수 있다는 장점이 있습니다. Recoil과 유사한 철학을 공유하지만, 더 간결하고 유연한 API를 제공하는 것을 목표로 합니다. 글에서는 Jotai의 기본 사용법, atom 생성 및 구독 방법, 그리고 여러 atom을 조합하여 복잡한 상태를 관리하는 예시를 보여줍니다. 특히, 비동기 상태 처리와 커스텀 hook을 활용한 상태 관리 방식도 다룹니다. Jotai는 React 애플리케이션의 상태 관리를 효율적으로 수행할 수 있는 대안으로 제시되며, 특히 복잡한 상태 로직을 간결하게 구현하고자 할 때 유용할 것으로 기대됩니다.
Jotai상태 관리React
더핑크퐁컴퍼니·2022년 7월 14일
Frontend
MSW 사용하여 테스트 코드 작성하기 with GraphQL, react-query
이 글은 MSW(Mock Service Worker)를 사용하여 GraphQL API와 react-query를 연동하는 테스트 코드를 작성하는 방법을 다룹니다. MSW는 실제 네트워크 요청을 가로채서 Mock 응답을 반환하는 라이브러리로, API가 준비되지 않았거나 불안정한 상황에서도 프론트엔드 개발을 진행할 수 있도록 돕습니다. 특히 GraphQL 환경에서 MSW를 설정하고, react-query의 useQuery, useMutation 등의 훅과 함께 사용하여 비동기 데이터 처리 및 상태 관리를 테스트하는 구체적인 예시를 제공합니다. 이를 통해 개발자는 API 의존성 없이 안정적인 테스트 환경을 구축하고, 애플리케이션의 견고성을 높일 수 있습니다.
MSWGraphQLreact-query
더핑크퐁컴퍼니·2022년 6월 14일
Backend
Google BigQuery와 Data Studio를 활용한 앱 광고 매출 대시보드 개발기
본 글은 기존 AWS RDS와 PHP로 운영되던 앱 광고 매출 분석 시스템을 Google BigQuery와 Data Studio를 활용하여 이전 및 확장한 개발 과정을 공유합니다. 기존 시스템은 새로운 광고 플랫폼 추가 시 별도 테이블 생성 및 프론트 개발이 필요했고, 부가 정보 수동 관리에 따른 비효율성이 있었습니다. 이에 필자는 Elasticsearch + Kibana와 BigQuery + Data Studio를 비교 검토한 끝에 BigQuery + Data Studio를 선택했습니다. BigQuery는 관계형 데이터 모델링이 가능하여 매출 정보와 앱/광고 단위 정보를 분리하여 관리할 수 있으며, Data Studio는 프론트 개발 없이 데이터 분석 및 시각화가 가능하여 요구사항을 효율적으로 충족시킬 수 있었습니다. 이를 통해 8곳의 광고 플랫폼 매출 현황을 한눈에 파악할 수 있는 확장성 높은 대시보드를 성공적으로 구축했습니다.
BigQueryData Studio매출 분석
더핑크퐁컴퍼니·2022년 6월 10일
Frontend
react-testing-library 의 fireEvent 를 userEvent로 마이그레이션 하기 with Antd
이 글은 React 컴포넌트 테스트 시 기존에 사용하던 `fireEvent`를 `userEvent`로 마이그레이션하는 경험을 공유합니다. `userEvent`는 사용자의 실제 행동과 더 유사한 방식으로 이벤트를 시뮬레이션하여, BDT(Behavior Driven Test) 방법론에 더 부합하는 테스트를 작성할 수 있도록 돕습니다. 글에서는 `testing-library`의 기본 개념과 BDT와 IDT(Implementation Driven Test)의 차이점을 설명하고, `fireEvent` 대신 `userEvent`를 사용함으로써 얻는 이점을 강조합니다. 특히 Ant Design 컴포넌트와 함께 테스트를 진행하며 겪었던 내용과 `userEvent` 업데이트에 따른 변경 사항에 대한 경험을 공유합니다.
ReactTesting LibraryuserEvent
더핑크퐁컴퍼니·2022년 5월 3일
DevOps
ConsoleMe 적용해보기
이 글은 AWS 환경에서 ConsoleMe라는 웹 서비스를 로컬에 설치하는 과정을 상세히 안내합니다. ConsoleMe는 AWS 리소스에 대한 접근 권한을 관리하고 중앙 집중화하는 데 도움을 주는 도구입니다. 설치는 Docker 또는 로컬 환경에서 가능하며, 이 글에서는 로컬 설치 방법을 중점적으로 다룹니다. 로컬 설치를 위해서는 Ubuntu 19.04+ 서버, 2GB 이상의 디스크 공간, 그리고 적절한 권한을 가진 AWS IAM 사용자 또는 역할이 필요합니다. 설치 과정은 필요한 종속성 설치, ConsoleMe 레포지토리 클론, Redis 및 DynamoDB 컨테이너 시작, AWS 자격 증명 설정, 가상 환경 생성 및 설치 스크립트 실행, 백그라운드 서비스 설정, 그리고 Celery 동작 순서로 진행됩니다. 특히 IAM 사용자/역할 설정과 서비스 관리를 위한 systemd 설정에 대한 설명이 포함되어 있습니다.
ConsoleMeAWSIAM
더핑크퐁컴퍼니·2022년 4월 19일