2021년 Vue 개발자 모범사례 > 시티즌 인사이트

본문 바로가기

시티즌 커뮤니티

시티즌 인사이트

IT&개발 정보 2021년 Vue 개발자 모범사례

페이지 정보

작성자 GrapeCity 작성일 21-11-26 14:10 조회 376회 댓글 0건

본문

Vue JS는 뛰어난 성능과 다양한 기능을 자랑하는 반응형 프런트엔드를 빌드할 수 있는 혁신적인 JavaScript 프레임워크로 유명합니다. 또한 개발자는 Vue의 SPA(Single Page Application, 단일 페이지 앱)와 SSR(서버 측 렌더링) 기능을 사용하여 강력한 웹 응용 프로그램을 광범위하게 생성할 수 있습니다.

이 문서에서는 뛰어난 코드를 작성하고, 더 나은 개발자가 되고, 개선된 응용 프로그램을 빌드할 수 있도록 모든 Vue 개발자가 채택해야 하는 모범 사례 몇 가지를 살펴볼 것입니다.


정기적으로 패키지 감사

타사 패키지로 인해 응용 프로그램에 보안상 취약한 부분이 생길 수 있다는 것은 새로운 사실이 아닙니다. 타사 패키지를 정기적으로 감사하면 취약한 부분을 찾아 수정하여 응용 프로그램을 안전하게 유지할 수 있습니다.

  • 모든 Vue 개발자는 자신의 프로젝트에 DAP(종속성 감사 프로세스) 검사 목록을 배포해야 합니다.

  • 종속성 패키지를 감사하려면 다음 단계를 수행하세요.

    • npm audit를 사용하여 취약점이 있는지 확인합니다. 이 명령은 종속성 취약점 보고서를 생성하고 가능한 경우 제안된 패치를 생성합니다.

    • 감사 보고서를 검토하고 npm audit fix 등과 같은 권장 명령을 실행하거나 필요한 경우 더 자세히 조사하여 취약점을 직접 해결합니다.

    • npm obsolete 명령을 사용하여 오래된 패키지가 있는지 확인하고 npm update 명령을 실행하여 업데이트합니다.

2021년 Vue 개발자 모범 사례


API 모듈 패턴을 사용하여 HTTP 요청 구성

장바구니 앱을 빌드하는 중이라고 가정해 보겠습니다. API End Point에서 데이터를 가져오기 위해 많은 HTTP 요청을 만들어야 합니다. 컴포넌트 내에 모든 코드를 번들로 묶는 것이 잘못은 아니지만 API 모듈 패턴을 사용하여 코드를 모듈화하여 HTTP 요청을 추상화하는 것이 더 좋습니다.

HTTP 요청을 추상화하면 UI 컴포넌트가 비즈니스 로직이 아니라 UI에 초점이 맞춰지도록 할 수 있습니다. 결국, 코드 줄이 확장되면서 코드베이스가 너무 복잡해지지 않습니다.

API 모듈은 리소스별로 분류된 모든 HTTP 로직이 있는 JavaScript 모듈입니다. GrapeCity 앱에서 리소스는 제품, 장바구니, 주문 등입니다. 예를 들어, 장바구니에 들어 있는 모든 제품을 표시하려고 합니다. API 디렉터리를 생성하여 시작하고 product.js 파일을 추가해 보겠습니다. API 모듈의 모양은 다음과 같습니다.

//api/product.js  
export const async fetchProducts = () => {  
const response = await axios.get("/api/products");  
return response;  
}  
​
//api/product.js  
export const async addToCart = (itemId, qty) {  
const payload = JSON.stringify({ itemId, qty });  
const response = await axios.post("/api/cart", {  
body: payload  
});  
const body = await response.json();  
return body;  
}


다음으로, 두 모듈을 컴포넌트로 가져옵니다.

//~/components/AllProducts.vue  
import {fetchProducts, addToCart} from '~/api/product.js'
​
const getAllProducts = () => {  
try {  
const response = fetchProducts()  
....  
}  
catch {}  
}  
​
const createNewProduct = () => {  
try {  
const response = addToCart()  
}  
catch {}  
}


JSDoc을 사용하여 API 엔드포인트(Endpoint) 문서화

JSDoc은 메모를 사용하여 코드를 문서화하도록 하는 오픈 소스 API 문서 생성기입니다.

API 엔드포인트(Endpoint) 문서화는 모든 사람들의 삶을 더 쉽게 만들어주기 때문에 중요합니다. API가 작동하는 방식을 이해하고 기존 팀원과 신규 팀원이 똑같이 사용할 때 예기치 않는 오류를 해독하는 데 소요되는 시간(및 혼동)을 줄여줍니다.

