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)

프론트엔드

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

카카오웹툰은 GPU 가속과 lazy load로 복잡한 웹 인터랙션의 렌더링 비용을 줄였습니다. 스크롤 이벤트 대신 IntersectionObserver를 활용해 안정적인 프레임 성능을 확인했습니다.

#IntersectionObserver#lazy load#하드웨어 가속
000

프론트엔드

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

카카오웹툰 웹 개편에서 GPU 가속과 IntersectionObserver로 인터랙션·지연 로딩을 최적화했습니다. 스크롤 이벤트 대비 Observer의 안정적 프레임과 적용 시 주의점을 공유합니다.

#IntersectionObserver#lazy load#하드웨어 가속
3500

아키텍처

프론트엔드와 THE TWELVE-FACTOR APP

Next.js 서비스 운영에 12Factor 원칙을 적용하는 방법을 코드베이스부터 배포까지 설명했습니다. 런타임 설정과 Docker Artifact로 환경 독립성과 배포 효율을 높였습니다.

#Next.js#12Factor#Docker
1900

프론트엔드

웹에서 다크모드 지원하기

웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.

#CSS#JavaScript#SSR
100

AI

AI 장면 분석을 통한 비디오 인코딩 최적화 / if(kakao)2021

AI 장면 분석으로 동영상 인코딩의 최적 설정을 찾는 사례를 다룹니다. 최적화 과정과 분산 인코딩 방식도 함께 소개합니다.

#비디오 인코딩#분산 인코딩
000

프론트엔드

웹에서 다크모드 지원하기

웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.

#CSS#JavaScript#SSR
1100

프론트엔드

setSelectionRange로 검색창 커서 옮기기

검색창 재포커스 시 커서를 텍스트 끝으로 옮기는 구현 문제를 다뤘습니다. `setSelectionRange`와 `setTimeout(0)`으로 브라우저 기본 동작 이후 처리했습니다.

#JavaScript#HTML#setSelectionRange
000

프론트엔드

setSelectionRange로 검색창 커서 옮기기

검색창 포커스 시 커서를 끝으로 옮기는 과정에서 발생한 이벤트 순서 문제를 분석했습니다. `setSelectionRange`와 0ms `setTimeout`으로 커서·스크롤 위치를 함께 제어했습니다.

#JavaScript#setSelectionRange#setTimeout
3700

프론트엔드

React Children 과 친해지기

React.Children.toArray()의 평탄화와 key 할당 방식을 설명했습니다. Fragment 내부를 평탄화하지 않는 제약과 대안을 소개합니다.

#React#children#컴포넌트
100

프론트엔드

React Children 과 친해지기

React.Children.toArray()의 평탄화와 key 부여 동작을 예제로 설명했습니다. Fragment 내부를 펼치지 못하는 한계와 보완 라이브러리도 소개합니다.

#React#React.Children#children
2200

프론트엔드

타입스크립트 꿀팁

타입스크립트에서 enum·index signature 대신 union type과 mapped type 활용을 권장했습니다. 외부 타입 보강과 타입 가드로 반복을 줄이고 안전한 타입 좁히기를 소개합니다.

#TypeScript#React#react-redux
000

프론트엔드

타입스크립트 꿀팁

TypeScript에서 union type·mapped type으로 런타임 영향과 값 누락 위험을 줄이는 방법을 소개했습니다. 외부 패키지 타입 확장과 다양한 타입 가드 활용법도 정리했습니다.

#TypeScript#React#react-redux
3300

데브옵스

Terraform을 사용해보았습니다. 나 혼자만 beanstalk / if(kakao)2020

Elastic Beanstalk·CircleCI 기반 환경을 Terraform·ECS·Jenkins로 전환한 경험을 공유합니다. 프로덕션 적용 배경과 구성 방식, 장단점을 다룹니다.

#Terraform#AWS#Elastic Beanstalk
400

프론트엔드

유연한 해외 현지화를 위한 iOS 앱 구성 / if(kakao)2020

iOS 앱의 다국가 배포를 위한 멀티 빌드 프로젝트 설정을 다룹니다. 태그 기반 문자열과 PropertyWrapper로 현지화 리소스를 적용합니다.

#iOS#localization#PropertyWrapper
000

프론트엔드

다크 모드로 알아보는 카카오페이지의 iOS 업데이트 / if(kakao)2020

카카오페이지 iOS 앱에 다크 모드를 도입하며 기존 색상 구조와 iOS 버전 호환성을 검토했습니다. 저조도 환경의 콘텐츠 감상 경험을 개선하기 위한 적용 과정을 다룹니다.

#iOS#다크 모드#UI/UX
100

프론트엔드

다음웹툰의 UX (New tab : Top) / if(kakao)2019

다음웹툰 앱의 메인 TOP 메뉴 UX와 디자인 철학을 소개합니다. 구현과 튜닝 과정, 다음웹툰의 NEXT 방향을 함께 다룹니다.

#UI/UX#mobile#다음웹툰
100

데브옵스

Airflow를 활용하여 아름다운 데이터 파이프라인 구성하기 / if(kakao)2019

Airflow의 주요 개념과 아키텍처, 데이터 파이프라인 구성 방법을 소개했습니다. 유사 워크플로 관리 도구와 비교해 카카오페이지의 선택 및 운영 방식을 설명했습니다.

#Airflow#ETL#pipeline
100

프론트엔드

리액트: 그것마저 결정해주마 / if(kakao)2019

React 개발 중 자주 마주치는 구현 방식과 기술 선택의 고민을 다룹니다. Hook 전환, SSR, Redux, TypeScript 도입 여부를 살펴봅니다.

#React#Redux#TypeScript
200