[프로젝트] Watcha Classic # Main Page Query Parameter

Joah·2022년 7월 3일

React Watcha Classic

프로젝트-Watcha Classic

목록 보기

11/15

동적 라우팅 Query Parameter

이전 글에서 다른 동적 라우팅 Path Parameter를 적용했다.
Query Parameter는 리.터.럴.리 질의문을 통해 데이터를 받아오는 형식이다.

💡 Query Parameter

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용된다.

프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달한다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 된다.

이 과정에서 Query Parameter(혹은, Query String, 쿼리 스트링)를 사용하게 된다. 쿼리 스트링이란 말 그대로 해당 엔드포인트에 대해 질의문(query)를 보내는 요청을 뜻한다.

예를 들어, localhost:8000/products?limit=10&offset=5 라는 주소가 있다고 가정하자. API 뒷 부분에 붙어있는 ? 로 시작하는 텍스트가 바로 쿼리스트링!

?limit=10&offset=5 의 경우,
"limit이 10이면서 offset이 5일 경우의 product 페이지를 보여달라" 는 요청으로 해석된다.

? 기호는 쿼리스트링의 시작을 알린다. url 에서 ? 기호는 유일무이 하다.

limit : 한 페이지에 보여줄 데이터 수
offset : 데이터가 시작하는 위치(index)
parameter=value 로 필요한 파라미터의 값을 작성한다.
파라미터가 여러개일 경우 &를 붙여서 여러개의 파라미터를 넘길 수 있다.

⛳ Query Parameter를 사용하여 백엔트와 통신하기!

import React, { useEffect, useState } from "react";
import MainBox from "./components/MainBox/MainBox";
import "./Main.scss";

const Main = () => {
  const [movies, setMovies] = useState([]);
  const [usa, setUsa] = useState([]);
  const [running, setRunning] = useState([]);

  useEffect(() => {
    fetch("http://10.58.2.194:8000/films?genre=드라마&sort=random&limit=20")
      .then(res => res.json())
      .then(data => {
        setMovies(data);
      });
    fetch("http://10.58.2.194:8000/films?country=미국&sort=random&limit=20")
      .then(res => res.json())
      .then(data => {
        setUsa(data);
      });
    fetch("http://10.58.2.194:8000/films?time=100&sort=random&limit=20")
      .then(res => res.json())
      .then(data => {
        setRunning(data);
      });
  }, []);

  if (movies.length === 0) return;

  return (
    <div className="mainWrapper">
      <MainBox movies={movies.results} theme={MOVIE_TITLE[0]} />
      <MainBox movies={usa.results} theme={MOVIE_TITLE[1]} />
      <MainBox movies={running.results} theme={MOVIE_TITLE[2]} />
    </div>
  );
};

export default Main;

const MOVIE_TITLE = [
  { id: 1, title: "드라마" },
  { id: 2, title: "미국" },
  { id: 3, title: "100분 순삭" },
];

영화 테마 3가지를 지정했다. "드라마, 미국, 100분 순삭"
따라서 테마별로 따로 데이터를 받아와야 한다.

백엔드에서는 filtering 한다고 표현한다.

첫 번째 테마는 드라마 장르,
두 번째 테마는 미국 영화,
세 번째 테마는 러닝타임이 100분 이내인 영화

위의 테마에 해당하는 영화를 filtering 하여 프런트에 보내준다.

🤷 프런트에게는 쉬운 것 but 백에게는 어려울 수 있다는 것!

사실 이 기준을 정하는 것도 오래걸렸다. 프런트 입장에서는 그냥 데이터를 객체에 담아서 주면 되는데 왜 어려워하지..?
라고 생각하지만 백엔드에서는 제한적인 데이터 내에서 특정 기준으로 데이터를 분류 즉, filtering하는 것이 쉽지 않다고 했다.
역시 백과 프런트 서로를 이해할 수 있어야 한다! 프런트에서 쉽다고 백에서도 쉽다는 법은 없다!

🤦‍♀️소통 부재로 에러 경험담

나는 상세 페이지 주소를 /detail/id라고 알고 있었고
백과 상세 페이지 구현하는 다른 프런트 팀원은 /films/id로 알고 있어서 다시 코드를 변경하는 상황이 생겼다.
다시 또 한 번 소통의 중요성을 느끼며!!!

fetch 함수 살펴보기

fetch("http://10.58.2.194:8000/films?genre=드라마&sort=random&limit=20")

fetch("http://10.58.2.194:8000/films?country=미국&sort=random&limit=20")

fetch("http://10.58.2.194:8000/films?time=100&sort=random&limit=20")

드라마
Query Parameter는 ?로 시작된다. 코드를 그대로 해석하면
장르가=드라마이며&새로고침시 sort한다 랜덤으로&한번 보여줄때 20개씩
미국
Query Parameter는 ?로 시작된다. 코드를 그대로 해석하면
국가가=미국이며&새로고침시 sort한다 랜덤으로&한번 보여줄때 20개씩
100분 순삭
Query Parameter는 ?로 시작된다. 코드를 그대로 해석하면
영화시간이=100이내이며&새로고침시 sort한다 랜덤으로&한번 보여줄때 20개씩