0biglife.

Recently Featured

[Next.js] CDN이란? (Feat. AWS Amplify, CloudFront)

Updated: 2025-05-09

CDN이 웹 성능 최적화의 중요한 역할을 한다는 말을 한 번쯤 들어봤을 것이다. 이 글에서는 CDN의 원리부터 Next.js에서의 적용 방식, 그리고 AWS Amplify 환경에서의 CDN 자동 적용 구조까지 깊이 있게 살펴본다.

[Next.js] CDN이란? (Feat. AWS Amplify, CloudFront)

Dev Logs

Project Lighterhouse

Last updated on 2025-04-30

블로그 개선사항

Last updated on 2025-04-12

전체보기

19


[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)

[Next.js] 리액트 서버 컴포넌트(RSC)는 어떻게 렌더링되는가

SSR 구현 과정에 대해 게시글을 쓰다가 서버 컴포넌트에 대해 따로 분리해서 게시글을 적어야겠다 싶어서 작성한다. React Serve Component(RSC)는 서버에서 실행되는 특별한 컴포넌트다. Next.js 13부터 도입된 서버 컴포넌트는 기존 클라이언트 렌더리방식과는 전혀 다른 렌더링 방식을 가지기 때문에 이를 정리해보고자 한다. 이 게시글은 Next.js 공식 문서와 해외 블로그를 참고해서 작성되었다. 이 게시글을 보고 '서버 컴포넌트가 어떻게 렌더링되는지'와 '서버 컴포넌트 덕분에 초기 로드 속도가 왜 빨라졌는지'를 명확하게 알아가길 바란다. 시작해보자!

Frontend/Next.js

- 2025-04-27

[Next.js] 리액트 서버 컴포넌트(RSC)는 어떻게 렌더링되는가

패키지 매니저로 CI 최적화하기(with. pnpm, yarn berry)

CI/CD 파이프라인은 크게 다섯 단계로 이루어지며 특히 빌드 단계가 오래걸린다. npm install로 몇 분씩 잡아먹기도 하고, Typescript의 경우 JS로 트랜스파일된 후 번들링까지 거쳐야하므로 시간이 길어진다. 대부분의 CI/CD 환경은 Docker 기반이기 때문에 배포 때마다 설치와 빌드 과정을 반복하고, 협업 인원이 많을수록 비용은 n배수로 증가할지 모른다. 따라서, 이번 게시글은 반복적으로 발생하는 설치/빌드 작업을 효율적으로 운영할 수 있느냐는 곧 CI 최적화의 기본이자 핵심이 아닐까하는 생각으로 고민을 시작해본다.

Productivity/CI/CD

- 2025-04-20

패키지 매니저로 CI 최적화하기(with. pnpm, yarn berry)

[Nest.js] 주가 데이터 수집기 구축하기

근래 미 증시를 지켜보면서 주식과 부동산 투자에 부쩍 관심이 많아졌다. 현재 투자 중에 있으며, 무식하게 들어갔다가 물리기 시작하면서 잃은 돈을 시작으로 바보가 되지 않기 위해 공부를 시작했다(정말 한심하지 아니한가). 책을 읽고 관련 영상들을 찾아보면서 주식 투자에 대한 인사이트와 기본기를 다지고 있는 와중에, 문득 특정 지표나 표준 지식에 대해 잘 정리되어있어 건강한 투자 방식에 대해 점검해볼 수 있는 간단한 페이지가 있으면 좋겠다는 생각이 들었다.

Backend/NestJS

- 2025-04-13

[Nest.js] 주가 데이터 수집기 구축하기

[React] 메모이제이션으로 최적화하기(with DevTools)

근래 무척 가고 싶던 회사에 지원서를 넣으면서 렌더링 최적화에 대해 완벽에 가까운 게시글을 하나 써봐야겠단 생각이 문득 들었다. 이번 게시글에서는 브라우저에 부하가 걸리는 케이스 중에서 메모이제이션 관련 케이스를 다루고, 어떤 경우에 어떤 수치로 개선되는지 실제 테스트 시나리오를 통해 직접 비교하며 예제를 살펴본다.

Frontend/Browser

- 2025-04-05

[React] 메모이제이션으로 최적화하기(with DevTools)

Category

Frontend(11)

Next.js(5)
Browser(4)
Javascript(2)

Backend(1)

NestJS(1)

Kubernetes(1)

MongoDB(1)

Productivity(4)

CI/CD(3)
Deployment(1)

Self-Motivation(2)

블로그에 대하여(2)