2차프로젝트 'trade coffee'클론 후기

2차 프로젝트 후기를 작성해보자.

2차 프로젝트를 마치며

조 분위기가 너무 좋아서 항상 웃으면서 코딩을 했던게 기억에 많이 남는다.ㅎㅎ
코딩을 잘하는 사람과 함께 하는 것도 좋겠지만, 좋은 분위기에 서로 격려해주는 팀원들과 함께 프로젝트를 한다는게 행복하고, 더 기억에 남는 것 같다.

기억에 남는 코드

• styled-component: scss에 비해 여러가지 기능이 있어서 복잡했지만, 익숙해지니까 점차 재밌어졌다.
  scss는 공통으로 사용할 부분을 common.scss 파일에서 작성하고, 필요한 파일마다 @import하는 형식을 사용했다. 스타일컴포넌트는 common.js파일에 공통부분을 작성하고, 라우츠파일에 모든 컴포넌트를 감싸주어 사용할 수 있게 만들었다.

//common.js
const colors = {
  white: "rgb(255, 255, 255)",
  grey: "rgb(216, 216, 216)",
  darkgrey: "rgb(148, 148, 148)",
  lightgrey: "rgb(233, 233, 233)",
  btnColor: "rgb(245, 60, 50)",
};

const theme = {
  colors,
  border: "1px solid rgb(233, 233, 233)",
  flexcenter: "display:flex; justify-content: center; align-items: center;",
  flexcolumn: "display: flex; flex-direction: column;",
  spacebetween:
    "display: flex; justify-content: space-between; align-items: center;",
};

export default theme;

//Routes.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Quiz from "./Pages/Quiz/Quiz";
import Login from "./Pages/Login/Login";
import ProductList from "./Pages/ProductList/ProductList";
import ProductDetails from "./Pages/ProductDetails/ProductDetails";
import Navbar from "./Components/Navbar/Navbar";
import Main from "./Pages/Main/Main";
import { ThemeProvider } from "styled-components";
import theme from "./Styles/common";

class Routes extends React.Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <Router>
          <Navbar />
          <Switch>
            <Route exact path="/" component={Main} />
            <Route exact path="/Login" component={Login} />
            <Route exact path="/ProductList" component={ProductList} />
            <Route
              exact
              path="/ProductDetails/:id"
              component={ProductDetails}
            />
            <Route exact path="/:quizNums" component={Quiz} />
          </Switch>
        </Router>
      </ThemeProvider>
    );
  }
}
export default Routes;

//스타일컴포넌트를 사용한 컴포넌트
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import styled, { css } from "styled-components";

const fontMixed = css`
  font-family: Fira sans;
  font-size: 14px;
`;

const Item = styled.div`
  width: 280px;
  min-height: 80px;
  border-bottom: ${({ theme }) => theme.border};
  .mainCategory {
    min-height: 80px;
    .toggleBtn {
      ${({ theme }) => theme.spacebetween};
      width: 100%;
      height: 80px;
      cursor: pointer;
    }
  }
  span {
    ${fontMixed}
  }

• url 추가하고, 삭제하기: 클래스형 컴포넌트에서는 setState의 비동기처리문제를 해결하기 위해서 콜백함수로 해결할 수 있다. 하지만, hooks에서는 콜백함수로 해결할 수 없다. 우선, makeUrl함수에서 setQuerystring으로 값을 바꾸고, use effect를 사용하여, queryString값을 감지하고 변할 때마다 history.push코드가 실행된다.

// class형 코드
makeUrl = (query) => {
    this.setState(
      {
        queryString: [...this.state.queryString, query],
      },
      () => this.props.history.push(`?${this.state.queryString.join("")}`)
    );
  };

// hooks 코드
const makeUrl = (query) => {
    setQuerystring([...queryString, query]);
  };

  const deleteUrl = (name) => {
    const findTargetword = queryString.filter((item) => item !== name);
    setQuerystring(findTargetword);
  };

  useEffect(() => {
    history.push(`?${queryString.join("")}`);
  }, [queryString, history]);