🎬영상보기: 영상 보기
📊Trello: Trello 보기

Kurly 어플리케이션 클론 프로젝트(Front-end)

프로젝트 소개🚨

• 새벽배송으로 유명한 Kurly 어플리케이션의 클론 프로젝트

개발 기간📆

• 2020/10/16 ~ 2020/11/6(3 Weeks)

구성원 👨‍💻

• 프론트엔드 4명
• 백엔드 2명

개발 목적🏁

• React Native의 활용
• React.js(functional components)를 통한 프론트엔드 개발
• Hooks의 적용
• Redux(Thunk)를 통한 상태관리
• Stlyed Component의 적용
• git을 통한 프론트엔드와 백엔드의 협업 경험

사용 기술 & 구현 기능⚙️

사용 기술

• React.js(Functional components)
• React Native
• Styled components
• RESTful API
• Redux-Thunk
• Git

주요 구현 기능

직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✓ 표시
1) 📄 회원가입 / 로그인 페이지

• ✓Modal login
• ✓이메일 및 패스워드 양식 확인 기능
• ✓회원가입 기능(약관 동의 및 특정 조건)
• ✓SNS 로그인 기능

2) 📄 메인페이지

• ✅ Horizon slide 상품 컴포넌트
• ✅ 특정스크롤 위치에서 나오는 버튼(클릭시 상단이동)

3) 📄 검색페이지

• ✅ 자연어처리된 데이터의 검색 기능
• ✅ 검색단어의 유무에 따라 취소버튼의 출현

3) 📄 상품페이지

• ✅ 상품 카테고리에 따른 컴포넌트의 재활용
• ✅ 배송종류, 제품의 상태에 따른 filter 구현
• ✅ 상품의 할인 유무에 따른 조건부 렌더링
• ✓ 디테일 페이지 내의 네비게이션
• ✓ 후기 작성 기능

4) 📄 장바구니

• ✓ login 계정의 Auth 기능
• ✓ 특정 아이템의 장바구니 추가 및 삭제
• ✓ 상품 내 옵션의 존재에 따른 조건부 렌더링

#code review🔎

⭐️ 조건부 렌더링

: React에서는, 컴포넌트를 만들어서 원하는 동작을 캡슐화 할 수 있다. 그리고 나서, 어플리케이션의 상태에 따라 컴포넌트의 일부만 렌더링 할 수 있다!

이제는 당연하게 할 줄 알아야 한다

상품 컴포넌트를 구성하면서, 백엔드에게 전달받기로 한 데이터를 살펴보자

• 상품의 할인의 유무에 따라서 Price가 변하거나, 특정 이미지가 있거나 하는 형태다.

• 데이터가 True 일 경우 이미지 uri에 해당 데이터를 넣어주고 아닐 경우에는 null 처리를 통해 기능 구현!

• 텍스트의 경우 레이아웃이 바뀌는 부분이 있었다.
• 따라서 데이터를 return 하는 것 뿐만 아니라 속성에도 해당 데이터를 넣어주었다.

이 맛에 styled-compnents를 쓴다😆

• 들어오는 데이터에 따라 Text가 나타나는 부분의 display 속성을 조정하는 모습을 볼 수 있다.

⭐️ 애니메이션

특정위치에서 나타나는 버튼

여러 컴포넌트를 import 하는 scroll이 있는 page에서의 버튼을 구현해보자!

• 해당 컴포넌트에서는 FlatList를 통해 재활용되는 상품컴포넌트를 카테고리만큼 렌더를 진행한다.
• 그에 따라 페이지에 스크롤이 생긴다.

• 버튼 작동을 위한 함수를 작성했다.
• useRef를 이용해 특정 컴포넌트를 집게로 집었다!
• scroll이라는 state를 부여했다. 최상단을 기준으로 하기 위해 0을 초기값을 설정.
• scroll이 움직이면 해당 위치의 y값을 state에 담아두도록 설정했다.
• 버튼이 작동하면 스크롤을 0의 위치에 이동할 수 있는 버튼함수도 생성했다!

• 버튼을 생성하고 onPress 이벤트에 상단으로 이동하는 함수를 작동하도록 설정!
• fadein 애니메이션을 위해서 state에 담긴 값이 700보다 크면 애니메이션이 동작하도록 설정!

• 특정 위치에서 버튼이 나타나도록 하기 위해 state를 이용해서 다시한번 opacity를 조정했다.

입력창의 크기조절 & 취소버튼의 출현

자연어 처리된 데이터를 검색하기 위해 검색창을 만들어 보았다!

• searchData의 인자로 input의 value가 들어온다.
• 해당 value를 POST를 통해 전달하고, 데이터를 GET 한다.

