Nuxt(Pinia) 게시판 페이징, 검색, RESTful API (Node.js, MySQL) 예제

 

1. 프로젝트 설정

# Nuxt 프로젝트 생성
npx create-nuxt-app my-board

# Pinia 설치
cd my-board
npm install pinia

 

2. Pinia Store 설정 (store/board.js)

import { defineStore } from 'pinia'
import axios from 'axios'

export const useBoardStore = defineStore('board', {
  state: () => ({
    boards: [],
    currentPage: 1,
    pageSize: 10,
    searchKeyword: '',
  }),
  actions: {
    async fetchBoards() {
      const response = await axios.get('/api/boards', {
        params: {
          page: this.currentPage,
          size: this.pageSize,
          keyword: this.searchKeyword,
        },
      })
      this.boards = response.data
    },
    async searchBoards(keyword) {
      this.searchKeyword = keyword
      await this.fetchBoards()
    },
  },
})

 

3. 게시판 목록 컴포넌트 (components/BoardList.vue)

<template>
  <div>
    <input type="text" v-model="searchKeyword" @input="searchBoards" />
    <ul>
      <li v-for="board in boards" :key="board.id">
        {{ board.title }}
      </li>
    </ul>
    <button @click="prevPage">이전</button>
    <button @click="nextPage">다음</button>
  </div>
</template>

<script>
import { useBoardStore } from '@/store/board'

export default {
  setup() {
    const boardStore = useBoardStore()

    const searchBoards = (keyword) => {
      boardStore.searchBoards(keyword)
    }

    const prevPage = () => {
      boardStore.currentPage--
      boardStore.fetchBoards()
    }

    const nextPage = () => {
      boardStore.currentPage++
      boardStore.fetchBoards()
    }

    return {
      boards: boardStore.boards,
      searchKeyword: boardStore.searchKeyword,
      searchBoards,
      prevPage,
      nextPage,
    }
  },
}
</script>

 

4. Node.js 백엔드 (index.js)

const express = require('express')
const mysql = require('mysql2')

const app = express()
const port = 3000

// MySQL 연결 설정
const pool = mysql.createPool({
  // ... MySQL 연결 정보
})

// 게시글 조회 API
app.get('/api/boards', async (req, res) => {
  const { page, size, keyword } = req.query
  const offset = (page - 1) * size

  const [rows] = await pool.execute(
    'SELECT * FROM boards WHERE title LIKE ? LIMIT ?, ?',
    [`%${keyword}%`, offset, size]
  )

  res.json(rows)
})

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

 

5. Nuxt 구성 (nuxt.config.js)

export default {
  // ...
  server: {
    port: 3000, // 백엔드 포트와 동일하게 설정
  },
}

 

설명

• Pinia를 사용하여 게시판 데이터를 관리하고, axios를 이용하여 RESTful API를 호출합니다.
• 페이징 기능을 구현하여 게시글을 페이지별로 나눠 보여줍니다.
• 검색 기능을 구현하여 게시글 제목으로 검색할 수 있도록 합니다.
• Node.js와 MySQL을 사용하여 백엔드 API 서버를 구축하고, 게시글 데이터를 저장하고 조회합니다.
• Nuxt.js의 컴포넌트 기반으로 게시판 목록을 구성하고, Pinia Store와 연동하여 데이터를 표시합니다.

주의: 위 예제는 간단한 게시판 구현을 위한 기본적인 예시이며, 실제 프로젝트에서는 더 많은 기능과 고려 사항이 필요합니다. 예를 들어, 게시글 작성, 수정, 삭제 기능, 사용자 인증, 파일 업로드 등을 추가할 수 있습니다.

참고:

• MySQL 테이블 생성:

  CREATE TABLE boards (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    content TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
  );
  

   
• 에러 처리: 실제 프로젝트에서는 에러 처리를 더욱 강화해야 합니다.
• 보안: 사용자 입력 값에 대한 유효성 검사와 SQL 인젝션 방지를 위한 처리가 필요합니다.
• 성능: 많은 양의 데이터를 처리하는 경우, 페이징, 인덱싱 등을 통해 성능을 최적화해야 합니다.

추가 기능:

• 무한 스크롤: 사용자가 아래로 스크롤하면 자동으로 다음 페이지를 불러오는 기능
• 정렬: 게시글을 다양한 기준으로 정렬하는 기능
• 댓글: 게시글에 댓글을 달 수 있는 기능
• 알림: 새로운 게시글이나 댓글이 작성되었을 때 알림을 받는 기능

이 예제를 바탕으로 다양한 기능을 추가하여 더욱 완성도 높은 게시판을 구축할 수 있습니다.

 

 

 

728x90

