A Full Stack Develpor

Nuxt.js window or document undefined

Vicapor — Sat, 5 Mar 2022 09:02:23 +0900

https://nuxtjs.org/docs/concepts/server-side-rendering#window-or-document-undefined

Server Side Rendering

Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser.

nuxtjs.org

Nuxt.js에서 window 객체를 사용을 하려면 문제가 생긴다.

window is undefined

window is undefined

원인의 오류는 Nuxt.js는 SSR (Server Side Rendering)이기 때문이다.

처음에 nuxt를 실행하면 각종 설정과 lifecycle을 실행하게 되는데 이때, Server Side에는 window 객체가 없으므로 문제가 생기는 것이다.

이런 오류를 종종 본다. html에서는 <client-only>를 통해 해결할 수 있다.

데이터에서는 process.client 를 사용할 수 있다. client side rendering일 때, 실행시키라는 의미이다.

Nuxt.js Quill Editor

Vicapor — Fri, 4 Mar 2022 01:37:15 +0900

Quill Editor 공식 사이트

https://quilljs.com/

Quill - Your powerful rich text editor

Sailec Light Sofia Pro Slabo 27px Roboto Slab Inconsolata Ubuntu Mono Quill Rich Text Editor Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any ne

quilljs.com

Vue-Quill-Editor

Vue

https://github.com/surmon-china/vue-quill-editor

Nuxt

https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-quill-editor/nuxt

적용 가이드 (중국어 주의)

https://hamsterism.com/articles/how-to-use-vue-quill-editor-in-nuxt/

1. 필요 모듈 설치

npm install vue-quill-editor --save 
# 또는 
yarn add vue-quill-editor

# 추가
npm i vue-debounce
yarn add vue-debounce

2. Plugin file 생성

plugins/vue-quill-editor.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

3. Nuxt.config 정의

nuxt.config.js

  css: [
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
  ],
  
  plugins: [{ src: '~plugins/vue-quill-editor.js', ssr: false }],

4. Quill.vue 생성

<template>
  <section>
    <client-only>
      <quill-editor
        ref="editor"
        v-model.lazy="editedContent"
        :options="editorOption"
        class="editor--border relative"
        @change="debounceTextChange"
      />
    </client-only>
  </section>
</template>

<script>
import { debounce } from 'vue-debounce'
export default {
name: "QuillEditor",
  props: {
    content: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      editedContent: this.content,
      editorOption: {
          theme: 'snow',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block']
            ]
          }
      }

	// custom
      editorOption: {
        theme: 'bubble',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike', 'code'],
              ['blockquote', 'code-block'],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ script: 'sub' }, { script: 'super' }],
              [{ indent: '-1' }, { indent: '+1' }],
              [{ size: ['small', false, 'large', 'huge'] }],
              [{ color: [] }, { background: [] }],
              [{ align: [] }],
              ['clean'],
              ['link', 'image', 'video'],
            ],
            handlers: {
              image: this.uploadImage,
            },
          },
        },
      },
    }
  },
  methods: {
    debounceTextChange: debounce(function () {
      // don't use arrow function
      this.$emit('text-change', this.editedContent)
    }, 3000),
  },
}
</script>

https://github.com/dhershman1/vue-debounce#readme

https://pks2974.medium.com/throttle-%EC%99%80-debounce-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2335a9c426ff

Throttle 와 Debounce 는 자주 사용 되는 이벤트나 함수 들의 실행되는 빈도를 줄여서, 성능 상의 유리함을 가져오기 위한 개념이다.

Wagtail Heroku Deploy

Vicapor — Tue, 1 Mar 2022 19:05:50 +0900

https://www.youtube.com/watch?v=RQ0eKv6HrpM

https://wagtail.org/blog/wagtail-heroku-2017/

먼저 위에 사이트에서 운영체제에 맞는 Heroku를 다운 받도록 하자.

1. Heroku 설치

https://devcenter.heroku.com/articles/heroku-cli

The Heroku CLI | Heroku Dev Center

