프로젝트 이름 : Badari(반다리)
동기
위치기반 API는 평소에 사용해보고싶었기 때문에 어떤 서비스를 구현하면 좋을까
생각하다가 내가 갖고있는 어려움을 해결할 수 있는 웹을 만들어보자 고민했다.
현재 반려동물을 키우고 있는데 강아지는 알러지가 있거나 입맛에 맞지 않으면
생각보다 버리게 되는 간식이나 사료가 너무 많은데, 주변에 반려동물을 키우는
지인이 없으면 그냥 쓰레기가 되는것이 환경적으로도, 경제적인 면에서도 너무 아깝다는
생각을 해서 반려동물 중고거래사이트를 만들어보고자 했다.맡은 역할
Front-End기간
2주사용기술스택
Front-End : HTML/CSS, Javascript, React, Redux
Back-End : Node.js, Sequalize, Express, MySql, Socket.io
ETC : Kakao API프로젝트 진행
1. Redux
UI구성을 마치니 페이지에 공통적으로 전달해야하는 요소들이 꽤 있어서 리덕스를 적극활용하고자 했다. 리덕스의 store는 유저id,유저의 petid, 현재위치, 홈페이지테마를 저장한다.
petid의 경우 판매글을 쓸 때 판매할 용품을 사용한 반려동물 지정시 필요한 정보다. userId가 저장되어있어 판매하기 버튼을 누르면 Pet 디비에 가서 userId로 펫을 조회할 수 있지만 그렇게 모든 pet마다 조회하는 것보다는 petId를 저장해둬서 바로 데이터를 가져오면 좋겠다고 생각했다.
현재 위치의 경우도 마찬가지로 판매게시판에서 사용되는데 글 조회 뿐만아니라 역시 판매하기 작성시 자동으로 본인의 위치값이 들어가게 되는데 매번 geolocation으로 위치값을 조회하지 않기 위해 사용했다. 최초 렌더링시 App.js에서 geolocation으로 사용자의 위치값을 읽어오고, dispatch로 store에 값을 저장한다.
2. 네비게이션 / 카테고리
이번 프로젝트때 가장 많이 신경쓴 점은 네브바와 카테고리다.
홈페이지는 기본/강아지/고양이로 테마를 구분할 수 있는데 이건 css처리시 사용될 뿐만 아니라 판매 페이지에서 상품을 조회할 때 사용되기도 한다. 따라서 버튼을 클릭하면 useDispatch로 상태값을 Redux store에 저장해 모든 페이지에서 사용할 수 있게 처리했다.
중고거래사이트면서 채팅을 사용하는 특성상 모바일 환경에서 쓰일것을 고려해 카테고리도 반응형으로 제작했다. 개인적으로 부트스트랩을 사용하지 않고 css 커스텀하는 것을 선호해 햄버거바로 만드는 것도 모두 mediaquery를 사용했다.
같은 이유로 회원정보 수정 버튼 클릭시 뜨는 모달창을 제작했는데, 버튼 클릭 여부를 useState를 활용해 상태값을 저장해 리렌더링을 막고, 그 상태값에 따라서 모달창이 뜨게 만들었다.
3. 채팅
그 다음 신경쓴 부분은 채팅창이다. 모달창 제작한 방식과 마찬가지로 채팅방 클릭 여부 상태를 useState로 저장했고, state에 따라서 채팅리스트가 보일지, 채팅이 보일지 삼항연산자를 통해 화면을 구성했다. 역시 redux에 테마 상태를 저장했기 때문에 테마를 useSelector를 이용해 가져와 className을 설정해주었다.
4. 비동기처리
프로젝트를 진행하면서 리액트의 작동방식을 이해하는데 도움이 됐다. 특히 자바스크립트의 비동기처리방식으로 인해 다양한 에러를 겪거나 생각한 방식으로 작동되지 않았는데 이를 통해 언제 async/await를 사용해야하는지 이해할 수 있었다.
리덕스를 사용하면서 리덕스는 새로고침하면 state가 날라간다는 사실을 간과하고 있었음을 깨달았고 따라서 새로고침시에도 유지되어야 할 값, 예를들면 로그인한 사용자의 정보같은것은 Session Storage에 저장해 새로고침시에 Session Storage에 값이 있으면 리덕스에 저장해주고 아닐경우 다른 화면을 보여주거나 유저가 가능한 이벤트를 제한했다.
아쉬웠던점
가장 아쉬운점은 제로웨이브때와 마찬가지로 geolocation을 사용할 때 배포시 https가 아니라 발생하는 보안문제로 인해 실시간 위치값을 잡기가 어려웠던 것이다. 이것도 팀과 함께 논의해서 다른 api를 찾아본다던가 하면서 디벨롭해야겠다.
230314
http를 https로 바꿔야했는데 도메인을 구매하기로 결정!
이제 https://bandari.store/로 이동하면 된다
후기
이번 프로젝트에서는 디비에 정보를 저장하고 가져오는데 팀원분들과 많은 고민을 했다. 비록 내가 프론트엔드 개발자를 꿈꾸지만 웹개발자라면 프론트,백과 상관없이 데이터는 기본이다...
디비가 유저, 펫, 펫용품, 이미지, 좋아요, 채팅방, 채팅 이렇게 총 7개의 테이블이 있었다. 내가 했던 프로젝트중엔 가장 많은 테이블이었고 각 정보를 조인해서 가져오는 경우가 많았다. 아예 디비에서 데이터를 가져올때 필터링을 거쳐서 가져올지, 아니면 프론트에서 자바스크립트로 필요한 데이터를 필터링하는게 좋을지 등 조금 더 빠르게 값을 가져오고 화면에 뿌릴 수 있을지에 대한 팀원들간의 논의를 거치면서 프로젝트를 진행해왔다.
테이블이 많고 이로인해 어려움이 많았지만, 그 만큼 다양한 가능성을 생각해보고 논의하며 다른사람의 생각도 들어보고 나도 많은 생각을 해볼 수 있던 소중한 경험이었다! 그리고 이제 디벨롭을 해보자..
