Velopers 홈

오늘 새 글

0개

오늘 조회수

109회

필터 1

2024년 6월 10일

데브옵스

nGrinder를 활용한 부하테스트

nGrinder를 활용해 네이버페이 부동산 상세 페이지의 부하테스트 과정을 정리했습니다. 최대 TPS와 병목을 확인하고 SSR, 캐시, HPA 설정을 개선한 사례입니다.

[5월 5주차 위클리 업데이트] 이번 주 발표된 Google for Developers 최신 소식을 확인하세요! (Gemini 1.5 Pro 및 1.5 Flash GA)

Google for Developers의 이번 주 주요 업데이트를 제품별로 정리해 소개했습니다. Gemini, Android, Flutter, Firebase, Google Pay 관련 최신 소식을 함께 모았습니다.

리액트 19 신규 기능 및 개선 사항

리액트 19의 신규 기능과 개선 사항을 Actions, use API, 서버 컴포넌트 중심으로 정리했습니다. 또한 메타데이터, 스타일시트, 스크립트, 자원 preloading 등 운영상 개선점도 함께 소개했습니다.

Next.js 캐싱으로 웹 서버 성능 최적화

Next.js App Router에서 Full Route Cache를 활용해 상품 목록·상세 페이지의 서버 렌더링 비용을 줄인 사례입니다. 부하테스트에서 TPS를 크게 개선하고 CPU 사용률도 낮췄습니다.

Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기

Next.js 전환 과정에서 단위 테스트와 API Mocking의 중복·관리 문제를 해결하기 위해 MSW 도입을 검토했습니다. 브라우저와 SSR 환경의 URL 차이를 보정하는 클라이언트를 만들어 프록시 이슈에 대응했습니다.

픽업전용 장바구니

픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.

Next, d3로 서버 사이드 지도 렌더링하기

Next.js와 d3로 부동산 데이터 시각화 지도를 만들며 구조를 개선한 과정을 정리했습니다. 지도와 시각화 레이어를 분리하고 d3 의존을 줄여 서버 사이드 렌더링도 가능하게 했습니다.

문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 1

정주행 모드 초기화와 CORS 에러를 함께 겪은 문제를 재현 조건과 코드 구조를 따라가며 분석했습니다.\n조건부 require를 전역 import로 단순화해 증상을 해결하고 원인 추적의 방향을 잡았습니다.

#Next.js#SSR

55005분

Velopers 추천광고

쿠팡 파트너스

개발자를 위한 인기 상품을 확인해 보세요

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

#개발자#노트북#컴퓨터

2023년 2월 17일

프론트엔드

예상보다 24배 많은 콘텐츠에 프론트가 대처하는 방법

6,000개 작품 규모의 이벤트 페이지를 위해 리스트 가상화와 스켈레톤, gzip 등을 적용해 성능을 개선했습니다. 또한 필터링과 탐색 기능을 보강해 대량 콘텐츠에서도 사용성을 높였습니다.

적정기술 딜레마

적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.

라이브관 프론트엔드 입장에서 바라보기

올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.

!프론트엔드 개발자의 next.js 개발기

Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.

#Next.js#React

34005분