Last updated February 01, 2022 The Heroku Command Line Interface (CLI) lets you create and manage Heroku apps directly from the terminal. It’s an essential part of using Heroku. Install the Heroku CLI Pre-requisites The Heroku CLI requires Git, the popul

devcenter.heroku.com

먼저 위에 사이트에서 운영체제에 맞는 Heroku를 다운 받도록 하자.

2. Django-toolbelt 설치

배포를 위한 관련 라이브러리를 모아놓은 라이브러리이다.

django
psycopg2
gunicorn
dj-database-url
dj-static

위에 라이브러리들이 설치된다.

pip freeze > requirements.txt

requirements.txt파일을 업데이트 해준다.

3. 데이터 베이스 설정 (PostreSQL)

https://vicapor.tistory.com/142

https://vicapor.tistory.com/122

참고

4. Procfile 생성

Procfile

web: gunicorn 프로젝트이름.wsgi --log-file -

5. runtime.txt 파일 생성

https://devcenter.heroku.com/articles/python-support

위의 사이트에서 지원되는 파이썬 버전을 확인해 볼 수 있다.

python-3.8.12

나는 프로젝트에서 사용한 3.8.12버전으로 진행해보겠다.

6. settings/production.py 수정

# Parse database configuration from $DATABASE_URL
import dj_database_url
DATABASES['default'] =  dj_database_url.config()
	
# Honor the 'X-Forwarded-Proto' header for request.is_secure()
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

# Allow all host headers
ALLOWED_HOSTS = ['*']

아직 Heroku url을 모르기 때문에 ALLOWED_HOSTS는 모두 허용을 해놓는다.

7. .gitIgnore 파일 생성

*.pyc
.DS_Store
*.swp
/venv/
/static/
/media/
.env

이미 git에 연결했으면 .gitignore파일이 존재할 것이다. 위의 내용을 추가해주자.

8. .env 파일생성

.env

DJANGO_SETTINGS_MODULE=project_title.settings.production
SECRET_KEY='####'

9. Production.py 파일 수정

from __future__ import absolute_import, unicode_literals
from .base import *
import dj_database_url
import os

env = os.environ.copy()
SECRET_KEY = env['SECRET_KEY']

중요한 것은 __future__은 제일 먼저 import 되어야 하므로 맨 위에 적는다.

10. Heroku 배포

배포전에 git에 push를 해놓자!!

git init
git add .
git commit -m "first commit to heroku"
heroku create 
# Creates a new Heroku app and connects it to your initialised git repo
git push heroku master 
# Pushes your commited code up to your new ap
heroku plugins:install heroku-config
# Install plugin that allows us to push settings to heroku
heroku config:push
# Pushes settings to heroku, if you get an error check your spaces.
heroku run python manage.py migrate 
# Heroku allows you to run shell commands remotely with the 'heroku run' command.
heroku run python manage.py createsuperuser
# Creates a new superuser on Heroku
heroku ps:scale web=1 
# Ensures that a new Dyno is running for your project

issue)

Dependency on app with no migrations: user 오류가 발생했다.

user app의 migrations폴더에 0001_initial.py을 .gitignore에 포함시키고 git push를 해주면 된다.

user app에 user model이 정의 되어 있는데 diary app에서 user를 사용하기 때문에 dependency오류가 발생하는 것 같다.

11. whitenoise제거

pip install whitenoise

MIDDLEWARE = [

	...
    'whitenoise.middleware.WhiteNoiseMiddleware',

]

settings/production.py

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

COMPRESS_OFFLINE = True
COMPRESS_CSS_FILTERS = [
    'compressor.filters.css_default.CssAbsoluteFilter',
    'compressor.filters.cssmin.CSSMinFilter',
]
COMPRESS_CSS_HASHING_METHOD = 'content'

git push heroku master

heroku에 대한 자세한 설명이 보고싶다면

heroku help

추가)

Heroku에서는 Local에서 makemigrations를 진행하고 migrations 파일까지 전부 git에 업로드 해야한다. 그리고 heroku에서 migrate를 해줘야한다.

Nuxt.js Auth (Naver)

Vicapor — Tue, 1 Mar 2022 16:04:52 +0900

https://auth.nuxtjs.org/schemes/oauth2

