음반 앨범에 동봉된 포토카드를 마음껏 원하는 것으로 교환하세요!
음반 앨범에 동봉되어 있는 아이돌 멤버의 포토카드는 랜덤이기 때문에 자신이 원하는 포토카드를 뽑기 어려울 수 있습니다.
그래서 소유한 포토카드를 자신이 원하는 것으로 교환하는 서비스를 기획했습니다.
- 내가 원하는 포토카드로의 교환을 등록하거나, 이미 등록된 교환 중에서 원하는 것이 있다면 바로 교환
- 내가 가지고 있는 소유권을 조회하고, 관리자에게 배송 요청
- 내 닉네임과 프로필 이미지를 수정하고, 배송지 정보 설정
- 플랫폼에서 취급하는 아이돌 그룹과 멤버, 포토카드 정보를 관리
- 사용자에게 소유권을 발급하고, 소유권의 거래 내역 확인
- 사용자가 배송 요청한 소유권을 발송 처리
| FrontEnd | BackEnd | Stoarage | Domain |
|---|---|---|---|
 |
 |
 |
 |
| Netlify | cloudtype | Amazon S3 | Gabia |
ID: admin
PW: admin
ID: user1
PW: 1234
ID: wannav
PW: 1234
이외에 추가로 회원가입 해서 등록도 가능합니다.
이번에 TypeScript 를 처음으로 사용해보게 되었습니다.
interface 와 type 키워드로 새로운 타입을 만들고, 변수들의 타입을 명시적으로 지정해줌으로써 잘못된 동작을 방지할 수 있다는 점이 매력적이었습니다.
또한 변수의 타입이 명확하기 때문에 IDE의 자동완성 기능이 정교해지는데 이 또한 편리함을 가져다 주었습니다.
TypeScript는 JavaScript의 Super-Set 언어이기 때문에 가볍게 생각하고 적용했지만, 타입 지정이나 간단한 제네릭을 제외하고는 많이 활용하지 못한 부분이 아쉽습니다.
핸드북이 굉장히 잘 되어있기 때문에 정독하면서 잘 몰랐던 기능들을 정리해 볼 필요성을 느꼈습니다.
리액트 앱에서 백엔드 서버나 데이터베이스가 가지고 있는 정보를 가져오기 위해 비동기 요청이 발생하는데 각각의 API마다 Success, Loading, Error 등의 상태를 어떻게 관리할 것인지, 또 받아온 데이터는 어디에 저장할 것인지에 대한 고민이 있었습니다.
이번에 서버 상태를 관리하는 React-Query 를 도입해 보았는데 각 데이터에 대한 쿼리 키만 잘 정리하면 요청의 상태를 관리하는 보일러 플레이트를 중복적으로 작성하지 않아도 서버로부터 데이터를 쉽게 가져올 수 있다는 점이 편리했습니다.
로딩 상태에는 원래 컴포넌트와 유사한 형태의 스켈레톤 UI를 보여주도록 작성했는데, 패칭 완료 이후에 가져온 데이터가 없는 경우에는 오히려 부자연스럽게 보였습니다.
또한 로딩 화면에서 실제 화면으로 변화하는 모습을 보여주는 것 보다 백그라운드에서 미리 필요한 데이터를 프리패칭 해서 가져온다면 더 자연스럽게 보여줄 수 있을 텐데 추후에 이런 부분을 개선해 보면 좋을 것입니다.
클라이언트로부터 넘어온 요청의 데이터의 형태를 가지고 처리를 하기 전에 유효성을 검사해야 하는데 이런 부분을 손쉽게 처리할 수 있었습니다.
param, query, body 에 담겨진 각 데이터의 타입이나 범위를 지정한다거나, 기본 값을 준다거나, 전처리 과정으로 데이터를 가공하는 것이 편해졌습니다.
데이터를 가지고 데이터베이스에서 조회한 뒤에 수행해야 하는 유효성 검사 부분도 있었는데, 이 부분도 custom() 을 활용해서 할 방법이 있을 것 같은데 데이터베이스에서 조회한 내용을 이후의 미들웨어로 전달하는 방법이 고민되어서 적용하지 못했습니다. 추후에 좋은 방법을 떠올려서 개선해 보면 좋을 것입니다.