
올리브영 잡 챌린지! 프론트엔드 개발자로의 전환
올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.

올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.


React Hook Form의 useForm 기본 사용법과 주요 기능을 정리했습니다. 또한 Controller, useController, useFieldArray, useFormContext 활용법도 함께 소개했습니다.

React Query를 상태관리 관점에서 소개하며 데이터 패칭과 캐싱, 동기화 장점을 정리했습니다. 또한 useQuery와 useMutation, staleTime과 cacheTime 활용 방법을 예시로 설명했습니다.


Micro Frontends 아키텍처로 웹앱을 전환한 과정과 어려움을 공유했습니다. 독립 배포와 런타임 통합으로 스쿼드별 개발 리듬과 사용자 경험을 함께 개선했습니다.

여러 레포지토리로 분산된 프론트엔드 서비스를 모노레포로 통합한 사례를 소개했습니다. 공통 컨벤션과 패키지 공유로 생산성과 유지보수성이 크게 향상되었습니다.

온라인몰 성능 개선을 위해 Infinite Scroll로 렌더링 범위를 줄인 사례를 다뤘습니다. 초기 로딩 속도와 스크롤 체감 성능이 개선됐습니다.

npm scoped 패키지 배포와 로컬 테스트, public 배포 절차를 정리했습니다. TypeScript 타입 지원을 위해 .d.ts 생성과 package.json 설정도 함께 다뤘습니다.

런칭 이후 리팩토링 과정에서 React Query를 도입한 경험을 소개했습니다. 데이터 로딩, 캐싱, 서버 상태 동기화 작업을 더 쉽게 다루는 관점이 핵심입니다.
쿠팡 파트너스
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.


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


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

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


React Native WebView 자동 로그인 구현 중 Android에서 `react-native-cookies` 버그를 해결한 사례입니다. 네이티브 지식 없이도 ChatGPT를 활용해 쿠키 연동 문제를 점검했습니다.