[KakaoVillains] 주석처리 되어버린 아쉬운 코드

주석처리 되어버린 나의 결과물들 ㅠㅠㅠ
백엔드에서 보내준 데이터들을 모두 보여주지 못해 너무 아쉽다.
2차 플젝 끝나고 다시 만나...!

카테고리 page

카테고리가 캐릭터와 서브젝트로 나뉘는데 서브젝트에 필터가 하나 더 추가되고 중카테고리가 생기는 구조였다.
동일한 컴포넌트의 라우터 경로를 다르게 해서 location의 pathname에 따라 조건부 랜더링을 걸어 주었다.

결론은 undefined로 뚜들겨 맞으며 subject 페이지는 포기해야 했다.

import React from 'react';
import { withRouter } from 'react-router';
import SubNav from '../../../Components/SubNav';
import Option from './Option/Option';
import Products from './Products/Products';
// import SubCategory from './SubCategory/SubCategory';
import Filter from './Filter/Filter';
import Footer from '../../../Components/Footer';
import './character.scss';

const IP = '54.180.24.190';
// const PATHNAME = `window.location.pathname === '/category/character'`;
const BROWSER_URL = '/category/character';
// window.location.pathname === '/category/character'
//   ? `/category/character`
//   : `/category/subject`;
const API_URL = `http://${IP}:8000/product${BROWSER_URL}`;
const SORTDATA = {
  신상품순: 'createDatetime,desc',
  '낮은 가격순': 'salePrice,asc',
  '높은 가격순': 'salePrice,desc',
};

const CHARACTER = {
  아몬드: 1,
  자이제: 2,
  준식: 3,
  죠르디: 4,
  칸: 5,
  타이거: 6,
  토끼: 7,
  팬다어덜트: 8,
  프라다: 9,
  피치피치: 10,
  고냥이: 11,
  꾀돌이: 12,
  단무지: 13,
  두부: 14,
};

// const SUBJECT = {
//   '테마 기획전': 1,
//   토이: 2,
//   리빙: 3,
//   잡화: 4,
//   문구: 5,
//   의류: 6,
//   파자마: 7,
//   '여행/레저': 8,
//   생활테크: 9,
//   '폰 액세서리': 10,
//   식품: 11,
// };

class Character extends React.Component {
  constructor() {
    super();
    this.state = {
      characterData: [],
      category: '전체',
      // subCategory: [],
    };
  }

  componentDidMount() {
    const query = 'sort=createDatetime,desc';
    this.dataRender(query);
  }

  componentDidUpdate(prevProps, _) {
    if (prevProps.location !== this.props.location) {
      this.dataRender(this.props.location.search.slice(1));
    }
  }

  dataRender(query) {
    fetch(`${API_URL}?${query}`)
      .then(res => res.json())
      .then(res =>
        this.setState({
          characterData: res.result.product,
        })
      );
    // !res.result.sub_categories
    //   ? this.setState({
    //       characterData: res.result.product,
    //     })
    //   : this.setState({
    //       characterData: res.result.product,
    //       subCategory: res.result.sub_categories,
    //     })
  }

  changeCategory = e => {
    this.setState({
      category: e.target.value,
    });
    e.target.value === '전체'
      ? this.goToCategoryMain()
      : this.goToCategorySeq(e);
  };

  goToCategoryMain() {
    const query = 'sort=createDatetime,desc';
    this.props.history.push(`${BROWSER_URL}?${query}`);
    this.dataRender(query);
  }

  goToCategorySeq(e) {
    const characterId = CHARACTER[e.target.value];
    // const subjectId = SUBJECT[e.target.value];
    const categoryId = characterId; /*PATHNAME ? characterId : subjectId;*/
    const query = `characterSeq=${categoryId}&sort=createDatetime,desc`;
    // PATHNAME
    //   ? `characterSeq=${categoryId}&sort=createDatetime,desc`
    //   : `subCategorySeq=${categoryId}&sort=createDatetime,desc`;
    this.props.history.push(`${BROWSER_URL}?${query}`);
    this.dataRender(query);
  }

  // goToSubCategory(e) {
  //   const subCategoryId = e.target.dataset.idx;
  //   const subCategoryName = e.target.dataset.value;
  //   const query =
  //     subCategoryName === '전체'
  //       ? '&sort=createDatetime,desc'
  //       : `subCategorySeq=${subCategoryId}&sort=createDatetime,desc`;
  //   this.props.history.push(`${BROWSER_URL}?${query}`);
  // }

