NuxtJs, VueJs 로 프론트엔드 구축시 정리했던 자료

새로운 프로젝트에서 기존의 springboot + thymeleaf 보다 VueJs를 사용하려고 했더니 NuxtJs라는 놈이 있어서 서버구축까지 간단하게 된다는 것을 알게되었다.

NextJs라는 ReactJs의 프레임워크를 VueJs로 포팅(?) 했다는 건데 사용법이 매우 간단했다.

thymeleaf 는 html에 이런저런 지저분한 자체태그옵션과 문법, 그리고 Jquery 등을 이용해서 정말 구린방식으로 개발해야되었는데, 콤포넌트 기반의 VueJs로 개발해보니 정말 내가 원했던 프레임워크였다는 생각이든다.

개발 소프트웨어 요구사항에 작업하면서 간단히 정리 한것을 올려보겠다.

1 NuxtJS Framework

• 공식홈페이지 (https://nuxtjs.org/guide)

• Server Side Rendering (SSR)이 가능한 FrontEnd Framework

• VueJs의 장점을 SSR로 구축가능하도록 해줌

• 자동으로 webpack 빌드

• 직관적인 스캐폴딩

• MIT 라이센스

• Plug-in(node 모듈) 사용목록 [ 바로가기 ]

• 개발팁
• NuxtJS의 SSR 렌더링 기능을 활용하여 프론트엔드측은 자체 호스팅이 가능하도록 구성한다.
• Server Side Rendering ( https://medium.com/@rubyblack/why-we-use-nuxt-js-seo-1-ssr-%ED%8E%B8-d5e8f02e64e0)
• Javascript ( TypeScript 아님) 으로 개발한다.
• 프로젝트의 스캐폴드는 NuxtJS의 기본 구조를 따르되, 하위 폴더는 프로젝트에 맞게 추가한다.
• 직접 구현 하기 보다는 검증된 모듈/플러그인 을 사용한다.
• 설정을 편집 및 개발은 VSCODE 편집기를 사용한다.
• 통신모듈은 NuxtJs에서 추천하는 https://http.nuxtjs.org/ 모듈을 사용

2 VueJS

• 공식홈(https://kr.vuejs.org/v2/guide/index.html)

• 컴포넌트 기반의 프레임워크

• 양방향 데이터 바인딩 가능 (MVVM 패턴)

• 가상돔(일부만 렌더링) 

• 각 컴포넌트마다 라이프사이클이 존재

• 개발팁

• Vuejs Style Guide (https://vuejs.org/v2/style-guide/)
• Vuejs Life Cycle (https://beomy.tistory.com/47?category=646688)
• 되도록 작은 단위로 재사용 가능한 컴포넌트 설계. (https://medium.com/@DaveAbiola/vue-js-reusable-components-cfced2af9c00)
• 컴포넌트 작성시에는 KeBab 형식으로 지정
• VueEx 를 활용하여 데이터 관리
• 12-tips-and-tricks-to-improve-your-vue-projects (https://www.telerik.com/blogs/12-tips-and-tricks-to-improve-your-vue-projects)
• understanding-vue-deep-css-selector (https://www.telerik.com/blogs/understanding-vue-deep-css-selector)

• 1.Vue.js 코딩스타일가이드

  1.  Vuejs Style Guid - 중요도 A

  1. 컴퍼넌트 이름은 html 태그(앞으로 존재할지도 모르는)와 충돌되지 않도록 하이픈( - ) 으로 연결된 케밥스타일로 한다.
     (예 : https://vuejs.org/v2/style-guide/#Multi-word-component-names-essential)

  2. 컴퍼넌트내의 data 선언부분은 반드시 함수로 지정하여 같은 컴퍼넌트가 여러군데 사용될 경우에도 내부 데이터가 각각의 컴퍼넌트 인스턴스 객체데이터로서 보관될수 있도록한다.
     (예:https://vuejs.org/v2/style-guide/#Component-data-essential)

  3. 컴퍼넌트내의 pops 변수는 가능한 타입, 필수여부, 밸리데이터(이건 필요한경우만) 를 지정하여 타입 및 값에 대한 안정성체크를 한다.
     (예: https://vuejs.org/v2/style-guide/#Prop-definitions-essential)

  4. v-for 에는 key 를 반드시 사용한다.
     (예:https://vuejs.org/v2/style-guide/#Keyed-v-for-essential)

  5. 같은 태그 또는 디렉티브에서 v-if 와 v-for 는 결코 같이 사용하지 않는다.
     (예 : https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)

  6. 컴퍼넌트내에서만 사용할 css style 라면 scope 를 지정하여 다른 컴퍼넌트와 style속성이 충돌나지 않도록 한다.
     (예: https://vuejs.org/v2/style-guide/#Component-style-scoping-essential)

  7. 컴퍼넌트 내부에서만 사용하는 변수,함수는 내부접근제한자( $_ )를 지정한다.
     (예: https://vuejs.org/v2/style-guide/#Private-property-names-essential)
     
     

  2.  Vuejs Style Guid - 중요도 B

  1. 컴퍼넌트는 반드시 하나의 독립된 파일로 생성한다.
     (예 :https://vuejs.org/v2/style-guide/#Component-files-strongly-recommended )

  2. 컴퍼넌트 파일 이름은 케밥스타일로 한다.
     (예 : https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended)

  3. 일관된 컴포넌트 이름 규칙을 청한다.
     (예 : https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended )
     (예 : https://vuejs.org/v2/style-guide/#Tightly-coupled-component-names-strongly-recommended )

  4. Props 선언시 스크립트 에서는 camelCase , 템플릿에서 사용시에는 케밥
     (예 : https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended)

  5. 템플릿에서 컴퍼넌트 props를 전달할떄는 한속성당 한줄 사용
     (예 : https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended)

  6. 템플릿에서 복잡한 연산은 하지않도록, 대신 cmputed 변수를 사용
     (예 : https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended)

  7. computed 속성에 사용하는 로직은  최대한 심플하게 작성하도록 한다. 되도록 세분화된 여러로직으로 나누어 [일기좋고, 추가변경에 용이하고, 테스트하기 좋은] 코드로 만든다.
     (예:https://vuejs.org/v2/style-guide/#Simple-computed-properties-strongly-recommended)

  8. 디렉티브 단축어 (: for v-bind:, @ for v-on: and # for v-slot) 항상쓰거나 , 아예쓰지않거나 한다.
     (예: https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
     
     

  3. Vuejs Style Guid - 중요도 C - 통과

  4.  Vuejs Style Guid - 중요도 B

  1. 부모컴퍼넌트와 자식컴퍼넌트가 통신할떄 규칙은 부모->자식은 props , 자식->부모는 event로 해서 dsep coupling 을 피하도록 한다.
     (예 :https://vuejs.org/v2/style-guide/#Component-files-strongly-recommended )

  
  

  2.Vue.js 데이터 

  1.  data 지시어
     변수나 함수를 선언.

  단방향 데이터
  컴퍼넌트 내부에서만 사용하는 변수는 접근제한자 $_ 를 사용하여 선언하길 권장. 

  스코프를 제한하기위해서 선언시 data : functuon() { } 으로 지정 

  소스코드내에서의  변수 이름은 카멜케이스, 템플릿에서는 케밥케이스로 지정
  (예 : https://vuejs.org/v2/api/#data)

  2. props 속성
     부모컴퍼넌트에서 하위 컴퍼넌트에 데이터를 전달하기위한  변수나 함수를 선언.
     같은 이름의 변수를  data 와 props 에 지정하는건 금지.
     type, default, required, validator(function) 을 지정해서 전달받은 값에 대한 안정성을 검증가능.
     (예 : https://vuejs.org/v2/api/#props)

  3.  computed 속성
     get/set 을 별도로 지정가능한 변수 선언가능

  내부로직이 컴퍼넌트 내부의 어떤 변수에도 의존되지 않는경우(즉 외부 함수를 단순히 불러내는 Date.now() 같은경우) 맨처음 캐싱된 데이터를 돌려주기 때문에 이럴경우에는 메쏘드를 사용한다.
  (예: https://kr.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1%EC%9D%98-%EC%BA%90%EC%8B%B1-vs-%EB%A9%94%EC%86%8C%EB%93%9C)

  4. model
     양방향 통신을 하기위해서는 v-model 을 활용.
     prop, event 속성 설정

  3.Vue.js 라이프사이클 

  1.  라이프 사이클 참고 자료 (https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4)

  2. created
     컴퍼넌트의 초기화에 필요한 데이터 가져오기, 변수에 할당하기 등을 작업한다. DOM 요소에는 접근할수없다.
     부모->자식 순서로 실행된다. 

  3. mounted
     DOM요소가 화면에 렌더링이 된후에 실행된다. created 에서 처리된 데이터를 화면표시 전에 DOM 에서 이용할수있다.
     단, 자식컴퍼넌트의 mounted 가 끝나야 부모 컴퍼넌트의 mounted 가 실행된다.

  4. updated
     화면단에서 데이터의 변경에 의해 재렌더링이 일어날 필요가 있을경우 실행된다. 

  5. destroy
     뷰인스턴스(컴퍼넌트)가 제거된 후 에 실행된다. 단, 이벤트제거등은 beforeDestroy 에서 한다.

  4.Vue.js 디렉티브 

  1. 내장디렉티브목록(https://vuejs.org/v2/api/#Directives)

  2. v-text : {{ }} 와 같다.

  3. v-html : XSS 공격의 위험성이 있으므로 신뢰할수 있는 컨텐츠에서만 사용

  4. v-show : display CSS 적용해줌

  5. v-if : if

  6. v-else : if else 

  7. v-else-if : else if  

  8. v-for : for  

  9. v-on : 약어 @, 일반 DOM에는 표준 DOM 이벤트발생, 사용자 컴퍼넌트에서는 사용자 이벤트 발생가능 

  10. (상세참고 : https://kr.vuejs.org/v2/api/#v-on, https://kr.vuejs.org/v2/guide/components.html#search-query-nav)  

  11. v-bind : 컴퍼넌트 속성 또는 표현식을 바인딩, class 또는 style 지정, 하위컴퍼넌트의 속성에 바인딩가능 

  12. v-model : 폼인풋또는 컴퍼넌트에 양방향 바인딩

  13. v-slot : 컴퍼넌트를 재사용하기 위해서, 컴퍼넌트의 내부에 한개혹은 다수의 slot 을 배치해, 해당컴퍼넌트를 사용하고자할때 slot 영역을 상황에 따라 다른 컴퍼넌트등으로 대치가능하도록 해준다.

  14. v-once : 컴퍼넌트를 한번만 렌더링. 갱신이 필요없는 statless 컴퍼넌트에 사용

  5.Vue.js 컴퍼넌트 

  1. 재사용 원칙

  2. 컴퍼넌트에 직접 데이터 전달은 props 

  3. 내장 $smit 메소드로 직접 이벤트 발생가능, $emit의 발생 이벤트 이름을 커스텀 컴퍼넌트의 v-on 이벤트 이름으로 동일하게 작성시 또는 메쏘드 생성시 가능.
     (예 : https://kr.vuejs.org/v2/guide/components-custom-events.html)

  4. slot 속성을 통해 컴퍼넌트의 내용을 상황에 따라 바꿔치기 가능하게하여 재사용성 향상가능
     (예 : https://kr.vuejs.org/v2/guide/components-slots.html)

  5. v-bind:is 속성으로 동적으로 컴퍼넌트 전환 가능

  6. v-bind:is 사용시 keep-alive 속성으로 컴퍼넌트 전환후에도 컴퍼넌트의 뷰상태 유지가능
     (예 : https://kr.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-%EB%8F%99%EC%A0%81-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)

  7. ref 속성을 자식 컴퍼넌트등에서 정의하여 부모컴퍼넌트등에서 레퍼런스를 참조가능 (this.$refs.레퍼런스이름)
     (예:https://vuejs.org/v2/api/#ref)

3 HTML5 & SEO

• HTML5 란 https://ko.wikipedia.org/wiki/HTML5

• META TAG를 페이지별로 적절하게 수정하기 위해서 NuxtJs 의 head 속성을 오버라이드 한다. (https://vue-nuxt.gitbook.io/nuxt/tutorials/making-blog/undefined) (https://medium.com/vue-mastery/best-practices-for-nuxt-js-seo-32399c49b2e5)

4 SCSS & SASS

• Sass 란 https://ko.wikipedia.org/wiki/Sass_(%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8_%EC%96%B8%EC%96%B4)

• 개발팁

https://heropy.blog/2018/01/31/sass/

• CSS (https://developer.mozilla.org/ko/docs/Web/CSS)
• BEM 컨벤션 도입 (CSS CONVENTION - BLOCK, ELEMENT, MODIFIER)
• (https://coliss.com/articles/build-websites/operation/css/bem-naming-cheat-sheet.html)
• SASS (https://sass-lang.com/)
• nuxtjs 에서 sass 를 사용하기 위해서는 node-sass , sass-loader 모듈 설치필요