Next.js 캐싱으로 웹 서버 성능 최적화
Next.js Full Route Cache 적용을 위해 상품 페이지를 ISR 기반 정적 경로로 전환했습니다. 평균 TPS를 34에서 220으로 높이고 CPU·응답시간을 개선했습니다.
#Next.js#SSR
000
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
Next.js 캐싱으로 웹 서버 성능 최적화
Next.js 캐싱으로 웹 서버 성능 최적화
Next.js App Router에서 Full Route Cache를 활용해 상품 목록·상세 페이지의 서버 렌더링 비용을 줄인 사례입니다. 부하테스트에서 TPS를 크게 개선하고 CPU 사용률도 낮췄습니다.
#Next.js#SSR
4700
Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기
Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.
#Next.js#MSW
3800
FE 리더가 되어버린 나, 이대로 괜찮은가?: 시니어 개발자인 내가 주니어 매니저가 되어 버린 건에 대하여
프론트엔드 리더와 시니어 개발자들이 기술 선택·협업·조직 관리의 고민을 나눴습니다. SSR·CSR과 성능, 주니어 성장 지원, 리더의 커리어 균형을 논의했습니다.
#SSR#CSR
1000
픽업전용 장바구니
픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.
#SSR#CSR
4100
어서 와, ㅋㅍㄱㅍ는 처음이지?
카카오페이 개발자 페스티벌에서 플랫폼 안정화와 다양한 기술 개선 사례를 공유했습니다.\n오프라인 네트워킹·퀴즈를 더해 만족도 4.6점을 기록했습니다.
#컨퍼런스#플랫폼 안정화
4200
Next, d3로 서버 사이드 지도 렌더링하기
Next, d3로 서버 사이드 지도 렌더링하기
Next.js와 d3로 부동산 데이터 시각화 지도를 만들며 구조를 개선한 과정을 정리했습니다. 지도와 시각화 레이어를 분리하고 d3 의존을 줄여 서버 사이드 렌더링도 가능하게 했습니다.
#Next.js#d3
900
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 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
예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법
6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.
#React#SSR
3500
적정기술 딜레마
기술 선택은 유행보다 서비스 요구사항, 조직 역량, 유지보수 가능성을 기준으로 판단해야 합니다. SPA·SSR 전환처럼 부작용과 운영 복잡도가 이득보다 큰지 검증할 필요가 있습니다.
#React#SPA
000
적정기술 딜레마
적정기술 딜레마
적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.
#React#Next.js
3500
라이브관 프론트엔드 입장에서 바라보기
올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.
#Next.js#TypeScript
3900
!프론트엔드 개발자의 next.js 개발기
!프론트엔드 개발자의 next.js 개발기
Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.
#Next.js#React
3700