Velopers
모든 블로그
화해

화해

도메인blog.hwahae.co.kr
주요 카테고리 프론트엔드 · DevOps

활동 요약

대표 인기 포스트화해 Data & Experiment Festival(D.E.F)4 조회
최근 30일
0개
평균 조회
2
누적 조회
114
전체 글
71개
마지막 발행
2023. 5. 18.
블로그 방문

화해 기술 블로그 글 (19)

프론트엔드

맨땅에 메이크업으로 헤딩하기

메이크업 신규 사업에서 MVP·A/B 테스트로 기능 가치를 검증하고 간편 발색 보기를 론칭했습니다. 지표 중심의 빠른 실험 과정에 UT를 더해 사용성과 개발 공수를 함께 개선했습니다.

#프로덕트디자인#MVP#A/B 테스트
100

프론트엔드

모노레포 적용부터 yarn berry까지

멀티레포의 중복과 표준화 문제를 해결하기 위해 Yarn Berry 기반 모노레포를 설계했습니다. PnP 캐싱의 한계를 분석하고, 필요한 코드만 배포하는 yarn release 플러그인을 구현했습니다.

#모노레포#Yarn Berry#PnP
400

프론트엔드

Higher-Order Components는 여전히 유용하다

반복되는 URL 파라미터 검증과 조건부 렌더링을 HOC로 분리한 사례를 소개했습니다. 유효한 값을 props로 주입해 컴포넌트 내부 조건문과 문맥 분산을 줄였습니다.

#React#HOC#Hooks
200

프론트엔드

Notion API와 함께 정적 페이지로의 여정

Notion API로 정적 페이지를 관리하기 위한 Block 조회와 콘텐츠 변환 방식을 검토했습니다. 공식 API 기반 Markdown 변환과 remark·rehype 활용 방향을 선택했습니다.

#Notion API#정적 페이지#markdown
100

프론트엔드

Mocking으로 프론트엔드 DX를 높여보자

API 미구현 시 하드코딩 Mocking으로 생기는 교체 비용과 개발 병목을 짚었습니다. MSW의 Service Worker 기반 요청 가로채기로 API 의존성을 낮추는 방법을 소개합니다.

#MSW#Service Worker#Mocking
200

프론트엔드

보쌈 먹으며 프론트엔드와 친해지기

점심시간 공동 영상회로 프론트엔드 지식과 동료 간 공감대를 넓혔습니다. 자율 참여와 스몰 토크를 바탕으로 학습 문화를 꾸준히 이어갔습니다.

#FEConf#module federation#문화
100

프론트엔드

집합의 관점에서 타입스크립트 바라보기

구조적 타이핑을 기반으로 타입스크립트의 인터섹션과 유니온 타입을 집합 관점에서 해석했습니다. `keyof` 결과가 일반적인 집합 직관과 달라지는 이유를 예시로 설명합니다.

#TypeScript#유니온타입#구조적 타이핑
100

프론트엔드

React Hook Form의 isDirty와 dirtyFields를 알아보자

React Hook Form의 isDirty와 dirtyFields가 서로 다르게 계산되는 구조를 설명했습니다. setValue 사용 시 shouldDirty 옵션이 상태 재계산에 미치는 영향을 정리했습니다.

#React#React Hook Form#form
200

프론트엔드

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

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

#Zettelkasten#문서화#Jamstack
100

프론트엔드

누구나 확인 할 수 있는 안드로이드 Log

Android 앱 내부에서 logcat을 오버레이 창으로 보여주는 디버그 도구를 구현했습니다. 데이터팀 등이 개발환경 없이 이벤트 로그를 실시간 확인하도록 지원했습니다.

#Android#Logcat#ADB
100

프론트엔드

React Query와 함께하는 API 에러 처리 설계하기

React Query의 onError와 useApiError Hook으로 API 에러 처리 흐름을 중앙화했습니다. HTTP 상태·서비스 코드별 우선순위로 전역 규칙과 컴포넌트 예외를 함께 관리합니다.

#React#React Query#API
100

프론트엔드

Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?

Redux Toolkit이 Redux의 설정 복잡성과 보일러플레이트를 줄이는 주요 API를 정리했습니다. 상태 관리는 createSlice, 비동기는 createAsyncThunk, 데이터 패칭은 RTK Query를 제안합니다.

#Redux Toolkit#Redux#React
000

프론트엔드

Finite state machine & statecharts – XState

XState로 React의 복잡한 상태를 FSM과 Statecharts로 모델링하는 방법을 설명했습니다. boolean 조합 문제를 context, guards, 계층·병렬 상태와 비동기 전이로 개선했습니다.

#React#XState#상태관리
000

프론트엔드

Unit Test 시작하기

Android 테스트 피라미드를 바탕으로 단위·통합·UI 테스트의 역할과 비용을 설명했습니다. 단위 테스트부터 도입하고 CI로 지속 관리하는 방식을 제안합니다.

#Android#unit test#integration test
100

프론트엔드

Atomic state management – Jotai

Jotai의 atomic state management 구조와 Context 재렌더링 문제 완화 방식을 소개했습니다. 파생 atom, 비동기 처리, 렌더링 최적화와 외부 라이브러리 통합 사례를 정리했습니다.

#React#Jotai#상태관리
000

프론트엔드

Amplify Console에 monorepo를 연결해서 웹호스팅 할 때의 주의사항

Amplify Console에 monorepo를 연결할 때 빌드 실행 경로와 Preview 동작 범위를 설명했습니다. 불필요한 빌드·비용을 막기 위한 브랜치 자동 감지와 webhook 배포 방식을 제안합니다.

#AWS#Amplify Console#monorepo
000

프론트엔드

웹브라우저의 이미지 캐싱 이슈 해결하기

이미지 표시 후 XHR 다운로드가 CORS 오류로 실패한 원인을 브라우저의 응답 헤더 캐싱에서 찾았습니다. 요청 URL을 분리해 캐시 재사용을 피하는 방식으로 해결했습니다.

#브라우저#cache#CORS
000

프론트엔드

〈htmI〉 | 프론트엔드 플랫폼 , “성장도 공유도 멈추지 않는다”

화해 프론트엔드 플랫폼의 어드민·웹뷰 서비스 운영과 개발 문화 개선 활동을 소개했습니다. 문서화, 코드 규칙, 코드리뷰, 성장 공유로 팀 확장과 협업을 준비합니다.

#Git#코드리뷰#문서화
300