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)

프론트엔드

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

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

#Safari#mobile#scrollTop
4800

프론트엔드

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

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

#React Query#useQuery#QueryClient
5300

데브옵스

AWS amplify로 서버리스 웹 애플리케이션 구축하기

AWS Amplify로 인증, REST API, 데이터베이스, 호스팅을 구성하는 서버리스 웹 개발 과정을 소개했습니다. Figma 연동과 Git 기반 CI/CD로 프런트엔드 개발자의 빠른 프로토타이핑을 지원합니다.

#AWS#serverless#React
100

데브옵스

AWS amplify로 서버리스 웹 애플리케이션 구축하기

AWS Amplify로 서버리스 웹 애플리케이션을 만드는 방법을 소개했습니다. 회원가입/로그인과 REST API를 React 예제로 빠르게 붙이는 흐름을 설명했습니다.

#AWS#serverless#React
3500

프론트엔드

문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 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

데브옵스

GitHub Actions - JavaScript action 만들기

중첩 조건문이 많은 Composite action을 Map 기반 JavaScript action으로 전환했습니다. 의존성 설치·캐시와 GitHub 이벤트 정보 활용 방법도 함께 소개합니다.

#GitHub Actions#JavaScript#node.js
100

데브옵스

GitHub Actions - JavaScript action 만들기

조건문이 많은 Composite action을 Map 기반 JavaScript action으로 리팩터링하는 과정을 정리했습니다. @actions/core, @actions/github와 캐싱을 활용해 GitHub Actions에서 안정적으로 실행하는 방법도 다뤘습니다.

#GitHub Actions#JavaScript#node.js
14600

데브옵스

우당탕탕~ 영상 서비스 개발기 3탄 : 플레이어 백엔드 서버와 데이터 수집

영상 플레이어 API의 성능 요구에 맞춰 Cloud Run에서 GKE로 전환하고 SSE를 부하 테스트했습니다. Vector·GCS·Dataflow·BigQuery 기반 로그 수집과 분석 파이프라인을 구축했습니다.

#Go#GCP#GKE
100

데브옵스

우당탕탕~ 영상 서비스 개발기 2탄 : 인코더와 라이브 서비스

영상 인코딩·패키징·CDN 파이프라인과 자막 기반 채팅 다시보기, Timed Metadata 투표를 소개했습니다. 라이브 장애의 HOL 블로킹 원인을 분석하고 이미지 캐시·HTTP/2로 개선했습니다.

#HLS#Airflow#GCP
000

프론트엔드

View Transitions API

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

#View Transitions API#React#CSS
200

아키텍처

우당탕탕~ 영상 서비스 개발기 1탄 : 영상 CMS

영상 CMS에 Refine·Apigee를 적용해 운영 UI와 인증 처리를 구성했습니다. Tus 기반 업로드 서버를 GCS·Redis·GKE로 개선해 대용량 전송 성능을 높였습니다.

#React#Refine#Apigee
500

프론트엔드

View Transitions API

View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.

#React#CSS#JavaScript
3100

아키텍처

프론트엔드와 SOLID 원칙

프론트엔드에서 SOLID, 특히 SRP를 책무 기반 컴포넌트 설계로 해석한 글입니다. 카카오페이지 사례를 통해 기획·디자인·개발 흐름에 맞춘 구조와 OCP 적용 방식을 설명했습니다.

#SOLID#SRP#OCP
4900

AI

ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)

ChatGPT로 웹툰 서비스의 UI, 상태 관리, API 연동을 구현하며 활용 범위를 실험했습니다. 생성 코드의 오류와 최신 정보 한계를 검증으로 보완해야 함을 확인했습니다.

#ChatGPT#Next.js#Tailwind
200

프론트엔드

ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)

ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.

#ChatGPT#Next.js#React
2100