Introduction

Zero-boilerplate authentication support for Nuxt.js!

auth.nuxtjs.org

https://vicapor.tistory.com/80

nuxt.config.js

      naver: {
        scheme: 'oauth2',
        clientId: process.env.NAVER_CLIENT_ID,
        codeChallengeMethod: '',
        responseType: 'code',
        // grantType: 'authorization_code',
        endpoints: {
          authorization: 'https://nid.naver.com/oauth2.0/authorize',
          token: `${baseURL}/social-login/naver/`,
          userInfo: `${baseURL}/user/`,
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          maxAge: 18000
        },
      },

this.$auth.loginWith("naver");

https://auth.nuxtjs.org/api/auth

Introduction

Zero-boilerplate authentication support for Nuxt.js!

auth.nuxtjs.org

Nuxt.js Lottie 사용하기

Vicapor — Sun, 27 Feb 2022 01:42:06 +0900

https://medium.com/@fonto.design/using-lottie-in-nuxt-js-554949d19063

Using Lottie in Nuxt.js

There is no Lottie plugin for Nuxt, but you can install “vue-lottie” instead. I am writing this article because I cannot find a proper doc…

medium.com

https://github.com/chenqingspring/vue-lottie

GitHub - chenqingspring/vue-lottie: Render After Effects animations on Vue based on Bodymovin

Render After Effects animations on Vue based on Bodymovin - GitHub - chenqingspring/vue-lottie: Render After Effects animations on Vue based on Bodymovin

github.com

vue-lottie 설치

npm install --save vue-lottie

or

yarn add vue-lottie

적용

<template>
    <!-- width and height are optional -->
    <lottie :width="1024" :height="1024" :options="lottieOptions" v-on:animCreated="handleAnimation" />
</template>


import lottie from 'vue-lottie/src/lottie.vue'
import * as animationData from "~/assets/animation.json";
export default {
  components: {
    lottie
  },
  data() {
    return {
      anim: null, // for saving the reference to the animation
      lottieOptions: { animationData: animationData.default }
    };
  },
  methods: {
    handleAnimation: function (anim) {
      this.anim = anim;
    }
  }
}

기본 사용법 + 옵션설정

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
        <div>
            <p>Speed: x{{animationSpeed}}</p>
            <input type="range" value="1" min="0" max="3" step="0.5"
                   v-on:change="onSpeedChange" v-model="animationSpeed">
        </div>
        <button v-on:click="stop">stop</button>
        <button v-on:click="pause">pause</button>
        <button v-on:click="play">play</button>
    </div>
</template>

<script>
  import Lottie from './lottie.vue';
  import * as animationData from './assets/pinjump.json';

  export default {
    name: 'app',
    components: {
      'lottie': Lottie
    },
    data() {
      return {
        defaultOptions: {animationData: animationData},
        animationSpeed: 1
      }
    },
    methods: {
      handleAnimation: function (anim) {
        this.anim = anim;
      },

      stop: function () {
        this.anim.stop();
      },

      play: function () {
        this.anim.play();
      },

      pause: function () {
        this.anim.pause();
      },

      onSpeedChange: function () {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  }
</script>

추가) Component화

사용법대로 사용해도 작동은 하나 불편한 점이 있다. lottie를 다양한 페이지에서 사용하고 싶을 때에 직접 lottie파일을 import해야한다는 점이다. 그래서 Nuxt에서 사용할 컴포넌트로 바꿔보았다.

Lottie.vue

<template>
  <div>
    <lottie
      :options="defaultOptions"
      :height="400"
      :width="400"
      @animCreated="handleAnimation"
    />
  </div>
</template>

<script>
import lottie from 'vue-lottie/src/lottie.vue';

export default {
  name: 'LottieComponent',
  components: {
    lottie
  },
  props: {
    animationData: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      defaultOptions: { animationData: null },
      animationSpeed: 1,
    }
  },
  created() {
    this.defaultOptions.animationData = require("~/assets/lottie/test-lottie.json");
  },

  methods: {
    handleAnimation (anim) {
      this.anim = anim;
    },

    stop() {
      this.anim.stop()
    },

    play() {
      this.anim.play()
    },

    pause() {
      this.anim.pause()
    },

    onSpeedChange() {
      this.anim.setSpeed(this.animationSpeed)
    },
  },
}
</script>

