필터 1
잘 쓰이는 디자인 시스템을 위한 여정
29cm
프론트엔드

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#GraphQL#BFF
3600
Tracing NodeJs Applications with OpenTelemetry
직방
AI

Tracing NodeJs Applications with OpenTelemetry

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

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

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

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

#Micro Frontends#React
1800
Jest 활용 경험: 테스팅에 대한 고민과 통찰
IMQA
프론트엔드

Jest 활용 경험: 테스팅에 대한 고민과 통찰

Jest를 선택한 배경과 실제 활용 경험을 바탕으로 테스트 작성과 구조화 방법을 정리했습니다. 코드 품질 향상 효과와 함께 일부 성능 이슈도 함께 살펴보았습니다.

#Jest#test
2600
카카오엔터테인먼트FE
데브옵스

GitHub Actions - JavaScript action 만들기

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

#GitHub Actions#JavaScript
14300
리디에서 Kafka를 사용하는 법
RIDI
백엔드

리디에서 Kafka를 사용하는 법

리디에서 내부 API를 Kafka 기반 이벤트 버스로 전환한 활용 사례를 소개했습니다. 실시간 랭킹, 분석, 작업 큐, 이벤트 처리에 Kafka를 적용한 방식과 예시 코드를 다뤘습니다.

#Kafka#event bus
4600
유연하게 프로젝트별 개발환경 자동 설정하기(nvm) - nvm deeper shell integration 활용
카카오헤어샵
프론트엔드

유연하게 프로젝트별 개발환경 자동 설정하기(nvm) - nvm deeper shell integration 활용

여러 프론트엔드 프로젝트의 Node.js 버전 차이로 개발환경 관리가 필요한 상황을 다뤘습니다. nvm deeper shell integration으로 프로젝트별 환경을 자동 설정하는 방법을 소개했습니다.

#node.js
1200
뱅크샐러드 Web chapter에서 GitHub Action 기반의 CI 속도를 개선한 방법
뱅크샐러드
데브옵스

뱅크샐러드 Web chapter에서 GitHub Action 기반의 CI 속도를 개선한 방법

GitHub Action 기반 CI 속도 개선 사례를 소개한 글입니다. Node.js와 Npm을 사용하는 웹 프론트엔드 환경에서의 개선 맥락을 다룹니다.

#GitHub Actions#node.js
2000
ZUM
프론트엔드

Zum Portal Core JS 소개

줌인터넷 프론트엔드 파트의 표준화 코어 패키지 도입과 분리 과정을 소개했습니다.\nSSR, 캐시, 설정 표준화로 유지보수와 배포 시간을 개선한 내용을 정리했습니다.

#Vue.js#node.js
400
ZUM
프론트엔드

Vue SSR 제대로 적용하기 (feat. Vanilla SSR)

SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.

#Vue#SSR
400