reth

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Nuxt.js ======


===== Starting with nuxt.js =====

<cli prompt="$ " comment="  #">
$ npm install -g vue-cli
</cli>

<cli prompt="$ " comment="  #">
$ vue init nuxt-community/starter-template [프로젝트 이름]
</cli>

<cli prompt="$ " comment="  #">
$ cd [생성된 프로젝트 디렉토리]
$ npm install # or yarn  # npm 또는 yarn을 이용하여 의존성 모듈 설치
$ npm run dev  # nuxt.js 실행
</cli>


===== 프로젝트 구조 =====
  * **nuxt.config.js**; nuxt.js의 설정 정보 파일. build, cache, css, dev, env, generate, head, loading, plugin, rootDir, router, srcDir, transition의 설정
  * **package.json**; 프로젝트의 의존성 모듈과 각종 정보, 스크립트를 포함하는 파일
  * **assets**; SASS, LESS나 빌드가 필요한 JavaScript 파일이 포함되는 디렉토리
  * **components**; nuxt.js에서 사용되는 컴포넌트들을 포함하는 디렉토리, .vue 파일
  * **layouts**; nuxt.js에서 사용하는 기본 레이아웃을 포함하는 디록토리
  * **middleware**; 레이아웃, 페이지가 렌더링되기 전에 실행되는 파일이 정의되는 디렉토리.
  * **pages**; 일반적인 vue 파일을 포함하는 디렉토리. asyncData, fetch, head, layout, transition, scrollToTop, validate, middleware 속성 사용 가능
  * **plugins**; vue로 만든 웹 애플리케이션이 생성되기 전에 실행시키고 싶은 js 파일을 포함하는 디렉토리.
  * **static**; 정적 파일, 이미지 파일이나 각종 CSS, javaScript 같은 정적 파일을 포함하는 디렉토리.
  * **store**; 상태(데이터) 관리를 도와주는 라이브러레인 vuex가 포함된 디렉토리.


==== pages ====

<sxh>
<template>

</template>

<script>
export default {

  // vue 인스턴스가 생성되기 전 store 초기화  
  fetch({store, params}) {
  },

  // 인스턴스가 생성될 때 호출
  created() {
  },
  
  // 비동기적으로 데이터 생성 json 형태로 반환하면 data()와 머지됨.
  asyncData(context) {
    return {}
  },
  
  // 데이터 생성
  data() {
    return {}
  },  
  
  // (optional) 해당 페이지 <head> 커스터마이징
  head() {
    return {
      title: '',
      meta: [
        { hid: '고유값', name: '설명', content: '커스텀 설명' }
      ]
    }
  },
  
  // 해당 파일에 동작시킬 메소드 정의
  methods: {
  },
  
  // 복잡한 계산식일 때 computed를 이용
  computed: {
  },
  
  // 외부 컴포넌트 추가 {a, b, c}의 형태로 작성. 각각의 컴포넌트는 import a from 'a'로 가져온다
  components: {
  },
  
  // (optional), layout 설정, 기본 레이아웃 사용시 필요없음
  layout: '',
  
  // (optional), 미들웨어 설정, middleware: 'authenticated'는 middleware 디렉토리의 authenticated.js 파일 실행
  middleware: '',
  
  // (optional), 최상단 true, 최하단 false
  scrollToTop: true || false
}
</script>
</sxh>

  * asyncData 메소드;
  * fetch 메소드;
  * head;
  * layout;
  * middleware;
  * scrollToTop;


  * sytle; 해당 페이지에서만 적용할 스타일 <style scoped></style>


==== 설정 파일 ====
  * nuxt.config.js
    * cache
    * loading

==== Routes ====
  * 정적라우트
  * 동적라우트; _id.vue 등 this.$route.params.[_이름]
  * 페이지 이동; <nuxt-link> 컴포넌트 이용. 여러 줄일경우 <div class=""> 등으로 묶어주어야 한다. 하나의 루투 요소로 포함.


==== layouts ====
  * default 레이아웃; default.vue
  * error 레이아웃; error.vue

==== Components ====
  * 컴포넌트 생성; import ~ from 
  * 컴포넌트로 데이터 넘기기; props를 이용
  * 컴포넌트로 함수 넘기기; 
  * props 검사; props로 전달되는 인자 타입 7가지: String, Number, Boolean, Function, Object, Array, Symbol

<sxh>
<script>
export default {
  props: {
    p1: {Number, String},
    p2: {
      tyep: String,
      required: true
    },
    p3: {
      type: Number,
      default: 100
    },
    p4: {
      type: Object,
      default: function() {
        return { message: 'hello world' }
      }
    },
    p5: {
      validator: function(value) {
        return value > 0
    }
  }
}
</script>
</sxh>

  * props의 한계; 단방향 바인딩. 

==== Vuex store를 이용한 데이터 관리 ====

  * Vuex store; this.$store 저장소, mutations 메서드로 상태 변경
  * mapState 사용
  * fetch 메소드
  * vuex store 모듈 형태 제작; 규모가 커짐에 따라 상태를 독립적으로 관리.



==== express와 nuxt.js 같이 사용 ====
  * nuxt.js 프로젝트 생성

<cli prompt="$ " comment="  #">
$ vue init nuxt-community/starter-template nuxt_with_express

$ npm install
$ npm install -s express
</cli>

  * express 앱 추가
  * nuxt with express 보일러 플레이트

<cli prompt="$ " comment="  #">
$ vue init nuxt-community/starter-template [프로젝트 명]  # nuxt로만 이루어진 웹 애플리케이션 프로젝트 생성
$ vue init nuxt-community/express-template [프로젝트 명]  # express 앱 자동 추가
</cli>

<cli prompt="$ " comment="  #">
$ npm install
$ npm run build
$ npm run start
$ npm run dev
</cli>

  * 에러 발생 시 package.json 파일을 수정하거나 server/index.js 파일을 ES 버전에 맞게 수정




===== References =====
  * [[https://doozi0316.tistory.com/entry/Nuxtjs-%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%98%88%EC%A0%9C-SSR-CSR-Universal|Nuxt.js 란? 개념과 예제 (SSR, CSR, Universal, asyncData, fetch...)]]
  * [[https://linked2ev.github.io/devlog/2019/01/22/Nuxt-Admin-4.-Nuxt-Component-Divison/|[Nuxt Admin] 4. Nuxt에서 컴포넌트 사용]]
  * [[https://velog.io/@nuxt/Nuxt.js-%EA%B8%B0%EC%B4%88-%EA%B0%95%EC%A2%8C-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%99%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8|Nuxt.js 기초 강좌 : 페이지와 컴포넌트]]
  * [[https://css-tricks.com/creating-dynamic-routes-in-a-nuxt-application/#let-the-nuxt-config-know|Creating Dynamic Routes in a Nuxt Application]]
  * [[https://velog.io/@nuxt/NUXT-%EB%B3%80%EC%88%98%EC%99%80%ED%95%A8%EC%88%98|NUXT 기초 강좌 : 변수 선언 방법, 함수 사용법]]
  * [[https://stackoverflow.com/questions/44748575/how-to-get-current-route-name-in-nuxt-js|How to get current route name in Nuxt.js?]]
  * [[https://fkkmemi.github.io/nuxt/nuxt-004-plugin/|NUXT로 혼자 웹사이트 만들기 4 플러그인 설치]]
  * [[https://nodesource.com/blog/next-nuxt-nest/|Choosing the right Node.js Framework: Next, Nuxt, Nest?]]
  * [[https://day0404.tistory.com/8|Nuxt.js 란? (feat. SSR, CSR)]]