[4주차] 우리 동네 맥주집 컴컴온

[aeuna]

✨ 구현 기능 명세

1. 총 **두가지**의 기능을 제공해요
   1. 지역 기반으로 맥주집 리스트들을 보여줘요.
      1. Geolocation API 를 통해서 현재 위치의 위도와 경도 정보를 얻어와요.
         => getLocation()
      2. 이를 카카오 로컬 API 의 param으로 전달하여 위치기반 맥주집 리스트들을 보여줘요.
         => getMyLocationPub()
   2. 사용자의 입력 값에 따라 해당 위치에 있는 맥주집 리스트들을 보여줘요.
      1. 카카오 로컬 API의 keyword 검색 기능을 사용할거예요.
         => getSpecificLocationPub()
2. 지역기반 검색이 체크되어있을 경우 지역을 입력하는 input 태그는 disabled 시켜주세요.
   => checked 상태를 두어서, 내 지역 기반 인지 키워드 기반인지 판단해주고, disabled={checked} 이런식으로 처리했습니당
3. 결과가 없을 때에는 결과가 없음을 의미하는 UI를 보여주세요.
   => 삼항연산자 사용해서, 결과가 없어요가 뜨도록 했습니다
4. 검색 결과에 따른 각 맥주집은 다음의 정보를 포함하고 있어야 해요.
   1. 공통: 가게 이름, 전화번호, 카카오맵에서의 해당 가게 링크 (가게이름 클릭시 링크로 이동하도록)
   2. 지역기반 검색 : 현재 나로부터의 위치
   3. 특정위치 검색 : 해당 가게의 주소
      => 데이터 가져올때, 가져오고 싶은 정보만 가져오도록 가공하는 함수(getPubInfoList) 사용했어요!
5. 검색하는동안에는 Loading 중임을 나타내는 UI를 보여주세요.
   => 6번으로 스켈레톤 UI 만들었습니당
6. 스켈레톤 UI 만들기

🎁 PR Point

• 로딩 부분이랑 데이터 결과를 요청하지 않았을 때, 요청했을 때 데이터의 길이가 0 이거나 그 이상일 때 따라서 컴포넌트를 보여주려고 삼항연산자를 남발해버렸는데 가독성 있고 클린하게 할 수 있는 방법이 있을까여..?
• 일반 태그 사용하지 않고, 싹 다 스타일드 컴포넌트로 선언해버렸는데 이에 대해 어떻게 생각하시는지 궁금합니다!
• 이벤트 함수나 api 요청 함수 잘 작성했는지 궁금합니다
• axios 사용할 때, then을 사용하는 것이 좋을까요?

😭 어려웠던 점

은근히 비동기 동작 방식이 파악하기가 어려웠어요! promise에 대해서 자료를 더 찾아서 공부해봐야 할 것 같습니다! ㅎㅎ
로딩 표시해줄 때 항상 이미지 하나 가져와서 돌려주는 방식으로만 했었는데, 스켈레톤 UI 사용해보니까 UI 구성적으로 더 좋은 것 같습니당

😎 구현 결과물

https://stately-semifreddo-57c531.netlify.app/

[netlify]

✅ Deploy Preview for stately-semifreddo-57c531 ready!

Name	Link
🔨 Latest commit	9d6090c
🔍 Latest deploy log	https://app.netlify.com/sites/stately-semifreddo-57c531/deploys/627e49da827f48000896d533
😎 Deploy Preview	https://deploy-preview-5--stately-semifreddo-57c531.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

[KimKwon]

스켈레톤 이뿌요