31일차_기능 구현하기

오늘 한 것

- 안전교육 이수받기(학교)

- 중간고사 준비(학교)

- 심화 4주차 강의 듣기

- 프로젝트 기능 구현하기

  * 기존 장소와 추천 장소 마커 동일하게 표시 

  * 검색 및 추천목록 출력시 체크박스로 반려동물 동반가능한 장소만 출력

 

 

 

프로젝트 기능 구현하기

 

수정

어제 했던 좋아요를 누르려고 하면 로그인 창을 띄우는 기능을 구현하는 것에서

minlength가 실행이 안되서 alert으로 변경했다.

로그인 할 때 id가 4자 미만이면 다시 입력하라는 alert창을 띄울 때 

if문으로 입력값의 길이를 정했는데 아무생각 없이 len 했다가

console에 오류뜬 거보고 왜 len이 정의되지 않았다고 뜨지 했다가

len이 아니라 length구나를 뒤늦게 알았다.😂

 

 

 

기존 장소와 추천 장소 마커 동일하게 표시 기능 구현

다음주 화요일까지 2차 프로젝트를 완료해야하는데 좋아요 기능 구현하는게 너무 시간을 오래끌면 

아무것도 못하게 되는 거라서 그 전에 내가 맡은 기능들을 다 하고 시간이 걸리는 것을 집중적으로 해야할 것 같아 

먼저 구현하게 되었다.

 

좌표를 가져와서 주소를 가져와야하는데 카카오 api 설명보면 뭔소린지 몰라서 구글링해서

잘 짜여져 있는 코드를 가지고 몇 번 이것 저것 만지다가 실행이 되었다. 👍🏻👍🏻

https://wondongho.tistory.com/175

 

console창 보면 에러 메세지가 뜨는데 마커에 마우스를 갖다대면 주소가 아직까진 잘 뜬다.

 

 

 

검색 및 추천목록 출력시 체크박스로 반려동물 동반가능한 장소만 출력 기능 구현

이 기능은 이 전에 구현 했던 기능들과 함께 붙여가면서 실행해나가고 있다. (아래는 현재 구현한 기능)

- 반려동물 입장 가능 버튼 클릭 시 해당 장소만 출력

- 반려동물 입장 가능 버튼 한번 더 누를 시 전체 추천 장소로 출력

- 좋아요 +1 제한

- 추천장소 마커 클릭 시 장소 이름과 주소 띄우기

 

 

처음에 코드를 작성할 때는 

리뷰에 체크를 하면 db에 Ture로 저장

보여줄 때 체크박스 띄우면 db에 with=True인 것들만 띄우기

이렇게 적고 코드를 짜기 시작했다.

 

리뷰작성할 때 체크박스

처음에 리뷰를 작성할 때 반려동물 가능 체크박스를 둬서 체크를 하면 True

체크를 하지 않으면 False로 줘서 db에 저장을 하려고 했다.

 

체크박스가 체크되었는지 유무를 어떻게 하지? 하고 보다가 찾아낸 코드..!!

if ($("input:checkbox[id=customCheck1]").is(":checked") == true) {

https://developer-jjun.tistory.com/44

 

이렇게 작성했더니 db에 체크박스에 체크를 하면 True 아니면 False로 저장이 잘 되었다.

 

메인화면의 체크박스

실행이 잘 되서 메인 화면에도 같은 체크박스를 두고 id 값을 다르게 해서 

메인 체크박스가 체크되면 db에 Ture로 저장된 것만 가져오는 것으로 하려고 했는데

체크를 해도 인식이 안된다.(console로 했는데 안찍힌다,,)

 

그래서 이번에는 체크박스가 아니라 button을 만들어서 button을 클릭 시 

반려동물 동반 가게만 띄우려고 했다.

그런데 브라우저를 실행시키면 자동적으로 모든 추천장소들이 떠서 겹쳐져서 띄워졌다.

(기존 코드가 브라우저를 실행시키면 추천장소가 띄워지도록 작성되었다.)

또 버튼을 여러 번 누르면 계속 같은 장소들이 여러 번 추천 목록에 띄워졌다.

 

현재 최종 수정 된 코드는

기존에 추천 장소 함수말고 반려동물 동반 장소만 따로 담는 함수를 만들고

반려동물 동반 버튼을 클릭하면 a함수로 이동해서 클릭 횟수에 따라 전체와 동반 장소 함수가 각각 실행되고

그 전에 추천 리스트는 empty()를 활용해 지웠다.

(함수를 실행했다가 취소하는 방법이 있을까 구글링하다가 코드를 보니 추천 리스트 id 값에 db를 넣고 있는 것을 보고 생각했다.)

 

브라우저를 실행시키면 추천 장소가 바로 띄워지는 게 아니라 

반려동물 동반 버튼을 클릭 시 그 가게만 띄워지고

한번 더 누르면 반려동물 동반 장소가 아닌 전체 추천 장소 리스트로 띄워지게 했다.

 

gif

 

 

앞으로 해야할 일

리뷰를 등록을 하면 장소가 저장이 되는데 리뷰를 여러 번 등록하게 되면

검색 및 추천목록 출력시 체크박스로 반려동물 동반가능한 장소만 출력하게 할 때 

그대로 추천 목록에 띄워져서 중복이 된다.

find 대신 distinct를 사용했더니 에러가 뜬다. 여기에 대해서 좀 더 알아봐야겠다.

 

반려동물 동반 장소 버튼 클릭을 2번하면 반려동물 동반 장소 여부와 관계없이 전체 추전 장소로 뜨는데  

버튼은 클릭 여부와 관계없이 반려동물 입장 가능 버튼으로 되어있다.

버튼을 클릭할 때마다 버튼 안의 글이 바뀌거나 버튼을 2개 만들어서 

입장가능 버튼과 전체 보기 버튼을 만들어 구분지어놔야겠다.

 

어제 수정한 코드와 오늘 작성한 코드를 git에 올리고 장소 중복제거까지 마무리가 된다면

4주차 심화 강의를 마저 다 듣고 좋아요 기능 구현에 올인할 수 있을 것 같다..!!