NEXT.JS의 이미지 최적화는 어떻게 동작하는가?
Next.js의 이미지 최적화가 요청 시점에 어떻게 동작하는지 정리했습니다. 캐시 재사용, 포맷 선택, sharp와 Squoosh 성능 차이까지 살펴봤습니다.
#Next.js#이미지 최적화
3800
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
Next, d3로 서버 사이드 지도 렌더링하기
Next, d3로 서버 사이드 지도 렌더링하기
Next.js와 d3로 부동산 데이터 시각화 지도를 만들며 구조를 개선한 과정을 정리했습니다. 지도와 시각화 레이어를 분리하고 d3 의존을 줄여 서버 사이드 렌더링도 가능하게 했습니다.
#Next.js#d3
900
코어 웹 바이탈 LCP 개선을 통한 검색 엔진 최적화(SEO) Part 1: Google Search Console, Next.js
코어 웹 바이탈 중 LCP 개선을 통해 SEO와 자연 유입을 높이려는 글입니다. Google Search Console과 Next.js를 중심으로 성능 개선 맥락을 다룹니다.
#SEO#Next.js
2200
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
Next.js의 컴포넌트 내부 CSS 임포트와 브라우저 캐시 재사용이 CORS 오류를 일으킨 과정을 분석했습니다. 전역 CSS 임포트 또는 crossorigin 설정으로 문제를 해결했습니다.
#Next.js#CORS
000
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 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
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1
정주행 모드 초기화와 CORS 에러를 함께 겪은 문제를 재현 조건과 코드 구조를 따라가며 분석했습니다.\n조건부 require를 전역 import로 단순화해 증상을 해결하고 원인 추적의 방향을 잡았습니다.
#Next.js#SSR
6000
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 웹툰 서비스의 UI, 상태 관리, API 연동을 구현하며 활용 범위를 실험했습니다. 생성 코드의 오류와 최신 정보 한계를 검증으로 보완해야 함을 확인했습니다.
#ChatGPT#Next.js
000
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT는 FE개발자를 대체할 수 있을까? (AI로 개발하기)
ChatGPT로 FE 개발을 어디까지 보조할 수 있는지 미니 프로젝트로 살펴보았습니다. 간단한 코드 생성에는 유용하지만 최신 설정과 정확한 구현은 검증이 필요했습니다.
#ChatGPT#Next.js
2000
적정기술 딜레마
적정기술 딜레마
적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.
#React#Next.js
3500
라이브관 프론트엔드 입장에서 바라보기
올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.
#Next.js#TypeScript
3900
!프론트엔드 개발자의 next.js 개발기
!프론트엔드 개발자의 next.js 개발기
Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.
#Next.js#React
3700
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
웹 프론트엔드 팀이 Lighthouse와 Web Vitals로 성능을 측정하며 개선 문화를 만들었습니다. 또한 측정 결과의 변동성을 줄이기 위한 모니터링 방식도 함께 고민했습니다.
#React#Next.js
200
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
웹 프론트엔드 팀이 Lighthouse와 Web Vitals로 성능 관리를 문화로 도입한 과정을 소개했습니다. 이미지 로딩, 코드 분할, 스크립트 전략으로 개선하고 측정 변동성까지 다뤘습니다.
#성능#Lighthouse
1800