[Kream] 팀 프로젝트를 끝내며

DamHo Bae·2021년 4월 11일
4

프로젝트

목록 보기
1/5
post-thumbnail

Kream 팀 프로젝트

📆 진행기간 : 2021년 3월 29일 ~ 2021년 4월 09일 (11일)
🧑🏻‍💻 내 파트: 상품 리스트 페이지 (메인)

내가 원했던 크림 웹사이트가 선정되었다.

이 사이트를 간단히 소개하자면

한정판 스니커즈 등의 상품을 구매하고, 판매 할 수 있는 서비스

내가 사용하고 있는 어플이며,
전체적인 UI가 마음에 들고 무엇보다 사용자 입장에서 봤을때 편리하다고 느낄 수 있었으며 매력적인 포인트가 많았다. 기능적인 측면에서 프로젝트로 하기에 좋을거라 생각했다.


🛠 FrontEnd 기술 스택

  • React
  • React Router
  • Hooks
  • Styled-component

Heuream팀을 만나다.

프로젝트 시작 전 나는 어떤 팀을 만날까?
또 다시 새롭게 시작한다는 마음에 신이 났다.

팀 발표가 결정이 나고 팀원들과 인사를 나누며 같이 밥을 먹었다.
팀명부터 만들어야 했는데 날씨가 흐려, 크림 아닌 흐림으로 정했다! Heuream

조금 썰렁하다. 정원님 의견이였던 것 같았다.... 좋다..!

1차 때와 달리, 앉아서 바로 시작하기 보다 앞으로의 방향성을 최우선시 했다.

서로 배려하는 마음이 많았다.

다음은 우리팀이 필수로 구현하고자 하는 부분이다.

  • 판매,구매 입찰 그래프
  • 한 눈에 보기 쉬운 검색 기능
  • 원하는 상품 찜기능

더 많은 기능들이 있었지만 2주라는 시간을 생각해서 학습 겸, 배운 내용 토대로 진행했다.

프론트와 백엔드 소통을 하기 위해 Trello를 사용했으며

스탠드업 미팅이 잘 이루어졌고,
각자 어디까지 진행중이며
특이사항이 있는가, 좋은 의견들을 서로 내 세우며 진행했다.
각각 분담도 정해져있어 서로 맞춰봐야 할 부분이 많기 때문에 미팅이 필요했다.
지은님께서 미팅기록을 남기고, 기록을 꾸준히 해주신 덕분에 까먹지 않을 수 있었다.
다만 나는 트렐로를 50% 밖에 활용을 못했다. 대체 왜 ?
아무래도 빨리 구현하기 바빠서?
반성하자...

MyCode

(1) 페이지네이션

먼저 [더보기]를 누를때 마다 데이터가 누적되어 페이지가 생기게 구현을 해야한다.
기존 배운 학습내용에서는 data-set 을 각 버튼마다 지정했던 방식이라면,
크림사이트는 조금 달랐다. 페이지네이션도 조금씩 다른 부분이 있는것 같다.

다음 코드를 확인해보자.

const LIMIT = 20; // limit을 20으로 상품이 20개씩 데이터가 뿌려진다.
const [curruntIdx, setCurruntIdx] = useState(1);
// 초기 state값은 1로 할당했다.


1. 다음과 같이 버튼 페이지 하위 컴포넌트에서 props로 전달 한다.

상위 컴포넌트 Btn 함수에서 값이 누적될때마다 더해지므로 setState 에서 값이 변할때마다 +1 을 하였다.
통신을 하면서 offsetlimit을 맞춰야 했었는데,
1. offset 은 변수에다가 위에 선언한 curruntIdx를 만들었고,
2. 백엔드에게 전달할 쿼리스트링이 필요했는데,
그 안에 들어 갈 limitoffset 은 미리 상수안에 선언해주었다.
3. 빈배열에 대한 state 를 만들고 빈 배열안에 실제 데이터를 합쳤다.
이 모든 과정을 하나의 이벤트 안에서 호출하여 페이지 네이션을 완성하였다.

