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 기술 블로그 글 (163)

프론트엔드

테스트 코드 자동으로 만들기 feat. Cypress Studio

Cypress Studio를 활용해 E2E 테스트 코드를 자동 생성하는 로우코드 방법을 소개했습니다. 개발자와 QA의 반복 작업 부담을 줄이고 브랜치 기반으로 테스트를 관리하는 흐름을 정리했습니다.

#Cypress#E2E 테스트#자동화
4000

프론트엔드

마크다운에 컴포넌트 추가하기

unified 기반의 마크다운 AST 변환 과정을 설명했습니다. Gatsby에서 커스텀 태그를 React 컴포넌트로 치환하고 MDX 대안도 소개합니다.

#Markdown#Gatsby#React
000

프론트엔드

마크다운에 컴포넌트 추가하기

마크다운을 mdast, hast, HTML로 변환하는 흐름을 살펴보고, 커스텀 태그를 리액트 컴포넌트로 치환하는 방법을 소개했습니다. MDX와 Gatsby 연동 예시도 함께 정리했습니다.

#Markdown#HTML#unified
3100

프론트엔드

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

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

#service worker#PWA#fetch
100

프론트엔드

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

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

#서비스 워커#PWA#fetch
2600

기타

도전, if(kakao)dev2022! Coze, Sherlock, Woozu

if(kakao)dev2022 발표자들이 코드 가독성, DDD, 기술 글쓰기 주제와 준비 과정을 공유했습니다. 온라인 녹화 환경에 맞춘 리허설, 스크립트, 시간 관리의 중요성을 소개했습니다.

#컨퍼런스#DDD#MSA
200

기타

Technical Writing: 글로 하는 의사소통 / if(kakao)2022

독자에게 필요한 정보를 쉽게 전달하기 위한 테크니컬 라이팅 원칙을 정리했습니다. 주제·독자·목차 설계부터 문장 작성과 최종 검토 방법까지 안내합니다.

#테크니컬 라이팅#문서화#의사소통
000

아키텍처

ㄷㄷㄷ: Domain Driven Design과 적용 사례 공유 / if(kakao)2022

레거시 서버를 점진적으로 MSA화하며 DDD와 헥사고날 아키텍처를 적용한 사례를 공유했습니다. 도메인 분리의 이점과 함께 트랜잭션·배포·구현 복잡도도 짚었습니다.

#DDD#MSA#hexagonal architecture
400

프론트엔드

섬세한 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