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

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

필터 0

선택된 필터 없음

2026년 9월 7일

WebView 소셜 인증을 RN 브리지로 전환하기

React Native 네이티브 SDK로 소셜 인증을 처리하고, 기존 React/Gate 로그인 흐름은 그대로 재사용하는 브리지 구조를 도입했습니다. WebView 통신은 계약과 재전송, ACK로 안정화하고 실기기 디버깅 가능성도 높였습니다.

#React Native#WebView

2900

2026년 9월 4일

프론트엔드

결제 기능 공통 컴포넌트 구현기

React 공통 컴포넌트로 결제 SDK 연동과 상태 관리를 일원화한 구현 경험을 정리했습니다. 인라인·팝업을 통합하고 성공·실패 후처리와 멱등성까지 고려한 설계가 핵심입니다.

Loopin의 vault 경량 엔트리 적용기

배럴 import 때문에 필요한 컴포넌트 하나가 패키지 전체를 끌고 오는 문제를 해결했습니다. 경량 서브패스 엔트리를 추가해 번들을 크게 줄이고 재사용성을 유지했습니다.

DOM 캡처 개선

Snap 기능의 DOM 캡처를 빠르게 만들기 위해 병목을 찾고 여러 라이브러리를 직접 비교했습니다. 또한 폰트, 의사요소, 스크롤, noscript 문제를 보정해 정확도까지 개선했습니다.

여기어때 홈 카드 개선기 (1)

여기어때 홈 카드 개선 사례로, 홈 화면의 첫 인상과 탐색 경험을 다룹니다.

#UI/UX

5400

테스트를 더 쓰기 전에, 어디에 쓸지부터: 동적 필터 ATDD 실험기

2026년 8월 31일

프론트엔드

테스트를 더 쓰기 전에, 어디에 쓸지부터: 동적 필터 ATDD 실험기

동적 필터를 적용하는 과정에서 ATDD 실험을 진행한 글입니다. 테스트를 더 쓰기 전에 어디에 쓸지부터 정하는 접근을 소개합니다.

APK 빌드 환경

Windows에서 React Native APK 빌드가 경로 길이 제한으로 실패하는 문제를 다뤘습니다. Junction과 짧은 CMake 스테이징 경로, 캐시 삭제로 해결하는 방법을 정리했습니다.

#Windows#React Native

2400

2026년 8월 31일

프론트엔드

Android WebView 본인인증 오류 개선

React Native Android WebView에서만 발생한 본인 인증 실패를 분석했습니다. 외부 인증 앱 URL 처리 로직을 보완해 인증 흐름을 정상화했습니다.

Android Emulator 로컬 서버 접속하기

Android Emulator에서는 localhost가 호스트 PC가 아니라 에뮬레이터 자신을 가리켜 접속이 실패할 수 있습니다. 에뮬레이터에서는 10.0.2.2를 쓰고, 필요하면 서버 바인딩과 방화벽도 함께 확인하셨습니다.

#Android Emulator#Vite

2000

2026년 8월 28일

프론트엔드

화면 설계서 작성과 QA

화면 설계서 작성과 QA를 통해 요구사항과 구현 결과의 차이를 줄이는 방법을 정리했습니다. 버전 관리와 예외 상황 정의가 문서 품질과 테스트 효율을 높였다고 설명했습니다.

SpreadJS 파일 올바르게 로드하기

SpreadJS 파일 형식별로 올바른 로딩 API를 매칭하는 방법을 정리했습니다. 확장자와 데이터 형태를 구분해 import()와 fromJSON()을 적용하면 파싱 오류를 줄일 수 있었습니다.

친절함과 간결함 사이, UX 라이팅

낯선 사용자층을 위한 앱에서 UX 라이팅의 기준을 고민한 글입니다. 버튼은 간결하게, 설명이 필요한 곳은 친절하게 나누는 원칙을 정리했습니다.

React Hook Form, Zod로 Form 관리하기

복잡한 다단계 폼을 React Hook Form, Zod, Jotai로 전략적으로 관리하는 방법을 정리했습니다. 조건별 스키마 분리, 임시 저장, 단계별 검증과 값 초기화 흐름을 설명했습니다.

Unity를 모르는 프론트엔드 개발자가 AI로 Unity 서비스를 React로 옮긴 방법

Unity를 모르는 프론트엔드 개발자가 AI와 하네스 엔지니어링으로 Unity 서비스를 React/Next로 옮긴 과정을 다뤘습니다. 명세 중심 검증, IME 대응, 가상 스크롤 전환, 자동 안전장치와 도메인별 리뷰 분리를 소개했습니다.

#React#Next.js

5300