Vue.js/Nuxt
[ERROR] Could not freeze ~~: Cannot read properties of undefined (reading 'hash')
node_modules/.cache/hard-source 폴더 삭제 아니면 그냥 node_modules 폴더 삭제하고 yarn install 다시 해주기
Vue.js
Vue.js/Nuxt
Nuxt 프로젝트 localhost 모바일에서 확인하기
FE개발자 분과 디자이너 님께서 작업하시다가 불편하신 점이 있어서 해결해 드린 경험을 기록으로 남기려고 해요. 팀이 작기 때문에 FE개발자 분께서 개발하신 부분을 디자이너 님이 모바일 화면으로 바로바로 확인하고 싶어 하셨어요. Nuxt 프로젝트를 모바일에서 확인하는 방법은 다음과 같아요. 1. nuxt.config.js 파일을 다음과 같이 변경한다. server: { host: '0' }, 2. PC와 모바일을 같은 와이파이로 설정한다. 3. yarn dev로 프로젝트를 실행하게 되면 다음과 같이 접속 가능한 url을 알 수 있다. 이 외에도 저희 서비스의 BE 부분과 연동하는 코드인 127.0.0.1을 접속 가능한 url 로 변경해서 BE 와도 연결해 드렸어요! 매일 보는 것이 아니라 어느정도 작업하고..
Vue.js/Nuxt
[Nuxt.js] google analytics 적용하기
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 저는 nux..
Vue.js/Nuxt
Nuxt2에 vue-bootstrap 설치하기
지금 진행중인 프로젝트에 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를 사용..
Vue.js/Nuxt
[Nuxt] router push params
router push로 url 연결도 가능하지만, 변수와 함께 넘겨야 할 경우에 다음과 같은 방식으로 router push를 사용할 수 있다. query 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/purcha..
Vue.js/Nuxt
[Nuxt] click outside element
@click=""으로 클릭했을 때의 함수 실행이 가능하지만, 해당 element 외부를 클릭했을 때, 실행이 가능한 함수가 필요해서 찾아보았다. vue-click-outside 라는 라이브러리가 있었고 사용법은 간단하다. https://www.npmjs.com/package/vue-click-outside vue-click-outside ClickOutside directive for Vue. Latest version: 1.1.0, last published: 2 years ago. Start using vue-click-outside in your project by running `npm i vue-click-outside`. There are 220 other projects in the npm ..
Vue.js/Nuxt
CSR, SSR 이란? (Client-Side-Rendering, Server-Side-Rendering)
렌더링 (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) 페이지 렌더링 할 때마다 서버에 새로운 페이지에 대한..
