몽몽 🐾 가족이 될 준비 되셨나요?

프로젝트 이름

몽몽 🐾

GitHub - leechi/mongmong: 몽몽🐾 가족이 될 준비 되셨나요?

기술 스택

F : HTML SCSS React

B : Node.js Mysql

프로젝트 기간

9.29(금) ~ 10.3(화)

프로젝트 개요 

이 프로젝트는 "몽몽 가족이 될 준비가 됐나요?"라는 슬로건을 시작으로, 강아지를 구매하거나 입양하기 전에 사전에 필요한 공부를 하고, 동물 복지와 보호에 대한 정보를 제공하는 웹페이지를 만드는 것을 목표로 합니다. 이 웹페이지는 유기 동물 보호 API를 활용하여 실시간으로 동물 보호소의 정보와 유기 동물들의 상태 등을 제공할 것입니다. 이를 통해 사용자들은 강아지 입양 전에 적절한 지식과 인식을 갖추고, 유기 동물들에게 사랑과 관심을 기울일 수 있습니다.

 

프로젝트 내용

애완동물은 우리 생활에서 소중한 존재로 자리 잡고 있습니다. 특히 강아지는 그 중에서도 가장 사랑받고 있는 반려동물입니다. 그러나 많은 사람들이 단순한 마음으로 강아지를 구매하거나 입양하는 경우가 많습니다. 이로 인해 부적절한 관리나 버림 현상이 발생하여 유기 동물 문제가 심각해지고 있습니다.

"몽몽 가족이 될 준비가 됐나요?"라는 슬로건 아래, 우리 프로젝트는 이러한 문제에 대한 인식을 제시합니다. 우선, 강아지를 구매하거나 입양하기 전에 미리 필요한 공부를 진행하는 것이 중요합니다. 어느 종류의 견종이 내 성격과 생활환경과 잘 맞을까? 어느 정도의 건강관리와 훈련이 필요할까? 등 다양한 면에서 충분히 숙지하고 결정하는 것은 무엇보다 중요합니다.

더 나아가, 우리 프로젝트에서는 유기 복지 동물 보호 API(응용 프로그래밍 인터페이스)를 활용하여 실시간으로 동물 보호소의 정보와 유기 동물들의 상태 등을 제공하는 웹페이지를 개발합니다. 이 웹페이지에서 사용자들은 현재 입양 가능한 유기동물 리스트 등을 확인할 수 있습니다.

 

프로젝트 데모

--- 동영상 ---

 

 

배웠던 사항

params & id

파라미터를 사용해서 여러개의 상세페이지를 만들때 data 고유의 id값을 활용하자.

지금 생각하면 너무나도 당연한 이야기이지만 그전에는 어떻게 해야할까 고민이 됐었다. 

우선 나는 useParams를 이용해서 data를 받아왔다. 처음에는 

 dog.dog.map((data, i) => (
  <div onClick={()=>navigate(`/doglist/detail/${i+1}`)}>
    <img src={`/image/dog${i+1}.jpeg`} className='dog-list__list'/>
    <span className='dog-list__name'>{dog.dog[i].name}</span>
  </div>
))

이런식으로 map함수 돌린 후 params로 받아와줬다.

let { id } = useParams()

하지만 나중의 정렬기능을 만들고 적용시킬 것을 고려해보니 확장성있는 코드가 아니라는 생각이 들었다. 

 

그러다 고유 id값을 만들어서 만들게 되면 정렬이 되어도 그 특정값을 불러올 수 있을거라는 확신이 들었고

 

data값을 만들고 이렇게 만들어주었다.

  <div onClick={()=>navigate(`/doglist/detail/${dog.dog[i].id}`)}>

그리고 받아온 데이터를 사용해야하는데 id값이랑 정확히 일치하는 data를 가지고 싶어서 find함수를 사용을 했다. 

 

여기서 find함수를 선택하게 된 이유는 filter함수라는 대체 함수가 있었지만 find는 딱 한개만을 사용할때 더 효율적이라고 생각이 들어서 find함수를 통해 구해보았다.

 let dogs = dog.dog.find((x) => {
    return x.id == id
 })

그리고 이렇게 구한 값을 가지고 데이터를 구해주었다.

---

API

axios.get('url').then(res => {
  const data = res.data.AbdmAnimalProtect[1].row;
  const speciesNames = data.map(item => item.SPECIES_NM);
  const dogsApiResult = data.filter(dogs => dogs.SPECIES_NM.includes('비글'))
  setDog(dogsApiResult)
})
}, [])

어떤 로직인지 간단하게 설명하자면 각 종의 맞는 유기견 api를 받아와야했다. 

그래서 어떻게 구현을 해볼까 하다가 알고리즘문제를 풀면서 공부했던걸 활용해보았다.

filter와 includes 메소드들의 조합인데 우선 filter로 맞는 틀을 만들고 조건안에 includes 포함이 되면 조건이 참이 되게 만드는 

로직을 작성해보았다. 비글값을 받아오게 되면 이제 자연스럽게 비글 관련된 유기 정보들이 나오게 된다.

그렇게 하면 이렇게 원하는 유기견 api가 나오게 된다.

 

 

느낀점

🫨 프로그래밍은 프로젝트를 하면서 자신의 부족한 부분을 찾게 되는 것 같다. 

이번에 가장 부족하다고 느꼈던 부분은 그리드 시스템을 잘 활용하지 못 한 부분이었다. 

분명 틀이 존재하면 더 완성도 높은 프로젝트가 될 것인데 그렇게 하지않고 내 느낌에 의존만 하였다. 

그래서 크게 만족스럽지 못 했다. 

 

그리고 다음으로는 api 활용 능력이다. 

사실 api 문서를 읽는것에 대한 두려움이 조금 존재한다. 이대로 했는데 안 되면 어떻게 하지.. 라는 막연한 두려움이었다. 

그래서 계속 미루다가 마지막날에 공부를 하고 써보았는데.. 

 

의외로 너무 쉽게 풀렸다. 1시간정도 검색해보고 하니 꽤 빨리 알게 되었고, 두려움이 조금 줄었다. 

 

하지만 그래도 여전히 영어 문서를 읽는건 쉽지 않았다 😵

 

차근차근 하나씩 읽어가며 문제를 해결해나가봐야겠다.