Nuxt.js와 Axios로 데이터 그리드 구현 및 클릭 시 input에 바인딩하기

nuxt에서 axios로 데이터 셋을 그리드로 로딩한 후 그리드를 클릭할때마다 input text v-bind로 자동으로 바인딩하는 예

 

---

 

안녕하세요! 오늘은 Nuxt.js에서 Axios를 활용해 외부 데이터를 가져와 그리드로 표시하고, 사용자가 그리드 항목을 클릭할 때마다 input 텍스트 필드에 해당 데이터를 자동으로 바인딩하는 방법을 알아보겠습니다. 이 예제는 실무에서 자주 사용되는 데이터 목록 관리나 편집 기능을 구현하는 데 유용합니다.

1. 프로젝트 설정 및 Axios 설치

먼저 Nuxt 프로젝트가 준비되어 있어야 합니다. 아직 프로젝트가 없다면 아래 명령어로 생성하세요:

bash

 

npx create-nuxt-app my-project
cd my-project
npm install

그 다음, Axios를 설치합니다. Nuxt에서 Axios를 쉽게 사용하기 위해 @nuxtjs/axios 모듈을 추가합니다.

bash

 

npm install @nuxtjs/axios

설치 후 nuxt.config.js 파일에 Axios 모듈을 등록합니다:

javascript

 

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'https://jsonplaceholder.typicode.com', // 예제 API URL
  },
}

 

728x90

 

2. 데이터 가져오기 및 그리드 표시

이제 페이지에서 Axios로 데이터를 가져와 그리드로 표시해 보겠습니다. pages/index.vue 파일을 아래와 같이 작성합니다:

 

<template>
  <div>
    <h1>데이터 그리드와 입력 바인딩 예제</h1>
    <!-- 데이터 그리드 -->
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>제목</th>
          <th>내용</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in items"
          :key="item.id"
          @click="selectItem(item)"
          style="cursor: pointer;"
        >
          <td>{{ item.id }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.body }}</td>
        </tr>
      </tbody>
    </table>

    <!-- 선택된 데이터 입력 필드 -->
    <div style="margin-top: 20px;">
      <h3>선택된 데이터 편집</h3>
      <label>ID: </label>
      <input type="text" v-model="selectedItem.id" disabled /><br />
      <label>제목: </label>
      <input type="text" v-model="selectedItem.title" /><br />
      <label>내용: </label>
      <input type="text" v-model="selectedItem.body" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // API에서 가져온 데이터 배열
      selectedItem: {
        id: '',
        title: '',
        body: '',
      }, // 선택된 항목 데이터
    }
  },
  async fetch() {
    // Axios로 데이터 가져오기
    try {
      const response = await this.$axios.get('/posts') // JSONPlaceholder API 사용
      this.items = response.data.slice(0, 10) // 예제용으로 10개만 가져옴
    } catch (error) {
      console.error('데이터 로딩 실패:', error)
    }
  },
  methods: {
    selectItem(item) {
      // 클릭한 항목을 selectedItem에 복사
      this.selectedItem = { ...item }
    },
  },
}
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th,
td {
  padding: 10px;
  text-align: left;
}
tr:hover {
  background-color: #f5f5f5;
}
input {
  margin: 5px 0;
  padding: 5px;
  width: 300px;
}
</style>

3. 코드 설명

템플릿

• <table>: 데이터를 그리드 형태로 표시합니다. v-for를 사용해 items 배열을 반복하며 행을 생성합니다.
• @click="selectItem(item)": 각 행을 클릭하면 selectItem 메서드가 호출되고, 클릭한 데이터가 selectedItem에 저장됩니다.
• <input>: v-model을 사용해 selectedItem의 속성(id, title, body)을 양방향 바인딩합니다.

스크립트

• data(): items는 API에서 가져온 데이터 배열을 저장하고, selectedItem은 선택된 항목의 데이터를 저장합니다.
• fetch(): Nuxt의 fetch 훅을 사용해 페이지 로드 시 데이터를 가져옵니다. 여기서는 JSONPlaceholder API에서 가짜 데이터를 가져옵니다.
• selectItem(item): 클릭한 항목을 selectedItem에 복사합니다. ... (스프레드 연산자)를 사용해 객체를 깊은 복사합니다.

스타일

• 간단한 CSS로 테이블과 입력 필드를 보기 좋게 꾸몄습니다. :hover를 사용해 행에 마우스를 올리면 배경색이 변하도록 했습니다.

 

 

4. 실행 및 테스트

프로젝트를 실행하려면 터미널에서 다음 명령어를 입력하세요:

 

npm run dev

브라우저에서 http://localhost:3000에 접속하면 데이터가 그리드로 표시되고, 각 행을 클릭할 때마다 아래 입력 필드에 해당 데이터가 자동으로 바인딩되는 것을 확인할 수 있습니다.

5. 추가 개선 아이디어

• 데이터 수정 후 저장: selectedItem을 수정한 후 버튼을 추가해 API로 업데이트 요청을 보낼 수 있습니다.
• 필터링 기능: 검색어를 입력하면 items 배열을 필터링해 표시할 수 있습니다.
• 로딩 상태: 데이터 로딩 중일 때 스피너를 추가해 사용자 경험을 개선할 수 있습니다.

---