WebSite(Class101) Clone Project - Part4.React 체험기 + 후기

안녕하세요. 이 포스트는 시리즈로 구성되어있습니다. Django의 내용은 거의 포함 될 것 같지 않아 카테고리를 TIL로 작성하였습니다.

클론 프로젝트 후기의 마지막으로 갑작스런(?) React 체험기와 프로젝트 후기를 작성해보겠습니다.

1. React로 Django로 만들었던 API 구현 해보기

Part3에서 소개한 elasticsearch의 API 생성이 마무리 되었지만, Front End 팀원 분들께서 검색 API의 구현이 어려울 것 같았습니다. 그래서 React를 맛 보는 겸 직접 검색 API에 대한 구성을 해보기로 했습니다.

참고로 javascript는 제대로는 아니지만 단순한 정도의 구현이 가능한 정도이고, React는 전혀 공부 해보지 못 했습니다.

검색 화면에 대한 간략한 소개 입니다. 운동이라는 단어를 입력하면 강의 제목 중 운동이 들어간 강의를 나타내줍니다. 돋보기의 검색 버튼을 누르면 해당 강의 목록을 나열해줍니다. 또한, 검색목록에 뜬 강의를 직접 클릭하여 검색할 수도 있습니다.
제가 작성한 코드를 우선 보여드리고 간단히 소개하겠습니다.

import React, { Component,useState} from "react";
import { Link } from "react-router-dom";
import { Icon, Colors } from "@class101/ui";
import "./Nav.scss";
import { SEARCH_RESULT_API_URL } from "../../Config"

class Nav extends Component{
  state = {
    query: "",
    products: [],
    isModalOpen: false,
    isSeachActive : false
  };

  handleOnInputChange = (event) => {
    const query = event.target.value;
    this.setState({ query, message: '' } );

    fetch(`${SEARCH_RESULT_API_URL}?search=${query}`)
      .then(res => res.json())
      .then((res) => {
        this.setState({ products: res.data}, () => console.log(res));
      });
  };

  isSetSearchState = (event) => {
    this.setState({isSeachActive:!this.state.isSeachActive});
  }

  
  render() {
    const { query, products, isSeachActive } = this.state;

    return (
            <div className="searchController" >
              <input
                type="text"
                size="sm"
                placeholder="배우고 싶은 것이 있나요?"
                //className='mainSearch'
                className={`mainSearch 
                  ${isSeachActive ? "searchActive" : "searchdeactivate"}`}
                onFocus={this.isSetSearchState} 
                onChange={this.handleOnInputChange}
              />
              <Icon.Search fillColor={Colors.gray000} className="searchIcon"/>
              <ul className="filterKeywordWrapper">
                {products.map(({ product_id, product_name }, idx) => {
                  return (
                    <li key={idx} className="filterKeyword">
                      <Link
                        className="filterLink"
                        to={`/detail/${product_id}`}
                      >
                        {product_name}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </div>
    );
  }
}

export default Nav;

위 코드와 같이 클래스형으로 구성하였습니다.(함수형으로 구성하려 했지만, reference가 클래스형이어서 우선은 클래스형으로 작성했습니다.) 

함수 중 handleOnInputChange가 있는데 이 함수가 input 단에서의 입력변화 시 함수가 수행됩니다. 이 내용은 query라는 변수에 담기고 검색 API를 호출합니다. fetch에서 search=${query} 와 같이 말이죠.

그리고 이는 map 함수를 통해 강의 이름을 쭉 뿌리게 됩니다. Link는 해당 강의의 상세 page로 갈 수 있게 걸어 놓은 것입니다. 결국 검색어를 입력하면 강의 이름이 뜨는 형태까지만 완성시켰습니다. 또한 검색어가 뜬 상태에서 단어를 모두 지우면 map 함수를 찾을 수 없다는 에러가 나옵니다. 아마도 비동기 처리가 안 되었기 때문이라고 생각합니다.

이 코드 내용 역시 글로 설명하니 굉장히 함축적으로 다가옵니다. 하지만 React 초기 설정 부터 굉장히 많은 시행착오를 겪었고 결국은 pull requests를 하지 못 하게 되었습니다. 그렇지만 React의 구조나 하루만에 어떤 형태로 수행되는지를 아주 대략적으로라도 배울 수 있었습니다.

 

2. 프로젝트 후기

아쉬울 수 없는 프로젝트는 없다고 생각합니다. 개인적으로는 1차 때 했던 프로젝트(상품목록 및 장바구니, 주문하기)와 전혀 다른 User App과 elasticsearch를 활용한 search App을 맡았는데 새로운 것을 해보아서 굉장히 큰 자극과 동기를 주었던 것에 만족하지만, 기존에 했던 내용을 복습해보지 못한 것이 아쉽기도 합니다. 물론 이 역시 Refactoring 하면서 학습할 수 있지만요.

프론트엔드 개발자 셋, 백엔드 개발자 셋으로 구성되었고 다들 잘 하시는 분이라 그리고 1차 프로젝트 때 시행착오를 겪었기 때문에 공장처럼 개발할 것이라는 예상도 했지만 빗나가게 되었습니다. 개발은 늘 새로운 마음으로 그리고 겸손하게 해야겠다라는 생각을 합니다.

또한, React를 해보면서 많은 것을 배울 수 있었습니다. 꼭 프론트 엔지니어만 공부해야 하는게 아니라 백엔드 엔지니어도 폭 넓고 깊이 있는 개발자가 되기 위해서 배워야 한다고 생각했습니다.

마지막으로는 결국 팀이 필요하다는 생각이 들었습니다. 리액트를 혼자 구현하려 해보았을 때, 뭘 해야할지 방향조차 잡기 힘들었습니다. 결국 혼자서 모든 것을 할 수 없기 때문에 팀이 꼭 필요하다는 생각을 했습니다.

마찬가지로 백엔드 개발도 혼자서 모든 것을 구현할 수 없기 때문에 함께 해야 한다라는 생각을 했습니다.

이러한 생각을 한 문장으로 담아내 아프리카 속담 하나를 소개하며 포스트를 마치고자 합니다.

빨리 가려면 혼자 가고 멀리 가려면 함께 가라 (If you want to go fast, go alone. If you want to go far, go together)