๐ŸŒค TIL 0223

j00b33ยท2022๋…„ 2์›” 23์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
30/33

โฌ‡๏ธ 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>
  );
}

profile
์ฝฑใ…†l

0๊ฐœ์˜ ๋Œ“๊ธ€