카카오 map API대신 주소가 적힌 지도로 이동하는 코드로 수정

https://jeong-ga.tistory.com/61

react - kakao map API 설정하기

API를 사용하여 지도가 표시되게 하는 코드는 앞서 작성했다.

진행사항을 확인받는 과정에서 해당 페이지의 의도에 맞게 사용하기 위해서는 화면에 지도가 표시될 필요가 없으며, 차라리 클릭하면 지도로 이동하는 게 낫다는 피드백을 받았다!

 

그래서 API기능을 삭제하고 <a href>를 이용하여 카카오 지도로 이동하는 기능을 추가하였다.

 

---

 

카카오 지도 주소 찾는 방법



카카오 지도에서 주소를 검색하면 마커가 확인되고, 공유 버튼을 클릭하면 URL복사를 할 수 있다.

 

url을 복사하여 주소창에 붙여넣기하면 위와 같은 주소가 확인된다.

 

https://map.kakao.com/?map_type=TYPE_MAP&q=%EA%B2%BD%EA%B8%B0+%EC%84%B1%EB%82%A8%EC%8B%9C+%EB%B6%84%EB%8B%B9%EA%B5%AC+%EC%A0%95%EC%9E%90%EC%9D%BC%EB%A1%9C+95&urlLevel=2&urlX=523300&urlY=1072111



이대로 복사를 하면 위처럼 암호화되어 복사가 되는데 어차피 필요한 주소는 따로 불러와 사용할 것이기 때문에 이대로 복사를 한다.

 

그리고 확인해보니 + 기호는 띄어쓰기 대신에 들어가는 기호이며, 띄어쓰기 유무는 링크 이동에 영향을 끼치지 않는다.

따라서 불러오는 데이타에 띄어쓰기를 삭제하거나, 띄어쓰기 대신 + 기호로 변환하여 사용하면 된다.

 

---

function Company() {
  const mapLinkAdress = useRef("");

  useDidMountEffect(() => {
    ...
    mapLinkAdress.current = companyDetail.address.replace(/ /gi, "+");
  }, [companyDetail]);

  return (
            <li className="detailHead">
              <h4>주소</h4>
              <span>{companyDetail.address}</span>
                  <a
                    className="linkAnchorBg"
                    target="_blank"
                    rel="noopener noreferrer"
                    href={`https://map.kakao.com/?map_type=TYPE_MAP&q=${mapLinkAdress.current}&urlLevel=2&urlX=469847&urlY=1057028`}
                  >
                    지도 링크이동
                  </a>
            </li>
  );
}
export default Company;

따라서 위와 같이 작성하였다.

useEffect내부에 작성하기 위하여 선언문을 먼저 작성하였고, 값이 바뀔 때마다 렌더링이 다시 될 필요가 없기 때문에 useRef로 작성!

하지만 data가 불러와지기 전 첫 렌더링을 할 필요가 없기 때문에 첫 렌더링을 막고,

useState, companyDetail의 값이 변경될 때 이미 선언한 mapLickAddress에 값을 할당하도록 하였다.

 

 

🚧

Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendationseslintreact/jsx-no-target-blank

target에 _blank를 작성하니 위와 같은 오류가 확인되었는데 이것은

 rel="noopener noreferrer"

를 추가하니 해결되었다.

 

a 태그를 사용하면 이동하는 페이지가 어떻게 열릴지에 대한 어트리뷰트를 작성하게 되는데

http://www.tcpschool.com/html-tag-attrs/a-target

코딩교육 티씨피스쿨

그중 _blank를 사용하게 되면 새로운 윈도우나 탭에서 오픈하게 되고 이과정에서 피싱사이트에 노출될 수 있기 때문이다.

 

Target="_blank" - the most underestimated vulnerability ever

 

링크에 noopener noreferrer 사용하는 이유