React를 SOLID 원칙으로 바라보기
React 컴포넌트를 SOLID 원칙 관점에서 바라보는 글입니다. 단일 책임과 의존성 분리를 통해 구조를 개선하는 방향을 제안합니다.
#React
25005분
필터 1
AWS amplify로 서버리스 웹 애플리케이션 구축하기
AWS Amplify로 서버리스 웹 애플리케이션을 만드는 방법을 소개했습니다.\n회원가입/로그인과 REST API를 React 예제로 빠르게 붙이는 흐름을 설명했습니다.
#AWS#serverless
29005분
MSW - 더 나이스한 목킹을 위한 고민
MSW를 활용해 브라우저와 Node 환경에서 API 목킹을 통합하는 방법을 정리했습니다. 개발 속도 차이와 테스트용 목업 중복 문제를 줄인 사례를 소개했습니다.
#MSW#React
25005분
상태 관리 라이브러리 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분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
#React#SSR
33005분
홈 화면에 웹 바로가기를 추가하기(A2HS)
웹 앱을 홈 화면에 추가해 네이티브 앱처럼 실행하는 A2HS 적용 방법을 설명했습니다. 매니페스트와 서비스 워커, beforeinstallprompt 활용법과 iOS 제한도 함께 정리했습니다.
#PWA#Web App Manifest
27005분
react-query로 데이터 처리하기 - 파트너스 레거시 코드 리팩토링(2) api 로직, react-query
파트너스 서비스 레거시 코드에서 API 로직을 분리하고 React Query를 도입한 사례를 다뤘습니다. Redux 중심 구조를 정리해 데이터 처리 방식을 개선하는 방향을 소개했습니다.
#React#Redux
18005분
적정기술 딜레마
적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.
#React#Next.js
26005분