펫프렌즈

RSS

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

All Frontend Backend AI DevOps Architecture Etc

Frontend
Next.js에서 QueryClient를 전역변수로 사용해도 될까요?
이 글은 Next.js 서버 환경에서 QueryClient를 전역 변수로 잘못 사용함으로써 발생한 메모리 누수 현상과 해결 과정을 공유합니다. Next.js 서버는 24시간 동작하며 SSR 환경에서 발생하는 메모리 누수는 모든 사용자에게 영향을 미치는 치명적인 문제로 이어질 수 있습니다. 필자는 펫프렌즈 프리오더팀에서 겪었던 QueryClient 전역 변수 사용으로 인한 서버 메모리 증가 및 OOM 문제를 상세히 설명하며, 이는 특정 라이브러리의 결함이 아닌 공식 문서에서 권장하는 사용 패턴을 따르지 않은 구현 방식의 문제임을 강조합니다. 글은 메모리 누수 현상의 발견, 원인 분석, 그리고 올바른 QueryClient 사용 패턴의 중요성을 다루며, 개발자들이 같은 실수를 반복하지 않도록 돕는 것을 목표로 합니다.
Next.jsQueryClient메모리 누수
펫프렌즈·2026년 1월 27일
Frontend
App Store 5.1.1 가이드라인 리젝 대응기: SwiftUI Repository 패턴으로 게스트 기능 구현하기
이 글은 App Store 5.1.1 가이드라인으로 인해 앱이 리젝된 경험을 공유하며, SwiftUI와 Repository 패턴을 사용하여 게스트 기능을 구현하는 과정을 상세히 설명합니다. 개발자는 사용자 계정 없이도 앱 기능을 사용할 수 있도록 게스트 모드를 구현해야 했으며, 이 과정에서 발생한 문제와 해결 방법을 기술합니다. 특히, 데이터 관리와 상태 유지를 위해 Repository 패턴을 적용하여 코드의 재사용성과 유지보수성을 높인 점을 강조합니다. SwiftUI의 선언적 UI와 Repository 패턴의 조합을 통해 효율적인 게스트 기능 구현 방안을 제시하며, 유사한 문제에 직면한 iOS 개발자들에게 실질적인 도움을 줄 수 있는 내용을 담고 있습니다.
SwiftUIRepository PatternGuest Feature
펫프렌즈·2025년 12월 3일
Frontend
프론트엔드 테스트 비용과 효용 사이에서
이 글은 프론트엔드 개발에서 테스트 코드 작성의 비용과 효용 사이의 딜레마를 다룹니다. 저자는 펫프렌즈 Post-Order 팀의 경험을 바탕으로, 테스트 코드 작성에 드는 시간과 리소스가 과연 충분한 가치를 제공하는지에 대한 고민을 공유합니다. 특히 배송 메시지 구조 변경과 같은 실제 개발 과정에서 테스트 코드가 어떻게 비효율을 야기할 수 있는지, 그리고 이를 극복하기 위한 저자의 생각과 인사이트를 제시합니다. 프론트엔드 테스트의 필요성에 대한 공감대 속에서도 발생하는 실질적인 고민과 그 해결 과정을 통해, 개발자들에게 테스트 코드 작성에 대한 새로운 관점을 제공하고자 합니다.
Frontend테스트 코드비용
펫프렌즈·2025년 7월 30일
Frontend
Playwright로 로그인을, Lighthouse로 성능을: 인증 페이지 성능측정 자동화
이 글은 Playwright를 활용하여 인증이 필요한 페이지의 로그인 과정을 자동화하고, Lighthouse를 이용해 해당 페이지의 성능을 측정하는 방법을 소개합니다. 기존 Lighthouse CI만으로는 접근하기 어려웠던 인증 기반 페이지의 성능 측정 한계를 극복하기 위해, Playwright로 로그인 세션을 구성하고 자동화된 성능 측정을 구현했습니다. 또한, 수집된 성능 데이터를 AWS CloudWatch로 전송하고 Grafana 대시보드에서 시각화하여 지속적인 성능 모니터링 환경을 구축한 과정도 공유합니다. 이를 통해 실제 서비스 환경과 유사한 조건에서 인증 페이지의 성능을 측정하고 관리할 수 있는 방안을 제시합니다.
PlaywrightLighthouse성능 측정
펫프렌즈·2025년 4월 10일
Frontend
Lint Cl 속도 개선: 변경 파일만 검사하는 방법
이 글은 펫프렌즈 프론트엔드 개발자가 PR 생성 시 모든 파일을 검사하던 기존 Lint CI의 비효율성을 개선한 과정을 공유합니다. 기존 방식은 불필요한 리소스 사용과 실행 시간 증가, 결과의 불명확성을 야기했습니다. 이를 해결하기 위해 GitHub Actions와 Git Diff 명령어를 활용하여 PR에서 변경된 파일만 검사하도록 CI를 개선했습니다. 이를 통해 CI 속도를 향상시키고, 불필요한 검사를 줄여 개발 생산성을 높일 수 있었습니다. 이 개선은 코드 품질 유지와 CI/CD 파이프라인의 효율성을 동시에 달성하는 데 기여했습니다.
LintCIGitHub Actions
펫프렌즈·2024년 12월 12일
Frontend
웹 성능 측정 자동화 비법: Lighthouse CI와 CI/CD의 만남
이 글은 펫프렌즈 커머스개발팀의 프론트엔드 개발자가 Lighthouse CI를 활용하여 웹 성능 측정 자동화를 CI/CD 파이프라인에 통합한 경험을 공유합니다. 기존 Lighthouse의 수동 측정 방식은 시간 소모적이고 결과의 일관성이 부족하다는 한계가 있었습니다. 이를 해결하기 위해 Lighthouse CI를 도입하여 측정 환경을 표준화하고 일관된 결과를 얻을 수 있게 되었습니다. 글에서는 병합 후 배포 완료 시 자동으로 Lighthouse CI를 트리거하고, 측정 결과를 가공하여 팀 워크플로우에 통합하는 구체적인 프로세스를 설명합니다. 이를 통해 웹 애플리케이션의 성능을 지속적으로 관리하고 사용자 경험을 개선하는 것을 목표로 합니다.
웹 성능Lighthouse CICI/CD
펫프렌즈·2024년 11월 28일
Frontend
목록 가상화의 마법 “우리 DOM이 달라졌어요”
이 글은 펫프렌즈의 프론트엔드 개발자가 커뮤니티 서비스 '집사생활'에 목록 가상화 기술을 적용한 경험을 공유합니다. 집사생활은 사용자들이 반려동물의 일상을 공유하는 커뮤니티로, 많은 이미지와 동영상을 포함하는 피드를 제공하며 인피니트 스크롤을 사용합니다. 하지만 데이터 규모가 커지면서 성능 문제가 발생했고, 특히 iOS에서 발생하는 '백화현상'과 같은 이슈를 해결하기 위해 목록 가상화 도입의 필요성을 설명합니다. 목록 가상화는 화면에 보이는 요소만 렌더링하여 DOM 부하를 줄이고 성능을 개선하는 기술로, 이를 통해 사용자 경험을 향상시키는 것을 목표로 합니다.
목록 가상화DOMFrontend
펫프렌즈·2024년 7월 1일
Frontend
펫프렌즈 프론트엔드의 새로운 보금자리 “모노레포”
펫프렌즈 프론트엔드 팀은 개발 생산성 향상과 코드 공유 효율화를 위해 모노레포를 도입했습니다. 기존에는 여러 개의 개별 레포지토리와 npm 라이브러리 관리 방식의 비효율성을 겪고 있었습니다. 모노레포 도입 결정 후, Lerna와 Nx를 활용하여 프로젝트를 구성하고, 코드 공유 및 의존성 관리를 개선했습니다. 이를 통해 개발자 경험을 향상시키고, 빌드 및 배포 시간을 단축하는 등 긍정적인 결과를 얻었습니다. 이 글은 모노레포 도입의 배경, 과정, 그리고 실제 적용 사례를 중심으로 설명하며, 모노레포가 프론트엔드 개발 환경에 미치는 영향을 보여줍니다.
모노레포Frontend코드 공유
펫프렌즈·2024년 5월 14일
Frontend
React-Hook-Form 으로 폼(Form) 화면을 개선해요.
이 글은 펫프렌즈 인터널 서비스팀 프론트엔드 개발자가 React Hook Form을 도입하여 복잡한 폼 화면의 개발 경험을 개선한 내용을 다룹니다. 상품 등록 화면과 같이 많은 정보를 입력하고 복잡한 유효성 검증이 필요한 경우, 기존의 ref 객체 중심 상태 관리 방식은 상태가 늘어나고 렌더링 이슈가 발생하는 어려움이 있었습니다. React Hook Form을 사용하면 이러한 여러 상태를 하나의 상태로 통합 관리할 수 있어 코드의 간결성을 높이고, 폼 관련 상태 관리 및 유효성 검증 로직을 효율적으로 처리할 수 있음을 보여줍니다. 이를 통해 개발 생산성과 사용자 경험을 모두 향상시키는 방안을 제시합니다.
ReactReact Hook Form폼
펫프렌즈·2024년 3월 28일
Frontend
프론트엔드 테스트 코드 도입기
이 글은 펫프렌즈 Post-Order 파트에서 Vue.js 기반의 주문/결제 페이지를 Next.js로 전환하면서 도입한 프론트엔드 테스트 코드 작성 경험을 공유합니다. 테스트 코드 도입의 주된 이유는 주문/결제 페이지의 안정성과 신뢰성을 높이기 위함이며, 코드 리팩토링 시 발생할 수 있는 로직 오류를 방지하고 문서화 작업을 대체하는 데에도 유용하다고 설명합니다. 특히 Jest를 사용하여 UI 위주 테스트 코드를 작성하는 과정을 소개하며, 테스트 범위 파악의 중요성을 강조합니다. 이 경험을 통해 테스트 코드가 코드의 안정성을 확보하고 유지보수성을 향상시키는 데 기여함을 보여줍니다.
테스트 코드JestNext.js
펫프렌즈·2023년 12월 1일
Frontend
펫프렌즈 프론트엔드 개발자의 DX
펫프렌즈 프론트엔드 개발자가 합류 후 6개월간 경험한 개발자 경험(DX)에 대한 회고입니다. 필자는 커뮤니티 서비스 개발 프로젝트를 통해 프론트엔드 환경, 디자인 시스템, 백엔드 팀과의 협업 방식을 익혔습니다. 초기 기획 변경과 디자인 수정으로 인한 설계 재작업, 이미지/비디오 업로드 뷰 개발, 앱 브리지 작업 등 다양한 기술적 도전 과제를 해결하며 개발자로서 성장하는 경험을 공유합니다. 성공적인 커뮤니티 서비스 출시와 운영 성과를 바탕으로, 이러한 경험이 개발 역량 향상에 기여했음을 강조하며 글을 마무리합니다.
DXFrontend펫프렌즈
펫프렌즈·2023년 11월 28일