항해 마지막 프로젝트 (2차)
매치 시스템 및 홈 기능
우리 프로젝트의 시작이자 메인 기능인 매치시스템은 유저간의 거리를 비교하여 나온 거리 데이터값과 이름 등을 가독성 좋게 나타내어 다른 유저와 함께 산책을 할 강아지를 찾아보는 기능이다.
이 프로젝트는 웹앱을 기준으로 한 프로젝트이므로 웹앱의 장점은 PC의 기능을 모바일에서도 작동 되게 하기위함과 앱을 까는 유저의 번거로움을 조금 덜어내며 PC를 사용하는 유저의 데이터값도 조사해보고자 웹앱을 선택하였습니다. 따라서 기본 베이스 레이아웃을 설정해 주었고 그 레이아웃을 전체 프로젝트에 둠으로써 위와 같이 휴대폰 모양이 나오는 구조이고 너비가 일정사이즈를 넘어가면 PWA 를 이용하여 모바일에 보다 최적화되어 있는 사이즈가 확인되게 하였습니다.
아래 코드는 메인페이지의 CardList 컴포넌트이며
모달기능과 좋아요 싫어요 버튼을 기능하기 위해 분할작업을 했으며 데이터값을 가져오기 위해서 세션스토리지의 accessToken을 가져와서 헤더에 요청하여 데이터값을 불러왔습니다.
※세션스토리지를 선택한 이유는 화면이 랜더링 될때마다 값이 초기화되는 쿠키는 너무 짧은 데이터기간을 갖으며 데이터가 영구적으로 필요하지않은데 로컬스토리지를 사용하지 않아도 된다고 생각하여 로컬스토리지를 사용하게 되었습니다.
이후 모달을 작동시키기 위하여 useState를 true,false 값으로 수정 가능한 구조를 생각하게 되었습니다.
메인페이지 작업의 트러블슈팅
메인페이지 작업을 하며 겪었던 트러블슈팅은 이미지파일을 여러개 렌더링 받았을때 데이터를 어떤식으로 보여지게 해줘야 할지, 매칭기능이 강아지 단위가 아니라 유저 단위인데 어떤 기준으로 데이터를 수락 거절하게 해야하는 지를 고민하게 되었다.
- 이미지 파일을 여러개 받을때는 map함수를 이용하여 나누게 되면 된다. 하지만 백엔드 단에서 데이터를 다양하게 필요로 하다보니 세분화가 되어있지 않아 데이터를 어떻게 적용 시킬지 고민하게 되었다. 이 때 발견한 오류로는 한 컴포넌트에서 작업하면 오류가 발생한다는 것이다. 또한, 옵셔널 체이닝을 적용하면 데이터의 순서가 어긋나도 작동은 되지만 차 후에 생길 오류를 생각한다면 옵셔널 체이닝을 최소화해야 된다고 생각하여 방안을 생각한것은 구조분해할당을 하여 이미지가 들어있는 데이터값을 useState 로 따로 관리하여 children component 로 넘겨 준뒤 오류를 해결하려고 하였다. 이 방식을 채택했을 때의 장점은 데이터의 관리가 비교적 편했으며 받아온 데이터를 재사용하여 네트워크의 과부화 단계를 생각했을 때 비교적 좋을것 같다고 생각하였다. 하지만, 단점으로는 props 전달이 10개, 15개 같이 더 많은 과정을 거치게 된다면 추적하기 어렵고 유지보수가 고려되어 보여서 이럴때는 확실히 Redux,Recoil 같은 전역상태관리 라이브러리를 사용해야겠다고 생각했습니다.
- 매칭 기능이 강아지 단위가 아니라 유저 단위로 진행되기 때문에 한 유저로부터 여러 강아지를 다 불러와야 한다고 생각하였습니다. 하지만 프로젝트가 유저끼리 만나는 것이긴 하지만 강아지와 함께 산책이라는 취지에서 조금 동떨어져 있을수 있다 판단하여 강아지ID 를 기준으로 데이터를 불러오게 하였고 UserID는 CreatedBy 라는 기능을 추가하여 유저의 Id도 파악하여 데이터값을 같이 보낼수 있는 구조가 되게 하였고 좋아요를 눌렀을 때 매칭이 되는것도 강아지 단위의 프로필을 확인하고 매칭이 될때 유저ID를 기반으로 하여 채팅이 연동되는 단계까지 고안하게 되었습니다. 이 부분에 대해서는 프로젝트의 가치관이 무엇이었는지가 가장 큰 고민이였습니다. 데이터를 가져오고 쓰는것 또한 어떠한 기준이 없이 무방비하게 가져와서 쓰는것보다 목적있게 받아야된다고 판단되어 트러블 슈팅으로 다루게 되었습니다.
프로젝트 디자인 프레임
피그마를 이용하여 만들어 보았는데 이제와서 돌아보니 와이어프레임을 기반으로 많은부분이 수정되면서 변화 하였지만 와이어프레임에서 크게 달라진 내용이 거의 없었다. 오히려 추가된 페이지가 정말 많았던것 같다. 프로젝트는 와이어프레임 단계가 비교적 중요할 수 있겠다라는 생각이 들었던 이유는 만들다보니 필요한 내용도 있고 내가 하고자하는 프로젝트의 기획 단계이기 때문에 차후에 프로젝트가 진행된다면 와이어 프레임 단계도 간과하지않고 조금더 깊게 생각해봐야겠다 생각하게 되었다.