GREAM+

1차프로젝트 이후 2차프로젝트와 기업협업 을 모두 진행했었다.

그동안 너무나 바빴다. 아쉬웠던 점도 많았고 내가 성장할 수 있는 점도 많았다.

그림

신발 중개업 플랫폼 크림을 모티브로 한 프로젝트
짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론을 진행
유저가 해당 홈페이지에서 물건을 구매하고 입찰하고 판매하는 등의 경험을 제공해주는 플랫폼 구현
개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 백앤드와 연결하여 진행하였습니다.

프론트 엔드 깃 허브

프로젝트 참여인원

Frontend
- 🍻🍻 박경원
- 💪🏻💪🏻 박재형
- 🦋🦋 박혜린
- 🔥🔥 주지홍
Backend
- 🐨🐨 이강일
- 🐻‍❄️🐻‍❄️ 이도운

프로젝트 기간

2022.02.14 ~ 2022.02.25

기술스택

tools

GIT : 버젼관리
GITHUB : 버젼관리를 통해 페이지 연동 및 취합
SLACK : 기본적인 의사소통교환
TRELLO : 일정관리

frontend

HTML/CSS
JavaScript(ES6+)
React
Styled-Components

프로젝트 진행과정

Planning meeting
팀원이 모여 개발의 전반적인 기획 컨셉을 정하고 충분한 소통을 거쳐 해당 내용을 노션에 기록
Daily Standup meeting
오전 10시부터 10시 30분까지 진행된 스탠드업 미팅에선 어제한것 / 오늘할것 / 블로커들을 공유하고 각자의 프로젝트로 들어갔다.
Retrospective Meeting
프로젝트가 끝이나고 각자 아쉬웠던 부분들을 다시 금 생각해보게 되는 계기들을 정리해 노션 회의록에 정리해두었다.

구현 목표

사용자가 해당 홈페이지에 방문하구 구매를 진행하는 것 까지를 구현 목표로 설정하고 프로젝트를 진행하였습니다.

필수 구현 사항

소셜로그인
상품검색 기능 구현
리스트페이지 캐러셀 구현
리스트페이지 상품 다중필터 기능 구현
상세페이지 관심상품 추가
상세페이지 사이즈모달창, 구매모달, 판매모달, 관심상품 모달, 시세모달창 구현
상세페이지 모달창과 모달창 밖의 UI 연동
상세페이지 시세 차트
상세페이지 하단 관련 카테고리 추천상품

내가 맡은 구현 파트

(상세페이지 및 리스트페이지)

1. 리스트페이지 및 상세페이지 레이아웃
2. 쿼리스트링 활용을 통한 리스트페이지 다중필터링 기능 구현
3. 쿼리스트링 활용을 통한 리스트페이지 정렬기능 구현
4. 리스트페이지 필터 드롭다운
5. 상세페이지 캐러셀
6. 상세페이지 관심상품, 시세모달 모달창 내외부 데이터 연동
7. 상세페이지 구매정보 드롭다운 구현
8. 상세페이지 연관상품 구현

내가 작업한 페이지 시연

리스트페이지 ✅

쿼리스트링 활용을 통한 리스트페이지 다중필터링 기능 구현
쿼리스트링 활용을 통한 리스트페이지 정렬기능 구현

상세페이지 ✅

시세모달창

시세영역과 시세 모달창 영역 실시간으로 연동 사이즈버튼을 누르면 해당 사이즈 조건에 맞는 거래내역들이 나옴 이 내역들은 모달창에서 바로 확인가능 반대로 모달창에서 눌러도 모달창 외부 시세영역과 데이터 연동

관심상품 모달

관심상품 담기버튼을 눌렀을때 로그인이 되어있지 않으면 소셜로그인 모달창이 나오고 로그인이 완료되었으면 관심상품 담기 모달창이 열림
모달창에서 관심상품을 담으면 백엔드로 데이터가 전송되고 실시간으로 관심상품을 담은 전체 유저의 숫자확인 가능