(2) 모달기능

  • 로그인 활성 => 모달기능
    로그인 비활 => 로그인 페이지

  • 상위 컴포넌트, 하위 컴포넌트로 나누어 props로 전달 받았다.

  • 모달에서도 반복되는 부분을 전부 map으로 사용했다.

    (2-1) 모달이 열리는 부분 코드

    부모 컴포넌트에서 초기 state 값을 boolean 으로 선언한다.
    해당 버튼 태그에서 handleModal 이라는 이벤트를 사용해서,
    setState 으로 상태를 변화시킨다!
    (발생될 시 이벤트는 false => true 값 즉, !modal)


    map함수를 사용해 key값을 할당했다.

    모달이 열리고 닫히는건 사용자가 로그인이 되있어야 볼 수 있다.
    1. 우리는 토큰에 대한 여부가 필요하다.
    2. 조건문을 활용해서, 토큰이 있다면 모달이 열리고,
    없다면 로그인 페이지로 가야한다.
    이때, hooksthis.state.history.push 가 아닌,
    라우터 라이브러리 react-router-dom 을 사용해야했다.

    (2-2) 모달에서 사이즈클릭

    모달에서 사이즈를 선택하면 메인페이지에서 북마크가 저장된다.

    생각보다 간단했다...
    난 이번 2차 프로젝트에서 통신으로 부딪힌적이 처음이라 소통이 조금 어려웠다.


    먼저 모달이 열린 다음 사이즈를 선택 할 수 있다.
    사이즈에 대한 북마크 아이콘이 있을 것이다. 해당 아이콘에 이벤트를 줄 수 있겠다.
    모든 상태값은 state로 관리하기에 false값을 지정해주고, 아이콘에 조건을 줬다.
    bookmark ? 색 있는 아이콘 : 없는 아이콘
    부모 컴포넌트에서 이벤트를 발생키고
    자식 컴포넌트 즉, 모달이 열리는 컴포넌트에서 props로 전달 받았다.


    확인버튼에 props 로 전달했으니
    클릭과 동시에 부모컴포넌트에서는 이벤트 발생에 따라 조건을 주면
    원하는대로 구현이 가능했다.

(3) 정렬 필터기능


sort의 개념을 알면 필터기능을 만들 수 있다.
맵을 사용해서 li 태그안에 key값과 value값이 들어간 걸 볼 수있는데,
클릭 이벤트를 발생 할때마다, 상품에 데이터에 따라 값이 정렬된다.


백엔드 정원님이 먼저 sort값을 구현해주셔서 나는 너무 편했다.
해당 이벤트에 타겟에 접근하여 type과 name값을 접근 하여 발생시키게 구현했다.
여기서 타겟접근이 e.target.name이 아닌 dataset 으로 들어가야 접근이 가능하다.

좋은 경험과 배움

2차 프로젝트도 정말 좋은분들과 함께하여 즐겁게 프로젝트를 진행 했던 것 같았습니다.

함수형 컴포넌트를 사용해 고민도 많이 해보고 적용하려니 쉽지 않았는데,

팀원들 덕분에 또 하나를 배울 수 있었고, 좋은 기억으로 남을 것 같습니다.
혼자가 아니라 함께라서 배움도 즐거움도 두배라 생각해요.

배우려는 자세, 배움을 나누는 자세
정말 일상에서도 꼭 필요한 부분이라 생각합니다.

흐림팀 모두 감사합니다.

프로젝트를 끝내며

1차때는 클래스형 컴포넌트 재사용, Sass를 이용한 네스팅 ?

2차 프로젝트는 함수형 컴포넌트 재사용, Styled Componenets

이번엔 두번째 도전이였다.
사실 경험했으니, 두번 실수는 안하겠지? 한 번 해 봤으니 속도가 더 빠르겠지?

는 아니였다.

Hooks를 보며 많은 개발자들이 클래스 컴포넌트보다 함수형 컴포넌트를 더 선호하고
둘의 차이를 좁히기위해 노력한다는것을 알게 되었다.
가독성 및 렌더링의 결과값 등 때문?

그래서 이번 프로젝트의 목적은 기능의 욕심보다 함수형 컴포넌트를 사용하면서 학습하고,
Styled Compoenet를 사용해보는데 초점을 맞춰야 했다.

그리고 백엔드와 통신해야할 부분도 많아서 소통이 조금 힘들었는데,

시간이 걸릴뿐 결국 해냈다.

개념을 모르고 있으면 당연 힘들다... 그래서 더 공부해야한다.

마무리를 지으며

이제는 기업협업을 시작했다.

React Native 앱 기반을 맛 보겠다.

끝이 아닌 시작이고 새로운 배움에 있어 무서워하지말고 즐기자!! 화이팅 🤟

profile
Frontend Developer

1개의 댓글

comment-user-thumbnail
2021년 4월 13일

🤟🤟🤟

답글 달기