AWS amplify로 서버리스 웹 애플리케이션 구축하기
AWS Amplify로 인증, REST API, 데이터베이스, 호스팅을 구성하는 서버리스 웹 개발 과정을 소개했습니다.\nFigma 연동과 Git 기반 CI/CD로 프런트엔드 개발자의 빠른 프로토타이핑을 지원합니다.
#AWS#serverless
000
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
AWS amplify로 서버리스 웹 애플리케이션 구축하기
AWS amplify로 서버리스 웹 애플리케이션 구축하기
AWS Amplify로 서버리스 웹 애플리케이션을 만드는 방법을 소개했습니다.\n회원가입/로그인과 REST API를 React 예제로 빠르게 붙이는 흐름을 설명했습니다.
#AWS#serverless
3400
MSW - 더 나이스한 목킹을 위한 고민
MSW를 활용해 브라우저와 Node 환경에서 API 목킹을 통합하는 방법을 정리했습니다. 개발 속도 차이와 테스트용 목업 중복 문제를 줄인 사례를 소개했습니다.
#MSW#React
2900
상태 관리 라이브러리 Zustand
Zustand의 상태 관리가 클로저와 React의 external store 구독으로 동작하는 방식을 설명했습니다. 또한 tearing 문제와 useSyncExternalStore의 역할을 통해 내부 원리를 따라 만들어 보았습니다.
#zustand#React
3300
React JS + TypeScript로 영업 통계 페이지 개발한 경험
React JS와 TypeScript로 영업 통계 페이지를 개발한 경험을 공유했습니다. SD팀의 관련 프로젝트 흐름도 함께 언급했습니다.
#React#TypeScript
1300
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.
#Next.js#React
2500
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
CORS 에러와 정주행 모드 초기화 문제를 CSS 로딩 방식 변경으로 해결했습니다.\nSSR·ES Module·Dynamic Import의 displayName 손실까지 추적해 근본 원인을 분석했습니다.
#Next.js#React
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
뷰티 필터를 개발하며 얻은 새로운 경험
뷰티 상품 탐색 경험 개선을 위해 웹 필터를 확장하고 React Query를 도입했습니다. URL 상태 저장과 서버 상태 동기화로 탐색 편의성과 데이터 최신성을 높였습니다.
#React#React Query
000
View Transitions API
View Transitions API로 React 상태 변경 전후 화면을 캡처해 복잡한 화면 전환을 단순화했습니다. 가상 요소와 CSS·Web Animations API로 요소별 슬라이드와 썸네일 이동 효과를 구현했습니다.
#View Transitions API#React
000
우당탕탕~ 영상 서비스 개발기 1탄 : 영상 CMS
영상 CMS에 Refine·Apigee를 적용해 운영 UI와 인증 처리를 구성했습니다. Tus 기반 업로드 서버를 GCS·Redis·GKE로 개선해 대용량 전송 성능을 높였습니다.
#React#Refine
000
View Transitions API
View Transitions API
View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.
#React#CSS
3100
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.
#ChatGPT#Next.js
2000
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
#React#SSR
3500
Higher-Order Components는 여전히 유용하다
반복되는 URL 파라미터 검증과 조건부 렌더링을 HOC로 분리한 사례를 소개했습니다.\n유효한 값을 props로 주입해 컴포넌트 내부 조건문과 문맥 분산을 줄였습니다.
#React#HOC
000