  sortingSequence = e => {
    const characterId = CHARACTER[this.state.category];
    const sortId = SORTDATA[e.target.value];
    let query;
    this.state.category === '전체'
      ? (query = `sort=${sortId}`)
      : (query = `characterSeq=${characterId}&sort=${sortId}`);
    this.props.history.push(`${BROWSER_URL}?${query}`);
    this.dataRender(query);
  };

  // sortingCharacter = e => {
  //   const characterId = CHARACTER[e.target.value];
  //   const sortId = SORTDATA[e.target.value];
  //   let query;
  //   e.target.value === '캐릭터 전체'
  //     ? (query = `sort=${sortId}`)
  //     : (query = `&characterSeq=${characterId}&sort=${sortId}`);
  //   this.props.history.push(`${BROWSER_URL}?${query}`);
  //   this.dataRender(query);
  // };

  render() {
    const { category, characterData } = this.state;
    const {
      sortingSequence,
      sortingCharacter,
      changeCategory,
      // goToSubCategory,
    } = this;
    return (
      <>
        <SubNav title={'캐릭터'} />
        <main className="character">
          <Option changeCategory={changeCategory} category={category} />
          {/* {!subCategory && (
            <SubCategory
              subCategory={subCategory}
              goToSubCategory={goToSubCategory}
            />
          )} */}
          <Filter
            sortingSequence={sortingSequence}
            sortingCharacter={sortingCharacter}
          />
          <Products data={characterData} />
        </main>
        <Footer />
      </>
    );
  }
}

export default withRouter(Character);

검색결과 페이지

발표 날 새벽에 일찍 일어나서 미친듯이 작성한 검색결과 페이지 스크립트..
카테고리 페이지와 동일한 형태를 가지고 있어 컴포넌트를 가져와 사용하려고 했지만, faillllllll.
공용컴포넌트가 아닌 src에 있는 컴포넌트를 갖다 써서 그런건지..

난생 처음보는 오류로 두들겨 맞고 전체 주석처리 ㅠㅠ

웹팩을 인스톨하라고 했던 것 같은데.. 시간이 급박하여 처리할 수 없었따. 흑흑

// import React from 'react';
// import { withRouter } from 'react-router';
// import SubNav from '../../../Components/SubNav';
// import Products from '../Character/Products/Products';
// import Filter from '../Character/Filter/Filter';
// import Footer from '../../../Components/Footer';
// import '../SearchResult/searchResult.scss';

// const IP = '54.180.24.190';
// const SORTDATA = {
//   신상품순: 'createDatetime,desc',
//   '낮은 가격순': 'salePrice,asc',
//   '높은 가격순': 'salePrice,desc',
// };

// class SearchResult extends React.component {
//   constructor() {
//     super();
//     this.state = {
//       dataList: [],
//     };
//   }
//   componentDidmount() {
//     const KEYWORD = decodeURI.window.location.pathname.split('=')[1];
//     fetch(`${IP}:8000/product/search?keyword=${KEYWORD}&sort=NEW`)
//       .then(res => res.json())
//       .then(res =>
//         this.setState({
//           dataList: res.result,
//         })
//       );
//   }
//   sortingSequence = e => {
//     const sortId = SORTDATA[e.target.value];
//     const KEYWORD = decodeURI.window.location.pathname.split('=')[1];
//     this.props.history.push(`product/search?keyword=${KEYWORD}?sort=${sortId}`);
//     fetch(`${IP}:8000/product/search?keyword=${KEYWORD}&sort=${sortId}`)
//       .then(res => res.json())
//       .then(res =>
//         this.setState({
//           dataList: res.result,
//         })
//       );
//   };
//   render() {
//     const KEYWORD = decodeURI.window.location.pathname.split('=')[1];
//     return (
//       <>
//         <SubNav title="검색결과" />
//         <div className="searchResult">
//           <div>'{KEYWORD}' 검색결과</div>
//           this.state.dataList.length ? (
//           <Filter sortingSequence={this.sortingSequence} />
//           <Products data={this.dataList} />) : (
//           <div className="noResult">검색결과가 없습니다.</div>)
//         </div>
//         <Footer />
//       </>
//     );
//   }
// }
// export default withRouter(SearchResult);

내가 보고 싶었던 화면

Reuse Component

이 세션을 좀만 더 빨리 했더라면........

결론은 둘 다 컴포넌트 재사용의 문제였다.
2차 프로젝트에서는 프론트분들과 재사용할 컴포넌트를 먼저 만들고 시작하면 더 많은 페이지를 구현할 수 있을 것 같다.

<Layout>
  <div>
  <h1>뭐 이런식으로</h1>
  </div>
  {this.props.children}
</Layout>