Project Overview
소개
신선식품 전문 온라인 쇼핑몰 Market Kurly App 클론
기간
2020.10.04 - 2020.11.06 (4주)
구성
프론트엔드 4명 / 백엔드 2명
사용한 기술
- React Native, React JS, JavaScript
- Redux, Redux Thunk
- Styled Component
- Trello, Github
Trello 및 Github Repository
나의 목표
- Market Kurly 어플리케이션의 레이아웃 및 기능 동일하게 구현
- React Native 에 대한 이해 및 사용법 익히기
나의 담당 역할
- 상품 상세 페이지(상품설명, 상품이미지, 후기) 및 구매하기 모달 구현
- stack 및 tab navigation 으로 screen 이동 및 stack 구조 관리
- expo-image-picker 로 휴대폰 앨범에 접근 및 사진을 가져와 후기에 추가하는 기능 구현
- 구매하기 모달에서 선택된 상품 개수, 가격, id를 장바구니에 POST
- Dimension API 로 기기에 알맞는 크기를 자동적으로 찾아 적응형 UI 구현
Project Review
Market Kurly를 통해 배운 점
react-navigation YES🙆🏻♀️ react-router-dom NO🙅🏻♀️
react-router 는 SPA 에서 필수적으로 필요한 라이브러리이다. 웹에서는 url path 를 router 로 조작하여 다양한 뷰를 보여주는 웹을 만들어냈다면 앱에서는 스택 네비게이션을 이용하여 다른 뷰로 전환한다.
여기서 스택이란 자료구조의 스택처럼 하나씩 쌓여가는 개념이다. 메인 페이지에서 상세 페이지로 전환할 때 메인 페이지 위에 상세 페이지가 쌓이게 된다. 여기서 또 결제 페이지로 전환하면 결제 페이지가 상세 페이지 위에 쌓이게 되고 뒤로 가는 버튼을 통해 결제 페이지를 벗겨 낼 수 있다.
유용한 flex
display: flex;
display: flex 와 flex-direction: column 이 기본값으로 설정되어있는 점이 React 와 다른 점이다. 가로로 정렬을 하려면? flex-direction: row !!
flex: 1;
기존에 React 에서 화면 전체를 채울 때 height: 100% or height: 100vh 를 사용했다면 React Native에서는 flex: 1 을 사용하면 끝.
기억하고 싶은 코드 - Dimension API
앱의 UI 를 제작할 때 웹보다 더욱 신경쓰이는 것은 너무나 다양한 기기의 스크린 크기를 만족시켜야 한다는 것이었다. 이때 유용하게 쓰이는 것이 Dimensions이다. 물론 flex 로 해도 되지만 이번 프로젝트에서는 Dimensions를 사용했다.
여기서,
window: 기기의 보여지는 화면 크기 (만약에 소프트 메뉴바가 있다면 메뉴바 크기를 제외한 화면의 크기가 보여진다)
screen: 기기의 전체 화면 크기
Dimensions 에서 addEventListener 로 onChange 가 쓰인 이유는 기기를 회전하거나 foldable 기기를 사용할 때 change 되는 너비, 높이에 따라 적용되는 Dimensions 를 재설정하기 위해서이다.
https://reactnative.dev/docs/dimensions
기억하고 싶은 코드 - 파라미터 전달
Stack Navigator 에서 컴포넌트 간 navigate 가 이루어질 때 데이터를 전달하는 경우가 있다. 그때 아래와 같은 방법이 쓰이게 된다.
-
navigation.navigate 메소드의 2번째 인자에 parameter 를 객체로 전달한다. 예를 들어, navigation.navigate('RouteName', { / params go here / })
-
navigate되어지는 컴포넌트에서 route 라는 props 를 받아오고 그 내부의 params 키로 접근하면 전달된 데이터 객체를 볼 수 있다.
Market Kurly 를 하며 아쉬웠던 점
전체적인 Navigator 구조
React Native 로 프로젝트를 진행하며 초반에 Navigator의 구조를 잘 잡는 것이 정말로 중요하다는 것을 깨달았다. 다음 프로젝트를 진행할 때는 초기세팅할 때 이 구조를 짜는데 공을 많이 들여야겠다.
App.js를 최상단 navigator로 설정했는데 navigate하고 싶은 컴포넌트를 이곳에 추가하는 것이 가장 단순했는데 하다보니... 이렇게 못생긴 App.js가 탄생하게 되었다.
주절주절 느낀점
지금까지 위코드 및 기업협업에서 웹 개발을 했기 때문에 앱에 대한 궁금증이 스멀스멀 올라왔다. 내 손으로 직접 터치하며 개발을 하고 싶다는 생각으로 React Native를 접하게 되었다.
프론트는 예지님, 진아님, 상구님, 나 그리고 백엔드는 현우님, 태현님이 모여 팀을 구성하였고 각자 하고 싶은 앱을 골라 사다리타기를 한 결과, 예지님이 택하신 마켓컬리를 클론하게 되었다. 결과적으로 매우 잘한 선택!! 앱 자체가 군더더기 없는 깔끔한 느낌이었고 컴포넌트를 재사용하기에 적합했다.
이전 프로젝트를 진행할 때는 그 프로젝트에만 집중할 수 있는 환경이었는데, 이번에는 다들 기업협업과 취업준비를 병행하며 사이드 프로젝트로 진행했기 때문에 속도가 이전처럼 나오지 않아서 기간이 생각보다 길어지게 되었다. 위코드 수료날까지 진행하는 것으로 2주 기간을 정했지만 결국 4주가 지나 프로젝트가 완성되게 되었다. 수료하고 나니 조금만 쉬엄쉬엄 해야겠다..라는 생각을 했던 내 자신에게 매우 반성하자..
수료하고나니 함께 할 공간을 찾는 곳도 마땅치 않아 여러 곳을 전전해 만나고 바쁜 시간을 쪼개 구글밋으로 온라인 미팅도 하면서 마켓컬리 앱을 완성한 순간..! 구글밋으로 각자 구현한 부분을 자랑하며 비디오를 찍는 순간..! 너무나도 좋은 퀄리티에 감동했던 기억이 난다.
우리의 첫 앱 완성..! 여러분 덕분입니다. 모든 순간 감사했습니다..!
이번 프로젝트를 통해 앱의 매력에 빠지게 되었다. 언젠가는 모든 사람들의 스마트폰에 당연히 존재할 앱을 만들고 싶다. 다만.. React Native는 아직 불안정하다는 단점 때문에 swift 나 다른 언어를 배워서 다음 도전을 하고 싶다 ^0^
