🌤 TIL 0223

⬇️ Main Note
https://docs.google.com/document/d/1HNI4Qm7biWEz0RkJoTRn2Ah2W2AcwSfFLroF0v2-C2M/edit

---

🌵 [Map]

When moving to the map page from a page, we don't use router.push. We use <a> tag.

//previous page
import Link from "next/link";
import { useRouter } from "next/router";

export default function KakaoMapPage() {
  return (
    <div>
      // <a href="/29-03-kakao-map-routed">Move to Map Page</a>
      <Link href="/29-03-kakao-map-routed">
        <a>Move to Map Page</a>
      </Link>
    </div>
  );
}

//Map page
import Head from "next/head";
import { useEffect } from "react";

declare const window: typeof globalThis & {
  kakao: any; 
};
export default function KakaoMapPage() {
  const script = document.createElement("script");

  script.src =
    "//dapi.kakao.com/v2/maps/sdk.js?appkey=49d3c5429e18c3d510e928134b830407&autoload=false";
  document.head.appendChild(script);

  script.onload = () => {
    window.kakao.maps.load(function () {
      const container = document.getElementById("map");
      const options = {
        //지도를 생성할 때 필요한 기본 옵션
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 3,
      };
      const map = new window.kakao.maps.Map(container, options);

      // 마커가 표시될 위치
      const markerPosition = new window.kakao.maps.LatLng(
        33.450701,
        126.570667
      );
      // 마커를 생성합니다
      const marker = new window.kakao.maps.Marker({
        position: markerPosition,
      });
      // 마커가 지도 위에 표시되도록 설정합니다
      marker.setMap(map);

      // 클릭 이벤트를 등록
      // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출
      window.kakao.maps.event.addListener(
        map,
        "click",
        function (mouseEvent: any) {
          // 클릭한 위도, 경도 정보를 가져옵니다
          const latlng = mouseEvent.latLng;

          // 마커 위치를 클릭한 위치로 옮깁니다
          marker.setPosition(latlng);
        }
      );
    }),
      [];
  };

  return (
    <div>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
    </div>
  );
}

---

🌵 [CallBack Function]

import axios from "axios";

export default function CallbackPromiseAsyncAwaitPage() {
  const onClickCallback = () => {
    const aaa = new XMLHttpRequest();
    aaa.open("get", "http://numbersapi.com/random?min=1&max=200");
    aaa.send();

    aaa.addEventListener("load", (res: any) => {
      const num = res.target.response.split("")[0]; //random숫자 가져오기

      const bbb = new XMLHttpRequest();
      bbb.open("get", `http://koreanjson.com/posts/${num}`);
      bbb.send();
      bbb.addEventListener("load", (res: any) => {
        const userId = JSON.parse(res.target.response).UserId;

        const ccc = new XMLHttpRequest();
        ccc.open("get", `http://koreanjson.com/posts?userId=${userId}`);
        ccc.send();
        ccc.addEventListener("load", (res: any) => {
          console.log("Final Value ");
          console.log(JSON.parse(res.target.response));
        });
      });
    });
  };

  //   const Result = new Promise((resolve, reject) => {
  //     const ccc = new XMLHttpRequest();
  //     ccc.open("get", `http://koreanjson.com/posts?userId=${userId}`);
  //     ccc.send();
  //     ccc.addEventListener("load", (res: any) => {
  //       resolve(res);
  //     });
  //   }).then((res)=>{})

  const onClickPromise = () => {
    console.log("This is 1");
    const result = axios
      .get("http://numbersapi.com/random?min=1&max=200")
      .then((res) => {
        console.log("This is 2");
        const num = res.data.split("")[0];
        return axios.get(`http://koreanjson.com/posts/${num}`);
      })
      .then((res) => {
        console.log("This is 3");
        const userId = res.data.UserId;
        return axios.get(`http://koreanjson.com/posts?userId=${userId}`);
      })
      .then((res) => {
        console.log("This is 4");
        console.log(res);
      });
    console.log("This is 5");
  };

  const onClickAsyncAwait = async () => {
    const res1 = await axios.get("http://numbersapi.com/random?min=1&max=200");
    const num = res1.data.split("")[0];

    const res2 = await axios.get(`http://koreanjson.com/posts/${num}`);
    const userId = res2.data.UserId;

    //prettier-ignore
    const res3 = await axios.get(`http://kopreanjson.com/posts?userId=${userId}`)
    console.log(res3);

    await fetch();
  };

  return (
    <div>
      <button onClick={onClickCallback}>Request Callback</button>
      <button onClick={onClickPromise}>Request Promise</button>
      <button onClick={onClickAsyncAwait}>Request AsyncAwait</button>
    </div>
  );
}

---