새로고침하면 카카오 지도가 하얗게 되는 이유:geolocation으로 좌표를 받아오기 전에 지도가 렌더링되기 때문

오늘 만든 것

클릭하면 페이지 상단으로 가는 TOP버튼 만듬

오른쪽하단 버튼

걍 아래코드를 버튼의 onClick 함수로 넣으면된다.

 

useState

온클릭함수

스타일드컴퍼넌트

리턴하는 코드

 

더보기, 간략히버튼 

왼쪽은 styled-component, 오른쪽은 태그, readMoreHandler함수는 더보기버튼,간략히버튼의 onClick함수이다.

 

버그

카톡지도버그

카톡 주소를 좌표로 변환할 때 기능구현은 되지만 거슬리게 콘솔에 다음과 같은 메시지가 떴다.

자세히 관찰하니 가장 처음에 props로 전달받는 placeAddress 가 빈배열이었다.

따라서 조건문으로 빈배열이 아닐때만 지도에 마커를 표시하는 기능이 실행되도록 조치하였다.

 

const map = new kakao.maps.Map(container, options);
    let geocoder = new kakao.maps.services.Geocoder();
    //아래 반복문을 추가하여 placeAddress가 빈배열이 아닐때만 작동되도록 하였다.
    if (placeAddress) {
      geocoder.addressSearch(placeAddress, function (result, status) {
        
        
        ...(마커, 인포윈도우 생성)..
        
       }

 

 

새로고침하면 지도에 화얀하면만 뜨는 현상

이상하게 새로고침하면 지도가 하얗게 되었다. 그 이유는 navigation.geolocation으로 위치를 받아오기 전에 지도를 만들고 지도에 입력할 좌표가 없는상태이기 때문이다. 2주 프로젝트에서는 새로고침해도 지도가 렌더링 되었던 이유는, 서버에서 좌표를 먼저 받아오고 그 이후 지도를 렌더링하기 때문.

 

이걸 알아내는데 거의 5~6시간을 보냈다..

 

그래도 이유를 알아내니 희열감이 온다.

 

 

아래 내용은 버그라고 하기엔 거창하고 그냥 애로사항, 물론 해결했다.

• 리액트라우터 사용할때 Link태그때문에 밑줄생기는 현상 : Styled component로 해결, 난 <hr /> 써놓고 계속 밑줄 안지워진다고 한참동안 해멨다.

 

 

• API에서 관광지 홈페이지를 응답받았는데 홈페이지가 저렇게 태그로 오는 상황 -> split()으로 해결

innerHTML이나 dangerouslyHTML를 사용하여 해결할 수 있지만 그렇게하면 나쁜유저에게 공격통로를 열어주는 셈이다.

그래서

위와 같이 a 태그안의 href속성 값만 떼왔다.

• API에서 전달받은 문장에 <br>태그가 섞여오는 것 -> 정규표현식으로 해결

정규표현식으로 '<>'가 포함된 모든것 제거하여 해결