Day 2: Vue 컴포넌트 기초 – 주문 폼 만들기

오늘은 Vue의 가장 중요한 개념 중 하나인 컴포넌트를 배우고, 첫 주문 폼을 만들어 보겠습니다. Vue 컴포넌트는 재사용 가능한 작은 UI 조각으로, 앱의 다양한 부분에서 사용할 수 있습니다. 주문 폼 컴포넌트를 만들어 고객이 제품을 선택하고 주문을 할 수 있는 화면을 구성해 봅시다.

1. 컴포넌트 개념 이해하기

컴포넌트는 Vue 애플리케이션의 작은 단위로, 특정한 UI와 로직을 독립적으로 관리할 수 있게 합니다. Vue 컴포넌트는 보통 .vue 파일로 저장되며, 이 파일은 HTML, JavaScript, CSS로 이루어져 있습니다.

2. 주문 폼 컴포넌트 생성하기

1. src 폴더 안에 새로운 폴더를 만들어 컴포넌트를 관리할 수 있습니다. components 폴더를 생성해 주세요.

   mkdir src/components

2. components 폴더 안에 OrderForm.vue 파일을 만듭니다.

   touch src/components/OrderForm.vue

   
   
    
3. 이제 OrderForm.vue 파일을 열고, 아래의 기본 코드를 입력하세요.
   • Template: 사용자 입력을 받기 위한 폼을 설정했습니다. 이름, 상품명, 수량을 입력받으며, 제출 시 submitOrder 메서드가 호출됩니다.
   • Script: 컴포넌트의 상태(data)와 제출 버튼을 눌렀을 때 상태를 변경하는 submitOrder 메서드를 정의했습니다.
   • Style: 기본적인 스타일을 추가해 폼을 깔끔하게 보이도록 했습니다

<template>
  <div class="order-form">
    <h2>주문하기</h2>
    <form @submit.prevent="submitOrder">
      <div>
        <label for="name">이름:</label>
        <input type="text" v-model="name" id="name" required />
      </div>
      <div>
        <label for="item">상품명:</label>
        <input type="text" v-model="item" id="item" required />
      </div>
      <div>
        <label for="quantity">수량:</label>
        <input type="number" v-model="quantity" id="quantity" min="1" required />
      </div>
      <button type="submit">주문 제출</button>
    </form>
    <div v-if="submitted">
      <h3>주문이 제출되었습니다!</h3>
      <p>이름: {{ name }}</p>
      <p>상품명: {{ item }}</p>
      <p>수량: {{ quantity }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderForm",
  data() {
    return {
      name: "",
      item: "",
      quantity: 1,
      submitted: false,
    };
  },
  methods: {
    submitOrder() {
      this.submitted = true;
    },
  },
};
</script>

<style scoped>
.order-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.order-form div {
  margin-bottom: 10px;
}
</style>

3. App.vue에 컴포넌트 추가하기

1. src/App.vue 파일을 열고, OrderForm 컴포넌트를 불러와 사용할 수 있도록 설정합니다.
2. 이렇게 하면 App.vue의 화면에 우리가 만든 주문 폼이 표시됩니다.

<template>
  <div id="app">
    <h1>웹 주문 시스템</h1>
    <OrderForm />
  </div>
</template>

<script>
import OrderForm from "@/components/OrderFrom.vue";

export default {
  name: "App",
  components: {
    OrderForm,
  },
};
</script>

4. 컴포넌트 테스트하기

프로젝트를 실행 중이었다면, 브라우저에서 자동으로 업데이트가 반영됩니다. http://localhost:5173에서 새로고침해 폼이 표시되는지 확인하세요.

• 이름, 상품명, 수량을 입력하고 주문 제출 버튼을 누르면 화면에 입력된 정보가 아래에 표시됩니다.
• 이 부분은 데이터를 실제 서버로 보내지 않지만, 내일은 FastAPI와 연동하여 주문 데이터를 서버로 전송하는 작업을 진행할 것입니다.

5. 오늘의 마무리

오늘은 Vue 컴포넌트를 통해 주문 폼을 만드는 방법을 배웠습니다. 이제 프론트엔드에서 고객의 주문 데이터를 관리할 수 있는 기초가 마련되었습니다. 다음 날에는 이 주문 데이터를 백엔드 서버로 전송하고 처리하는 작업을 시작하겠습니다.

잘 안되는 부분이나 오류가 있다면 메시지를 확인하여 문제를 해결해 보세요!