[TIL] #7. 230920

어제 목표 & 오늘 완료한 한 일 

• 웹개발 A to Z 복습
• 웹개발 A to Z 응용
  • 영화 데이터 불러오기 
  • 리뷰 검색
• 알고리즘 문제

 
내일 목표

• 웹개발 A to Z 응용
• 알고리즘 문제

 

구현 내용

메인화면

리뷰화면

검색화면

 

 

발생한 문제와 해결

리뷰화면에서 검색화면으로 검색어를 보내고 제대로 왔는지 확인하기 위해 콘솔창에 찍어봤는데 보낸 그대로의 모습이 아닌, 

%EC%84%BC%EA%B3%BC%20%EC%B9%98%ED%9E%88%EB%A1%9C%EC%9D%98%20%ED%96%89%EB%B0%A9%EB%B6%88%EB%AA%85

이와 같은 모습으로 콘솔창에 보였다.

인터넷에 서치해본 결과, 이는 문자열이 URL로 전달될 때 인코딩되어 전송되기 때문에 이러한 모습으로 보였던 것이다.

이 문제를 해결하기 위해 아래와 같이 decodeURIComponent() 를 이용해 디코딩하여 원래의 문자열로 변환해주었다.

 

참고한 블로그 >> https://it-eldorado.tistory.com/143

let data = location.href.split("?");
let searchWord = decodeURIComponent(data[1]);

---

input에 검색어를 입력 후 엔터를 누르면 검색화면으로 넘어가게끔 구현을 하고자 했다.

이 과정에서 검색화면이 나오지 않고 엔터를 누르게 되면 화면이 새로고침되는 현상이 발생하였고, 과정에 문제가 없는지 확인하기 위해 원래 입력했던 코드 대신 수업시간에 배웠던 것을 이용해 코드를 입력하였다.

$('#search').click(function(e) {
        let searchWord = $('#search').val();
        location.href = 'search.html?' + searchWord;
})

위와 같이 코드를 입력했을 때는 제대로 작동하는 것을 볼 수 있었다. 원인이 무엇인지 생각하는 과정에서 예전에 강의에서 배웠던 e.preventDefault() 가 생각이 나 문제를 해결하게 되었다. 이는 이벤트에 대한 기본 동작을 막는 함수이다. 

 

 

느낀점

파이어베이스 검색을 하는 부분에서 어려움이 있었다. 블로그 참고(https://lts0606.tistory.com/337) + 배웠던 것을 이용해 코드를 작성하여 현재는 정확하게 일치하는 경우만 검색 결과로 나타나지만, 이후에 기회가 된다면 해당 글자를 포함하기만 하더라도 검색결과로 나타나게끔 하고 싶다.

그리고 부트스트랩을 원하는대로 수정하면서 어려움을 느꼈다. 여러 번 사용하면서 자연스럽게 익히게 될지는 모르겠지만 그것이 아니라면 이후에 공부를 해봐야 할 것 같다.