---

 

 

Nuxt와 Node.js가 같은 포트(3000)를 사용할 때의 공존 방식

훌륭한 질문입니다! Nuxt와 Node.js를 같은 포트에서 실행하면서 서로 간섭 없이 동작하게 하려면 몇 가지 방법을 활용할 수 있습니다.

1. 프록시 설정 (Proxy Pass):

• 개념: Nginx, Apache 등의 프록시 서버를 통해 특정 요청을 다른 서버로 전달하는 방식입니다.
• 방법:
  • Nginx를 설치하고, Nuxt 서버와 Node.js 서버를 각각 다른 포트에서 실행합니다.
  • Nginx 설정 파일에서, 특정 URL 패턴에 따라 요청을 각 서버로 분배하도록 설정합니다.
  • 예를 들어, /api로 시작하는 요청은 Node.js 서버로, 나머지는 Nuxt 서버로 전달하도록 설정할 수 있습니다.

Nginx

server {
    listen 80;
    server_name yourdomain.com;

    location /api/ {
        proxy_pass http://localhost:3001/;
    }

    location / {
        proxy_pass http://localhost:3000/;
    }
}

 

• 장점:
  • 복잡한 라우팅 설정이 가능하며, 다양한 서버를 통합 관리하기 좋습니다.
  • 보안 기능을 추가할 수 있습니다.
• 단점:
  • 추가적인 설정이 필요합니다.

2. Nuxt 서버 모드:

• 개념: Nuxt를 서버 사이드 렌더링(SSR) 모드로 실행하여 Node.js 서버와 통합하는 방식입니다.
• 방법:
  • Nuxt.config.js 파일에서 mode 옵션을 server로 설정합니다.
  • Nuxt 서버는 Node.js 서버 위에서 실행되며, 동일한 포트를 사용할 수 있습니다.
• 장점:
  • 간단하게 설정할 수 있습니다.
  • SSR의 장점을 활용할 수 있습니다.
• 단점:
  • SSR은 초기 렌더링 시간이 오래 걸릴 수 있습니다.
  • 모든 페이지를 SSR로 렌더링해야 하는 경우 성능 저하가 발생할 수 있습니다.

3. 포트 포워딩:

• 개념: 로컬 네트워크의 특정 포트를 외부에서 접근 가능한 다른 포트로 연결하는 방식입니다.
• 방법:
  • Docker, Kubernetes 등의 컨테이너 오케스트레이션 도구를 사용하여 각 서비스를 다른 포트로 실행하고, 포트 포워딩을 설정합니다.
• 장점:
  • 다양한 환경에서 유연하게 설정할 수 있습니다.
• 단점:
  • 설정이 복잡할 수 있습니다.

결론

어떤 방법을 선택할지는 프로젝트의 규모, 성능 요구사항, 개발 환경 등에 따라 달라집니다.

• 소규모 프로젝트: Nuxt 서버 모드가 간편합니다.
• 대규모 프로젝트 또는 복잡한 라우팅: Nginx 프록시 설정이 적합합니다.
• 클라우드 환경: Docker 또는 Kubernetes를 활용한 포트 포워딩이 유용합니다.

주의사항:

• 동일한 포트에서 두 개 이상의 서버를 실행하면 충돌이 발생할 수 있습니다.
• 각 서버의 설정 파일을 주의깊게 확인하고, 포트 번호가 충돌하지 않도록 설정해야 합니다.
• 프로젝트의 규모와 복잡도에 따라 적절한 방법을 선택해야 합니다.

추가 고려 사항:

• WebSocket: 실시간 통신을 위해 WebSocket을 사용하는 경우, 각 서버에서 별도의 포트를 사용하거나, WebSocket 서버를 별도로 구축해야 합니다.
• HTTPS: 보안을 위해 HTTPS를 사용하는 경우, 각 서버에 SSL 인증서를 발급하고 설정해야 합니다.

결론적으로, Nuxt와 Node.js를 같은 포트에서 실행하기 위해서는 프록시 설정, Nuxt 서버 모드, 포트 포워딩 등 다양한 방법을 활용할 수 있습니다. 각 방법의 장단점을 비교하고, 프로젝트의 특성에 맞는 최적의 방법을 선택하여 안정적인 시스템을 구축해야 합니다.

 

 

2024.12.08 - [Vue.js 를 배워보자] - Node.js, Nuxt.js, MySQL, 게시판 구현, CRUD, REST API, 프론트엔드, 백엔드, 데이터베이스, 프로그래밍, 웹 개발

Node.js, Nuxt.js, MySQL, 게시판 구현, CRUD, REST API, 프론트엔드, 백엔드, 데이터베이스, 프로그래밍, 웹