• vue 프로젝트 저장소
• github nuxt-shopping 배포 저장소 url
• github nuxt-shopping fake API 서버 저장소
• 해봐야될거 + 문제점
  1. 나중에 아임포트 결재모듈도 붙여보기
  2. 문제점 1: 새로고침하면 장바구니에 담아놓은 목록들이 다 사라짐
     • 해결책
       1. 브라우저 레벨에서 해결: 로컬스토리지, 세션스토리지, 쿠키
       2. 카트에 담았을 때, 해당 상품 데이터를 서버로 전송
          • 카트 목록 페이지 들어갈 때마다 계정별로 해당 목록을 불러오는 방법
  3. 문제점 2: 이미 카트에 담은 목록 또 담을 수 있음
     • json-server /carts POST API 알아서 같은 값이면 500 에러 뱉어줌

1. 카카오 OG 태그 디버깅 도구
2. 페이스북 OG 태그 디버깅 도구

8_1. 제작한 사이트를 배포하며 알아보는 Nuxt.js 배포 방식 - Nuxt 배포 방식 소개

8_1_1. nuxt 서비스 배포 방법

nuxt.js 서비스를 배포하는 방법은 프로젝트를 생성할 때 선택한 universal 모드의 배포 방식에 따라 다르다.
아래 2가지 유형에 따른 배포 방법을 살펴보도록 하겠다.

nuxt 프로젝트 생성할 때 우리가 선택한 방식은

1. Universal (SSR / SSG)
2. Server (Node.js hosting)

이었다.

nuxt 서비스를 배포하는 방식은 2가지가 있는데,

1. 첫번째로 Server (Node.js hosting) 방식을 살펴볼 것이고
2. 두번째로 Static (Static/Jamstack hosting) 방식에 대해서도 살펴볼 예정이다.

8_1_2. SSR (Server Side Rendering)

우리가 선택했던 배포 방법이다.
SSR 에 대한 특징을 보자.

SSR 모드는 위 그림에서 Deployment Target 을 Server (Node.js hosting)으로 선택한 경우이다.
nuxt 설정 파일의 target 속성 값이 아래와 같이 server 로 지정된다.

// nuxt.config.js
export default {
    target: 'server', // target 속성의 기본값은 server 이기 때문에 설정 파일에 보이지 않더라도 괜찮다.
    // 이후에 static 을 선택한다면 target: 'static' 으로 명시해주면 된다.
}

SSR 모드로 생성한 웹 서비스는 배포하려는 서버에 Node.js 서버를 실행할 수 있는 형태로 배포해야 한다.
각 클라우드 플랫폼별 자세한 가이드는 아래 링크를 참고하면 된다.

• Azure
• Google App Engine
• Heroku

여기선 Heroku 로 배포할 것이다.
그 이유는 다른 것보다 Heroku 가 가장 간단한 형태로 배포를 할 수 있기 때문에 Heroku 로 배포하고 어떤식으로 동작하는지도 살펴보도록 하겠다.

8_1_3. SSG (Static Site Generation)

SSG 모드는 Deployment Target 을 Static (Static/Jamstack hosting)을 선택한 경우이다.
nuxt 설정 파일의 target 속성 값은 static 으로 지정된다.

// nuxt.config.js
export default {
    target: 'static',
}

SSG 모드는 사용자의 페이지 URL 요청이 들어올 때마다 서버에서 그려서 브라우저에 보내주는 SSR 모드와 다르게 웹 서비스를 구성하는 모든 페이지를 미리 그려야하기 때문에 스태틱 서버에 배포하는 형태로 진행해야 한다.
Netlify 등의 CD(Continuous Delivery) 플랫폼을 이용하여 손쉽게 배포할 수 있다.

• Netlify
• AWS
• Azure Static Web Apps
• Github

Tip
JAMStack 이란 Javascript & API & Markup 을 의미하며 API 서버 없이 사이트를 제작하는 방식을 의미한다.