1. 지도 연동?! 굉장히 쉽잖아 -> Map
2. 싱글 페이지 어플리케이션? 1페이지만 있는 건가? -> SPA - CSR / MPA - SSR
3. 콜백함수? 내가 아는 함수랑 다른건가? -> Callback / Callback-Hell
4. 프로미스? 콜백보다 좋군! -> Promise / Promise-Chain
5. 태스크큐는 사실 여러 종류가 있다면서? -> MacroTask / MicroTask
지도(카카오맵)
네이버, 구글, 카카오 다 비용이 다름
깃허브, 트위터, 페이스북, 카카오, 네이버 개발자 페이지가 있고 거기 있는 api들 사용 가능(돈은 내야함)
https://apis.map.kakao.com/web/guide/
import Head from "next/head"; // Head에 넣어줘야하므로 Head import
import { useEffect } from "react";
// 윈도우에 카카오 있어! 라고 알려주는 것
declare const window: typeof globalThis & {
kakao: any;
};
// window.alert()
// window.confirm()
// window.kakao // 이렇게 생긴 것
export default function KakaoMapPage() {
useEffect(() => {
const container = document.getElementById("map"); // 지도를 담을 영역의 DOM
const options = {
// 지도를 생성할 때 필요한 기본 옵션
center: new window.kakao.maps.LatLng(37.4923, 126.9208), // 지도의 중심좌표.
level: 3, // 지도의 레벨(확대, 축소 정도)
};
// const map =
new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
// 왼쪽 태그에 오른쪽 컨테이너, 옵션 이걸 그려라~
// 2차적인 작업할거면 그려야하지만 지금은 아니니까 안 담아도 된다.
// 이게 되네!!!
}, []);
// 아까 그린 div에 지도 그려줘 해야하니까 useEffect
return (
<>
<Head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey={앱키 넣는 곳}"
></script>
</Head>
<div id="map" style={{ width: "500px", height: "400px" }}></div> // 지도 그려줄 div
</>
);
}1. 네모 그리기
2. 라이브러리 다운로드
3. 지도 그리기
// 마커 표시하기
import Head from "next/head";
import { useEffect } from "react";
// 윈도우에 카카오 있어!
declare const window: typeof globalThis & {
kakao: any;
};
export default function KakaoMapPage() {
useEffect(() => {
// 여기서 스크립트를 받고 받을 때까지 기다릴거야.
// createElement el이 태그
const script = document.createElement("script"); // <script></script>와 같음
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?appkey={앱키 넣는 곳}&autoload=false"; // autoload를 false로 보내야 SPA에서 문제 안 생김
document.head.appendChild(script); // 헤드 자식으로 script 넣을거야
// 로드 되면 그 때 얘네 실행시켜줘! + 카카오 라이브러리도 다운되어야해.(독스 고고)
script.onload = () => {
window.kakao.maps.load(function () {
const container = document.getElementById("map"); // 지도를 담을 영역의 DOM
const options = {
// 지도를 생성할 때 필요한 기본 옵션
center: new window.kakao.maps.LatLng(37.4923, 126.9208), // 지도의 중심좌표.
level: 3, // 지도의 레벨(확대, 축소 정도)
};
const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
// 마커가 표시될 위치입니다
const markerPosition = new window.kakao.maps.LatLng(37.4923, 126.9208);
// 마커를 생성합니다
const marker = new window.kakao.maps.Marker({
position: markerPosition,
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
});
};
}, []);
...여기서 라우팅 페이지와 라우티드 페이지를 나누고
<a href="/29-03-kakao-map-routed">맵으로 이동하기!</a>이렇게 앵커 태그를 이용해서 이동하는 방식과 주소 엔터쳐서 이동하는 건 접속이 되고,
버튼에 onClick 함수+router.push를 통해 이동하는 방식은 접속이 안됨. (저 위에 코드는 수정한 코드라 접속됨)
이 문제를 이해하려면 SPA, MPA에 대한 이해가 필요하다.
싱글 페이지 애플리케이션(SPA)
☘️ MPA(Multi Page Application)
페이지 이동할 때마다 프론트엔드에서 다운 받아와서 그려준다. 속도가 느리다.
(이동할 때마다 새로고침 빙글빙글 돌아가는 거 생김)
☘️ SPA(Single Page Application) - 리액트, 앵귤러, 뷰
처음 접속할 때 다른 페이지까지 다 가져오고, 페이지 이동할 땐 보여주는 것만 다르게 보여준다.
여기서 제공하는 페이지 이동방식을 써야한다. ex. router.push
MPA는 느려서 다운로드 받을 시간이 충분히 있었고, SPA는 너무 빨라서 카카오 라이브러리 다 다운받기도 전에 페이지가 열리려고 하니까 문제가 생겼던 것이다.
해결 방안
- 미리 다운로드 받아놓기
- 페이지 이동 후, 다운로드 다 받을때까지 기다리기
다이나믹 임포트까지 하는데 1번은 말이 안되고, 2번으로 할거야!
// app.tsx
<Head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=@@@"
></script>
</Head>이 부분이 app.tsx에 들어가면 문제는 발생하지 않음 (미리 다운로드 받기 때문에)
-> 모든 페이지에서 카카오맵을 다운로드 받게 된다. -> 비효율적
카카오맵 독스 - 맨 밑 load 부분
v3 스크립트를 동적으로 로드하기위해 사용한다.
스크립트의 로딩이 끝나기 전에 v3의 객체에 접근하려고 하면 에러가 발생하기 때문에
로딩이 끝나는 시점에 콜백을 통해 객체에 접근할 수 있도록 해 준다.
비동기 통신으로 페이지에 v3를 동적으로 삽입할 경우에 주로 사용된다.
v3 로딩 스크립트 주소에 파라메터로 autoload=false 지정해야함(위에 코드 참고)
appkey={앱키}&autoload=false <- 이렇게 객체를 보낼 때 쓰는 방식으로 보냄(키=밸류)
여러개일 땐 &로 묶어서 보낸다.
link 태그
router.push와 같다. (SPA)
* router.push를 써야할 때 : 게시글 등록하고 페이지를 자동으로 전환시킬 때, 등 (눌러서 이동하는 게 아닐 때)
이 때를 제외하곤 link 태그를 쓴다.
<Link href="/....">
<a>이동하기</a>
</Link>이런식으로 써야한다. 여기서 <a>는 멋으로 쓴 것임
-> 그래야 html 태그에 a라는 영역이 만들어진다.
시멘틱 요소(의미를 가지고 있다)
- 페이지를 검색이 잘 되게끔 하기 위해서!
-> 이 주소랑 이 주소랑 상관관계가 높구나! 를 알게하기 위해서 link와 a태그를 써주는 것이다.
같은 맥락으로 <div>제목입니다</div>랑 <h1>제목입니다</h1> 점수가 다르다.
앞으론 이렇게 바꿔써야 한다!
Callback 함수
다른 함수의 인자로 들어가는 함수를 콜백함수라고 한다.
내가 이 함수를 줄테니까 너가 이거 실행시켜줘!
.map(콜백함수) map아, 내가 이 함수 줄테니까 너가 알아서 함수에 맞게끔 실행시켜줘!
await가 없었다면? 결과값 받아오기도전에 아래로 내려가.
이 당시엔 받아오면 내가 이 함수 줄테니까 그 결과로 이거 실행시켜줘, 라고 콜백함수 넘겼어야 했다.
aaa(function(){});
callback, promise, asyncawait
1. Callback
실제로 코드가 파고드는 모양새로 나온다.
유지/보수가 어려운 단점이 있다.
2. Promise
잘못사용한 케이스.
이렇게 끝나는 부분에 then으로 받아와서 이어갈 수 있다.
그리고 promise를 기다리는게 await다. promise 앞에는 다 await를 붙일 수 있다는 뜻 ~
위에서부터 1,2,3,4,5번 console에 찍으면 실제로는 1,5,2,3,4 번 순서대로 console에 찍힌다.
1번 나오고 백그라운드 나온 뒤, 데이터를 다 받아오면 그때 콜백함수가 task queue에 들어가기 때문에 이런 순서가 된 것.
queue
micro queue가 급한 애, macro queue가 덜 급한 애
promise는 마이크로 큐에 들어간다.
셋 타이머, 셋 인터벌은 매크로 키에 들어가서... 시간을 못 지키는 아이가 되어버린다.
위에서부터 내려와서, 얘 안 급하네 백으로 넘기고, 넘기고, 넘기고, for문? 돌려준다. 돌리고, 그리고 또 넘기고...
코드젠
자동으로 타입스크립트가 만들어진다.
앞에는 받아오는 데이터 타입, 뒤에는 들어가는 배리어블 타입을 쓴다.
그 어떤 수업보다 중요한 수업이었다고 말씀하셨다.
오늘 점심은 편의점,,, 제 PF가 저를 버리고갔~!아니 그냥 밥 먹기엔 배가 더부룩?했다. 그래서 잘됐다하고 편의점 가서 대충,,,
실버해피언니가 편의점에서 사주셨다... 나 이런거에 마음 약해,,,,,
먹고 3시에 설문조사하면 공차준대서 공차받고! 그 전에 화장실 갔을 때 플루이드기쁨님이랑 얘기하다가 앞머리 너무 자르고 싶어져서 2층에 있는 미용실갔다. 전에 박준인가 준오인가 갔을때는 두세번 가위질하고 끝나서 ...?? 싶었는데 여기선 되게 꼼꼼하게 잘라주셨다...^^미용사님과 플쁨님(진짜 감사99999999999999번) 덕분에 오랜만에 마음에 드는 앞머리가 됐습니다...~ PF님이랑 다른 동기분들, 대표님(,,,)까지 알아볼 정도로 많이 잘랐다. 오늘 하루 앞머리덕에 알찼다!!!! 그리고 약속있는 날이어서 칼퇴하고 그 뒤로 공부하지 않았습니다... 진짜 반성,,, 아예 잠깐이라도 약속 잡을 생각은 안하는 게 좋은 것 같기두...,, 이 날 아침부터 배 더부룩한게 배아픈거까지 이어져서 일요일까지 아팠고 이걸 쓰고 있는 지금도 배가 불편하다...심한 뱐빈가..
'프론트엔드✏️ > 코드캠프' 카테고리의 다른 글
| 220620 프론트엔드 부트캠프 41일차 : refreshToken, Graphql은 사실ㅇ0ㅇ (0) | 2022.06.20 |
|---|---|
| 220619 프론트엔드 부트캠프 : 주말, 카카오맵 마커 변경 (0) | 2022.06.20 |
| 알고리즘 - 예산, JadenCase문자열 만들기 (0) | 2022.06.17 |
| graphql-codegen 설치하기 (0) | 2022.06.17 |
| 220616 프론트엔드 부트캠프 37일차 : 결제를 해보자!, 토스트와의 다툼, ... (0) | 2022.06.17 |