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)

프론트엔드

서비스 워커에 대해 알아보고 Mock Response 만들기

서비스 워커의 생명주기와 fetch 가로채기, 페이지 통신 방식을 소개했습니다. MessageChannel로 요청을 전달해 Mock 응답·오류·원본 통과를 제어하는 방법을 설명했습니다.

#service worker#PWA#fetch
100

프론트엔드

서비스 워커에 대해 알아보고 Mock Response 만들기

서비스 워커의 위치와 생명주기, fetch 가로채기와 메시지 통신 방식을 설명했습니다. 이를 바탕으로 네트워크 요청을 Mock Response로 바꾸는 흐름을 소개했습니다.

#서비스 워커#PWA#fetch
2600

프론트엔드

섬세한 ISFP의 코드 가독성 개선 경험 / if(kakao)2022

정확한 명명과 시각적 코드 구조화를 통해 유지보수성과 협업 가독성을 높인 사례를 소개했습니다. 표·목차·용어·각주 형태의 비유로 조건문과 로그 처리 코드를 개선했습니다.

#JavaScript#CSS#UI/UX
000

프론트엔드

SEO 개선 초심자 가이드

검색 콘솔, 사이트맵, robots.txt, 메타데이터로 크롤링과 색인 관리를 안내합니다. 중복 URL·오류 페이지를 정리하고 Lighthouse 기반 성능 개선도 제안합니다.

#SEO#traffic#Next.js
100

프론트엔드

`API 언제 나오나요?` 로 부터 독립하기

RTK Query 기반 factory와 Adapter 레이어로 API 응답 모델을 화면용 데이터로 변환했습니다. API 변경이 생겨도 UI 컴포넌트 수정 범위를 최소화했습니다.

#RTK Query#API#Adapter
200

프론트엔드

SEO 개선 초심자 가이드

검색엔진 최적화를 처음 시작할 때 필요한 기본 항목들을 구글 서치 콘솔, 사이트맵, robots.txt 중심으로 정리했습니다. 메타 데이터, 중복 URL, 상태 코드, 성능 개선까지 함께 점검하는 흐름을 제안했습니다.

#SEO#검색#robots.txt
3100

프론트엔드

`API 언제 나오나요?` 로 부터 독립하기

API 응답 모델이 불확실한 상황에서 factory 레이어를 둬 UI와 API 의존을 분리했습니다. LIVE와 VOD의 서로 다른 응답을 정규화해 UI 변경 범위를 줄인 사례를 소개했습니다.

#RTK Query#factory#msw
3600

프론트엔드

라이브러리 없이 라우터(Router) 만들기

바닐라 JavaScript로 Fragment 해시 기반 SPA 라우터를 구현하는 과정을 소개했습니다. 경로 등록, 페이지 전환, 프로그래밍 이동, path parameter 추출을 다뤘습니다.

#JavaScript#SPA#router
100

프론트엔드

라이브러리 없이 라우터(Router) 만들기

바닐라 JS로 해시 라우터를 직접 구현하는 과정을 설명했습니다. 경로 매핑, navigate, path parameter 추출까지 확장하는 방법을 다뤘습니다.

#JavaScript#SPA#Router
2900

프론트엔드

Typescript - Union Type, Intersection Type, Etc.

타입스크립트의 구조적 타입 시스템과 유니언·인터섹션 타입의 집합적 의미를 설명했습니다. 타입 좁히기, 템플릿 리터럴 타입, 객체 리터럴의 초과 속성 검사도 다뤘습니다.

#TypeScript#Tagged Union#템플릿 리터럴 타입
000

프론트엔드

Typescript - Union Type, Intersection Type, Etc.

타입스크립트의 구조적 타입 시스템과 유니온·인터섹션 타입의 기본 개념을 설명했습니다. 또한 태그드 유니온과 템플릿 리터럴 타입, 객체 리터럴의 엄격한 검사까지 함께 정리했습니다.

#TypeScript#union type#intersection type
2200

프론트엔드

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기

Fetcher가 API 오류를 throw하고 지역·전역 Error Boundary가 이를 계층적으로 처리하는 방식을 소개했습니다. 오류 영역별 폴백 UI와 재시도 기능으로 나머지 콘텐츠를 유지하는 사용자 경험을 구현했습니다.

#React#error boundary#Suspense
200

프론트엔드

이제부터 이 컴포넌트는 제 겁니다

리액트에서 렌더링과 상태 제어를 외부로 넘기는 IoC 패턴들을 정리했습니다. Render Props, 합성 컴포넌트, Controlled Props의 특징과 장단점을 비교했습니다.

#React#IoC#Context
1900

프론트엔드

React의 Error Boundary를 이용하여 효과적으로 에러 처리하기

React Error Boundary로 렌더링 에러와 API 에러를 선언적으로 처리하는 구조를 소개했습니다. 제한된 범위의 ApiErrorBoundary와 전역 GlobalErrorBoundary로 재시도 UX까지 구성했습니다.

#React#error boundary#Suspense
5000

프론트엔드

React 컴포넌트와 추상화

React 컴포넌트의 책임을 범용 UI와 도메인 로직으로 나누는 추상화 방법을 설명했습니다. 합성·커스텀 훅·상태 설계로 결합도를 낮추는 트레이드오프를 다뤘습니다.

#React#컴포넌트#추상화
100

프론트엔드

React 컴포넌트와 추상화

React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.

#React#컴포넌트#추상화
5000

프론트엔드

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

디자인 시스템 구축 과정에서 Emotion CSS의 테마 의존성과 가독성 문제를 분석했습니다. Tailwind CSS와 Twin.Macro로 유틸리티, 반응형·다크 모드, 접근성 단위를 구성했습니다.

#tailwind css#Twin.Macro#Emotion CSS
100

프론트엔드

FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

카카오페이지 웹 개편에서 Emotion CSS의 한계를 줄이기 위해 Tailwind CSS와 Twin.Macro를 도입했습니다. 디자인 시스템 네이밍을 쉽게 반영하고, 커스텀 플러그인으로 부족한 유틸리티를 보완했습니다.

#Tailwind CSS#Emotion CSS#Twin.Macro
5800