프론트엔드 기술 블로그 최신 글

파수 AI 2026년 3차 신입 공개 채용, 접수 기간 10월 12일~25일
필터 0
선택된 필터 없음
도도카트 안드로이드 앱 개선 여정
spoqa
프론트엔드

도도카트 안드로이드 앱 개선 여정

복잡해진 안드로이드 앱을 모듈화하고 Kotlin DSL, Hilt, Coroutine·Flow 기반으로 정비했습니다. GraphQL 모델 분리와 테스트 확대를 후속 과제로 남겼습니다.

#Android#Kotlin
1700
GatsbyJS에서 l10n(지역화) 지원하기 (간단한 함수형을 곁들인)
데브시스터즈
프론트엔드

GatsbyJS에서 l10n(지역화) 지원하기 (간단한 함수형을 곁들인)

Gatsby Node API와 GraphQL로 언어별 번역 노드·페이지를 생성하는 방식을 소개했습니다. React Context와 fp-ts를 활용해 브라우저 언어 라우팅 및 타입 안전한 번역 적용을 구현했습니다.

#GatsbyJS#React
2000
딜리셔스 윈터 인턴십 기록 - iOS편
딜리셔스
프론트엔드

딜리셔스 윈터 인턴십 기록 - iOS편

iOS 윈터 인턴십의 지원·재지원과 정규직 전환 경험을 공유했습니다. Kakao Pose API와 Firebase로 거북목 진단 앱을 구현하며 라이브러리와 코드 리뷰를 익혔습니다.

#iOS#Swift
3400
Zettelkasten과 서비스 문서화 그리고 가슴 설레는 OKR – Hwahae network graph
화해
프론트엔드

Zettelkasten과 서비스 문서화 그리고 가슴 설레는 OKR – Hwahae network graph

파편화된 서비스 문서를 Zettelkasten 기반 그래프로 연결하는 HNG MVP를 구현했습니다. Strapi·Next.js·G6 선택 과정과 문서화 운영 과제를 공유합니다.

#Zettelkasten#문서화
100
TypeScript 쓰면서 OpenAPI Generator 는 안 쓴다고?
매드업
프론트엔드

TypeScript 쓰면서 OpenAPI Generator 는 안 쓴다고?

Swagger와 OpenAPI Generator로 REST API 명세 기반 TypeScript 타입 자동 생성을 소개했습니다. API 변경 추적과 프론트엔드·백엔드 간 오사용 감소에 활용할 수 있습니다.

#TypeScript#Swagger
3300
UI 라이브러리 개발 [기술 블로그]
로플랫
프론트엔드

UI 라이브러리 개발 [기술 블로그]

디자인 시스템 부재로 생긴 스타일 불일치와 소통 비용을 React UI 라이브러리로 개선했습니다. Storybook·자동화 테스트·ESM/CJS 빌드로 검증과 호환성을 강화했습니다.

#React#TypeScript
3600
Slack으로 iOS 앱 배포하기
브랜디
프론트엔드

Slack으로 iOS 앱 배포하기

Slack 커맨드와 배포 전용 머신으로 iOS 앱 배포 과정을 자동화했습니다. Fastlane·환경변수·서브모듈로 멀티 프로덕트 배포를 일관되게 관리했습니다.

#iOS#Slack
3600
웹프론트엔드 개발자의 Rust 돌려까기
비브로스
프론트엔드

웹프론트엔드 개발자의 Rust 돌려까기

Rust의 소유권과 Move를 TypeScript의 GC 기반 메모리 관리와 비교해 학습 난도를 분석했습니다. WebAssembly 활용보다 안정성과 성능을 위한 개발 관점 학습의 가치를 제시합니다.

#Rust#TypeScript
2400
React-Native CodePush 적용기
레모네이드
프론트엔드

React-Native CodePush 적용기

React Native 앱에 AppCenter CodePush를 연동해 JavaScript 변경을 원격 배포하는 과정을 정리했습니다. Staging·Production 분리와 앱 복귀 시 업데이트 전략, 롤백 방법을 함께 소개합니다.

#React#React Native
1500
웹 워커를 통해 이미지 색상 수집기 성능 개선하기
카카오엔터테인먼트FE
프론트엔드

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

Canvas ImageData의 색상 수집 작업을 다중 웹 워커로 분할해 처리 시간을 줄였습니다. 메인 스레드 블로킹을 완화해 UI 갱신과 다른 스크립트 지연을 줄였습니다.

#Canvas#Web Worker
000
웹 워커를 통해 이미지 색상 수집기 성능 개선하기
카카오엔터테인먼트FE
프론트엔드

웹 워커를 통해 이미지 색상 수집기 성능 개선하기

Canvas 이미지의 RGBA 배열에서 고유 색상을 추출하는 작업을 웹 워커로 분리했습니다. 다중 워커로 작업을 나눠 메인 스레드 블로킹과 UI 대기시간을 줄였습니다.

#Canvas#Web Worker
2100
three.js in Next.js
레모네이드
프론트엔드

three.js in Next.js

WebGL을 추상화한 three.js의 핵심 구성과 애니메이션 루프를 설명했습니다. Next.js에서 useRef·useEffect로 바닐라 three.js 도넛을 렌더링하는 패턴을 제시했습니다.

#three.js#Next.js
2600
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
카카오엔터테인먼트FE
프론트엔드

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

Storybook 스토리의 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 간 핸들러 초기화와 Node.js 절대 경로 문제 해결 방법도 소개합니다.

#MSW#Storybook
000
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
카카오엔터테인먼트FE
프론트엔드

MSW 모킹 코드 재사용하기 feat. Storybook, Jest

Storybook 스토리에 선언한 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 후 핸들러 초기화와 Node.js 절대 URL 처리 방법도 소개합니다.

#MSW#Storybook
2600