[Team Project] 이솝 웹사이트 클론 프로젝트 후기

1. Intro

• 클론 사이트 : 이솝
• 팀구성: 프론트엔드 3명, 백엔드 2명
• 기간: 2021.01.11 ~ 2021.1.22
• Front-end Stack : React, Sass, React-router-dom, Swiper, RESTful API
• 협업 툴 : Slack, Trello, Git, Github
• GitHub : https://github.com/dev-hannahk/Wesop-frontend

2. Pages and Components

2-1. pages

• 메인 페이지 ✔
  
• 회원가입/로그인
• 제품 보기
• 제품 리스트 페이지 ✔
  
• 제품 상세 페이지

2-2. components

1) Slider Component

• Swiper Library를 이용하여 이솝에서 자주쓰이는 슬라이더를 컴포넌트화 했다. 많이 쓰이는 Slick 라이브러리 대신 Swiper를 쓴 이유는 하단의 스크롤바를 표현해주고 싶었기 때문이다.

• 슬라이더를 컴포넌트화 해서 메인페이지에서 API로 받은 데이터에 따라 슬라이더에 보여주는 이미지와 내용을 각기 다르게 보여줄 수 있다.

class Main extends Component {
  constructor() {
    super();
    this.state = {
      products: []
    }
  }

  componentDidMount = () => {
    fetch(CATEGORIES_API)
      .then(res => res.json())
      .then((data) => {
        this.setState({
          products: data.categories[0].subcategories[0].productList
          })
        } 
      )
    }


  render() { 
    const { products } = this.state;
    return (
      <div className="main">
		...
        <Slider products={products} />
		...
      </div>
    );
  }
}

export default withRouter(Main);

• Slider 컴포넌트에서는 map 메서드를 이용해서 products props로 받은 데이터를 배열로 받았으며, Slider컴포넌트에서 하위 컴포넌트인 Products 컴포넌트에 props로 전달하였다.

class Slider extends Component {
  render() {
    const { products} = this.props;
    
    SwiperCore.use([Navigation, Pagination, Scrollbar]);

    return (
      <section className="mainSection-Slider">
        <Swiper
          slidesPerView={4}
          navigation
          scrollbar>
        {products && 
        products.map ( product => {
          return (
            <SwiperSlide>
            <Products
            productId={product.id}
            description={product.description}
            name={product.name}
            url={product.media[0]?.url}
          	/>
            </SwiperSlide>
            )
          }
        )}
        </Swiper>
      </section>
    );
  }
}

export default Slider;

• 슬라이더 디자인은 Swiper 공식 사이트와 크롬의 개발자 도구에서 클래스명을 참고해서 SCSS에서 !important 속성값을 이용해서 스타일링을 해줬다.

  .swiper-button-next,
  .swiper-button-prev {
    width:80px !important;
    height: 80px !important;
    background-color: $wesop_black !important;
    color:white !important;
      
    &::after {
      font-size: 15px !important;
    }
  }

2) ProductList Content Component

• 제품 리스트 페이지에서는 hover시에만 "카트에 추가"라는 버튼이 보이도록 하는 게 과제였다. 처음에는 ishovering를 boolean 값으로만 줘서 마우스 오버시에 모든 컨텐트에 버튼이 다 보였다. 멘토님께 힌트를 얻어 데이터의 id값과 hover되는 영역의 id값이 일치할 때만 버튼이 보이도록 하는 코드로 수정했다.

constructor() {
    super();
    this.state = {
        isHovering:''
    }
  ...
  
handleMouseHover = (productID) => {
    this.setState(() => (
      { isHovering: productID})
    );
  }
  ...

 <div 
   onMouseEnter={() => this.handleMouseHover(productID)}
   onMouseLeave={() => this.handleMouseHover(productID)}
   className="ProductListContent-item">
     
  ...
   
{this.state.isHovering === productID &&
   <div className="ProductListContent-addcart"> ... }

3) 동적 라우팅

• 메인페이지의 슬라이더와 제품 리스트 페이지의 컨텐츠를 클릭시 제품 상세 페이지로 이동하도록 구현했다.

 goToDetail = (id) => {
    this.props.history.push(`/product_detail/${id}`)
  }

3. 후기

3-1. 성장

프로젝트 시작 전에는 기대감 보다는 걱정되는 마음이 컸다. 내가 과연 팀원으로써 한 사람의 몫을 잘 해낼 수 있을 지 의구심이 들었다. 이전에 개인 프로젝트였던 인스타그램 클론을 바닐라 자바스크립트와 리액트로 구현하는데 고군분투하며 겨우 필수과제만 진행했기 때문이다.
더군다나 프로젝트 전에는 온라인으로만 진행되었기 때문에 팀원들이 어떤 분인지 잘 모른채 시작했기 때문에 과연 협업이 잘 이뤄질 수 있을 지 궁금했다.
다행히 팀원들 모두 배려심있고 좋은 분들이어서 부담감을 좀 내려놓고 시작할 수 있었다. 혼자서는 시간을 구글링을 하며 헤맸을 문제들도 팀원들에게 배울 수 있어서 금방 해결할 수도 있었다.
프로젝트 2주차에는 오프라인으로 진행이 되어 멘토님들에게도 모르는 걸 바로 물어볼 수 있어서 프로젝트 진행에 차질이 있을 때 도움을 받을 수 있었다.
내가 맡은 페이지가 절대적인 수치로만 본다면 부족한 부분이 많을 수 있지만, 프로젝트 전의 나와 지금의 나의 모습을 본다면 개인적으로 많이 성장했던 시간이었다고 본다.
특히, 백엔드와의 통신이 신기했다. 내가 맡은 페이지에서는 get 메소드만 써서, Postman 프로그램을 이용해서 Patch 메소드를 이용한 request로 백엔드의 데이터를 수정해봤다! 다음 프로젝트에서는 여러 메소드를 통해 백엔드와 통신해보고 싶다.

3-2. 아쉬운 점

발표 때 보여준 페이지들이 1주차에서 거의 다 마무리가 된 페이지들이고 2주차에서는 새로운 페이지를 만들지 못해서 보여준 기능들이 적어서 아쉬움이 남는다. 이정도면 됐다는 자기합리화로 2주차에는 프로젝트에 열정을 많이 쏟아 붇지 않은 것 같다. 2차 프로젝트 때에는 1차 때는 하지 못했던 여러 기능들을 구현해보고 싶다.