inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next.js 시작하기(feat. 지도 서비스 개발)

next/script로 네이버 지도 불러오기

onLoad함수 (script태그의 onLoad X)

해결된 질문

426

google_user

작성한 질문수 28

1

Map.tsx에서

//Map.tsx

if (onLoad) {
      onLoad(map);
    }

이 구문은 왜 쓰인걸까요??

MapSection.tsx 에서 Map을 부르는 부분을 봐도

// MapSection.tsx

import Map from "./Map";

const MapSection = () => {
  return (
    <Map
      onLoad={() => {
        console.log("load!");
      }}
    />
  );
};

export default MapSection;

별다른 기능을 하는 것 같지는 않아서요.

onLoad를 정의하고 있는 Map.tsx의 Props에서도

type Props = {
  mapId?: string;
  initialCenter?: Coordinates;
  initialZoom?: number;
  onLoad?: (map: NaverMap) => void;
};

변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데,

혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요??

 

++ 추가로,

const map = new window.naver.maps.Map(mapId, mapOptions);

이렇게 했을 때, 어떻게

<div id={mapId} style={{ width: "100%", height: "100%" }} />

이 태그에 Map이 들어가는지 궁금합니다!

seo next.js vercel csr ssg ssr

답변 1

1

박용주

안녕하세요. 질문 감사합니다.

  1. 이어지는 3-3~3-5 강의에서 MapSection.tsx의 onLoad 함수를 추가로 작성하게 됩니다. 깔끔한 코드를 위해 미리 prop을 분리해두었습니다ㅎㅎ

  2. 해당 코드가 naver map API에서 지정한 문법이기 때문입니다. naver map 객체를 생성할 때 naver.maps.Map 클래스를 사용하고, 첫번째 인자로 지도를 삽입할 HTML 요소 혹은 id를 받습니다. 이해를 위해 해당 API 링크 첨부드립니다! (https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html)


    +해당 강의의 설명란에 있는 '네이버 script load 예제'도 보시면 도움이 될 것 같습니다.
    image

감사합니다. :)

0

google_user

감사합니다!!!!!

API 라우터를 사용해야 하는 경우에 대해

1

150

1

키보드 어떤 거 사용하시나요

1

352

1

next.js 멀티플 런타임 관련해서 질문 올립니다..

1

358

2

아주 기초적인 질문입니다.

1

322

1

서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?

1

1170

2

수업을 듣다가 SSR에 관하여..

1

551

2

interface 와 type

1

376

1

엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.

1

384

1

dynamic에 대한 질문

1

447

1

SSR vs SSG

1

476

2

NoSSR 관련한 질문입니다:)

1

376

1

a tag 질문 !

1

327

2

8분 20초 배포 관련

1

324

2

안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다

0

2678

2

emotion styles 파일이 빌드시 경고로 뜹니다.

1

438

1

naver map 이 출력되지 않습니다.

1

481

1

페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?

1

264

2

Failed to load resource: the server responded with a status of 404 ()

1

1034

2

VSCode 익스텐션 궁금합니다.

1

356

1

상태관리 질문 있습니다!

1

449

1

swr에 대한 질문입니다. (용어 관련)

1

372

1

swr 질문입니다!

1

337

1

안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.

1

679

2

naver로고 important 값 주는 이유

1

366

2