Nuxt에서 Pinia를 활용한 페이징된 그리드 데이터 바인딩

Nuxt.js는 Vue.js 기반의 서버 사이드 렌더링(SSR) 프레임워크로, 풍부한 사용자 경험을 제공하는 웹 애플리케이션 개발에 매우 유용합니다. 특히, 대량의 데이터를 효율적으로 관리하고 사용자에게 제공하기 위해 페이징 기능은 필수적입니다. 이번 글에서는 Nuxt.js에서 Pinia를 활용하여 페이징된 그리드 데이터를 바인딩하는 방법에 대해 자세히 알아보고, 실제 구현 예시를 통해 이해를 돕겠습니다.

왜 Pinia를 사용해야 할까요?

Pinia는 Vue.js용 상태 관리 라이브러리로, Vuex의 단점을 보완하고 더욱 간결하고 직관적인 API를 제공합니다. Nuxt.js 3에서는 Pinia가 기본 상태 관리 라이브러리로 채택되어, Vuex를 대체하고 있습니다. Pinia를 사용하면 다음과 같은 장점이 있습니다.

• 간결한 API: Vue Composition API 기반으로 개발되어 코드가 더욱 간결하고 직관적입니다.
• 타입 안전성: TypeScript와의 호환성이 뛰어나 안전한 개발이 가능합니다.
• 모듈화: 각 모듈별로 상태를 관리할 수 있어 코드 관리가 용이합니다.

Nuxt에서 Pinia 설치 및 설정

npm install pinia

 

nuxt.config.js에 다음과 같이 Pinia를 등록합니다.

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt'
  ]
})

Pinia를 이용한 페이징된 그리드 데이터 관리

1. Pinia Store 생성:

   import { defineStore } from 'pinia'
   
   export const useUserListStore = defineStore('userList', () => {
     const users = ref([])
     const total = ref(0)
     const loading = ref(false)
     const currentPage = ref(1)
     const pageSize = ref(10)
   
     // 데이터를 가져오는 함수
     const fetchUsers = async () => {
       loading.value = true
       const response = await $fetch('/api/users', {
         query: {
           page: currentPage.value,
           size: pageSize.value
         }
       })
       users.value = response.data
       total.value = response.total
       loading.value = false
     }
   
     return { users, total, loading, currentPage, pageSize, fetchUsers }
   })
   

    
2. 컴포넌트에서 Store 사용:

   <template>
     <div>
       <button @click="fetchUsers">Load More</button>
       <ul>
         <li v-for="user in users" :key="user.id">
           {{ user.name }}
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   import { useUserListStore } from '@/stores/userList'
   
   export default {
     setup() {
       const userListStore = useUserListStore()
       userListStore.fetchUsers()
       return { userListStore }
     }
   }
   </script>
   

3. API 서버 구현: Node.js와 Express를 사용하여 간단한 API 서버를 구현할 수 있습니다.
    

    

    

    

    

728x90

728x90

1. 환경 설정 및 의존성 설치

먼저, Node.js와 npm(또는 yarn)을 설치하고, Express와 오라클 데이터베이스 드라이버를 설치합니다

npm install express oracledb

 

2. 오라클 데이터베이스 연결 설정

const oracledb = require('oracledb');
const config = {
  user: 'your_username',
  password: 'your_password',
  connectString: 'your_connect_string'
};

// 데이터베이스 연결
oracledb.getConnection(config, (err, connection) => {
  if (err) {
    console.error(err);
    return;
  }
  // ... (이후 쿼리 실행 부분)
  connection.release();
});

 

3. Express API 작성 및 오라클 쿼리 실행

const express = require('express');
const oracledb = require('oracledb');
// ... (위의 설정 부분)

const app = express();
const port = 3000;

app.get('/api/users', async (req, res) => {
  try {
    const connection = await oracledb.getConnection(config);

    const page = req.query.page || 1;
    const size = req.query.size || 10;
    const offset = (page - 1) * size;

    const result = await connection.execute(`
      SELECT JSON_ARRAYAGG(JSON_OBJECT(
        'id' VALUE u.id,
        'name' VALUE u.name,
        'email' VALUE u.email
      )) AS users,
      COUNT(*) OVER() AS total_count
      FROM users u
      ORDER BY u.id
      OFFSET :offset ROWS
      FETCH NEXT :size ROWS ONLY
    `, [offset, size]);

    const { rows } = result;
    const [{ users: data, total_count: total }] = rows;

    res.json({ data, total });

  } catch (err) {
    console.error(err);
    res.status(500).json({ error: 'Database error' });
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

 

코드 설명

• JSON_OBJECT: 각 행의 데이터를 JSON 객체로 변환합니다.
• JSON_ARRAYAGG: 변환된 JSON 객체들을 배열로 모읍니다.
• COUNT(*) OVER(): 전체 행의 수를 계산합니다.
• OFFSET, FETCH NEXT: 페이징 처리를 위한 절차입니다.
• async/await: 비동기 처리를 간결하게 표현합니다.

추가 고려 사항

• 무한 스크롤: 사용자가 아래로 스크롤하면 자동으로 다음 페이지를 로딩하는 무한 스크롤 기능을 구현할 수 있습니다.
• 검색 기능: 검색 조건을 입력하여 데이터를 필터링하는 기능을 추가할 수 있습니다.
• 정렬 기능: 데이터를 특정 필드 기준으로 정렬하는 기능을 추가할 수 있습니다.
• 데이터 캐싱: 자주 사용되는 데이터를 브라우저 캐시에 저장하여 성능을 향상시킬 수 있습니다.
• 에러 처리: API 요청 실패 시 적절한 에러 메시지를 표시하도록 구현해야 합니다.

결론

Nuxt.js와 Pinia를 활용하여 페이징된 그리드 데이터를 효율적으로 관리하는 방법에 대해 알아보았습니다. Pinia를 사용하면 Vue 상태 관리를 더욱 간편하게 할 수 있으며, Nuxt.js의 서버 사이드 렌더링 기능과 결합하여 빠르고 안정적인 웹 애플리케이션을 개발할 수 있습니다.

핵심:

• Pinia를 활용하여 Vue.js 상태 관리를 간편하게 구현합니다.
• 페이징 기능을 통해 대량의 데이터를 효율적으로 관리합니다.
• Nuxt.js의 서버 사이드 렌더링 기능을 활용하여 빠른 초기 로딩과 SEO를 구현합니다.