카카오엔터테인먼트FE

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Next.js 빌드 타임 환경 변수의 환경별 빌드 문제를 분석했습니다. `window.__ENV` 스크립트로 런타임 주입하는 방식을 구현했습니다.

#Next.js#환경 변수#SSR

200

2022년 5월 5일

아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다. 단위 구분의 주관성은 UI 모델링·코드 리뷰·compound 컴포넌트로 보완했습니다.

#React#디자인 시스템#아토믹 디자인

2022년 5월 5일

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Next.js의 빌드 타임 dotenv 주입으로 환경별 빌드가 필요한 문제를 분석했습니다. public 스크립트와 window 객체를 활용한 런타임 환경 변수 주입 방식을 구현했습니다.

#Next.js#dotenv#SSG

3500

2022년 5월 5일

#React#디자인 시스템#atomic design

아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다. 컨텍스트 기반 분류, Storybook·Figma 연계, 외부 스타일 주입 원칙을 적용했습니다.

2800

아토믹 디자인을 활용한 디자인 시스템 도입기

2022년 4월 24일

HTTP/2 훑어보고 AWS에서 적용해보기

HTTP/2의 다중화·헤더 압축 등으로 HTTP/1의 병목을 줄이는 방식을 소개했습니다. CloudFront와 ALB 설정으로 적용하고, 기존 HTTP/1 최적화 기법의 재검토 필요성을 설명합니다.

#HTTP#AWS#CloudFront

2022년 4월 24일

HTTP/2 훑어보고 AWS에서 적용해보기

HTTP/2가 HTTP/1.1의 HOL Blocking, RTT, 헤더 중복 문제를 보완하는 방식을 설명했습니다. AWS CloudFront와 ALB에서의 적용 방법 및 기존 최적화 기법 재검토 사항을 소개합니다.

#HTTP#AWS#CloudFront

2700

HTTP/2 훑어보고 AWS에서 적용해보기

2022년 4월 14일

#Docker#GitHub Actions#BuildKit

GitHub Actions에서 도커 캐시를 적용해 이미지 빌드하기

GitHub Actions의 매번 새로 생성되는 러너 때문에 Docker 레이어 캐시가 사라지는 원인을 설명했습니다. Buildx와 `type=gha` 캐시로 반복 빌드 시간을 줄이는 방법을 소개합니다.

300

2022년 4월 14일

#Docker#GitHub Actions#cache

GitHub Actions에서 도커 캐시를 적용해 이미지 빌드하기

Docker 레이어 캐시의 동작과 Dockerfile 작성 순서가 빌드 시간에 미치는 영향을 설명했습니다. GitHub Actions의 매번 새로 생성되는 러너 환경 때문에 캐시가 사라지는 원인을 다뤘습니다.

3300

GitHub Actions에서 도커 캐시를 적용해 이미지 빌드하기

2022년 3월 24일

#Canvas#Web Worker#ImageData

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

Canvas ImageData의 색상 수집 작업을 다중 웹 워커로 분할해 처리 시간을 줄였습니다. 메인 스레드 블로킹을 완화해 UI 갱신과 다른 스크립트 지연을 줄였습니다.

2022년 3월 24일

#Canvas#Web Worker#ImageData

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

Canvas 이미지의 RGBA 배열에서 고유 색상을 추출하는 작업을 웹 워커로 분리했습니다. 다중 워커로 작업을 나눠 메인 스레드 블로킹과 UI 대기시간을 줄였습니다.

2200

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

2022년 3월 18일

기타

[2022 신입공채] 카카오엔터테인먼트 신입 개발자로서의 첫걸음👣 테크 온보딩 프로그램 살펴보기 #2

신입 개발자 온보딩에서 보안·클라우드 교육과 비대면 팀빌딩을 진행했습니다. 6개 조 토이 프로젝트로 협업과 현업 기술 스택 적응을 지원했습니다.

#온보딩#보안#cloud

[2022 신입공채] 카카오엔터테인먼트 신입 개발자로서의 첫걸음👣 테크 온보딩 프로그램 살펴보기 #2

2022년 3월 17일

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

Storybook 스토리의 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 간 핸들러 초기화와 Node.js 절대 경로 문제 해결 방법도 소개합니다.

#MSW#Storybook#Jest

000

2022년 3월 17일

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

Storybook 스토리에 선언한 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 후 핸들러 초기화와 Node.js 절대 URL 처리 방법도 소개합니다.

#MSW#Storybook#Jest

2600

2022년 3월 10일

아키텍처

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

카카오페이지의 BFF 적용을 주제로 MSA 환경에서 여러 플랫폼을 지원하는 맥락을 다룹니다. Web·Android 등 프론트엔드별 요구사항에 맞춘 백엔드 구성을 살펴봅니다.

#BFF#MSA#web

200

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

2022년 3월 10일

아키텍처

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

카카오페이지 Web은 GraphQL 기반 BFF로 다중 API 응답을 화면 모델에 맞게 통합했습니다. Apollo 캐시 문제를 피해 Urql과 Redux로 데이터 조회·상태 관리를 분리했습니다.

#BFF#MSA#GraphQL

4200

카카오페이지는 BFF(Backend For Frontend)를 어떻게 적용했을까?

2022년 3월 7일

https 프록시로 mitmproxy를 사용해보자.

mitmproxy로 HTTPS 트래픽을 가로채기 위한 프록시·인증서 설정 과정을 정리했습니다. Android 에뮬레이터의 시스템 인증서 설치 절차와 주의점도 설명합니다.

#mitmproxy#HTTPS#Android