JSDoc이 유일한 문서화 도구는 아니지만 JSDoc은 VS Code와 같이 널리 사용되는 코드 편집기에서 지원되는 완전 통합형 오픈 소스 도구입니다. 프로젝트에 JSDoc을 추가하려면 다음과 같이 JSDoc을 설치합니다.

//bash  
npm install --save-dev jsdoc


그런 다음 jsdoc.json 파일을 생성하여 아래 코드 줄을 추가합니다.

//jsdoc.json  
{  
  "source": {  
    "include": [ "src/", "api/" ],  
    "exclude": [ "src/router" ]  
  },  
  "opts": {  
    "template": "node_modules/docdash",  
    "encoding": "utf8",  
    "destination": "./docs/",  
    "recurse": true,  
    "verbose": true  
  }  
}  


다음과 같은 모양이 되도록 package.json을 수정합니다.

//package.json  
"scripts": {  
  "dev": "vue-cli-service serve",  
  "build": "vue-cli-service build",  
  "generate:doc": "jsdoc -c ./jsdoc.json",  
},


메모를 사용하여 JavaScript를 문서화합니다.

// api/product.js  
/*  
*Add product to cart  
* @param itemID {String} is the id of the product  
* @param qty {Number} is an integer depicting the quantity of products  
* @returns {object}  
*/  
export const async addToCart = (itemId, qty) {  
  const payload = JSON.stringify({ itemId, qty });  
  const response = await axios.post("/api/cart", {  
    body: payload  
  });  
  const body = await response.json();  
  return body;  
}


마지막으로 다음 명령을 실행하여 문서 페이지를 생성합니다.

npm run generate:doc 

 

이 사례는 시간을 절약할 뿐만 아니라 궁극적으로 워크플로우의 성능을 높여 줍니다.


DOM 조작에 Refs 사용

Vue는 대부분을 추상화하기 때문에 DOM 조작을 수행하는 것은 좋은 방법이 아닙니다. 그러나 DOM을 조작해야 할 경우에는 refs가 정답입니다.

Vue에서 refs는 요소 또는 자식 컴포넌트에 대한 참조를 등록하는 데 사용되는 특수한 특성입니다. 한 가지 유명한 케이스는 입력 요소에 포커스를 추가하는 것입니다. 바닐라 JavaScript를 사용하여 요소를 대상화하는 대신 .$refs.input.focus()와 함께 $refs를 사용합니다.

//vuejs  
const app = Vue.createApp({})  
app.component('base-input', {  
  template: `  
    <input ref="input" />  
  `,  
  methods: {  
    focusInput() {  
      this.$refs.input.focus()  
    }  
  },  
  mounted() {  
    this.focusInput()  
  }  
})


2021년 Vue 개발자 모범 사례


큰 컴포넌트를 재사용 가능한 더 작은 컴포넌트로 리팩터링

재사용 가능한 컴포넌트는 응용 프로그램 어디에서든 사용할 수 있는 컴포넌트입니다. 따라서 비즈니스 로직에서 자유로울 수 있도록 충분히 일반적이어야 합니다. 컴포넌트 조직을 계획할 때 재사용 가능한 컴포넌트를 고려해야 합니다.

JavaScript에서 코드를 너무 많이 반복하면 함수가 되도록 코드를 리팩터링합니다. 재사용할 수 있도록 말이죠. Vue에서 컴포넌트가 너무 크면 재사용 가능한 더 작은 컴포넌트로 리팩터링해야 합니다. 그러면 시간을 절약하고 프로젝트를 더 잘 유지하며 재사용할 수 있게 됩니다.


Cross-site Scripting(XSS) 실수 피하기

Cross-site Scripting은 웹페이지에 악성 코드를 삽입하여 신뢰할 수 있는 웹사이트 및 응용 프로그램의 데이터 무결성을 공격합니다. HTML, JavaScript 또는 CSS 코드가 순수하지 않은 사용자 제공 콘텐츠를 실행하도록 허용하면 프로젝트가 공격에 노출될 수 있습니다.

Vue 개발자가 응용 프로그램을 XSS 공격을 당하기 쉽게 하는 가장 일반적인 몇 가지 실수는 다음과 같습니다.

  • 텍스트 렌더링에 v-HTML 사용. 대신 보간된 식 {{}}을 원하는 만큼 사용합니다. 브라우저에서는 일반 문자열이기 때문에 {{}} 내의 어떤 것도 실행할 수 없습니다. 하지만 v-HTML을 사용해야 하는 경우 문자열과 이스케이프 문자를 구문 분석해야 합니다.

  • v-HTML을 사용하는 타사 UI 라이브러리로 속성을 통해 전달된 데이터 렌더링. HTML을 사용하는지 확인하려면 Vue.js 앱에 허용 목록 기반 HTML 삭제기(HTML 삭제) vue-sanitize를 사용합니다.


