중고 물품 거래 서비스 당근마켓 클론 프로젝트
내가 구현한 기능 🎯
aquery를 사용해 테이블 모델링
sequelize를 사용해 테이블 생성
폴더 구조
엔드포인트 하나에 service와 controller를 나누고 type을 지정한 것을 interface에 담아서 함께 넣어서 분류를 하였다.
이렇게 하다보니 훨씬 flow이해하는데 도움도 되고 깔끔해 진 것 같다.
Class를 이용한 객체지향적 디자인 패턴
이렇게 직접 만든 데이터 베이스의 데이터를 end point로 접근하여 얻었을때 너무나 기쁘고 즐거웠다.
아직 특정 이벤트 발생시 데이터를 넣고 지우고 수정하는 로직은 짜보지 않았지만 추후에 공부하고 넣어볼 생각이다.
뭔가 공부해본 Redux-thunk를 사용해 보고 싶어서 axios를 통한 데이터 fetch기능을 함수로 만들어 미들웨어에서 처리하도록 만들어 보았다.
이렇게 미들웨어에서 처리해야만 하는 로직들이 분명 있을 것 같다. 나중에 사이드 프로젝트로 그런 처리가 필요한 것들을 만들어 보아야 겠다.
기존의 React에서 사용했던 map이 React native에서는 Flatlist와 거의 비슷하다고 볼 수 있다.
다른 점이 있다면 Props로 받을 수 있는 것들이 굉장히 많아서 구현하고자 하는 부분에 맞춰서 편하게 Props하나로 구현 가능하다는 것이 장점인 것 같다.
또한 Flatlist에는 Scroll View가 포함 되어 있어서 굳이 Scroll View로 감싸지 않아도 된다.
기존에 infinite scroll을 만들 때는 useref로 footer의 위치를 찍어서 그 위치를 구한다음 도달 했을때 다시 데이터를 받아오는 형식으로 구현하거나, IntersectionObserver 을 사용해 만들었다.
하지만 Flatlist를 사용하면 onEndReachedThreshold
라는 것을 사용해서 먼저 총 길이에서 특정 위치를 잡아주고 onEndReach
로 그 위치에 도달했을때 발생할 함수를 넣어주면 바로 infinite scroll을 구현할 수 있다.
앱을 만드는 것에서 camera를 넣는것은 꼭 해보고 싶었기 때문에 당근마켓에서 없는 기능을 한번 만들어 보았다.
expo에 camera 라이브러리가 있어서 그대로 사용해 보았다.
expo install expo-camera
expo install expo-image-picker
아쉽게도 찍은 사진과 앨범의 사진을 올리는 기능은 구현하지 못했다.
머릿속 로직은 파일을 바로 AWS S3
에 올린 후 그 url
을 받아서 데이터 베이스에 저장하는 것인데 나중에 구현해 볼 예정이다.
이번 토이 프로젝트는 그냥 간단하게 React native를 경험해 보면서 여유있게 공부하며 해볼 생각이었는데 어쩌다보니 Node.js
로 백엔드 까지 맡아서 하게 됐다. 처음에는 굉장히 어려울 것 같다는 생각이었는데 막상 해보니 모델링부터 함께 머리를 맞대고 구성하고 데이터베이스와 테이블을 생성하는 것은 어려운 것이 아니었다. 또한 직접 엔드포인트도 나누어 보고 post
를 통해 데이터가 들어오고 어떻게 request
, response
가 이루어 지는지 경험해 보니 협업에 굉장히 도움이 많이 될 것 같았다.
React native를 해보니 나는 그래도 React로 웹 개발 하는 것이 더 좋은가 보다.
JavaScript와 React를 좀 더 깊게 공부해 보아야 할 것 같고 이렇게 토이 프로젝트로 새로운 기술들을 직접 경험하고 공부해 보는 것이 정말 좋은 방법이라고 생각한다. 앞으로도 내가 얼마나 더 발전할 수 있을까 기대가 된다.
Keep going
잘봤습니다