카카오지도
MPA(Multi Page Application)
- 각각 접속했을 때 페이지들이 독립적으로 나누어져있는 방식
- 프론트엔드 서버에서 페이지를 그린 뒤 브라우저로 HTML/CSS/JS를 보내주는 작업을 이동시마다 반복
- 페이지 이동이 느려진다
- a : html 본연의 방식으로 이용 => 페이지 이동시 시간이 느리다보디 카카오 라이브러리를 다시 받아오는 것이 가능했다
SPA(Single Page Application)
- 서비스에 처음 접속할 때 모든 페이지의 데이터를 다 받아옴 (하나의 큰 페이지처럼)
- router : 페이지의 일부에 해당하는 컴포넌트만 교체한 뒤 페이지를 다시 그리기
- 최초 로딩에는 시간이 다소 걸릴 수 있으나 페이지를 이동할 때 걸리는 시간이 짧다
=> 카카오 라이브러리를 다운받기 전에 페이지가 열려 에러 발생
그러면?
1. 미리 다운로드 받아놓기 => 버튼이 있는 곳마다 미리 헤드에서 받아오기 (버튼 마다 작업해야해서 비효율적) or app_.tsx에 넣어놓기 (모든 페이지 다운되니 비효율적)
- 페이지 이동후, 다운로드 다 될때까지 기다리기
따라서, 리액트 사용시에는 페이지 이동 시 a 태그보다 router를 이용하는 것이 좋지만,
카카오 지도에는 next.js에서 제공하는 Link태그를 사용하자!
router : 게시물을 등록, 삭제 , 수정하고 자동으로 페이지를 이동할 때 (특정 로직 후 이동)
link : 단순 이동할 때 ( 메뉴 이동 )
link태그가 더 좋지만... 로직이 있어서 router를 써야하는 것
<Link href="/blog/hello-world">
<a>Blog Post</a>
</Link>이렇게 작성해야 html에 a라는 영역이 만들어져서, a태그 처럼 인식이 된다
시맨틱 태그란 그 자체 만으로도 의미를 담고 있는 html 태그
온통
ex. div vs h1 div는 제목 검색이 안된다
콜백함수
인자로 들어가는 함수
async/await나 promise 문법이 아직 존재하지 않았던 시기에는callback 함수를 이용해 데이터를 요청하고 처리
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]; // 랜덤숫자
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) => {
console.log(res); // 최종 결과값
});
});
});
};콜백지옥
const myaxios = () => {
return new Promise((resolve, reject) => {
// 오래걸리는 작업( 외부 API 요청 ) => XMLHttpRequest 사용하기
resolve("철수"); // 성공
reject("error"); // 실패
});
};
const onClickPromise = () => {
const result = myaxios().then((res) => {
// 프로미스 체이닝
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); // 최종결과
});
});
};.then을 사용한다
await는 promise 이후에 등장
함수의 return이 promise일 때만 사용 가능하다
const onClickAsyncAwait = async() => {
const aaa = await axios.get("http://numbersapi.com/random?min=1&max=200");
const bbb = await axios.get("http://numbersapi.com/random?min=1&max=200");
const ccc = await axios.get("http://numbersapi.com/random?min=1&max=200");
}; **매크로 태스크 큐 (MacroTaskQueue)**
setTimeout, setInterval 등이 들어가는 큐
**마이크로 태스크 큐 (MacroTaskQueue)**
Promise 등이 들어가는 큐
더 급한 것, 우선순위가 더 높다 => 먼저 실행 됨
우선순위 비교하기
