전체 글

Next.js14를 기준으로 App router와 Pages router를 각각 CSR/SSR/SSG/ISR을 구현해 봤다.왜 굳이 둘 다 한 거죠...?라고 한다면 처음에는 App router로 구현하여 동작과정을 확인하려고 했다. 하지만 내 예상과 다르게 동작해 둘 다 구현했다.실제로 둘 다 구현해 보니... 차이점이 있었다!구현에 사용한 예시는 API에서 시간을 받아와 화면에 보여주는 페이지이다. CSR (Client Side Rendering)사용자가 페이지에 진입할 때, 서버로부터 빈 HTML을 받아오고 이후 브라우저에서 JS를 통해 필요한 데이터를 API로 받아와 화면을 그린다. 즉, 초기 로딩 시에는 빈 화면이 나타나고 JS가 실행되고 데이터가 로드된 후에 콘텐츠가 나타난다.예시 코드impo..

vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다. 이 말을 확인해 보기 위해 같은 Next.js 프로젝트를 EC2와 Vercel에 각각 배포해 봤다.이번 글에서는 각각의 차이에 대해서 알아보겠다. 같은 프로젝트를 Vercel과 EC2에 배포해서 비교 왼쪽은 Vercel에 오른쪽은 EC2에 배포했다.배포하고 나면 눈으로 봐도 큰 차이가 느껴질 줄 알았는데 아니었다. 비슷했다!DOMContentLoaded랑 Load 시간을 비교해 보면 되나? 했는데 이건 cold start랑 관련이 없다.DOMContentLoaded는 HTML 문서가 로드된 시간, Load는 페이지와 관련된 모든 리소스가 로드되었을 때 시간을 나타내기 때문이다. network탭의 timing에 있..

내가 만든 foliohub 서비스 프론트는 현재 vercel에 배포되어 있다.왜 vercel에 배포했는가?하면배포가 간단하고 무료 플랜정도면 충분히 내 서비스를 운영할 수 있었기 때문이다.Next.js의 SSR, 이미지 최적화 등 다양한 기능을 지원하고 있었기 때문에 vercel에 배포했다.  아래와 같은 말을 듣게 되어 의문이 들었다...vercel은 서버리스 방식으로 cold start가 있어 EC2에 비해 5배 정도 느리다. 배포 방식만 다른 게 아니라 실행 방식도 달랐던 거야?!cold start 때문에 EC2에 비해 느리다고?! 이 의문을 해결하기 위해 같은 프로젝트를 vercel과 EC2에 각각 배포해서 비교해 보기로 했다.이번 글에서는 Next.js 프로젝트를 EC2에 배포하는 과정을 담았..

Toast 알림을 구현하면서 어디서든 간편하게 사용할 수 있도록 하기 위해 전역 상태관리가 필요했다.요즘 Zustand가 핫한 거 같아서 사용해 봤다! (+ 곰이 귀엽기도 하고 ㅎㅎ)추가로 나는 Next.js 14 App router를 사용 중이다. Zustand다른 상태관리 툴과 비교했을 때 장점은Context API와 달리 상태 변경 시 불필요한 리렌더링이 일어나지 않는다.동작을 이해하기 위해 알아야 하는 코드 양이 적다. 한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서 상태를 정의하고 사용하는 방법이 단순하다.설치# npmnpm install zustand# yarnyarn add zustand 전역상태관리를 통해 Toast 알림 만들기store 생성toast 알림은 여러 개가 나타날 수 있..

서버 측에서 data를 fetch 하도록 한 이후 vercel에 배포하니 아래와 같은 에러가 날 맞이 했다 ㅎㅎ(정말 아직도 의문인건 왜 개발단에서 발견은 안되고 배포 시에만 console 창에 나타나는 걸까...? ) 에러 상황 에러의 내용은 다음과 같았다.Uncaught Error: Minified React error #418;서버에서 렌더링 된 HTML이 클라이언트와 일치하지 않아 Hydration에 실패했습니다. 그 결과 클라이언트에서 다시 생성됩니다. 이는 서버 렌더링된 클라이언트 컴포넌트가 다음을 사용한 경우 발생할 수 있습니다.서버/클라이언트 분기 if (typeof window !== 'undefined')Date.now()나 Math.random()을 호출할 때마다 변경되는 변수 입력서..

