발표전에..

  • 발표자는 프론트엔드 개발자입니다.
  • 발표자는 약 2년간 각각 한번 이상 서비스에 해당 기술을 사용해봤습니다. (접한 순서대로 나열하였습니다)
    • vue.js(2.x)
    • react.js(16.X)
    • nuxt.js(1.0)
    • next.js(6.x)

 

  • Vue.js와 nuxt.js를 접해 보셨다는 전제하에 발표를 진행합니다.

next.js

vs

nuxt.js

next.js로 바라보는 nuxt.js의 편의성

NUXT.js를 사용해보신분들 🙋🙋‍♂️🙋🙋‍♂️

Why use nuxt.js

  1. Docs (with Korean)
     
  2. Directory structure (serve default)
     
  3. SSR with SEO (express only)
     
  4. Code Splitting.

Well-made framework

framework

boilerplate?

Working time: 21h

(with Backend: 4h)

Static Page (with nginx)

node.js Backend

HOW?

It works!

Thanks. nuxt.js!

Verification Full Packaged Tool

  • Vue.js
  • Vuex
  • Vue-router ( nuxt-link )
  • Node Server (express: dev, production)
  • CSS precompilers (options)
  • axios (options)
  • prettier (options)

Structure

  • Routing (/page, with dynamic path)
  • Middleware (/middleware)
  • plugin (/plugin)
  • Vuex (/store)

Thanks. nuxt.js!

Focusing Dev!

What is next.js

Why use next.js

Well-made framework

framework

boilerplate!

  1. Docs (without Korean)
     
  2. Directory structure ( not serve at first! )
     
  3. SSR with SEO (sometimes it's not working)
     
  4. Code Splitting

 SAME nuxt.js! BUT..

it is Good

  • React ( specially JSX )
     
  • Styled-jsx ( with JSX )
     
  • Functional Component ( included in React )

Strong Point of React & JSX!

But... I think..

Not default!!

  • Dynamic routing
  • Layout
  • Middleware
  • plugin
  • Redux 😂 ( and.. also MobX )
  • custom path( ~/, @/ )

But... I think..

it can't!!

  • Change resource(.next) path ( express server only!! )

    how can i set resource path `example.com/path/to/other`

nuxt.js is ❤️

 

개발에 집중할 수 있도록, 훌륭한 framework를 사용하세요!

Question?

Thank you

for listen my presentation!

20181211_vue_6nd_2nd

By Lay Sukmin Lim

20181211_vue_6nd_2nd

Vuetiful Korea meetup 6th 2nd 발표자료입니다.

  • 565