rookie days.

node_modules/.cache/hard-source 폴더 삭제

아니면 그냥 node_modules 폴더 삭제하고 yarn install 다시 해주기

FE개발자 분과 디자이너 님께서 작업하시다가 불편하신 점이 있어서 해결해 드린 경험을 기록으로 남기려고 해요.

팀이 작기 때문에 FE개발자 분께서 개발하신 부분을 디자이너 님이 모바일 화면으로 바로바로 확인하고 싶어 하셨어요.

Nuxt 프로젝트를 모바일에서 확인하는 방법은 다음과 같아요.

1. nuxt.config.js 파일을 다음과 같이 변경한다.

  server: {
    host: '0'
  },

2. PC와 모바일을 같은 와이파이로 설정한다.

3. yarn dev로 프로젝트를 실행하게 되면 다음과 같이 접속 가능한 url을 알 수 있다.

이 외에도 저희 서비스의 BE 부분과 연동하는 코드인 127.0.0.1을 접속 가능한 url 로 변경해서 BE 와도 연결해 드렸어요!

매일 보는 것이 아니라 어느정도 작업하고 그 작업 결과 확인하시는 용도라서 필요할 때마다 저런 방식으로 확인 가능하도록 도와드릴 예정이에요:)

참고

https://debbie.codes/blog/nuxt-configure-server-to-see-site-on-mobile/

whynot 플젝이 어느 정도 윤곽이 잡혀서 google analytics를 적용해보기로 했습니다.

프로젝트는 Nuxt 2버전을 사용하고 있어서 Nuxt 2 버전을 기준으로 따라 해 보면 아마 잘 될 것 같아요:)

라이브러리로는 nuxt/google-analytics와 vue-gtag가 있었는데,

측정 ID가 UA로 시작한다면 nuxt/google-analytics를 사용하고 G-로 시작하면 vue-gtag를 사용하면 됩니다.

저는 vue-gtag를 사용했어요!

google analytics 사이트에서 스트림 생성

https://analytics.google.com/

측정 ID를 프로젝트 아래의 코드(vue-gtag.js)에 추가 해준다.

vue-gtag 설치

yarn add vue-gtag

저는 nuxt 2 버전을 사용하고 있기 때문에 이런 에러가 났습니다.

아래의 명령어로 @vue/shared를 설치해줍니다.

yarn add @vue/shared

vue-gtag 2.X 버전에서는 nuxt 2를 지원하고 있지 않고 디폴트로 nuxt 3을 지원하는 것 같아요:)

package.json의 dependencies에서 vue-gtag의 버전을 1.16.1로 변경했습니다.

  "dependencies": {
    ...
    "vue-gtag": "^1.16.1",
    ...
  },

plugins에 vue-gtag.js파일을 생성하고 아래의 내용을 추가해줍니다. G-XXXXXX에는 측정 ID를 적어줍니다.

import Vue from 'vue'
import VueGtag from 'vue-gtag'

Vue.use(VueGtag, {
  config: { id: 'G-XXXXXXXX' }
})

배포 한 뒤, 태그가 제대로 적용되었는지 확인하기 위해서는

chrome web store에서 tag-assistant-legacy를 설치하면 됩니다.

플러그인을 설치하고, 태그를 확인할 사이트에 들어가서 상단에 설치한 플러그인을 선택하면 아래의 팝업이 뜹니다.

팝업에서 Enable을 선택하고 태그가 제대로 들어갔다면 아래의 사진처럼 되는 것을 확인할 수 있습니다.

지금 진행중인 프로젝트에 vue-bootstrap이 필요해서 설치해 보았습니다.

** vue 2.6 버전 기준입니다.

공식 문서에 따르면 Nuxt 버전 2.15.8 이상을 권장하고 있습니다.

npm 과 yarn 둘 중 각자의 프로젝트가 사용하는 것을 기준으로 아래 명령어를 실행해줍니다.

# npm
npm install bootstrap-vue

# yarn
yarn add bootstrap-vue

nuxt.config.js파일에 아래의 코드를 넣어줍니다.

module.exports = {
    modules: ['bootstrap-vue/nuxt']
}

모듈에 추가해주면 boostrap.css와 bootstrap-vue.csss가 기본적으로 미리 컴파일 되는 것 같습니다.

만약 custom 하게 Scss를 사용하려면 아래의 코드를 추가하면 된다고 합니다.

module.exports = {
    modules: ['bootstrap-vue/nuxt'],
    bootstrapVue: {
       bootstrapCSS: false,
       bootstrapVueCSS: false
    }
}

이제 template 코드에서 bootstrap을 사용할 수 있습니다.

예시)

<b-buttom> 버튼 </b-button>

https://bootstrap-vue.org/docs 를 참고했습니다.

router push로 url 연결도 가능하지만, 변수와 함께 넘겨야 할 경우에 다음과 같은 방식으로 router push를 사용할 수 있다.

