A Full Stack Develpor

nuxt-highlight.js

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

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

vue-dompurify-html

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

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

moment-module

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

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

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

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

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

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"
      ]
  }
}

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

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

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을 설정하여 사용할 수도 있다.

Nuxt에서 Brython을 적용하는 방법에 대해서 기술해본다. 

정확하게는 js 라이브러리 파일을 Nuxt에다 적용하는 방법이다. 

참고문서 

https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/guide/plugins/

https://stackoverflow.com/questions/63190124/how-can-solve-the-error-babel-maximum-size-500kb-issue-in-server

First,

static/vendor/brython-runnder.bundle.js에 파일 저장

1. vendor를 통한 적용방법 (라이브러리 용량이 적을경우)

  build: {
    vendor: ['vue-brython'],
    babel: {
      compact: true,
    },
  },

2. plugins 파일 생성 (라이브러리 용량이 크고 여러 곳에서 사용할 경우)

plugins/vue-brython.js

import Vue from 'vue'
import BrythonRunner from 'static/vendor/brython-runner.bundle'

Vue.use(BrythonRunner)

  plugins: [
    { src: '~/plugins/vue-brython', ssr: false },
  ],
  
  build: {
    babel: {
      compact: true,
    },
  },

3. 직접 적용 (한 곳에서만 사용할 경우)

<script>
import {BrythonRunner} from 'static/vendor/brython-runner.bundle';
</script>

다만 직접 가져오는 방식은 관리와 window 객체를 사용한 라이브러리일 경우 오류의 문제점이 발생한다.

Settings

코드 규칙을 위한 eslint는 까다롭기 때문에 형식에 조금이라도 벗어나면 발생하면 바로 오류를 발생시킨다. 

이미 plugins이나 vendor를 통해 전역으로 설정한 라이브러리라도 component나 page에 정의가 안되어 있을경우 오류를 발생시킨다.

.eslintrc.js

  globals: {
    BrythonRunner: true,
  },

위와 같이 BrythonRunner를 전역으로 설정해줘야한다. 

또한, 라이브러리에 eslint 적용을 제외하기 위해 .eslintignore 파일을 만든다. 

static/vendor/brython-runner.bundle.js

https://vercel.com/

Vercel로 간단하게 Nuxt 프로젝트를 배포하는 방법에 대해서 정리

1. Vercel 설치

yarn global add vercel

npm i -g vercel

2. 환경 변수 설정

yarn : C:\Users\i\AppData\Local\Yarn\bin 추가

vercel -v

3. now.json 추가

프로젝트에 다음파일을 만들어 내용을 추가해주면 된다.

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {}
    }
  ]
}

4. 배포

vercel .

5. 환경변수 설정

https://vercel.com/docs/concepts/projects/environment-variables

const baseURL = process.env.BASE_URL || 'http://localhost:8000/api';
export default {
  srcDir: 'client', //폴더 구조 정의 client의 폴더에 page, assets, middleware등이 있음.
  target: 'server', // 'server': For server side rendering 'static': For static sites

  generate: {
    fallback: true // 404 오류가 발생했을 때, 페이지 이동
  },

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'ezst-frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ],
    script: [ //추가 cdn 정의 jquery, brython runner, fontawesome
      { type: 'text/javascript', src: '/vendor/jquery/jquery-3.6.0.min.js'},
      { type: 'text/javascript', src: '/vendor/flipster/jquery.flipster.min.js' },
      { type: 'text/javascript', src: 'https://cdn.jsdelivr.net/gh/pythonpad/brython-runner/lib/brython-runner.bundle.js'},
      { type: 'text/javascript', src: 'https://kit.fontawesome.com/13c40d56ec.js', crossorigin:'anonymous'},
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/fonts/main.css',
    '~/assets/styles/main.scss',

    '~/static/vendor/flipster/jquery.flipster.min.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~/plugins/globals.js'},
    { src: '~/plugins/flipster.js'},
    { src: '~/plugins/vue-codemirror', ssr: false },
    { src: '~/plugins/persistedState.js'}, // 새로고침 해도 state 유지 (cookie로 저장) (vercel 오류 발생)
    { src: '~/plugins/vue-plyr', mode: 'client' },
    { src: '~/plugins/iamport.js', ssr: false, injectAs: 'IMP' },
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [ //env 파일 사용
    '@nuxtjs/dotenv'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
  ],

  axios: {
    baseURL: baseURL
  },

  auth: {
    plugins: [ '~/plugins/auth.js' ],
    redirect: {
      home: false,
      callback: '/login',
      logout: '/'
    },
    strategies: {
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        codeChallengeMethod: '',
        responseType: 'code',
        endpoints: {
          token: `${baseURL}/social-login/google/`,
          userInfo: `${baseURL}/user/`,
          logout: false
        },
      },
      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
        },
      },
    }
  },
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
    }
  },
  publicRuntimeConfig: {
    baseUrl: baseURL,
  },
  env: {
    serverUrl: process.env.SERVER_URL || 'http://localhost:8000',
  },
}