1. 프로젝트 설명
💡 유기견, 유기묘들과 입양 희망자를 한번에 연결해주는 징검다리
- 유기견, 유기묘를 입양하려고 하는 사람들이 원하는 정보가 흩어져 있다는 기존의 불편함을 해결하기 위해 기획
- 동물들에 대한 정보를 한눈에 파악하고, 자세한 정보를 얻을 수 있는 서비스
- 기능
- 보호소가 등록한 동물 조회
- 동물들의 히스토리 조회
- 임시보호자와 1:1 채팅
- 관심동물 즐겨찾기 기능
2. KPT
Keep
- 상태관리 라이브러리를 이용해서 중요한 state들을 저장해두는 게 유용하다
- styled-components를 사용해서 css를 적용하는 게 더 편하다(재사용성 정말로 와닿았다)
Problem & Try
- 필터링 기능
→ 사용자가 필터링하고 싶은 조건을 서버에게 보내면, 서버에서 필터링한 데이터를 전달받는 방식으로 해결했다
- 쿼리스트링을 이용한 페이지 버튼 구현
→ axios 통신을 할 때 파라미터로 값을 보내주는 방식으로 해결했다
- 두개의 api가 동일한 페이지 버튼을 사용할 때 api를 구분해서 통신 결과를 화면에 적용하는 법
→ PageButton 컴포넌트를 따로 분리를 하고 그 안에서 페이지 기능을 담당한다
→ click이라는 true / false 변수를 생성
→ 초깃값은 false, 필터링 버튼을 누르면 click = true
→ click의 값에 따라서 통신하는 api를 다르게 한다
→ 부모 컴포넌트에게 데이터를 전달해주고 부모 컴포넌트에서 데이터 처리
- 회원별로 랜덤 이미지를 배정하는 법
→ 이미지 배열을 생성 후 배열의 요소들을 인덱스로 접근하는 방식으로 구현했다
- 로그인, 로그아웃 기능
→ Recoil 상태관리 라이브러리를 사용해서 구현했다
3. 느낀 점
- PM, 리액트 개발, 서버와의 협업 등 처음 해보는 것들이 많았는데 정말 많은 것을 배울 수 있었다
- 여럿이서 개발하니까 겹치는 기능이 분명히 있는데 (예를 들면 axios 통신 코드) 내가 짠 코드보다 남이 짠 코드가 더 효율적일 때가 있어서, 그런 코드들을 배운 적도 많았다
- 통신을 구현하고 테스트하는데서 많은 시간이 걸린다
- 통신에서 4xx 에러가 나면 url 부터 제대로 확인하자! 80%는 이거로 해결했다
- 상태관리 라이브러리를 사용하면 정말 유용하고 편한데, 너무 남용하지는 않아야 한다고 생각했다! 꼭 필요한 것만 상태관리 적용하기!
