프론트엔드 아티클

새로운 기술 블로그가 추가되었어요

아임웹

필터 0

선택된 필터 없음

2023년 8월 4일

프론트엔드

자바스크립트 V8 엔진의 비동기 처리 알아보기

자바스크립트 프로젝트에서 API 통신과 응답 데이터 처리를 하며 비동기 동작의 필요성을 느낀 내용을 다뤘습니다. V8 엔진의 비동기 처리 흐름을 이해해보는 주제입니다.

프론트엔드 테스트 자동화 전략 - 1. 테스트 자동화란?

프론트엔드 특성상 입력과 출력이 명확하지 않아 테스트 설계에 고민이 필요하다고 다뤘습니다. 테스트 자동화의 의미와 프론트엔드 관점의 방향성을 정리했습니다.

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

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

React Query 도입 후기

런칭 이후 리팩토링 과정에서 React Query를 도입한 경험을 소개했습니다. 데이터 로딩, 캐싱, 서버 상태 동기화 작업을 더 쉽게 다루는 관점이 핵심입니다.

웹 개발자의 데이터 애플리케이션 flow 효율화하기

Dash를 도입해 데이터 조회, 가공, 렌더링을 역할별로 분리하고 연결하는 구조를 만들었습니다. 또한 Mixin과 압축을 활용해 유지보수성과 데이터 전송 효율을 개선했습니다.

리액트 상태관리 트렌드의 변화

리액트 상태관리의 흐름을 MVC부터 Redux, Context API, React Query, Jotai까지 정리했습니다. 또한 서버 상태와 클라이언트 상태를 분리해 쓰는 현재의 실전 관점과 주의할 점도 짚었습니다.

사파리, 모바일 환경에서의 트러블슈팅

사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.

#Safari#mobile

31005분

React Query의 구조와 useQuery 실행 흐름 살펴보기

2023년 7월 20일

프론트엔드

React Query의 구조와 useQuery 실행 흐름 살펴보기

React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.

#React Query#useQuery

44005분

2023년 7월 17일

프론트엔드

Storybook의 MSW mock 구조 개선

Storybook 스토리별로 흩어진 MSW GraphQL mock을 한곳으로 모아 관리하는 구조를 제안했습니다. recast 변환 스크립트로 중복과 누락 문제를 줄이는 마이그레이션 과정도 다뤘습니다.

스토리북 함께 사용해보기

스토리북을 함께 사용해보며 활용 경험을 소개했습니다. 스토리북의 매력을 짧게 짚어보는 내용입니다.

Google은 Lighthouse를 사용하지 않는다

Lighthouse와 실제 필드 데이터의 차이를 짚고, CrUX API로 구글의 실측 성능 데이터를 대시보드에 반영하는 방법을 소개했습니다. 성능 평가는 실험실 지표만 보지 말고 실제 사용자 데이터도 함께 확인해야 합니다.

앱 내 이벤트 로그 QA 시스템 자체 개발기

앱 내 이벤트 로그를 배포 환경과 관계없이 확인할 수 있도록 QA 시스템을 자체 개발한 사례입니다. 로그 검증 절차를 단순화하고 운영 편의를 높이기 위한 접근을 다뤘습니다.

#logging#QA

9005분