타사 라이브러리에 지나치게 의존하지 않기

개인의 안전을 위해 우리는 배경을 모르고, 누군지, 어떤 일을 할 수 있는지 모르는 낯선 사람을 선뜻 집으로 초대하지 않습니다. 코드베이스의 경우에도 마찬가지여야 합니다. 고유한 사용자 정의 지시문 또는 플러그인이나 인스턴스 속성을 작성할 수 있는 경우 문자열을 구문 분석하기 위해 라이브러리를 설치하면 안 됩니다.

대부분의 패키지에는 프로젝트를 엉망으로 만들 수 있는 악성 코드가 포함되어 있기 때문에 이 방법은 이전 방법과 함께 사용해야 합니다. 타사 UI에 대한 의존도를 낮추면 프런트엔드의 성능도 개선됩니다.

여기서 요점은 타사 라이브러리의 사용을 피하는 것이 아닙니다. 라이브러리에서 제공하는 기능이 필요하지만 직접 작성할 수 없는 것인지 확인하는 것입니다(예: 날짜 및 시간 구문 분석기).

프로젝트에 타사 라이브러리를 추가하기 전에 장단점 목록을 작성해야 합니다. 장점이 단점보다 더 크다면 해당 패키지가 응용 프로그램을 보안 또는 기술적 위험에 노출시키지 않는지 확인해야 합니다.

해당 패키지가 응용 프로그램을 보안 또는 기술적 위험에 노출시키지 않는지 확인하려면 마지막으로 게시된 날짜, 주간 다운로드 횟수와 공동 작업자의 라이브러리 프로필을 살펴보고 활발하게 유지 관리되고 있는지 살피는 것부터 시작합니다. 그런 다음 오픈 소스 보안 테스트 도구인 Synk를 사용하여 보안 취약점이 있는지 패키지를 테스트합니다. 그런 다음 bundlephobia 도구를 사용하여 해당 라이브러리를 프로젝트에 추가하면 발생하는 성능 비용을 확인합니다. 이러한 사항을 모두 확인했을 때 결과가 부정적이면 대체 도구를 고려해야 합니다.


사용자 정의 이벤트 이름에 케밥 케이스(kebab-case) 사용

Vue 작성 시 가장 간과하기 쉬운 점일 것입니다. 이벤트 이름이 대/소문자를 구분하지 않지만 케밥 케이스를 사용하는 것이 가장 좋습니다. 그 이유는 수신기 이벤트 이름의 대/소문자가 송신기 이벤트 이름의 대/소문자와 동일해야 하기 때문입니다.

대/소문자를 구분하는 것이 좋지만 케밥 케이스보다 가독성이 떨어집니다. 또한 수신기 이벤트 이름이 <component> v-on:my-age="tell my age"> <component>처럼 케밥 케이스인 경우 이름이 <.$emit(myAge)>인 송신된 이벤트는 작동하지 않기 때문에 카멜 대/소문자 이름 지정(camelCase)은 사용하지 않아야 합니다.

모범 사례를 따라야 한다는 점을 잊거나 간과하기 쉽습니다. 따라서 모든 Vue 프로젝트에서 eslint가 매우 중요합니다. vue/custom-event-name-casing eslint 플러그인을 사용하여 일관성을 위해 사용자 정의 이벤트 이름의 대/소문자 구분 스타일을 지정할 수 있습니다.


v-for 컴포넌트에 키 포함

기본적으로 VS CodeVetur(VS Code용 공식 도구 확장 프로그램)을 사용하는 경우 v-for 요소에 고유한 키를 포함하지 않으면 오류 메시지가 발생합니다. 이는 Vue에 관한 우선순위 규칙입니다.

<:key> 특성을 통해 Vue의 가상 DOM이 목록의 각 요소와 이전 노드 목록과 새 목록 간의 차이점을 더 잘 식별할 수 있습니다. 가장 일반적인 사용 사례는 특히, v-for가 포함된 요소로 배열을 매핑할 때 목록 렌더링을 사용하는 것입니다.

//vue  
<ul id="football-example">  
<li v-for="footballer in footballers" :key="footballer.id">  
{{ footballer.name }}  
</li>  
</ul>  


VS Code와 Vetur를 사용하지 않는 경우 eslint 플러그인 vue/require-v-for-key는 사용자 정의 컴포넌트를 제외하고 v-for가 있는 요소와 v-bind:key가 없는 요소를 보고하는 것을 지원합니다.


사용자 정의 유효성 검사기를 사용하여 속성 검증