이제 모든 페이지에서 다음과 같이 사용할 수 있다.

<Lottie animation-data="~/assets/lottie/test-lotte.json" />

Eslint Babel정리

Vicapor — Sun, 27 Feb 2022 00:08:48 +0900

https://eslint.org/

외부 모듈

globals

nuxt.config.js에서 전역으로 script를 선언하고 페이지나 컴포넌트에서 사용하려고 하면 no-def 오류가 발생한다.

이럴경우 eslint의 설정을 바꿔주는 것으로 해결 할 수 있다.

.eslintrc.js

  ...
  "globals": {
    'daum': true
  }

또한 외부 모듈파일인 js 파일도 eslint를 적용시키는데 .eslintignore 파일을 통해 무시할 수 있다.

.eslintignore

static/vendor/brython/brython-runner.bundle.js

console.log

https://eslint.org/docs/rules/no-console

eslint에서 console.log를 사용하면 경고를 표시한다.

{
    "rules": {
        "no-console": "off",
        "no-restricted-syntax": [
            "error",
            {
                "selector": "CallExpression[callee.object.name='console'][callee.property.name!=/^(log|warn|error|info|trace)$/]",
                "message": "Unexpected property on console object was called"
            }
        ]
    }
}

을 통해 console.log에 대한 경고 표시를 종료할 수 있다.

Nuxt.js Buefy Pagination

Vicapor — Sat, 26 Feb 2022 22:21:30 +0900

Buefy의 Pagination을 이용해서 Nuxt에서 pagination을 구현해보려고 한다.

<template>
    <section>
        <b-pagination
            :total="200" <!-- 전체 아이템 갯수 -->
            v-model="current"
            :per-page="10"> <!-- 페이지당 아이템 갯수 -->

            <template #default="props">
                <b-pagination-button
                    :page="props.page"
                    :id="`page${props.page.number}`"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`"> <!-- hash를 사용한 url -->
                    {{ props.page.number }}
                </b-pagination-button>
            </template>


            <template #previous="props">
                <b-pagination-button
                    :page="props.page"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    Previous
                </b-pagination-button>
            </template>

            <template #next="props">
                <b-pagination-button
                    :page="props.page"
                    tag="router-link"
                    :to="`/documentation/pagination#page${props.page.number}`">
                    Next
                </b-pagination-button>
            </template>

        </b-pagination>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                current: 10,
            }
        },
        watch: {
            $route: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal.hash) {
                        this.current = parseInt(newVal.hash.replace(/#page/g, '')) // url에서 #page 를 ''로 바꾸고 남은 숫자 (페이지 숫자를 가져온다.)
                    }
                },
            },
        }
    }
</script>

참고)

Replace()에서 치환을 당담하는것은, 정규식의 g 부분이다. 해당위치에 오는 문자에 따라서

g : 문자열 내의 모든 패턴 체크

i : 대소문자를 구별하지 않음

m : 여러줄에 걸쳐서 체크

v-for="(item, idx) in posts.slice(sliceStart, sliceEnd)"

slice를 통해 데이터를 자른다음에 보여주면 된다. 페이지네이션이 되면 hash값으로 숫자를 얻을 수 있기 때문에 이를 계산하는 함수로 데이터를 처리해주면 된다.

ex) 만약에 페이지당 10개씩 데이터를 보여주게 된다면 sliceStart는 0이되고 sliceEnd는 10이 된다. 이후에 페이지 네이션이 될때마다 계산을 해주면 되는데

sliceEnd = 페이지네이션 번호 * 페이지당 보여줄 데이터 수

sliceStart = sliceEnd - 페이지당 보여줄 데이터 수

이런 함수를 만들어서 계산하면 된다.

Nuxt.js 유용한 모듈 정리

Vicapor — Sat, 26 Feb 2022 18:40:17 +0900

nuxt-highlight.js

https://github.com/Llang8/nuxt-highlightjs

