👨‍💻 사건

API를 설계할때는 데이터를 효율적으로 받아올수있도록 하는것이라고 알고있다.
클라이언트측에 방대한 데이터를 보내게되면 효율성이 떨어질수있다고 판단하였다.
그래서 페이징기능을 추가하여 특정 개수의 데이터만 받아오기 위해 api/data.js 파일을 일부 수정하기로 했다.

✅ 해결

한 페이지당 20개의 선수목록을 받아오도록 수정하였다.

import mysql from 'mysql'

export default function handler(req, res) {
  const connection = mysql.createConnection({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME,
  })

  connection.connect((err) => {
    if (err) {
      console.error(err)
      res.status(500).json({ error: 'Database connection failed' })
      return
    }
	// 요청 받아온 페이지가 존재하면 그페이지를 사용하고, 아니라면 초기 값으로 1을 설정한다.
    const page = req.query.page ? Number(req.query.page) : 1
    // 최대로 20명의 선수를 받아온다.
    const limit = 20
    // OFFSET 을 통하여, 원하는 페이지의 선수를 받아올수있도록 작성하였다.
    let offset = (page - 1) * limit
    if (page === 0) {
      offset = 20
    }

    const query = `SELECT * FROM fm_table LIMIT ${limit} OFFSET ${offset}`
    connection.query(query, (err, result) => {
      if (err) {
        console.error(err)
        res.status(500).json({ error: 'Database query failed' })
        return
      }

      res.status(200).json(result)
    })
  })
}

💭 개선

• 필터를 어떻게 적용하는것이 효율적인지를 생각후, api 의 인스턴스를 분리해서 적재적소에 적용하도록 해봐야겠다.
• 이를 바탕으로, 한번 원하는 데이터를 페이지네이션을 통해 받아오는지 확인해볼필요가 있다.