1. 학습 프로젝트 배포하기

• 프론트엔드 프로젝트를 배포하는 방법은 다양하다.

• 다만 Next.js로 구현한 프론트엔드 프로젝트는 Vercel을 사용하는 것이 가장 좋다. Vercel은 Next.js의 개발사로써, 자사 서비스에 가장 최적화된 배포 기능을 활용하고 있기 때문.

• 단! 프로덕션 수준의 프로젝트라면 주로 AWS를 사용하곤 한다.. 토이 프로젝트나 개인 프로젝트 정도라면 Vercel 사용을 추천.

• Vercel은 그냥 React 프로젝트 배포도 가능하다.

배포 방법

(sudo) npm i -g vercel

• 배포를 원하는 프로젝트에 npm 관리자로 vercel 패키지를 설치한다.
  (i는 install 키워드의 줄임말 npm install, npm i 모두 같은 의미로 사용된다.)
  (-g는 글로벌/전역으로 설치하라는 지시자 - 패키지가 '내 컴퓨터 전체'에 고루 적용되도록 한다.)

권한 문제로 설치가 차단되었다면..

• Mac 사용자의 경우 sudo 명령어를 앞에 붙여 관리자 권한으로 설치하도록 한다.

• Window 사용자의 경우 VSCode를 관리자 권한으로 실행시키면 된다.

• Vercel 계정으로 로그인, 배포를 원하는 프로젝트 이름 등을 작성하여 기초 설정을 완료한다.

• Vercel에서 프로젝트의 환경을 자동 감지하여, 배포 환경에서 어떤 설정을 사용할지 묻는다. 보통은 자동 설정된 내용을 그대로 사용하면 된다.

vercel --prod

• 프로젝트를 '프로덕션' 모드로 배포하는 명령어.

• 이후 Vercel 콘솔에서 출력되는 배포 주소로 진입하여 정상 배포되고 있는지 확인한다.

• 빌드 후 배포 단계에서 에러가 발생하는 경우, Vercel 콘솔에서 확인 가능한 에러 메시지를 확인하여 원인을 파악하여 해결하면 된다.

• 프로젝트 빌드는 Vercel 서버에서 이루어지기 때문에, 로컬 환경과 구성이 달라져서 에러가 발생할 가능성이 높다.

• 가장 흔한 사례는 환경변수에서 사용하는 URL 주소의 문제. 로컬에서 사용하는 주소와 Vercel에서 사용할 주소가 동일할 수는 없기 때문. 특히 백엔드의 경우 백엔드가 배포되는 주소로 환경변수를 수정해주어야 한다.

• Vercel의 환경변수는 콘솔-설정에서 사용자가 직접 관리할 수 있도록 별도의 UI를 제공해주고 있다.

• 또한 Vercel 콘솔에서도 빌드 결과 로그를 확인할 수 있다.

2. 배포 후 최적화

• 로컬 환경과, 배포 환경에서의 서비스 경험은 다를 수 밖에 없다.

• 프론트엔드고 백엔드고 배포 환경에서 언제나 연결 상태나 좋을 가능성은 낮기 때문..

• 따라서 프로젝트에서 할 수 있는 한, 최대한의 최적화를 수행해주는 것이 좋다.

기본 최적화 Tip

• 사용하지 않는 함수, 변수 코드 등은 삭제해준다.

• 개발 도중에 개발 편의성을 위해 설정했던 것들 중, 필요없는 부분들은 당연히 제거.

• 동적 페이지로 동작할 이유가 없는 컴포넌트는 정적 페이지로 전환해준다.

Vercel에서 제공하는 최적화 방법

• 프로젝트 Setting-Functions에서는 배포가 어느 지역 서버에서 이루어질 것인지 설정할 수 있다.

• 우리나라에서 배포될 서비스라면 당연히 우리나라 지역을 선택해야 더 빠른 속도로 페이지를 공급할 수 있다.

• 지역 선택이 정상적으로 이루어졌는지 확인하고 싶다면, 네트워크 탭의 X-Vercel-Id의 가장 앞자리 4글자를 확인하면 된다.

3. 완강!

• 거의 1달에 걸쳐 Next.js 강의를 완강하였다. 처음에 잘 듣다가 수업 내용을 정리할 방법을 고민하느라 시간이 생각보다 더 소모되어 버렸다..

• 이정환 강사님은 과거 React.js를 처음 공부하면서 구매했던 인강을 통해 처음 접했었다. 수업에서 사용되는 코드 자료 등이 상세하게 제공되고, 기초 이론부터 차근차근 알기 쉽게 설명해주시는 점 때문에 Next.js의 강의도 구매하게 되었다.

• 이번 강의 역시 기대를 저버리지 않았다. 말로만 쉽다 좋다 했던 Next가 무엇인지, 기초 개념부터 이론 지식, 학습 프로젝트를 통해 실습까지 더해져서 강의를 듣기 이전에 비해 확실히 Next.js가 무엇이라고 말할 수 있는 지식과 자신감을 얻을 수 있었다.

00. 강의 소개.

• 해당 학습은 이정환 Winterlood님의 한 입 크기로 잘라먹는 Next.js(15+)을 기반으로 진행되고 있습니다.