GitHub - Llang8/nuxt-highlightjs: Highlight.js syntax highlighting for Nuxt.js

Highlight.js syntax highlighting for Nuxt.js. Contribute to Llang8/nuxt-highlightjs development by creating an account on GitHub.

github.com

pre태그와 code 태그를 사용하여 각 프로그래밍 언어를 하이라이트해주는 모듈이다.

vue-dompurify-html

https://github.com/LeSuisse/vue-dompurify-html

GitHub - LeSuisse/vue-dompurify-html: Safe replacement for the v-html directive

Safe replacement for the v-html directive. Contribute to LeSuisse/vue-dompurify-html development by creating an account on GitHub.

github.com

Editor로 작성된 데이터는 v-html을 통해 파싱해서 보여줘야한다. 다만 v-html은 xss공격에 취약해서 eslint 경고가 뜬다. 그럴경우 위 모듈을 사용해서 작성하면 된다.

moment-module

https://github.com/nuxt-community/moment-module

GitHub - nuxt-community/moment-module: Efficient Moment.js integration for Nuxt

Efficient Moment.js integration for Nuxt. Contribute to nuxt-community/moment-module development by creating an account on GitHub.

github.com

new Date() 시간 객체를 지역 설정에 맞게 표시해준다.

Nuxt.js SCSS 사용

Vicapor — Sat, 26 Feb 2022 15:47:35 +0900

Nuxt.js에서 SCSS를 사용하는 방법이다.

https://nuxtjs.org/docs/features/configuration/

Configuration

By default, Nuxt is configured to cover most use cases. This default configuration can be overwritten with the nuxt.config.js file.

nuxtjs.org

SASS Loader 설치

yarn add --dev sass sass-loader@10
npm install --save-dev sass sass-loader@10

nuxt.config.js 정의

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
  ]
}

추가)

SCSS에서 Variable을 사용하고 싶을 때가 있을 것이다. 그럴경우 추가 Module을 설치해야한다.

https://github.com/nuxt-community/style-resources-module

GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements!

Nobody likes extra @import statements! Contribute to nuxt-community/style-resources-module development by creating an account on GitHub.

github.com

Style Resource라는 모듈이다.

yarn add -D @nuxtjs/style-resources

nuxt.config.js

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}

Nuxt.js Transition

Vicapor — Sat, 26 Feb 2022 13:25:57 +0900

https://vuejs.org/guide/built-ins/transition.html#css-based-transitions

Transition | Vue.js

vuejs.org

https://nuxtjs.org/docs/features/transitions

Transitions

Nuxt uses the transition component to let you create amazing transitions/animations between your routes.

nuxtjs.org

Nuxt에서 transition을 사용하는 방법에 대해서 알아보자.

export default {
  // Can be a String
  transition: ''
  // Or an Object
  transition: {}
  // or a Function
  transition (to, from) {}
}

지역 사용

pages/index.vue

export default {
  transition: 'home'
}

<style>
  .home-enter-active, .home-leave-active { transition: opacity .5s; }
  .home-enter, .home-leave-active { opacity: 0; }
</style>

transition의 name을 home으로 설정했기 때문에 .home이 된다. test로 설정하면 .test이런식으로 설정이 된다.

전역 사용

main.css

page변경 시 설정

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

export default {
  css: ['~/assets/main.css']
}

layout변경 시 설정

.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}

만약에 default 설정을 바꾸고 싶다면 다음처럼 설정 하면 된다.

nuxt.config.js

// Pages

export default {
  pageTransition: 'my-page'
  // or
  pageTransition: {
    name: 'my-page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}


// Layouts

export default {
  layoutTransition: 'my-layouts'
  // or
  layoutTransition: {
    name: 'my-layouts',
    mode: 'out-in'
  }
}

추가)

mode : out-in과 in-out이 있는데 기본 값은 out-in이다. in-out으로도 설정할 수 있다. transition이 안에서 밖으로 효과가 나타날것인지 아니면 반대로 나타날 것인지 설정해준다.

:name="transitionName" 동적으로 transition을 설정하여 사용할 수도 있다.