필터 1
네이버 D2
프론트엔드

FE News 24년 9월 소식을 전해드립니다!

24년 9월 프론트엔드 기술 소식을 큐레이션해 소개했습니다. Angular, CSS, 런타임 비교 등 주요 글을 월간으로 공유했습니다.

#JavaScript#CSS
16005분
Node.js 라이브러리 배포 파이프라인에 플러그인 시스템 도입기
토스
백엔드

Node.js 라이브러리 배포 파이프라인에 플러그인 시스템 도입기

100개가 넘는 라이브러리를 관리하기 위해 배포 파이프라인에 플러그인 시스템을 도입한 사례를 소개했습니다. 공통 코어는 유지하면서 레포별 요구사항을 독립적으로 확장하는 구조를 설명했습니다.

#node.js#모노레포
21005분
카카오엔터테인먼트FE
프론트엔드

파일 변수 Deep-Dive

웹 서비스 규모가 커지며 Redux 전역 관리의 한계를 줄이기 위해 상태를 유형별로 분리한 사례를 소개했습니다. 추적이 불필요한 값은 파일 변수로 관리하고, SSG와 하드 네비게이션 제약도 함께 설명했습니다.

#Redux#Zustand
21005분
신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편
지마켓
아키텍처

신규 서비스 "꿀템"을 만들기 위한 여정(네? 다음달까지요?) -2편

꿀템 서비스의 프론트·백엔드 기술 스택 선택과 구현 과정을 소개했습니다. 또한 자체 QA, Oracle, QueryDSL, 사내 도구 활용 경험과 런칭 성과를 정리했습니다.

#node.js#Fastify
25005분
SSR 서버 최적화로 비용 아끼기
토스
프론트엔드

SSR 서버 최적화로 비용 아끼기

SSR 서버 최적화를 위해 측정 환경을 먼저 정비하고, RPS와 Event Loop 지표로 병목을 찾았습니다. serializer 제거, Yarn 업그레이드, Express 제거로 CPU 사용률을 낮춰 서버 수를 줄였습니다.

#SSR#Next.js
41005분
잘 쓰이는 디자인 시스템을 위한 여정
29cm
프론트엔드

잘 쓰이는 디자인 시스템을 위한 여정

29CM가 디자인 시스템 Ruler를 만들며 UI 파편화와 컴포넌트 구현 비용을 줄인 과정을 공유했습니다. Headless UI와 Figma 측정 도구로 재사용성과 운영 체계를 함께 강화했습니다.

#디자인 시스템#Headless UI
64005분
Gemini API로 차세대 AI 앱을 구현하는 'Gemini API 개발자 대회'에 참가하세요
Google for Developers
AI

Gemini API로 차세대 AI 앱을 구현하는 'Gemini API 개발자 대회'에 참가하세요

Gemini API로 혁신적인 앱과 프로토타입을 만드는 개발자 대회 안내입니다.\n모바일·웹 등 다양한 영역에서 참여할 수 있으며 데모 영상과 지원서를 제출해야 합니다.

#Gemini#API
9005분
스크립트 툴의 장점만 모았다! zx로 업무 자동화하기
데브시스터즈
프론트엔드

스크립트 툴의 장점만 모았다! zx로 업무 자동화하기

자바스크립트와 쉘 명령어를 함께 쓸 수 있는 zx 라이브러리를 소개합니다. 반복 작업 자동화와 파일 처리에 특히 유용한 활용 사례를 설명했습니다.

#JavaScript#자동화
22005분
쉽고 빠른 NodeJS 부하테스트 툴, autocannon
직방
백엔드

쉽고 빠른 NodeJS 부하테스트 툴, autocannon

NodeJS 부하테스트 도구 autocannon으로 API 성능을 비교하는 방법을 소개했습니다. 쿼리스트링을 랜덤화하고 duration, connections 같은 옵션으로 실제와 가까운 부하를 재현했습니다.

#node.js#NestJS
32005분
카카오엔터테인먼트FE
백엔드

마법소녀 이세계 아이돌 웹툰 런칭! BFF 장애 대응기

카카오페이지 BFF 장애 원인을 추적한 결과, node.js http agent의 keepAlive 기본값이 문제였습니다. keepAlive를 true로 바꾸고 미들웨어 중복 처리도 줄여 TPS와 CPU 상태를 개선했습니다.

#GraphQL#BFF
36005분
Tracing NodeJs Applications with OpenTelemetry
직방
AI

Tracing NodeJs Applications with OpenTelemetry

Node.js 애플리케이션에 OpenTelemetry를 붙여 Grafana Tempo로 트레이스를 수집하는 방법을 소개했습니다. 자동 계측과 수동 span, 분산 추적 활용 가능성도 함께 설명했습니다.

#node.js#TypeScript
18005분
웹앱의 전환, Micro Frontends 아키텍처
flex
프론트엔드

웹앱의 전환, Micro Frontends 아키텍처

Micro Frontends 아키텍처로 웹앱을 전환한 과정과 어려움을 공유했습니다. 독립 배포와 런타임 통합으로 스쿼드별 개발 리듬과 사용자 경험을 함께 개선했습니다.

#Micro Frontends#React
16005분