Velopers
필터 1
SSR 서버 최적화로 비용 아끼기
토스
프론트엔드

SSR 서버 최적화로 비용 아끼기

SSR 서버 최적화를 위해 측정 환경을 먼저 정비하고, RPS와 Event Loop 지표로 병목을 찾았습니다. serializer 제거, Yarn 업그레이드, Express 제거로 CPU 사용률을 낮춰 서버 수를 줄였습니다.

#SSR#Next.js
4100
NEXT.JS와 CDN, 그리고 도커 이미지 경량화
올리브영
프론트엔드

NEXT.JS와 CDN, 그리고 도커 이미지 경량화

Next.js를 ECS나 EKS에서 직접 운영할 때 CDN 연동과 도커 이미지 경량화 방법을 정리했습니다. 정적 자산은 CDN으로 분리하고, standalone 출력으로 배포 이미지를 줄이는 노하우를 소개했습니다.

#Next.js#CDN
3600
프로젝트 전체에서 사용되는 패키지, 어떻게 마이그레이션 할까?
토스
아키텍처

프로젝트 전체에서 사용되는 패키지, 어떻게 마이그레이션 할까?

프로젝트 전반의 패키지 마이그레이션 사례를 다뤘습니다. Next는 대체 구현으로 전환했고, Recoil은 AST 기반 스크립트로 Jotai로 옮겼습니다.

#migration#Next.js
2400
카카오엔터테인먼트FE
프론트엔드

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

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

#Next.js#SSR
4600
웹사이트의 첫 삽부터 나무를 기르기까지: 당근닷컴 디벨롭의 여정
당근마켓
프론트엔드

웹사이트의 첫 삽부터 나무를 기르기까지: 당근닷컴 디벨롭의 여정

당근닷컴 웹사이트를 처음 만들고 글로벌 리뉴얼과 내부 데이터 레이어 Jampot을 도입한 과정을 정리한 글입니다. URL 정책, 링크 연동, 캐싱, SEO 운영까지 웹사이트 오너십을 키워간 여정을 설명했습니다.

#Next.js#GraphQL
5300
쏘카플랜 개편기
쏘카
프론트엔드

쏘카플랜 개편기

쏘카플랜 개편 과정에서 프론트엔드 일정 추정과 QA 대응, 레거시 개선 경험을 정리했습니다. 코로케이션과 WET 원칙으로 복잡한 화면과 도메인 로직을 단계적으로 분리했습니다.

#React#Next.js
3800
구성원 인터뷰 - 프론트엔드 엔지니어 신훈철 님
포스타입
기타

구성원 인터뷰 - 프론트엔드 엔지니어 신훈철 님

X

#Next.js#마이그레이션
3100
Next.js에서 MSW(Mock Service Worker)로 네트워크 Mocking하기
올리브영
프론트엔드

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

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

#Next.js#MSW
2900
쏘카의 웹 팀에 관하여
쏘카
프론트엔드

쏘카의 웹 팀에 관하여

쏘카 웹 팀의 역할과 협업 방식, 온보딩과 배포 프로세스를 소개한 글입니다. React 중심의 웹뷰 개발과 기술 도입 방식도 함께 정리했습니다.

#React#Next.js
2600
SK플래닛
프론트엔드

Syrup 모바일 웹 속도 개선기: WebFlux, SSE, 그리고 Next.js

Syrup 모바일 웹의 응답 속도를 개선하기 위해 WebFlux, SSE, Next.js를 적용했습니다. 그 결과 API 요청과 응답 지연을 줄이고 초기 로딩 속도도 향상했습니다.

#WebFlux#SSE
3000
SK플래닛
프론트엔드

Syrup 모바일 웹 개선 사례

Syrup 모바일 웹의 느린 응답 문제를 해결하기 위해 웹 게이트웨이를 WebFlux와 SSE 중심으로 개편했습니다. 또한 Next.js의 SSG를 적용해 초기 로딩과 운영 효율을 함께 개선했습니다.

#WebFlux#Server Sent Events
3100
스크립트 툴의 장점만 모았다! zx로 업무 자동화하기
데브시스터즈
프론트엔드

스크립트 툴의 장점만 모았다! zx로 업무 자동화하기

자바스크립트와 쉘 명령어를 함께 쓸 수 있는 zx 라이브러리를 소개합니다. 반복 작업 자동화와 파일 처리에 특히 유용한 활용 사례를 설명했습니다.

#JavaScript#자동화
2200
useInfiniteQuery로 무한스크롤 구현하기
올리브영
프론트엔드

useInfiniteQuery로 무한스크롤 구현하기

무한스크롤은 `useInfiniteQuery`와 `useInView`로 구현했습니다. 뒤로가기는 세션 스토리지와 QueryClient 캐시로 상품 목록과 스크롤을 복원했습니다.

#Next.js#React
4500
올리브영 잡 챌린지! 프론트엔드 개발자로의 전환
올리브영
프론트엔드

올리브영 잡 챌린지! 프론트엔드 개발자로의 전환

올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.

#React#Next.js
1800