[TIL] 220812 코드캠프 30일차

재인·2022년 8월 12일

목록 보기

34/38

Map
SPA - CSR / MPA - SSR
Callback / Promise / Async-Await
MacroTask / MicroTask

카카오 지도 API 가져오기

카카오 개발자 API → 애플리케이션 추가하기 → App키 생성
https://apis.map.kakao.com/
사이트에 들어가서 지도를 띄우는 코드 작성
Nest.js에서는 HTML에 접근하는 방법이 한정적이기 때문에, Head 태그를 사용해 카카오 맵 스크립트를 호출할 수 있는 코드를 추가해 줄 수 있다

 return(
	 <>
			<Head>
				<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey='JavaScript 앱 키 입력'"></script>
			</Head>
	 </>
)

declare const window: typeof globalThis & {
  kakao: any;
}; // window 안에 kakao도 있다고 말해주는 타입

카카오 Docs 에 지도가져온 코드를 작성 후, useRouter를 이용해 버튼을 누를 때
지도를 가져오게 했더니 오류가 일어나게 된다.

하지만 <a>태그를 이용하면 이런 에러가 발생하지 않고 넘어가게 된다.
이유가 무엇인지 알아보자.

`<a>` 태그가 있음에도 useRouter를 사용하는 이유

UseRouter

브라우저에서 해당 주소를 눌렀을 시, 프론트에서 html, css, js를 다운받아 그 페이지를 그려주게 되는데 이 때 모든 페이지를 다 받아오게된다. (SPA, Single Page Application)
SPA는 최초 로딩 시 시간이 걸릴 수 있겠으나 페이지를 이동할 때 시간이 굉장히 빠르다.
첫 랜딩시 frontend서버에서 페이지에 필요한 모든 정보를 넘겨받았고, 페이지 이동 시마다 브라우저에서 페이지를 나타내거나 감추는 형태로 작동하게 된다. (CSR, Client Side Rendering)

`<a>`

a 태그를 이용해 페이지를 이동하는 방식을 MPA(Multi Page Application)라고 부른다.
프론트서버에서 데이터를 그린 뒤 브라우저로 html, css, js를 매번 보내주기 때문에 성능이 좋지 않다.

useRouter를 사용하면 너무 빨라서 데이터가 안받아와져 오류가 발생하고, a태그는 너무 느린데, 어떤 방식을 사용해야 하나?

1. 모든 페이지에 kakao library를 미리 다운받게 _app.tsx에 코드 작성

지도 api를 안쓰는 곳에서도 다운 받기 때문에, 좋지 않은 방법

2. 스크립트가 로드될 때까지 기다린 후 처리하기
https://apis.map.kakao.com/web/documentation/#load_load

스크립트가 로드될 때 까지 기다렸다가 뿌려주려면 useEffect를 사용해 직접 다운로드 받아 다 받을 때까지 기다렸다가 그려주기

query string

script.src =
    "//dapi.kakao.com/v2/maps/sdk.js?appkey=cc653075a49daa7a2446f11dbeae75f7&autoload=false"; 
// app키와 autoload를 같이쓰고싶을 때 &사용 (query string)

Next.js에서 제공하는 `<Link>`

 <Link href="/29-03-kakao-map-routed">
        <a>맵으로 이동하기 !!</a>
      </Link>

링크 태그를 사용하게 되면 두가지 방법의 이점을 모두 가져올 수 있게 된다.
검색 엔진의 최적화(SEO, Search Engine Optimiztion) 차원에서도 이점을 보인다. (시멘틱 태그)

router.push : 게시판 등록할 때 사용
Link : 단순 페이지 로드 시 사용

Callback 함수

예) 특정 API 요청이 끝난 뒤, 그 결과값을 가지고 다른 요청을 실행시켜야 할 때 사용 가능

function aaa(qqq){
	// 함수 로직
}

aaa(function(){}) 
aaa(() => {}) // 화살표 함수일 때

콜백 함수 사용 시 코드

3회의 요청만 들어갔을 뿐인데 코드의 가독성이 떨어지게 된다.
이것을 콜백지옥 이라고 부른다.

Promise

콜백 지옥을 막고자 나온 것

const onClickPromise = () => {
  axios
    .get("http://numbersapi.com/random?min=1&max=200")
    .then((res) => {
      const num = res.data.split(" ")[0];
      return axios.get(`https://koreanjson.com/posts/${num}`);
    })
    .then((res) => {
      const userId = res.data.UserId;
      // prettier-ignore
      return axios.get(`https://koreanjson.com/posts?userId=${userId}`)
    })
    .then((res) => {
      console.log(res.data);
    });
};

콜백에 비해 코드가 간결해졌으나, Promise 사용 시 각 요청들이 체인처럼 연결된다.
이를 프로미스 체인(Promise Chain)이라 부른다.

Promise 사용 시 실행순서가 뒤로 밀리는 문제가 발생한다.

MacroTaskQueue / MicroTaskQueue

export default function EventLoopPage() {
  const onClickTimer = () => {
    console.log("============ 시작합니다 ============");
    // 비동기 작업 (매크로큐에 들어감) //
    setTimeout(() => {
      console.log(
        "⭐️ 저는 setTimeout | 매크로 큐 | 0초 뒤에 실행될 거에요 ⭐️ "
      );
    }, 0); // 1sec

    // 비동기 작업 (마이크로큐에 들어감) //
    new Promise((resolve, reject) => {
      resolve("철수");
    }).then((res) => {
      console.log("저는 Promise | 마이크로큐 | 0초 뒤에 실행될거에요🎉");
    });

    // 비동기 작업 (매크로큐에 들어감) //
    setInterval(() => {
      console.log("저는 Promise | 매크로큐 | 0초 마다 실행될거에요👀");
    });

    let sum = 0;
    for (let i = 0; i <= 9000000000; i++) sum = sum + 1;

    // 비동기 작업 (마이크로큐에 들어감) //
    new Promise((resolve, reject) => {
      resolve("철수");
    }).then((res) => {
      console.log("저는 Promise | 마이크로큐 | 0초 뒤에 실행될거에요🎉 - 2");
    });

    console.log("============ 종료합니다 ============");
  };
  return <button onClick={onClickTimer}>setTimeout 실행시키기</button>;
}