Recently Featured
![[AWS] Next.js를 Amplify로 배포하면 왜 Lambda가 자동 배포되는가 (Feat. App Runner)](/assets/posts/lighterhouse-back/thumbnail-optimized.webp)
[AWS] Next.js를 Amplify로 배포하면 왜 Lambda가 자동 배포되는가 (Feat. App Runner)
전체보기
21
[AWS] Next.js를 Amplify로 배포하면 왜 Lambda가 자동 배포되는가 (Feat. App Runner)
사건은 이렇게 시작된다. Lighterhouse를 배포하고 난 뒤, 블로그 URL을 입력하여 성능 분석이 잘 돌아간 것을 확인했고, 그 외 여러 테스트를 진행했다. 그러고 나서 이틀 뒤 쯤이었을까. naver.com을 성능 분석을 해본 결과, 지속적으로 에러가 반환되었다. 그 과정에서 클라이언트 측에서 대응하지 못한 에러 케이스를 위해 에러 핸들러를 추가했고, 문제점을 파악하는 과정에서 Gateway Timeout(504)이 일부 URL에서 지속적으로 발생하는 것을 알 수 있었다.
DevOps/AWS
- 2025-07-02
![[AWS] Next.js를 Amplify로 배포하면 왜 Lambda가 자동 배포되는가 (Feat. App Runner)](/assets/posts/lighterhouse-back/thumbnail-optimized.webp)
[Next.js] React Query + SSR로 LCP 92% 개선하기
개인 프로젝트로 AWS App Runner에 배포해둔 백엔드 서버가 하나 있다. 몇 년치 나스닥 상위 대형주들의 주가 데이터를 Neon이라는 DB 서비스에 저장하고 있고, 현재는 증시 마감 시간에 맞춰 매일 Cron 작업을 통해 전날 마감 주가 업로드를 자동화해두었다. 이번 게시글에서는 이 주가 데이터를 Next.js 기반 프론트엔드 애플리케이션에 React Query + SSR 방식으로 효율적으로 렌더링하고, 그 결과로 LCP(Largest Contentful Paint)를 약 92% 개선한 과정을 정리해본다. 특히, SSG와 CSR 방식과 비교했을 때, 초기 페이지 로딩 속도 개선이 어떤 방식으로 이루어졌는지 실제 Lighthouse 분석 결과를 바탕으로 설명할 예정이다.
Frontend/Next.js
- 2025-05-25
![[Next.js] React Query + SSR로 LCP 92% 개선하기](/assets/posts/ssr-react-query/thumbnail-optimized.webp)
[Next.js] CDN이란? (Feat. AWS Amplify, CloudFront)
CDN이 웹 성능 최적화의 중요한 역할을 한다는 말을 한 번쯤 들어봤을 것이다. 이 글에서는 CDN의 원리부터 Next.js에서의 적용 방식, 그리고 AWS Amplify 환경에서의 CDN 자동 적용 구조까지 깊이 있게 살펴본다.
Frontend/Next.js
- 2025-05-09
![[Next.js] CDN이란? (Feat. AWS Amplify, CloudFront)](/assets/posts/content-delivery-network/thumbnail-optimized.webp)
[Next.js] 리액트 서버 컴포넌트(RSC)는 어떻게 렌더링되는가
SSR 구현 과정에 대해 게시글을 쓰다가 서버 컴포넌트에 대해 따로 분리해서 게시글을 적어야겠다 싶어서 작성한다. React Serve Component(RSC)는 서버에서 실행되는 특별한 컴포넌트다. Next.js 13부터 도입된 서버 컴포넌트는 기존 클라이언트 렌더리방식과는 전혀 다른 렌더링 방식을 가지기 때문에 이를 정리해보고자 한다. 이 게시글은 Next.js 공식 문서와 해외 블로그를 참고해서 작성되었다. 이 게시글을 보고 '서버 컴포넌트가 어떻게 렌더링되는지'와 '서버 컴포넌트 덕분에 초기 로드 속도가 왜 빨라졌는지'를 명확하게 알아가길 바란다. 시작해보자!
Frontend/Next.js
- 2025-04-27
![[Next.js] 리액트 서버 컴포넌트(RSC)는 어떻게 렌더링되는가](/assets/posts/server-component/thumbnail-optimized.webp)
패키지 매니저로 CI 최적화하기(with. pnpm, yarn berry)
CI/CD 파이프라인은 크게 다섯 단계로 이루어지며 특히 빌드 단계가 오래걸린다. npm install로 몇 분씩 잡아먹기도 하고, Typescript의 경우 JS로 트랜스파일된 후 번들링까지 거쳐야하므로 시간이 길어진다. 대부분의 CI/CD 환경은 Docker 기반이기 때문에 배포 때마다 설치와 빌드 과정을 반복하고, 협업 인원이 많을수록 비용은 n배수로 증가할지 모른다. 따라서, 이번 게시글은 반복적으로 발생하는 설치/빌드 작업을 효율적으로 운영할 수 있느냐는 곧 CI 최적화의 기본이자 핵심이 아닐까하는 생각으로 고민을 시작해본다.
Productivity/CI/CD
- 2025-04-20

Category
Frontend(12)
Backend(1)
DevOps(2)
Productivity(4)
Self-Motivation(2)