2. 내가 맡은 부분

프로젝트에서 두가지 MainPoint는 메인페이지랑 크리에이터센터를 만드는 것이였다.

1. Frontend workflow

2. 내가 한 일

오픈예정 페이지에서 map을 사용하여 데이터를 뿌려주고 필터와 정렬 기능을 구현

1. component로 인한 코드 간결화

1차 프로젝트에서도 component를 사용하였지만 2차 프로젝트는 좀 더 논리적으로 component를 사용하였다. 부모js파일에서는 단지 자식js와 연결하는 props 위주의 코드를 작성하였고 내용이 많거나 부피가 크면 component로 빼서 props로 연결하였다. 그래서 좀더 부모js파일이 직관적이고 간결해졌다. state와 props가 react에서 뿌리가 되는 것을 알고 많이 공부함에도 불구하고 자유롭게 사용하는것이 익숙하지 않아 공부하면서 프로젝트를 진행하였다.

2. filter함수를 사용하여 중복 선택, 정렬기능 구현

1차 때는 백딴에서 데이터를 보내주면 sort함수를 사용하여 프론트딴에서 정렬기능을 구현하였는데 이번 프로젝트에서는 query를 이용하여 fetch 함수를 사용하였다.

1. Blocking

페이지네이션과 동일한 개념이라고 배워 페이지네이션 세션을 몇번 반복하였으나 query를 사용한다는 공통점 외엔 같은점을 발견하지 못하여 처음에는 무엇부터 시작해야할지 많이 갈팡질팡 한 것 같다.

2. 해결 과정

일단은 처음부터 동작이 작동하는 플로우로 시작하기로 했다.
버튼이나 클릭을 하였을 경우 event가 발생하는 것을 시작으로 클릭을 받을 함수를 구현하였다. 그리고 정렬을 하였을때 선택한 정렬을 기준으로 업데이트가 되는 ComponentDidUpdate를 사용하였다.

componentDidUpdate(prevProps, prevState) {}

  selectFilter = (value, type) => {
    console.log("222222222222222222", value, type);
    const newArr = [...this.state.selectedFilter];
    newArr[type === "category" ? 0 : 1] = value;

    const query = this.makeQuery(newArr);

    this.setState({ selectedFilter: newArr });
    // console.log(`http://10.58.7.148:8000/lecture${query}`);
    fetch(`http://54.180.24.190:8000/lecture${query}`)
      .then(res => res.json())
      .then(res => this.setState({ classList: res }));
  };

  makeQuery = arr => {
    let query = "?";
    if (arr[0]) query += `sub_category=${arr[0]}`;
    if (arr[1]) query += `&sort=${arr[1]}`;
    return query;
  };

한단계 한단계 밣아 올라가보니 생각보다는 어렵진 않았다. 필터도 두개가 있어 하나의 필터를 정하면 다른 하나의 필터도 첫번째 필터를 적용받게끔 하려고 query를 사용하였다. query의 사용이 처음이라 생소하였으나 이번을 시작으로 많이 사용하면 조그더 간결하고 자연스럽게 사용할 수 있겠다는 느낌(?)이 들었다.