[Project] 당근마켓 후기

예흠·2020년 10월 23일
3

Project

목록 보기
3/3
post-thumbnail

Carrot Super

중고 물품 거래 서비스 당근마켓 클론 프로젝트

Table of contents

General info

  • 중고 물품 거래 서비스 당근마켓 클론 프로젝트
  • 개발기간 : 2020.09.29 ~ 진행 중
  • 팀원 : 황연욱, 최예흠

Technologies

Tools

  • Git(Control Commit history by Squash and Rebase)
  • Trello
  • AWS
  • PostMan(Share API documentation)

Full-stack

  • JavaScript(+ ES6 syntax)
  • TypeScript
  • React.js(setting with CRA)
  • React Native
  • Redux-thunk
  • Redux
  • Node.js
  • mySQL
  • sequelize

Features

내가 구현한 기능 🎯

Back-end

  • 데이터 모델링 및 Sequelize를 통해 DataBase 생성
  • end Point (Routes)를 나누어 원하는 데이터 동적라우팅하여 url로 받아오는 기능 구현
  • Node.js Express를 사용해 서버 생성

Front-end

  • React Native로 컴포넌트 단위별, 페이지별 구현 및 expo를 통해 시뮬레이터로 테스트
  • Redux-thunk를 통한 미들웨어에서 데이터 fetch 받아오기
  • expo camera library를 통해 핸드폰 카메라에 접근 및 촬영, 앨범 가져오는 기능
  • FlatList를 통해 특정위치에서 데이터 받아와 infinite scroll 기능 구현
  • navigation stack, tab을 이용해 컴포넌트 switch 또는 이동 기능 구현

Contact


주요 구현 기능 🎥

Node.js로 DataBase 만들기

aquery를 사용해 테이블 모델링

  • 처음에 모델링을 하면서 관계형을 어떤식으로 짜야할지 구성을 하였다.

  • 테이블이 많진 않지만 모델링과 관계를 짜기엔 충분했다.

sequelize를 사용해 테이블 생성

  • 테이블 생성은 query문을 사용해서 해보기도 하였고 우리는 그래도 node.js를 사용하는 만큼 javaScript언어로 만들고 싶었기에 sequelize를 사용해서 테이블과 관계들을 생성해 보았다.

폴더 구조

  • 먼저 폴더 구조를 짰을때 Service, Api, models로 짰었는데 이리저리 왔다갔다 스파게티 처럼 구조가 돼 버려서 구조를 다시 재구성 해보았다.

  • 엔드포인트 하나에 service와 controller를 나누고 type을 지정한 것을 interface에 담아서 함께 넣어서 분류를 하였다.

  • 이렇게 하다보니 훨씬 flow이해하는데 도움도 되고 깔끔해 진 것 같다.

Class를 이용한 객체지향적 디자인 패턴

  • 우리는 각 controller나 service 함수를 class형으로 구성한 뒤에 new를 이용해 코드를 구성해 보았다.
    나중에 실수를 좀더 미연에 방지 할 수 있고 객체지향적인 디자인 패턴이라기에 사용했지만 class형이 어떤점이 우수한가는 좀 더 공부를 해 보아야 할 것 같다.

  • 이렇게 직접 만든 데이터 베이스의 데이터를 end point로 접근하여 얻었을때 너무나 기쁘고 즐거웠다.

  • 아직 특정 이벤트 발생시 데이터를 넣고 지우고 수정하는 로직은 짜보지 않았지만 추후에 공부하고 넣어볼 생각이다.

  • react native에서는 컴포넌트의 switch및 이동을 route로 하지 않는다.
    navigation 이라는 것을 사용해 stack으로 쌓기도 하고 tab하여 switch시킨다.

  • 코드를 짜는 것도 어렵지 않았다.
    다만 마음에 걸리는 것은 stack으로 쌓을것은 그 컴포넌트에 다 같이 넣어주어야 했기에 구조가 조금 더러워질 수가 있다는 것이다.

