GraphQL
GraphQL의 개념과 REST 대비 장점을 설명하고, Spring for GraphQL과 Apollo Client 연동 예시를 함께 정리했습니다.\n필요한 데이터만 주고받는 API 설계에 유리하지만, 스키마를 공통 관리해야 하는 점도 함께 짚었습니다.
#GraphQL#REST API
25005분
필터 1
W CARE 서비스 프론트엔드를 TDD로 개발해본 후기
W CARE 프론트엔드의 복잡한 월경 이벤트 판별 로직을 TDD로 개발한 사례를 소개했습니다. 경계값 테스트와 관심사 분리로 신뢰성과 유지보수성을 높였습니다.
#TDD#React
24005분
useInfiniteQuery로 무한스크롤 구현하기
무한스크롤은 `useInfiniteQuery`와 `useInView`로 구현했습니다. 뒤로가기는 세션 스토리지와 QueryClient 캐시로 상품 목록과 스크롤을 복원했습니다.
#Next.js#React
45005분
올리브영 잡 챌린지! 프론트엔드 개발자로의 전환
올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.
#React#Next.js
18005분
React Hook Form
React Hook Form의 useForm 기본 사용법과 주요 기능을 정리했습니다. 또한 Controller, useController, useFieldArray, useFormContext 활용법도 함께 소개했습니다.
#React#React Hook Form
17005분
React-query 를 사용해 상태관리를 해보자
React Query를 상태관리 관점에서 소개하며 데이터 패칭과 캐싱, 동기화 장점을 정리했습니다. 또한 useQuery와 useMutation, staleTime과 cacheTime 활용 방법을 예시로 설명했습니다.
#React#state management
5005분
웹앱의 전환, Micro Frontends 아키텍처
Micro Frontends 아키텍처로 웹앱을 전환한 과정과 어려움을 공유했습니다. 독립 배포와 런타임 통합으로 스쿼드별 개발 리듬과 사용자 경험을 함께 개선했습니다.
#Micro Frontends#React
16005분
모노레포 이렇게 좋은데 왜 안써요?
여러 레포지토리로 분산된 프론트엔드 서비스를 모노레포로 통합한 사례를 소개했습니다. 공통 컨벤션과 패키지 공유로 생산성과 유지보수성이 크게 향상되었습니다.
#모노레포#yarn
38005분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
온라인몰 성능개선을 위한 FE 개발자의 고민 part-1
온라인몰 성능 개선을 위해 Infinite Scroll로 렌더링 범위를 줄인 사례를 다뤘습니다. 초기 로딩 속도와 스크롤 체감 성능이 개선됐습니다.
#React#성능
28005분
npm 패키지 배포 가이드
npm scoped 패키지 배포와 로컬 테스트, public 배포 절차를 정리했습니다. TypeScript 타입 지원을 위해 .d.ts 생성과 package.json 설정도 함께 다뤘습니다.
#npm#TypeScript
2005분
React Query 도입 후기
런칭 이후 리팩토링 과정에서 React Query를 도입한 경험을 소개했습니다. 데이터 로딩, 캐싱, 서버 상태 동기화 작업을 더 쉽게 다루는 관점이 핵심입니다.
#React#cache
27005분
웹 개발자의 데이터 애플리케이션 flow 효율화하기
Dash를 도입해 데이터 조회, 가공, 렌더링을 역할별로 분리하고 연결하는 구조를 만들었습니다. 또한 Mixin과 압축을 활용해 유지보수성과 데이터 전송 효율을 개선했습니다.
#Dash#Python
12005분