프로그래밍의 일반적인 규칙은 예측 가능한 코드를 작성하는 것입니다. 예측 가능한 코드란 코드를 읽었을 때 쉽게 이해할 수 있는 것을 의미합니다. 사용자 정의 속성 유효성 검사기를 작성하는 것은 Vue에서 코드의 예측 가능성을 얻는 여러 가지 방법 중 하나입니다. 컴포넌트 또는 두 개의 엔터티 간에 데이터 통신이 수행되는 경우 예상되는 동작이 발생하도록 하려면 데이터를 검증해야 합니다.

Vue는 형식 검사, 유효성 검사, 기본값, 속성에 대한 제약조건을 제공하여 기본적으로 속성 데이터 보안을 구현합니다. 형식 검사와 기본값이 있는데 속성 유효성 검사를 수행해야 한다고 이렇게까지 해야 하는 이유는 무엇일까요? 사용자의 동작이 예측 불가능하기 때문입니다. 그렇기 때문에 속성 유효성 검사를 수행하고 형식 검사, 제약조건 및 기본값을 작성하여 악의적인 공격과 예측할 수 없는 에지 케이스에 대한 강력한 방어 조치를 취해야 합니다. 한 가지 일반적인 사례는 한 개체가 우리의 형식 검사를 우회하는 방법을 찾는 것입니다.

사용자 정의 속성 유효성 검사기는 값을 입력으로 수락하고 유효성 상태로 부울을 반환하는 기능입니다. 유효성 검사기를 사용하여 사용자가 나이지리아 출신이 아닌지 확인하기 위한 예를 살펴보겠습니다.

//childComponent.vue  
<template>  
  <div>{{ userInfo }}</div>  
</template>  
<script>  
export default {  
  data: () => ({}),  
  props: {  
    userInfo: {  
      type: String,  
      required: true,  
      validator: val => val.location != "Nigeria"  
    }  
  }  
};  
</script>  
​
//parentComponent.vue  
<!-- Caller -->  
<template>  
  <div>  
    <PropReceiverComponent :userInfo="user"></PropReceiverComponent>  
  </div>  
</template>  
<script>  
import PropReceiverComponent from "~/components/PropReceiverComponent";  
export default {  
  data: () => ({  
    user: {  
      location: "Nigeria"  
    }  
  }),  
  components: {  
    PropReceiverComponent  
  }  
};  
</script>


2021년 Vue 개발자 모범 사례


결론

초보 Vue 개발자는 실용적이어야 합니다. 잘 작동하게 만들고 이후 리팩토링하면 됩니다. 하지만 시간이 지날수록 책임이 커져 개발자는 설계 패턴, 성능, 테스트 자동화, 접근성 등에 대해 염려해야 합니다. 모범 사례를 준수하면 코드의 품질을 개선할 수 있습니다.

v-for 컴포넌트에 고유한 키 사용과 같은 규칙은 Vue 코드 작성 방침에 필수적이기 때문에 반드시 필요합니다. 정기적인 패키지 감사, 타사 라이브러리의 사용 줄이기, XSS 실수 피하기 등과 같은 다른 규칙은 프로젝트의 보안에 필수적입니다. Vuejs Style 가이드를 참고하여 이러한 규칙에 대해 자세히 알아볼 수 있습니다.

또한 강력한 보고서, 스프레드시트, 차트 및 표를 구현해야 하는 엔터프라이즈 Vue 프로젝트에서 작업하는 경우 더 이상 처음부터 빌드할 필요가 없습니다. 이 분야에서 40년이 넘는 경험과 전문 지식을 갖춘 GrapeCity가 이러한 기능을 구현하는 데 필요한 다음 Vuejs 도구를 제공해 드립니다.

  • Wijmo: Vuejs 프로젝트를 위한 UI 컴포넌트와 반응형 데이터 그리드 컬렉션을 제공합니다. 여기서 프로젝트에 wijmo vue 컴포넌트를 사용하는 방법을 알아볼 수 있습니다.

  • SpreadJS: 엔터프라이즈 응용 프로그램에 사용할 수 있는 500개가 넘는 Excel 함수로 스프레드시트를 작성하기 위한 세계적인 UI 라이브러리입니다. 여기서 프로젝트에 Spreadjs를 통합하여 사용하는 방법을 알아볼 수 있습니다.

  • ActiveReportsJS: 개발자에게 보고서 레이아웃을 사용자 정의하고 JavaScript 프로젝트에 보고서 디자이너 및 컴포넌트를 통합할 수 있는 기능을 제공하는 데이터 시각화 솔루션입니다. 여기서 프로젝트에 ActiveReports를 통합하여 사용하는 방법을 알아볼 수 있습니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.