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

파수 AI 2026년 3차 신입 공개 채용, 접수 기간 10월 12일~25일

필터 0

선택된 필터 없음

2022년 5월 24일

프론트엔드

테스트 자동화 구축 이야기

모바일 리그레션 테스트의 병목을 줄이기 위해 Appium 기반 자동화 구축 전략을 정리했습니다. Positive 케이스를 선별하고 Python·Unittest로 Android 테스트 구조와 리포팅을 구성했습니다.

사람인 Android App Refactoring

MVC 구조의 Android 앱에서 Activity·Fragment에 책임이 집중되며 코드가 비대해진 문제를 다뤘습니다. 앱 구조 개선을 위해 리팩토링 필요성과 책임 분리 관점을 공유했습니다.

React 18: 리액트 서버 컴포넌트 준비하기

React Server Components가 데이터 요청 waterfall과 번들 크기를 줄이는 방식을 설명했습니다. SSR과의 차이, 컴포넌트 분류 및 제약 조건도 정리했습니다.

#React#React Server Components

1200

2022년 5월 20일

프론트엔드

Transition : 쉿, 이제 안전해 나의 작은 Suspense

Suspense의 fallback 전환이 유발하는 화면 깜빡임 문제를 짚었습니다. React 18 Transition과 Recoil 지원 기능으로 이전 화면을 유지하는 방법을 소개합니다.

자바스크립트 v8 엔진의 가비지 컬렉션 동작 방식

V8 엔진의 세대별 힙 구조와 마이너·메이저 가비지 컬렉션 흐름을 설명했습니다. Orinoco 기술로 stop-the-world 시간을 줄이는 방식을 정리했습니다.

#JavaScript#V8

000

자바스크립트 v8 엔진의 가비지 컬렉션 동작 방식

2022년 5월 19일

프론트엔드

자바스크립트 v8 엔진의 가비지 컬렉션 동작 방식

V8의 New·Old space 기반 세대별 가비지 컬렉션 구조를 설명했습니다. 마이너·메이저 GC와 Orinoco의 지연 완화 기법을 정리했습니다.

Sentry로 우아하게 프론트엔드 에러 추적하기

Sentry를 React 프론트엔드에 적용해 재현 어려운 클라이언트 오류를 추적하는 방법을 소개했습니다. Scope·Context·tag·fingerprint로 분석과 알람 조건을 정교화하는 방안을 설명했습니다.

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유

Redux 기반 서버 상태 관리의 보일러플레이트와 직접 구현 부담을 분석했습니다. React Query의 Query·Mutation·캐싱 기능으로 비동기 처리와 사용자 경험을 개선했습니다.

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Next.js 빌드 타임 환경 변수의 환경별 빌드 문제를 분석했습니다. `window.__ENV` 스크립트로 런타임 주입하는 방식을 구현했습니다.

아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다. 단위 구분의 주관성은 UI 모델링·코드 리뷰·compound 컴포넌트로 보완했습니다.

#React#디자인 시스템

100

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

2022년 5월 5일

프론트엔드

Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

Next.js의 빌드 타임 dotenv 주입으로 환경별 빌드가 필요한 문제를 분석했습니다. public 스크립트와 window 객체를 활용한 런타임 환경 변수 주입 방식을 구현했습니다.

#Next.js#dotenv

3200

아토믹 디자인을 활용한 디자인 시스템 도입기

2022년 5월 5일

프론트엔드

아토믹 디자인을 활용한 디자인 시스템 도입기

카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다. 컨텍스트 기반 분류, Storybook·Figma 연계, 외부 스타일 주입 원칙을 적용했습니다.

react-testing-library 의 fireEvent 를 userEvent로 마이그레이션 하기 with Antd

fireEvent 기반 테스트를 userEvent로 전환하며 실제 사용자 상호작용을 반영했습니다. Ant Design 컴포넌트의 포인터 이벤트와 multiple select mocking 이슈를 해결했습니다.

#React#React Testing Library

[WPF] XAML Styler

XAML Styler로 WPF 팀의 XAML 서식 규칙을 통일하는 방법을 소개했습니다. 설정 파일과 일괄 포맷 기능으로 기존 코드의 가독성을 개선합니다.

#WPF#XAML

3500