이번에 네이버에서 제공하는 맵 API를 이용해보려 하는데, 예제가 기본적으로 HTML로 되어있고, 외부 JS파일을 script태그로 불러오는 형식으로 예문이 짜여져 있었습니다.
아래는 네이버 Dynamic Map API를 사용한 HTML 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>위 코드의 script를 보면 다음과 같습니다.
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>이 코드와 같이 외부 JS파일을 불러오는 것을 알 수 있었습니다.
그렇다면 React환경인 NextJS에서는 이 파일을 어떻게 불러올 수 있을까요?
😎NextJS에서 제공하는 Script를 이용한다
import Script from 'next/script'
export default function Dashboard() {
return (
<>
<Script src="https://example.com/script.js" />
</>
)
}Nextjs 제공하는 Script컴포넌트를 이용하여 위와 같이 JS파일을 불러올 수 있습니다.
하지만 제가 구현하고자 하는 기능에선 Script파일이 제대로 작동하지 않았습니다. script를 불러오고나서 js함수를 실행시키고자 하였는데, 이러한 과정에서 순서가 잘 못된 것 같았습니다. 물론 어찌저찌 해결할 순 있었겠지만, 보다 보기좋게 만들기 위해서 다음과 같은 방법을 사용했습니다.
😎useEffect 내부 자바스크립트 코드를 사용하여 script태그 삽입하기
export default function Dashboard() {
useEffect(()=>{
const script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.head.appendChild(script);
script.onload = () => {
//파일을 불러오고 나서 실행할 코드를 작성해주세요.
}
},[])
return ...
위와 같은 방법은 바닐라 JS를 이용한 코드로, script를 불러오고 나서, 곧바로 JS코드를 사용할 수 있다는 장점이 있습니다. 개인적으로 훨씬 가독성이 좋다고 생각되었는데, 컴포넌트 관리를 잘한다면 Scirpt 컴포넌트를 사용하는게 더 깔끔할 거란 생각입니다.
'Front End > Next' 카테고리의 다른 글
| Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1) (0) | 2023.12.09 |
|---|---|
| Next.js, Typescript 환경에서 라이브러리 “모듈에 대한 선언 파일을 찾을 수 없습니다” 에러 (0) | 2023.12.07 |
| Next.js에서 Clerk.js 사용하여 구글 연동 로그인 만들기 (0) | 2023.11.16 |
| [Next.js] 전역 객체, .env 타입 설정하기 (0) | 2023.10.09 |
| Next.js 13버전에서 글꼴 변경하기 폰트 설정하기 (0) | 2023.07.17 |