Next.js 프로젝트를 하면서 SSR을 잘 활용하지 못한 거 같아서 마음 한구석이 찝찝했다...😃그래서 이번 기회에 SSR을 활용하여 리팩토링 해봤다. Next.js에서 제공하는 data fetch과 캐싱 등을 이용할 수 있지만 무한스크롤, 로딩 처리 등 더 다양한 기능이 있어 react query가 더 유용할 거 같아 react query를 선택했다.(+ Next.js 14 App router와 react query v5를 사용하고 있습니다!) 클라이언트 렌더링과 서버 렌더링서버 렌더링은 사용자가 페이지를 로드하는 즉시 볼 수 있는 내용을 제공하기 위해 초기 HTML을 서버에서 생성하는 것을 말한다. 이는 페이지 요청 시마다 발생(SSR)할 수 있고 빌드 시 미리 발생(SSG)할 수 도 있다. 일반..

🚨 경고 발생 Image with src "~~" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes 🤔 원인 해당 링크로 들어가 보니 내용은 다음과 같았다. sizes의 값은 fill을 사용하는 이미지나 반응형 크기를 가진 이미지에 대한 성능에 큰 영향을 미친다. "fill" 속성이 있는 이미지에 "sizes"값을 지정하지 않으면 기본값으로 100vw가 사용된다. 이게 무슨 뜻인지 좀 더 찾아봤는데 fill 속성을 사용한 이미지의 경우 이미지가 전체 뷰포트를 채우도록 확장되어야 한다는 것을 ..

오늘은 Next.js에서 이미지를 사용하는 방법에 대해서 알아보겠다. 이 글은 Next.js 14를 기준으로 작성되었다. 이미지 최적화 전략 이미지를 최적화하기 위한 전략에는 아래와 같이 다양한 방법이 있다. png, jpeg 형식보다는 webp, avif 형식의 이미지 파일 사용하기 이미지 Lazy Loading 처리하기 디바이스 크기에 알맞은 이미지 크기로 리사이징 이미지 캐싱하기 이러한 작업을 Next.js에서 해주고 있는데 어떻게 적용할 수 있는지 알아보겠다! 1. webp로 변환 next/image는 png, jpeg 등 형식을 webp로 변환해 이미지 용량을 줄여준다. webp보다 2019년에 만들어진 avif가 여러 형식(jpeg, webp) 보다 훨씬 더 좋은 무손실 압축과 고품질을 자랑한..

프론트엔드 개발자가 소소한 취미로 백앤드를 개발해 본 경험 글로, 틀린 점이 있다면 댓글로 부탁드립니다 🙏 에러 처리를 어떻게 하면 좋을까 찾아보다가 에러 핸들링 미들웨어를 만들어 사용하는 예시들을 발견했다! 이를 활용해 에러 처리를 한 곳에서 관리하고 응답의 일관성을 유지할 수 있다는 점이 깔끔해 보여 적용해 봤다. 에러 처리 미들웨어 기본적으로 에러 처리 미들웨어는 반드시 4개의 인수(err, req, res, next)를 가져야 한다! app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 커스텀 에러 처리 핸들링 기존 Error 클래스를 상속받아 커스텀 ..

Next.js에서는 아래와 같은 NotFound 페이지를 기본적으로 제공한다. NotFound 페이지는 사용자가 존재하지 않는 url에 진입 시 나타나는 페이지로, 사용자의 이탈을 막고 정상적인 페이지로 유도하기 위해 이를 적절하게 활용하는 것이 사용자 경험에 도움이 된다. Next.js에서 NotFound와 Error 페이지를 간단하게 커스텀 할 수 있는데 이번 글에서는 이를 다루는 방법에 대해서 알아보겠다! NotFound 페이지 나의 경우엔 - 없는 페이지 경로로 진입 시 - 존재하지 않는 username로 포트폴리오 상세 페이지(/[username]) 진입 시 두가지 경우에 NotFound 처리가 필요했다. not-found.tsx 생성하기 간단하게 에러문구와 메인으로 돌아갈 수 있는 버튼을 추가..