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

데브옵스

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

데브옵스

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

데브옵스

시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)

BackstopJS로 시각적 회귀 테스트를 구축한 경험을 정리했습니다. 스토리북과 Docker를 함께 사용해 UI 변경 검증과 운영 안정성을 높였습니다.

#BackstopJS#Docker#Puppeteer
5000

데브옵스

GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)

workflow_dispatch와 GitHub CLI로 브랜치 푸시 없이 배포 워크플로를 수동 실행했습니다. inquirer.js로 브랜치·region·환경 입력을 받아 배포 명령을 단순화했습니다.

#GitHub Actions#GitHub#CI/CD
000

데브옵스

GitHub Actions workflow를 수동으로 trigger하기(feat. inquirer.js)

GitHub Actions의 `workflow_dispatch`와 GitHub CLI를 이용해 수동 배포를 실행하는 방법을 소개했습니다. 또한 inquirer.js로 브랜치, region, env를 입력받아 배포를 자동화하는 구성을 설명했습니다.

#GitHub Actions#GitHub CLI#inquirer.js
4100

데브옵스

Lighthouse CI를 알아보고 Github Actions에 적용하기

Lighthouse CI를 GitHub Actions에 연동해 웹 성능 측정과 보고서 생성을 자동화했습니다. 임계값 검증과 PR 댓글 지표 공유로 성능 저하를 병합 전에 확인합니다.

#Lighthouse CI#GitHub Actions#CI/CD
200

데브옵스

Lighthouse CI를 알아보고 Github Actions에 적용하기

Lighthouse CI를 GitHub Actions에 연동해 웹 성능 측정과 보고서 생성을 자동화했습니다. 점수 기준으로 CI를 실패시키고 PR 댓글에 FCP·LCP 등 상세 지표를 표시했습니다.

#Lighthouse#GitHub Actions#CI/CD
3100

데브옵스

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

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

#HTTP#AWS#CloudFront
100

데브옵스

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

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

#HTTP#AWS#CloudFront
2700

데브옵스

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

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

#Docker#GitHub Actions#BuildKit
300

데브옵스

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

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

#Docker#GitHub Actions#cache
3300

데브옵스

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

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

#mitmproxy#HTTPS#Android
100

데브옵스

카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?

GitHub Actions로 push 테스트, 캐시, Slack 알림을 자동화한 사례를 소개했습니다. 브랜치명·Secrets·스케줄을 활용한 지역별 AWS 배포 흐름도 설명합니다.

#GitHub Actions#CI/CD#cache
100

데브옵스

카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?

GitHub Actions로 React 프로젝트의 검사와 빌드를 자동화하고 의존성 캐시를 적용했습니다. Composite Action과 Secrets로 Slack 알림 및 배포 브랜치 규칙을 구성했습니다.

#GitHub Actions#CI/CD#React
4300