• onChageText가 되었을 경우 input value를 위에 설정한 fetch함수로 전달하도록 설정
• 해당 값을 searchVal이라는 state에 담아준다.
• 해당 값을 아이콘, input 컴포넌트, 취소버튼의 속성값으로 전달!
• 해당 값의 길이가 0이상이면 특정 애니메이션이 동작하도록 설정!

• 취소버튼을 누르면 clearInput이라는 함수가 작동해 들어온 데이터를 초기화 시켜주도록 했다!

• 미리 설정해둔 touch라는 속성을 통해 input의 길이, 취소버튼의 display를 조정하도록 설정했다.
  
• 자연스러운 UI를 위한 애니메이션은 덤이다!

⭐️ 필터기능 feat. Redux

아직도 콜백함수로 자식의 상태값을 부모에게 주고 계시나요...? 에이 설마😏

이번 프로젝트에서 Redux를 쓸일이 없었지만... 없을리가 없지

actions

이번 프로젝트에서는 배송상태의 필터를 담당하기위해 GET_DEILVERY, 상품상태 필터를 담당하기 위한 GET_FILTER를 설정했다.

reducer

• action에 따라 리듀서를 설정했다.
• filter에 들어가는 값들은 추후에 POST에 들어가기에 초기값을 설정했다.

filter

• 필터의 label이 변화했을때 해당 value를 dispatch를 통해 스토어에 담아주는 모습이 보인다.

use

• 상품 컴포넌트에서 useSelector를 통해 filter의 값을 가져오고 있다.
• 해당 값을 POST에 넣어주고 있는 모습이다.
• useEffect를 통해 필터의 값이 변동될 경우 fetch를 새로하는 모습도 볼 수 있다!

#Total reivew👏

⭐️응용의 폭이 점점 넓어지고 있다!

사실 이 프로젝트를 진행할 계획은 없었다. 위코드의 정규 커리큘럼도 아닐뿐더러 그렇다보니 리액트 네이티브를 배운적도 없었다. 근데 왠지 모르게 할 수 있을 것 같았다. 오리샌드박스에서의 경험, 위코드에서의 경험이 스스로 찾아보고 적용할 수 있을 것이라는 자신감을 준 것이다. 그리고 우리는 해냈다.
즉, 또 한번 성장을 한 것이다!👍

👊항상 소통이 제일 중요하다!

이번 프로젝트에서 가장 큰 난관으로 다가온 것은 모두가 처음접하는 기술을 제대로 배워보지도 않고 사용한 것이었다.
때문에 네비게이션 구조에 대해 전혀 무지한 상태로 프로젝트가 진행되고, 네비게이션이 맨 마지막에 구현되는 경우가 발생했다.
아실 분들은 아시겠지만 이렇게되면... 기존에 만들어둔 페이지들의 이동을 위한 네비게이터들이 먹통이 될 가능성이 크다..!(우리도 그랬다...😅)
그래도 모두가 구글미팅에 참여해서 구조를 하나씩 같이 배우고 결국에는 디버깅에 성공했다! 그를 통해 효과적이진 않더라도 우리 나름대로의 컨벤션같은 형태의 네비게이터를 작성할 수 있었다.
또한 이번 프로젝트에서 필자는 부모컴포넌트를 만드는 동료에게 특정 props들을 받아 컴포넌트를 렌더하고, 또 특정 props를 다른 페이지를 작업하는 동료에게 전달해야되는 샌드위치 중간의 컴포넌트 제작을 맡았는데, 아무 생각없이 혼자로직을 구성하고 나중에 컴포넌트들을 합쳤다면 정말 큰일이 날 뻔했다(이 전 프로젝트들의 경험이 날 이런 지옥에서 미리 구해주었다..🙏) 컴포넌트 로직을 구성함에 있어 바로바로 연관 컴포넌트 작업을 하는 동료들과 소통하고, key 혹은 props의 name을 특정하고, 들어오는 데이터에 대해서 미리 백엔드와 소통하는 일련의 모든 소통이 더욱 생산성을 월등하게 상승시켜 주었다.

사실 필자는 이번 프로젝트에서 담당역활을 일주일 정도 미리 끝내는 기염을 토하기도 했다..✌️
때문에 남는 시간이 생겨 다른 팀원들의 상태도 보며, 도와줄 수 있는 부분은 같이 고민하고 문제를 해결해 나가는 데에서도 큰 즐거움을 느꼈다.

🗼구조의 중요성

다시한번 느낀다...
위에서 서술한 바와 같이 기본적인 네비게이터의 기능을 버튼에 적용 시킨후 각자 작업한 결과물을 마지막에 만들어진 네비게이터에 붙이는 형식으로 작업을 진행하게 되었는데, 최후반에 들어서 모든 네비게이터가 고장나는 대참사를 가지게 되었다.
일단 실행하는 것도 물론 중요하지만.. 다시한번!! 또 한번!! 느낀다.. 충분하게 올바른 구조를 미리 잡아두고, 프로젝트를 진행하자..!!🐷