vue 2.0

Vue.component('컴포넌트 이름(?) ', 
			{ template: `html 구조를 정의 <div> ~~~ </div>`,
			data(){ return { message: ' '},
			methods: { 함수들....},
			mounted() { ~~~ },
			methods: { 함수들... }
			})

 

다른 부서에 지원을 나와있는 상황에 vue3의 composition API 만 약간 알고 있는데,  vue2를 몰라서 chatgpt한테 분석해줘라고 했다. 근데 분석하기 전에 methods가 2개 있는거는 누가봐도 이상하지 않나??? ㅎㅎㅎ 그럴수도 있지

 

🧩 한 줄씩 분석

1️⃣

 

Vue.component('컴포넌트 이름(?)',

• ✅ 설명:
  Vue.component는 전역 컴포넌트를 등록할 때 사용하는 Vue 2 방식입니다.
  첫 번째 인자는 컴포넌트 이름(문자열)입니다.
  예를 들어 'my-component'처럼 **케밥 케이스(kebab-case)**를 사용하는 것이 일반적입니다.
• ⚠️ 이상한 점:
  '컴포넌트 이름(?)'은 유효한 이름이 아닙니다.
  괄호 ()나 물음표 ? 같은 특수문자는 피하고,
  보통 'my-component' 혹은 'app-header'처럼 작성합니다.

---

2️⃣

 

{ template: `html 구조를 정의 <div> ~~~ </div>`,

• ✅ 설명:
  template은 컴포넌트의 HTML 구조를 문자열로 정의하는 곳입니다.
  백틱(`)을 사용하면 여러 줄 HTML도 넣을 수 있습니다.
• ⚠️ 이상한 점:
  실제로는 "html 구조를 정의" 같은 문장은 코드가 아니므로
  여기에 실제 HTML 태그가 들어가야 합니다.
   

  template: ` <div> <p>{{ message }}</p> </div> `
• 예시 👇

---

3️⃣

 

data(){ return { message: ' '}},

• ✅ 설명:
  data는 함수 형태로 작성해야 하며, 객체를 반환합니다.
  위 코드는 구조상 맞습니다.
• ⚠️ 주의:
  data() { return { message: '' }} ← 마지막에 쉼표 ,가 있으니,
  다음 속성과 구분되므로 괜찮습니다.

---

4️⃣

 

methods: { 함수들....},

• ✅ 설명:
  methods 안에는 컴포넌트에서 사용할 함수들을 정의합니다.
   

  methods: { sayHello() { console.log(this.message); } },
• 예시 👇
• ⚠️ 이상한 점:
  methods는 객체(object) 형태여야 하며, 실제 함수 정의가 들어가야 합니다.
  함수들....은 문법적으로 틀립니다.

---

5️⃣

 

mounted() { ~~~ },

• ✅ 설명:
  mounted는 Vue 라이프사이클 훅 중 하나입니다.
  컴포넌트가 DOM에 마운트된 후 실행됩니다.
   

  mounted() { console.log('컴포넌트가 마운트되었습니다'); },
• 예시 👇
• ⚠️ 주의:
  ~~~는 실제 코드로 대체되어야 하고,
  마지막에 쉼표가 있으므로 다음 속성이 올 수 있습니다.

---

6️⃣

 

methods: { 함수들... }

• ❌ 문제!
  methods가 두 번 정의되었습니다.
  자바스크립트 객체 리터럴에서 동일한 키를 중복 선언하면 마지막 것이 덮어씁니다.
• 🔧 수정 방법:
  두 개의 methods를 합쳐야 합니다.

---

✅ 올바르게 수정된 예시

 

Vue.component('my-component', {
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="sayHello">클릭</button>
    </div>
  `,
  data() {
    return {
      message: '안녕하세요!'
    };
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  },
  mounted() {
    console.log('컴포넌트가 마운트되었습니다');
  }
});