[SFC] 코드 작성 요령

Vue.js 기초: 컴포넌트 구조와 VSCode Snippets 활용하기

개요

Vue.js는 사용자 인터페이스를 구축하기 위한 프로그레시브 JavaScript 프레임워크입니다. 이 글에서는 Vue 컴포넌트의 기본 구조와 VSCode에서 개발 효율성을 높이는 방법에 대해 알아보겠습니다.

Vue 컴포넌트 기본 구조

Vue 컴포넌트는 크게 세 부분으로 구성됩니다:

1. Template (템플릿)

<template>
  <div>
    {{ message }}
  </div>
  <button @click="showAlert">hi??</button>
</template>

참고로 @는 v-on의 축약어입니다.

2. Script (스크립트)

<script>
export default {
  data() {
    return {
      message: "안녕하세요."
    }
  },
  methods: {
    showAlert() {
      alert("hi!!");
    }
  }
}
</script>

3. Style (스타일)

<style scoped>

</style>

VSCode Snippets로 개발 효율성 높이기

Vue VSCode Snippets 확장 설치

Vue.js 개발을 더욱 효율적으로 하기 위해 Vue VSCode Snippets 확장을 설치하는 것을 강력히 권장합니다.

유용한 Snippets

1. vbc - Vue 기본 컴포넌트 구조

vbc를 입력하고 Tab을 누르면 Vue 컴포넌트의 기본 구조가 자동으로 생성됩니다:

<template>
  <div>

  </div>
</template>

<script>
  export default {

  }
</script>

<style scoped>

</style>

2. vda - data() 함수

vda를 입력하면 data() 함수가 자동으로 생성됩니다:

data() {
      return {
        key: value
      }
    },

3. vme - methods 객체

vme를 입력하면 methods 객체가 생성됩니다:

methods: {

}

Vue.js 주요 문법

1. 템플릿 문법

• 이중 중괄호: {{ message }} - 데이터 바인딩
• v-on 디렉티브: @click="showAlert" - 이벤트 처리
• v-on 축약어: @는 v-on:의 축약어입니다

2. 이벤트 처리

<!-- v-on 사용 -->
<button v-on:click="showAlert">클릭</button>

<!-- 축약어 @ 사용 -->
<button @click="showAlert">클릭</button>

3. 데이터 바인딩

<template>
  <div>
    {{ message }}
  </div>
</template>

실제 예제 분석

위에서 작성한 App.vue 컴포넌트를 분석해보겠습니다:

1. 템플릿: 메시지 출력과 버튼을 포함한 간단한 UI
2. 스크립트:
   • data(): 컴포넌트의 반응형 데이터 정의
   • methods: 사용자 정의 메서드 정의
3. 스타일: 빈 스타일 섹션 (필요시 스타일 추가 가능)

개발 팁

1. VSCode Snippets 활용: 자주 사용하는 코드 패턴은 snippets로 저장하여 시간을 절약하기.
2. 축약어: @는 v-on:의 축약어라는 것을 기억하기.
3. 스타일 scoped: 컴포넌트별로 스타일을 격리하려면 scoped 속성을 사용하기. -> 나중에 더 자세히 다뤄봅시다.

결론

기본 구조를 잘 알아야 코드가 길어지고 복잡해도 잘 파악할 수 있습니다.

다음 글에서는 Vue 컴포넌트 등록방법 및 명명(naming)규칙에 대해 알아보겠습니다 :)