devNote

miragejs 설치

• nuxtjs 프로젝트로 이동

•  소스 파일 받기

miragejs  폴더에 소스가 받아진다.

$ npx degit vedovelli/miragejs-starter-kit miragejs

• 의존성 라이브러리 추가

npm 사용 시

npm install --save-dev miragejs faker

yarn 사용 시 (  nuxt  프로젝트 생성 시 사용하는 패키지 관리 사용하면 된다. )

yarn add -D miragejs faker

github.com/vedovelli/miragejs-starter-kit

일단 이걸로 설치 끝.

이젠 사용할 수 있게 환경을 세팅한다.

nuxt 프로젝트 내에 plugins 폴더 안에 mirage.js 파일을 생성 다음과 같이 저장한다.

if (process.env.NODE_ENV === 'development') {
  require('../miragejs/server').makeServer();
}

nuxt.config.js 파일에 다음과 같이 추가

...
plugins: ['@/plugins/mirage.js'],
...

이렇게 까지가 사용할 수 있게 설정

yarn dev 실행 시 사용할 수 있다.

랜더링 설정

서버 측 렌더링을 한다는 건  사용자가 요청이 있을 시 서버에서 요청 페이지를 렌더링 되므로, 당연히 서버가 필요하다.

적정 사이트는 서버측 렌더링과 매우 비슷하지만, 차이점은 정적 사이트가 빌드 시에 랜더링 된다는 것이다. 그래서 서버가 필요 없고, 정적 사이트 내에서 페이지 이동은 클라이언트 측에서 이동된다.

export default { 
	ssr: true // 기본값
}

ssr을 false로 하면 서버 측 렌더링을 안 함으로 설정

AWS S3와 같은 곳에선 ssr: false로 설정

타겟 설정

nuxt generate명령은 웹 사이트의 정적 html을 생성하고 dist/ 디렉터리에 파일을 이동한다.

성능이 좀 더 좋아지고, SEO 및 기타 다른 지원을 좋게 한다.

export default {
  target: 'static' // 기본값 'server'
}

• context에서 req, res 제거된다.
• 404, 오류, 리다이렉션 처리는 클라이언트 측에서 처리
• $route.query 사용.
• process.static 속성은 true

AWS S3로 사용 시 static