Redux-thunk를 사용해 middle ware 에서 데이터 받아오기

  • 뭔가 공부해본 Redux-thunk를 사용해 보고 싶어서 axios를 통한 데이터 fetch기능을 함수로 만들어 미들웨어에서 처리하도록 만들어 보았다.

  • 이렇게 미들웨어에서 처리해야만 하는 로직들이 분명 있을 것 같다. 나중에 사이드 프로젝트로 그런 처리가 필요한 것들을 만들어 보아야 겠다.

Flatlist를 사용해 컴포넌트 재사용 및 infinite scroll 구현

  • 기존의 React에서 사용했던 map이 React native에서는 Flatlist와 거의 비슷하다고 볼 수 있다.

  • 다른 점이 있다면 Props로 받을 수 있는 것들이 굉장히 많아서 구현하고자 하는 부분에 맞춰서 편하게 Props하나로 구현 가능하다는 것이 장점인 것 같다.
    또한 Flatlist에는 Scroll View가 포함 되어 있어서 굳이 Scroll View로 감싸지 않아도 된다.

  • 기존에 infinite scroll을 만들 때는 useref로 footer의 위치를 찍어서 그 위치를 구한다음 도달 했을때 다시 데이터를 받아오는 형식으로 구현하거나, IntersectionObserver 을 사용해 만들었다.

  • 하지만 Flatlist를 사용하면 onEndReachedThreshold라는 것을 사용해서 먼저 총 길이에서 특정 위치를 잡아주고 onEndReach로 그 위치에 도달했을때 발생할 함수를 넣어주면 바로 infinite scroll을 구현할 수 있다.

Camera, album을 띄워보자

  • 앱을 만드는 것에서 camera를 넣는것은 꼭 해보고 싶었기 때문에 당근마켓에서 없는 기능을 한번 만들어 보았다.

  • expo에 camera 라이브러리가 있어서 그대로 사용해 보았다.

expo install expo-camera
expo install expo-image-picker

  • docs에 있는 그대로 적절히 원하는 대로 사용해서 짜 보았다.
    컴퓨터 시뮬레이터에서는 보이지 않아서 휴대폰 앱에서도 실행 해 보았다.
  • 카메라와 앨범이 아주 잘 나오는 걸 볼 수가 있다.

아쉽게도 찍은 사진과 앨범의 사진을 올리는 기능은 구현하지 못했다.
머릿속 로직은 파일을 바로 AWS S3에 올린 후 그 url을 받아서 데이터 베이스에 저장하는 것인데 나중에 구현해 볼 예정이다.

마치며

이번 토이 프로젝트는 그냥 간단하게 React native를 경험해 보면서 여유있게 공부하며 해볼 생각이었는데 어쩌다보니 Node.js로 백엔드 까지 맡아서 하게 됐다. 처음에는 굉장히 어려울 것 같다는 생각이었는데 막상 해보니 모델링부터 함께 머리를 맞대고 구성하고 데이터베이스와 테이블을 생성하는 것은 어려운 것이 아니었다. 또한 직접 엔드포인트도 나누어 보고 post를 통해 데이터가 들어오고 어떻게 request, response가 이루어 지는지 경험해 보니 협업에 굉장히 도움이 많이 될 것 같았다.

React native를 해보니 나는 그래도 React로 웹 개발 하는 것이 더 좋은가 보다.
JavaScript와 React를 좀 더 깊게 공부해 보아야 할 것 같고 이렇게 토이 프로젝트로 새로운 기술들을 직접 경험하고 공부해 보는 것이 정말 좋은 방법이라고 생각한다. 앞으로도 내가 얼마나 더 발전할 수 있을까 기대가 된다.

Keep going

profile
노래하는 개발자입니다.

3개의 댓글

comment-user-thumbnail
2022년 6월 9일

잘봤습니다

답글 달기
comment-user-thumbnail
2023년 11월 26일

대단하시네요! 총 프로젝트 기간은 어느정도 걸리셨나요?

1개의 답글