Velopers
모든 블로그
카카오엔터테인먼트FE

카카오엔터테인먼트FE

도메인fe-developers.kakaoent.com
주요 카테고리 프론트엔드 · DevOps · 아키텍처

활동 요약

대표 인기 포스트TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution316 조회
최근 30일
0개
평균 조회
18
누적 조회
2,997
전체 글
163개
마지막 발행
2025. 9. 19.
블로그 방문

카카오엔터테인먼트FE 기술 블로그 글 (117)

프론트엔드

TurboRepo Just-in-Time Packages 적용기 Feat. ModuleResolution

Turborepo JIT Packages로 공통 패키지 소스를 빌드 없이 참조하는 방식을 소개했습니다. TypeScript 모듈 해석과 Next.js 설정 충돌을 분석하고 해결 과정을 정리했습니다.

#Turborepo#TypeScript#monorepo
000

프론트엔드

파일 변수 Deep-Dive

상태의 추적 필요성에 따라 Redux, react-query, Zustand, 파일 변수의 역할을 분리했습니다. 서버 파일 변수는 AsyncLocalStorage로 요청별 컨텍스트를 격리해야 함을 설명합니다.

#Redux#react-query#Zustand
400

프론트엔드

파일 변수 Deep-Dive

웹 서비스 규모가 커지며 Redux 전역 관리의 한계를 줄이기 위해 상태를 유형별로 분리한 사례를 소개했습니다. 추적이 불필요한 값은 파일 변수로 관리하고, SSG와 하드 네비게이션 제약도 함께 설명했습니다.

#Redux#Zustand#React
2500

프론트엔드

Next.js 캐싱으로 웹 서버 성능 최적화

Next.js Full Route Cache 적용을 위해 상품 페이지를 ISR 기반 정적 경로로 전환했습니다. 평균 TPS를 34에서 220으로 높이고 CPU·응답시간을 개선했습니다.

#Next.js#SSR#cache
200

프론트엔드

Next.js 캐싱으로 웹 서버 성능 최적화

Next.js App Router에서 Full Route Cache를 활용해 상품 목록·상세 페이지의 서버 렌더링 비용을 줄인 사례입니다. 부하테스트에서 TPS를 크게 개선하고 CPU 사용률도 낮췄습니다.

#Next.js#SSR#SEO
4700

프론트엔드

더 가치 있는 공통 컴포넌트 만들기

React·TypeScript 공통 컴포넌트의 책임 경계와 확장 인터페이스 설계를 다뤘습니다. 네이티브 요소와 접근성을 활용해 재사용성·완성도를 높이는 방법을 소개합니다.

#React#TypeScript#컴포넌트
100

프론트엔드

더 가치 있는 공통 컴포넌트 만들기

공통 컴포넌트를 단순히 재사용용으로만 보지 않고 역할과 확장 규칙을 함께 설계하는 방법을 다뤘습니다. 또한 네이티브 요소, controlled/uncontrolled, forwardRef, 접근성까지 고려해 실용성을 높이는 방향을 제안했습니다.

#React#TypeScript#web
5200

프론트엔드

BackstopJS 적용 후기 (Visual Regression Test)

BackstopJS와 스토리북으로 Organism 단위 시각적 회귀 테스트를 구축했습니다. Jenkins·PR 봇 자동화로 결과 확인과 기준 이미지 갱신을 관리했습니다.

#BackstopJS#visual regression test#Storybook
100

프론트엔드

BackstopJS 적용 후기 (Visual Regression Test)

BackstopJS를 스토리북 기반 시각적 회귀 테스트로 운영하며 사이드이펙트 탐지와 문서화를 함께 얻은 사례를 소개했습니다. 또한 PR 코멘트와 develop 머지 후 approve 자동화로 테스트 운영 부담을 줄였습니다.

#BackstopJS#Visual Regression Test#Storybook
3300

프론트엔드

사파리, 모바일 환경에서의 트러블슈팅

Safari와 iOS에서 발생하는 스크롤, 레이어, 터치 이벤트 차이를 사례별로 분석했습니다. 브라우저 식별보다 실제 동작 조건을 기준으로 보정하는 방법을 제안합니다.

#Safari#iOS#스크롤
200

프론트엔드

React Query의 구조와 useQuery 실행 흐름 살펴보기

React Query의 QueryClient·QueryCache·Query·QueryObserver 내부 역할을 살펴봤습니다. useQuery가 useSyncExternalStore로 상태 변경을 구독하고 뷰를 갱신하는 흐름을 설명합니다.

#React Query#React#useQuery
200

프론트엔드

사파리, 모바일 환경에서의 트러블슈팅

사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.

#Safari#mobile#scrollTop
4800

프론트엔드

React Query의 구조와 useQuery 실행 흐름 살펴보기

React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.

#React Query#useQuery#QueryClient
5300

프론트엔드

문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2

Next.js의 컴포넌트 내부 CSS 임포트와 브라우저 캐시 재사용이 CORS 오류를 일으킨 과정을 분석했습니다. 전역 CSS 임포트 또는 crossorigin 설정으로 문제를 해결했습니다.

#Next.js#CORS#CSS
100

프론트엔드

문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2

Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.

#Next.js#React#CORS
2600

프론트엔드

문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1

CORS 에러와 정주행 모드 초기화 문제를 CSS 로딩 방식 변경으로 해결했습니다. SSR·ES Module·Dynamic Import의 displayName 손실까지 추적해 근본 원인을 분석했습니다.

#Next.js#React#swiper
000

프론트엔드

문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1

정주행 모드 초기화와 CORS 에러를 함께 겪은 문제를 재현 조건과 코드 구조를 따라가며 분석했습니다. 조건부 require를 전역 import로 단순화해 증상을 해결하고 원인 추적의 방향을 잡았습니다.

#Next.js#SSR#ES Module
6000

프론트엔드

View Transitions API

View Transitions API로 React 상태 변경 전후 화면을 캡처해 복잡한 화면 전환을 단순화했습니다. 가상 요소와 CSS·Web Animations API로 요소별 슬라이드와 썸네일 이동 효과를 구현했습니다.

#View Transitions API#React#CSS
200