1. query
2. params

// String으로 url 연결
router.push('/payment/purchase-complete')

// path를 object에 담아서 연결
router.push({ path: '/payment/purchase-complete' })

// 1. query를 사용 (url: /payment/purchase-complete?type=Y)
router.push({ path: '/payment/purchase-complete' query: { type: 'Y' } })

// 2. params를 사용 (url: /payment/purchase-complete)
router.push({ name: 'payment-purchase-complete', params: { total: 123 } })

params를 사용할 때는 path가 아닌, name을 사용해야 하는데

chrome vue 도구에서 name을 확인할 수 있었다.

params로 사용하는 경우, 새로고침을 하면 params의 데이터가 다 날아간다.

query나 params를 받을 때는 다음과 같이 받아서 사용하면 된다.

// 1. query
this.$route.query.type

// 2. params
this.$route.params.total

Reference

https://sncap.tistory.com/981

https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location

nuxt.config.js

export default {

    server: {

        port: 변경할 포트 번호

    }

}

@click=""으로 클릭했을 때의 함수 실행이 가능하지만,

해당 element 외부를 클릭했을 때, 실행이 가능한 함수가 필요해서 찾아보았다.

vue-click-outside 라는 라이브러리가 있었고 사용법은 간단하다.

https://www.npmjs.com/package/vue-click-outside

아래의 명령어로 라이브러리를 설치하고,

yarn add vue-click-outside

공통으로 사용하는 .js파일에 선언해주었다.

import Vue from 'vue'
import vco from 'v-click-outside'

Vue.use(vco)

사용은 이런 방법으로 하면 간단하게 구현 가능하다.

<div v-click-outside="closeBirthOptions">
	외부 클릭시 작동
</div>

렌더링 (Rendering)

웹 페이지를 접속할 때, 그 페이지를 화면에 그려주는 것

MPA(Multi Page Application) 과 SPA(Single Page Application)

MPA는 다수의 페이지로 구성되어 요청마다 정해진 페이지를 반환하는 방식이라고 한다.

반면, SPA는 단일 페이지로 구성되어 해당 페이지 자체에서 요청에 따라 화면을 재구성한다고 한다.

MPA는 SSR의 방식으로, SPA는 CSR 방식으로 HTML을 렌더링한다.

하지만 MPA = SSR / SPA = CSR 는 아니라고 한다.

MAP와 SPA는 웹 어플리케이션을 구성하는 형태이고 SSR과 CSR은 렌더링 방식이다.

SSR (Server-Side-Rendering)

페이지 렌더링 할 때마다 서버에 새로운 페이지에 대한 요청을 한다. (새로고침)

서버에서 요청한 HTML파일 렌더링을 마친 후에 응답한다 ➡️ 로딩시간이 상대적으로 짧다.

이미 렌더링된 HTML 문서가 전달되어서 SEO이 CSR방식에 비해 우수하다

사용자 정보를 서버측 세션으로 관리하기 용이해서 CSR방식에 비해 보안이 우수하다고 한다.

하지만, 페이지별로 새로고침 현상 및, 매번 로딩시간이 필요하다는 단점이 있다.

서버 부하에 영향을 미칠 위험도 있다고 한다.

CSR (Client-Side-Rendering)

초기에 화면에 필요한 요소들을 모두 받아온 뒤 클라이언트 사이드에서 HTML 문서를 렌더링한다

하나 또는 여러개의 chunk 파일로 거대한 js파일로 번들링한다. SPA에서는 번들링된 js를 전달받아 Single Page Application을 구축하게 되는 것이다.

번들링이 완료된 js 파일을 모두 로드하기 전에는 첫페이지를 로드할 수 없다.

첫 페이지는 이미 로드 되었지만, 로드된 페이지는 빈 HTML파일이다.

<div id="app"> </div>로 로드 되어서 빈화면을 바라보기 때문에 SEO 최적화도 어렵다.

하지만 초기 로딩 속도를 제외하면 나머지 부분은 매우 빠른 속도로 볼 수 있다.

이미 다운받은 번들링된 js 파일에 렌더링이 필요한 모든 로직이 들어있기 때문이다.

새로고침이 일어나지 않고, 서버가 클라이언트 뷰단에서 처리할 일을 더이상 신경쓰지 않아도 된다.

SPA 형태에 SSR을 지원하도록 한 프레임워크로

Vue의 경우, Nuxt.js

React의 경우 Next.js가 있다.

첫 페이지 로딩은 SSR방식으로 기존 CSR방식보다 빠르게 문서를 받아옴과 동시에

서버측에서 렌더링이 가능하므로 SEO적용도 가능하다.

참고한 블로그

https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

https://velog.io/@longroadhome/FE-CSRClient-Side-Rendering-vs-SSRServer-Side-Rendering-feat.-React%EB%A5%BC-%EC%A4%91%EC%A0%90%EC%9C%BC%EB%A1%9C