[1차 프로젝트 회고] 2022.03.28~2022.04.08

💮무인양품 - [가제: 무지막지]💮

 

일본의 무인양품 사이트를 직접 클론 코딩 해본 프로젝트 회고

[FE]

윤서영, 임재혁, 문혜성, 노규현

[BE]

이강호, 엄재홍

 

 

무지막지한 팀의 이름의 뜻? 

=> 각기 다른 6명의 사람들이 모여서 무지막지한 웹 페이지를 만들어보자는 포부가 담겨있다.

 

 

[FE 맡은 부분 정리]

1.서영 -  남성복 리스트 , 무지라보 페이지

2.혜성 - 로그인, 회원가입, 사이드바

3.재혁 - 남성복, 상세페이지

4.규현 - Nav바, 슬라이드 메인페이지~기획전부분까지

 

 

'무지막지' 팀의 필수 구현 사항

[FE]

• 회원가입, 로그인 모달창 구현 
• 제품 상세 정보창 구현
• nav 바, side 바 구현
• 메인 페이지 슬라이드 및 애니메이션 기능 구현

[BE]

• [BE] 구현사항로그인 API 구현위시리스트 API데이터모델링
• 각 제품 목록 별 API 구현
• 장바구니 API 구현
• 회원가입 API 구현

 

 

'무지막지'한 웹 페이지를 만들기 위한 노력

 

1. 매일 스크럼 meeting 진행 (최대 15분 넘지 않게 주의)

=> 미팅 회의록을 작성하여 기록. 

=> 어제의 진행상황과 오늘의 진행상황, 블로커 이슈를 

매일매일 공유하며 일을 능률을 높임.

 

2. 서로의 진행상황을 공유 할 수 있는 트렐로 작성

=> https://trello.com/b/bSRLlRzl/%EB%AC%B4%EC%A7%80%EB%A7%89%EC%A7%80

 

 

1차 sprint 회고 

2022.04.01 1차 스프린트 회고

생각대로 되는 건 하나도 없었다.

1주 - UI 요소 끝내기

2주 - 기능 구현 초점 맞추기

가 목표였고, 처음에 계획을 세분화 시키지 않아서 시간이 늘어졌다.

3일 걸릴 UI가 5일째에 모두 끝이 났다. 그래도 UI 는 깔끔하게 완성되어 기분이 좋았다.

다만 기능 구현을 아직 많이 하지 못해 다음 주엔 시간 비중 올릴 예정이다.

완성된 UI와 기능은 빠르게 PR올린 후 리뷰 반영이 중요하다는 것을 느꼈고,

백앤드 프론트앤드와 무엇을 소통해야 할지도 모르고,

그저 내가 할 일만 빨리 해야겠다 라는 생각이 앞서 있던 1주일이였다.

 

1주일 스프린트 느낀점 키워드 정리

• 소통의 중요성⭐
• 시간 분배의 중요성.
• 블로그 작성의 중요성⭐
• 코드 짜기 전 전체 그림을 그려본 뒤 작성하기.

 

정신없는 2주차 KICK OFF

2022.04.04~2022.08

 

ui 작업을 어느 정도 다 마친 상황이였고

추가 기능 중 다중필터 기능을 구현하기로 팀원들과 협의했다.

다중필터를 구현하기 위해서는

쿼리파라미터와 패스파라미터를 알아야했다.

쿼리파라미터는 데이터가 많을 때 끊어서 보여주는 것으로

filtering, sorting, searching에 적절하고.

&(앰퍼샌드)를 붙여서 여러개도 넘길 수 있다.

패스파라미터는

원하는 조건의 데이터들 혹은 하나의 데이터에 대한 정보를 받아올 때 

사용하면 좋다.

결론

만약 어떤 resource를 식별하고 싶으면 패스파라미터를 사용하고,
정렬이나 필터링을 한다면 쿼리파라미터를 사용하는 것이 Best Practice이다.

 

