리액트 상태관리 트렌드의 변화
리액트 상태관리의 흐름을 MVC부터 Redux, Context API, React Query, Jotai까지 정리했습니다. 또한 서버 상태와 클라이언트 상태를 분리해 쓰는 현재의 실전 관점과 주의할 점도 짚었습니다.
#React#상태관리
23005분
필터 1
React Query의 구조와 useQuery 실행 흐름 살펴보기
React Query의 내부 구조와 useQuery 실행 흐름을 살펴보았습니다. Query 상태 변화가 QueryObserver와 리스너를 거쳐 컴포넌트 리렌더링으로 이어지는 과정을 정리했습니다.
#React Query#useQuery
46005분
ChatGPT로 네이티브 지식없이 react-native-cookies 패키지 Android 버그 해결하기
React Native WebView 자동 로그인 구현 중 Android에서 `react-native-cookies` 버그를 해결한 사례입니다. 네이티브 지식 없이도 ChatGPT를 활용해 쿠키 연동 문제를 점검했습니다.
#React#Android
30005분
React를 SOLID 원칙으로 바라보기
React 컴포넌트를 SOLID 원칙 관점에서 바라보는 글입니다. 단일 책임과 의존성 분리를 통해 구조를 개선하는 방향을 제안합니다.
#React
25005분
AWS amplify로 서버리스 웹 애플리케이션 구축하기
AWS Amplify로 서버리스 웹 애플리케이션을 만드는 방법을 소개했습니다.\n회원가입/로그인과 REST API를 React 예제로 빠르게 붙이는 흐름을 설명했습니다.
#AWS#serverless
29005분
MSW - 더 나이스한 목킹을 위한 고민
MSW를 활용해 브라우저와 Node 환경에서 API 목킹을 통합하는 방법을 정리했습니다. 개발 속도 차이와 테스트용 목업 중복 문제를 줄인 사례를 소개했습니다.
#MSW#React
25005분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
상태 관리 라이브러리 Zustand
Zustand의 상태 관리가 클로저와 React의 external store 구독으로 동작하는 방식을 설명했습니다. 또한 tearing 문제와 useSyncExternalStore의 역할을 통해 내부 원리를 따라 만들어 보았습니다.
#Zustand#React
31005분
React JS + TypeScript로 영업 통계 페이지 개발한 경험
React JS와 TypeScript로 영업 통계 페이지를 개발한 경험을 공유했습니다. SD팀의 관련 프로젝트 흐름도 함께 언급했습니다.
#React#TypeScript
10005분
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.
#Next.js#React
15005분
View Transitions API
View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.
#React#CSS
24005분
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.
#ChatGPT#Next.js
18005분
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
#React#SSR
34005분