2022_02_23

Dalaran·2022년 2월 23일

TIL

목록 보기

22/24

Map

대표적으로 구글 , 네이버, 카카오 지도가 있다.
API key값은 아무리 잘 숨겨도 숨길 수 업다. : 실행될 때 JS로 실행되기 때문에 마음만 먹으면 빼갈 수 있다.
때문에 대부분의 API는 키값이 같아도 등록한 도메인이 아니면 실행이 되지 않게 막아둔다.
만약 키가 노출이 되면 안 되는 중요한 키라면 FE에 두어서는 안된다.
이러한 키는 백엔드에 두고 서비스를 설정한 뒤 FE에서 백엔드로 api 요청을 하는 식으로 사용하여야 한다.
router.puah() & a Tag
a tag - 방식을 사용하면 지도가 잘 뜬다.
: a 로 요청을 하면 Browser에서 FE서버로 요청이 가고 서버에서 페이지를 만든 후 browser로 보내준다. 즉, 누를 떄 마다 페이지가 새로 생성된다. (MPA)
- router.push()를 하면 에러발생 : 처음 접속할 때 서버에서 모든 것을 Browser에 내려준다. 다음 요청부터는 처음 준 자료안에서(Client 측에서) 동작한다. (하나의 큰 페이지에서 동작한다.) (SPA) 처음 접속할때는 시간이 조금 걸리지만 이후로는 빠른 속도를 자랑한다.

SPA - CSR & MPA - SSR

MPA(Multi Page Apllication)
- 요청을 할 때마다 페이지가 생성된다.
- SSR(Server Side Rendering)에 해댱되며 정적 페이지만 줄지, 동적으로 변하는 데이터까지 포함해서 줄것인지 정해야한다.
SPA(Single Page Application)
- 하나의 페이지 안에서 동작한다.
- CSR(Client Side Rendering)에 해당된다.

위와같은 이유때문에 router.push를 하면 지도를 받아오지 못한다.

해결법

모든 페이지에서 받을 수 있게 Head 파일을 _app.tsx로 옮긴다. (비 추천)

: 필요없는 페이지에서도 지도를 다운 받기 때문에 비효율적이다.

useEffect를 사용하여 그 안에 scriptf를 생성 한 후 로드함수를 만든다.(doc참고)

export default function KakaoMapPage() {
  useEffect(() => {
    // 여기서 직접 다운 받고, 다 받을 때 까지 기다려주기

    const script = document.createElement("script"); // <script></script>

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

    script.onload = () => {
      window.kakao.maps.load(function () {
		     ...
		     );
      });
    };
  }, []);

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

    </div>
  );
}

콜백 함수

함수의 인자로 주는 함수 ex) setTimeout(() > {}, 1000), useEffetc(() ⇒ {}, [])

잘못하면 콜백 지옥에 빠질 수 있다.

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]; // 71

      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("최종 결과값");
          console.log(JSON.parse(res.target.response));
        });
      });
    });
  };

Promise

promise를 사용하면서 콜백 지옥이 해결되었다.

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

요청을 기다리지 않고 (promise 상태로) 아래 코드를 실행한다.
때문에 직관적이지 못하다.

async & await

async는 Promise에만 걸 수 있다.
axios와 같이 Promise를 사용하는 것들은 Promise 값이 들어올 때 까지 기다릴 수 있다.

때문에 결과를 변수에 담을 수 있으며 순차적으로 실행되기 떄문에 직관적이다.

const onClickMsyncAwait = 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;

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