드롭다운

구매 정보관련 드롭다운 리스트 구현 (각각 id값과 비교하여 일치하는 id값의의 content를 보여주도록)

연관제품

각각 그림과 연관된 상품들을 화면에 나타나도록 구현 => 해당 연관그림 클릭시 해당 그림관련 상세페이지로 넘어가도록 구현

코드공유 - 쿼리스트링 구현!!!

1차 프로젝트때 제대로 해보지 못했었던 쿼리스트링으로 다중 필터를 구현해볼 수 있었다. 구글링 구글링 무한 구글링을 하면서 이것저것 찾아보았었는데

상수데이터를 잘 만들자

백엔드가 필요한 값들을 넘겨주기 위해 최대한 각각 카테고리별로 상수데이터를 정교하게 만들었다.
내가 누른 부분이 우선 어디 부분인지 알도록!! 그리고 해당 카테고리에서 어떤 부분들을 눌렀는지!!

const FILTER_LISTS = [
  {
    filterType: ['author', '작가'],
    idNameList: [
      { 1: 'Kathryn Rice' },
      { 2: 'Antonio Oneal' },
      { 3: 'Dalton Cuevas' },
      { 4: 'LindSay Martin' },
      { 5: 'Emily Clark' },
    ],
  },
  {
    filterType: ['theme', '테마'],
    idNameList: [
      { 1: '추상화' },
      { 2: '구상화' },
      { 3: '팝아트' },
      { 4: '입체주의' },
      { 5: '동양화' },
    ],
  },
  {
    filterType: ['year', '연도'],
    idNameList: [
      { '1970-01-01~1979-12-31': '1970년대' },
      { '1980-01-01~1989-12-31': '1980년대' },
      { '1990-01-01~1999-12-31': '1990년대' },
      { '2000-01-01~2030-12-31': '2000년대' },
    ],
  },
  {
    filterType: ['price', '가격'],
    idNameList: [
      { '0-100000': '10만원 이하' },
      { '100000-300000': '10만원 - 30만원 이하' },
      { '100000-500000': '30만원 - 50만원 이하' },
      { '500000-900000000000': '50만원 이상' },
    ],
  },
  {
    filterType: ['size', '사이즈'],
    idNameList: [{ 1: 'Small' }, { 2: 'Medium' }, { 3: 'Large' }],
  },
];

프론트엔드로서 로직을 짜는 연습을 잘하자.

 useEffect(() => {
    const filterQuery = makeFilterQuery(productFilters);
    navigate(`/list${filterQuery}`);
  }, [navigate, productFilters]); //완성된 쿼리스트링을 navigate훅을 사용해 페이지 전환

  const handleProductFilter = (e, filterTypeQuery) => {
    const isAlreadyFilter = productFilters[filterTypeQuery].includes(
      e.target.name
    ); //이미 productFilters에 카테고리에 안에 내부데이터가 있는지 확인해줌

    const newQuery = isAlreadyFilter
      ? productFilters[filterTypeQuery].filter(el => el !== e.target.name)
      : [...productFilters[filterTypeQuery], e.target.name];
			//isAlreadyFilter를 가지고 productFilters에 카테고리에 안에 
			//내부데이터가 있는지 확인해주고 걸러냄
    setproductFilters(prev => ({ ...prev, [filterTypeQuery]: newQuery }));
			//만약에 새로운 카테고리 영역에 데이터가 들어온다면 배열에 추가 
  };

  const makeFilterQuery = productFilters => {
    let query = '';
    for (let filterType in productFilters) {
      const filterIds = productFilters[filterType];
			//백엔드에 보내줄 id값
      if (filterIds.length > 0) {
        query += `&${filterType}=${filterIds.join(`&${filterType}=`)}`;
      } //쿼리생성
    }

    return query.replace('&', '?'); //쿼리가 &...로 시작하므로 첫번째 &를 ?로 바꿔줌
  };

