let과 변수 선언의 스코프 주의사항

JavaScript에서 let은 블록 스코프를 가지며, 호이스팅(hoisting)이 발생하지 않습니다. 따라서 초기화 없이 변수를 참조하면 ReferenceError가 발생합니다.

// 오류 발생: Cannot access 'x' before initialization
console.log(x);
let x = 10;

반면 var는 호이스팅되어 undefined로 초기화되므로 에러 없이 실행됩니다.

Vue 인스턴스 생성과 데이터 바인딩

Vue 애플리케이션은 루트 인스턴스를 생성하여 DOM 요소에 마운트합니다. 일반적으로 <div id="app">에 연결하며, 이는 레이아웃 목적에 적합하기 때문입니다.

<div id="app">
  <h1>환영합니다 {{ message }} - {{ name }}</h1>
</div>

<script src="vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello-Vue!',
      name: 'Han Shunping Education'
    }
  });
  console.log(vm.message); // 접근 가능
  console.log(vm._data.name); // 내부 데이터 직접 접근
</script>

v-bind와 v-model 활용

속성 바인딩은 v-bind: 또는 약식 :으로 처리하며, 양방향 데이터 바인딩은 v-model을 사용합니다.

<img :src="imgSrc" :width="imgWidth">
<input type="text" v-model="userInput">
<input type="text" v-model.trim="trimmedValue">

이벤트 처리와 수식어(Modifiers)

이벤트 리스너에 다양한 수식어를 적용해 동작을 제어할 수 있습니다.

<form @submit.prevent="onSubmit">
  <button @click.once="handleClick">한 번만 클릭</button>
  <input @keyup.enter="onEnter" placeholder="엔터 입력">
  <input @keyup.down="onArrowDown" placeholder="↓ 키">
</form>

조건부 렌더링 및 반복 출력

v-if, v-else-if, v-else로 조건에 따라 요소를 렌더링하고, v-for로 리스트를 반복 표시합니다.

<div v-if="score >= 90">우수</div>
<div v-else-if="score >= 70">양호</div>
<div v-else>보통</div>

<ul>
  <li v-for="item in itemList" :key="item.id">{{ item.label }}</li>
</ul>

Node.js 및 npm 환경 점검

개발 환경에서 Node.js 설치 여부를 확인하려면 다음 명령어를 사용합니다.

node -v
npm -v

버전 정보가 출력되면 정상 설치된 것입니다.

cnpm 버전 충돌 해결 방법

cnpm과 npm 간 버전 불일치로 인한 모듈 로드 실패 시, 기존 패키지를 제거하고 일치하는 버전을 재설치합니다.

npm uninstall cnpm
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org

특히 node:util 모듈 관련 오류는 이러한 방식으로 해결됩니다.

Vue CLI 설치 과정

Vue CLI를 전역으로 설치할 때는 다음과 같은 순서로 진행합니다.

npm install -g @vue/cli@4.0.3

오래된 vue-cli는 deprecated되었으므로 @vue/cli를 사용해야 합니다.

CLI 기반 프로젝트 생성

기존 Webpack 템플릿 기반 프로젝트 생성을 위해서는 @vue/cli-init 보조 도구가 필요합니다.

npm install -g @vue/cli-init
vue init webpack my-project

Vue 플러그인 등록

외부 플러그인을 사용할 경우 반드시 Vue.use()로 등록해야 정상 작동합니다.

import MyPlugin from 'my-plugin';
Vue.use(MyPlugin);

라우터 설정 시 경로 및 네이밍 관례

컴포넌트 임포트 시 별칭 @을 사용해 절대 경로로 지정하면 유지보수가 용이합니다.

import HspComponent from '@/components/HspComponent';

라우트 정의 시 name 속성은 해당 컴포넌트 이름과 일치시키는 것이 좋습니다.

{
  path: '/hsp1',
  name: 'HspComponent',
  component: HspComponent
}