새 배송지 추가 form 개발하기
배송지 추가 form을 만들며 상태, Context, ref, React Hook Form을 비교했습니다. 최종적으로 재렌더링과 관리 복잡도를 줄이기 위해 React Hook Form을 선택했습니다.
#Next.js#React Hook Form
25005분
필터 1
모노레포 이렇게 좋은데 왜 안써요?
여러 레포지토리로 분산된 프론트엔드 서비스를 모노레포로 통합한 사례를 소개했습니다. 공통 컨벤션과 패키지 공유로 생산성과 유지보수성이 크게 향상되었습니다.
#모노레포#yarn
38005분
사운드 리소스 전달 WebApp 만들기
사운드 리소스 전달용 WebApp Sonic을 단순한 설계 원칙으로 구현한 사례를 소개했습니다.\nNext.js, S3, git을 조합해 버전 관리와 동기화를 처리하고 복잡한 기능은 최소화했습니다.
#Next.js#AWS
22005분
NEXT.JS의 이미지 최적화는 어떻게 동작하는가?
Next.js의 이미지 최적화가 요청 시점에 어떻게 동작하는지 정리했습니다. 캐시 재사용, 포맷 선택, sharp와 Squoosh 성능 차이까지 살펴봤습니다.
#Next.js#이미지 최적화
30005분
Next, d3로 서버 사이드 지도 렌더링하기
Next.js와 d3로 부동산 데이터 시각화 지도를 만들며 구조를 개선한 과정을 정리했습니다. 지도와 시각화 레이어를 분리하고 d3 의존을 줄여 서버 사이드 렌더링도 가능하게 했습니다.
#Next.js#d3
3005분
코어 웹 바이탈 LCP 개선을 통한 검색 엔진 최적화(SEO) Part 1: Google Search Console, Next.js
코어 웹 바이탈 중 LCP 개선을 통해 SEO와 자연 유입을 높이려는 글입니다. Google Search Console과 Next.js를 중심으로 성능 개선 맥락을 다룹니다.
#SEO#Next.js
15005분
Velopers 추천광고
쿠팡 파트너스
개발자를 위한 인기 상품을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발자#노트북#컴퓨터
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.
#Next.js#React
15005분
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
정주행 모드 초기화와 CORS 에러를 함께 겪은 문제를 재현 조건과 코드 구조를 따라가며 분석했습니다.\n조건부 require를 전역 import로 단순화해 증상을 해결하고 원인 추적의 방향을 잡았습니다.
#Next.js#SSR
55005분
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.
#ChatGPT#Next.js
18005분
적정기술 딜레마
적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.
#React#Next.js
26005분
라이브관 프론트엔드 입장에서 바라보기
올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.
#Next.js#TypeScript
31005분
!프론트엔드 개발자의 next.js 개발기
Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.
#Next.js#React
34005분