내가 구현하고 싶었던 상황을 설명하자면..

 '온라인 한정 사이트'라는 버튼을 클릭했을 때 버튼 속성이 bold로 변경되며 

데이터에 지정된 값이(tags=1) 필터링 되는 것을 만들고 싶었다.

 

⭐사용된 코드

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import ItemList from './ItemListComponents/ItemList';
import SelectBox from './SelectBoxComponents/SelectBox';
import './List.scss';

const List = () => {
  const [products, setProducts] = useState([]);
  const location = useLocation();
  const API_URL = `http://10.58.5.51:8000/products/categories${location.search}`;
  const getFetch = () => {
    fetch(`${API_URL}`)
      .then(res => res.json())
      .then(data => {
        setProducts(data.message);
      });
  };

  useEffect(() => {
    getFetch();
  }, [location.search]);

 

쿼리스트링을 사용하기 위해 조건을 줘서 내가 원하는 정제된 결과물을 얻어야 했다.

useLocation을 사용하여 search 부분을 가져왔고, 

그 부분을 템플릿 리터럴을 사용하여 변수에 담아주었다.

useEffect 훅을 사용하여, API_URL을 넣고, 의존성배열에 

의존성배열에 location.search값이 나올 때마다 재랜더링하여 보여줄 수 있도록

[location.search]를 넣어주었다.

 

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const SelectText = ({ list, idx }) => {
  const [isSelected, setIsSelected] = useState(false);
  const navigate = useNavigate();
  const handleSelectBtn = () => {
    setIsSelected(!isSelected);
    navigate(`?type_id=1&tags=${idx}`);
  };

  return (
    <div>
      <li
        className={`${isSelected ? 'btnBold' : null} selectTagBtn`}
        onClick={handleSelectBtn}

 

btnBold 속성을 만들었고, state를 만들어 관리하였다.

기본값(클릭하기 전)을 false로 지정하고, 

삼항연산자를 만들어 클릭값이 참이면 bold, 클릭값이 거짓이면 null을 입력해주었고,

handleSelectBtn 함수를 만들어 쿼리스트링 URL을 버튼클릭과 함께 넘겨주었다.

 

 

⭐결과물

완벽한 다중필터는 아니지만, 나름 만족하는 중이다.

차차 리팩토링을 진행하며, 더 나은 코드를 위해 수정해나갈 예정이다.

 

 

💮마무리 회고 ....

 

우리 팀이 프로젝트를 끝내며 만족하고 있는 부분으로는 '팀워크와 소통'이라는 부분이었다.

1주 스프린트를 마친 후, 백앤드와의 데이터의 키값,

구현하려는 데이터의 정보등을 디테일하게 맞추려 시도하였고, 

백앤드와의 소통하는 부분에서도 api 명세서를 만듦으로써

백앤드와 프론트앤드의 소통 문제도 해결하였다. 

 

 

반면, 팀 프로젝트를 하면서 개선했으면 좋을 것 같은 점도 있다.
나는 내가 부족한 점을 잘 알기에 소극적인 자세로 임했던 게 아닌가 하는 생각을 했다.
내가 부족한 부분이 있으면 다른 팀원분께서 채워주고 다른 팀원의 부족한 점이 있다면
내가 나서서 채워줄 수 있는 점이 팀 프로젝트에서의 가장 큰 장점인데
그러한 부분을 활용하지 못한 게 아쉽다는 생각을 하였고,
2차 프로젝트를 진행하게 된다면 그땐 더욱 능동적이고, 적극적인 자세로 임하고
싶은 생각을 하게 되었다.

 

끝으로

⭐리액트의 컴포넌트도 제대로 못 만들던 내가 이렇게까지 성장할 수 있었던 건

멘토님들과 우리 팀원분들 덕분이 아닐까? 하는 생각도 들고 너무 좋았던 사람들과

다시는 없을 인생의 첫 1차 프로젝트 후기였다. 

정말 모두 감사합니다. ⭐