||Project1|| #6 Express 웹서버 만들기 (feat. Pagination)

윤코코·2021년 12월 21일

|| Projects || of Parfaite73

목록 보기

6/12

자체 json 파일 아닌 서버에서 데이터를 받아오는 것이 하고 싶었다.
mock api를 만들수도 있지만 Express로 금방 만들 수 있다길래 시도 해보았다.

📤 Express 서버 만들기

먼저 front와 server 디렉토리를 따로 만들어주었다.

[server의 App.js]

실제 서버를 만드는 코드는 정말 간결했다.
하지만 새로운 개념이 여러개 있어서 이걸 이해한 후에 적용하느라 시간이 조금 걸렸다.

server 코드의 변화를 감지해 서버를 재실행 해주는 nodemon

서로 다른 Origin에서 자원(Resource)을 공유할 수 있도록 하기 위한 정책인 CORS

헤더에 요청정보를 넣어 전달하는 get과 본문에 요청정보를 넣어 전달하는 post

const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 3303;
const data = require("./database.json");

app.use(cors()); //모든 origin에 적용

app.listen(PORT, () => {
  console.log(`Server is running... ${PORT}`);
});

app.get("/payData", (req, res) => {
  const payData = data.payData;
  res.send(payData);
  console.log(`GET! ${req.path}`);
});

server의 database.json은 구글 스프레드시트로 만들어서
Mr. Data Converter를 통해 json 형식으로 바꿔서 복붙했다.

[front의 fetchData.tsx]

front에서 데이터를 받아오는 것도 코드는 간단했다.
다만 async...await, try...catch에 대해 어렴풋이만 알고 있던것을 다시 짚어보았다.

import axios from "axios";

const fetchData = async () => {
  try {
    const response = await axios.get(`http://localhost:3303/payData`);
    const payData = response.data;
    return payData;
  } catch (error) {
    console.log("error!", error);
    return error;
  }
};

export default fetchData;

JAVASCRIPT.INFO의 [async와 await]
이 문서가 async...await에 대해서 Promise와 비교까지 정말 세세하게 잘 설명을 해준다. 핵심 부분을 발췌해보자면 이렇다.

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다. 굉장히 간단하죠? 그런데 async가 제공하는 기능은 이뿐만이 아닙니다. 또 다른 키워드 await는 async 함수 안에서만 동작합니다. await는 아주 멋진 녀석이죠.

프라미스가 정상적으로 이행되면 await promise는 프라미스 객체의 result에 저장된 값을 반환합니다. 반면 프라미스가 거부되면 마치 throw문을 작성한 것처럼 에러가 던져집니다. (중략) await가 던진 에러는 throw가 던진 에러를 잡을 때처럼 try..catch를 사용해 잡을 수 있습니다.

📖 Pagination(Paging) 성공과 철회

원래는 데이터를 가져올때 Pagination을 통해
무한스크롤처럼 끝에 닿으면 데이터를 더 받아오는 구조를 생각했었다.

구현까지 했었지만 예상치 못한 문제에 맞닥뜨렸다.
검색필터 때문이었다.

Pagination을 해서 데이터를 조금씩 받아와 전체리스트에 붙여넣는 방식으로 하니, 아직 리스트 끝까지 scroll down이 안되어 있는 시점에는 리스트가 일부만 불러와진 상태라서, 검색필터를 적용했을때 모든 데이터에 대한 검색결과를 얻지 못하는 것이었다.

이 문제는
1. 검색필터를 적용하는 시점에
2. 검색조건과 함께 서버에 요청을 보내서
3. 애초에 조건 필터링이 된 데이터를 받아오고
4. 그걸 slice한 Virtual List를 만들어야
할 것 같은데, 지금 당장은 서버를 만드는데 시간을 많이 쏟고 싶지 않았다.
그래서 다시 Pagination / InfiniteScroll없이, Virtual List만 구현하는 것으로 돌아갔다.

👉 ResultList.tsx (Pagination & InfiniteScroll 버전)
👉 server/App.js (Pagination 주석처리 되어있음)