느낀점

좋았던점

여러가지 로직을 짜 볼 수 있었던 점 : 크림 사이트를 분석하면서 웹이 굉장히 트렌디 하다고 느꼈었다 특히 여러개의 버튼을 어떤식으로 처리해야하는지 이러한 로직들에 고민해 볼 수 있는 기회가 너무나 좋았다. 또한 다중 필터기능을 구현해보면서 정말 좋은 로직을 짜야 원할히 데이터를 잘 받아 올 수 있을 것 같다고 생각이 들었다.
원활한 통신경험 : 프로젝트를 진행하면서 백엔드 강일님과 도운님 두분과 함께 통신을 했어야 했다. 1차 프로젝트의 경우 백엔드가 희택님 밖에 없어서 원할히 통신이 이루어 지지 않았다. 하지만 이번 프로젝트에선 강일님 도운님과 지속적인 소통을 하면서 서로 원하는 데이터 방식들에 의견을 맞춰가면서 로직도 짜보고 받아온 데이터를 가공해서 써보기도 하면서 진행하니 훨씬 수월했다.
라이브러리에 대한 생각 : 캐러셀 라이브러리를 사용해보면서 느꼈던 점은 생각보다 라이브러리를 잘쓰기 위해서는 JS에 대한 깊은 지식이 있어야한다. 라이브러리가 편한 것은 맞지만 모든 세팅값이 우리가 그려내고자 하는 UI와 다를때 과연 어떻게 접근해서 어떤식으로 고쳐서 써야하는지 많이 찾아보았다. 기본적으로 라이브러리 공식문서를 잘 읽어야하는것은 기본이고 구현과정에서 기본적인 JS로직도 잘 짜야 내가 원하는 UI대로 나온다고 느끼게 되었고 이러한 경험들은 다른 라이브러리를 쓰는과정에서 많은 경험이 될 것 같다.

아쉬웠던 점

2주라는 시간 : 사실 프로젝트를 진행하면서 크게 아쉬웠던 점은 없었다. 정말 2주동안 여러가지를 경험해보고 온 힘을 쏟아 부었다. 그럼에도 불구하고 크림 사이트 자체가 정말 여러가지 기능들이 있었고 이러한 기능을 2주라는 시간안에 모든 플로우를 구현하기에는 부족했다. 기회가 된다면 나머지 구매과정에 관한 플로우 까지 구현해보고 싶었다.

팀에서 어떤 역할을 담당했는지

팀원들의 고민을 같이 해결해 주는 역할!! 이번 프로젝트에서 얻을 수 있었던 점은 내가 누군가에게 도움을 줄 수 있는 존재라는 것을 많이 느꼈다. 팀원들 모두가 개발자로서 걸음마를 뗀 단계라고 생각을 한다. 따라서 팀원들이 모르는 부분은 나도 모른다고 생각하고 실력을 키우자고 마음을 먹었다. 개인적으로 이런 역할을 하면서 내가 더 많이 성장 할 수 있었던 기회였던 것 같다.

프론트엔드 개발자로서 스스로 더 확신을 가졌던 기회

너무나 재밌었다. 위코드 초반에 준식멘토님께서 본인의 페이스대로 꾸준히 하다보면 분명 점프를 하는 기회가 올거라고 이야기해주셨던 적이 있었다. 나에겐 이번 2차프로젝트가 점프의 기간이었던 것 같다. 그냥 동기들과 같이 고민하고 문제해결 하는 시간이 정말 많았는데 그러한 과정의 모든 순간순간 내가 모르는것들을 배울 수 있었던 기회였던 것 같고 어느순간 스스로가 프론트엔드 개발자로서 한걸음 한걸음 계속 딛고 있다는 느낌이 들었다.

Author And Source

이 문제에 관하여(GREAM+), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jujihong2/프로젝트-회고-GREAM

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)