Map
지도 연동
JSX이므로 스타일 부분을 수정한다.
왜 중괄호를 두개 쓸까?
JSX이므로 중괄호를 쓰지만 mystyles처럼 스타일을 지정해주고 mystyles를 중괄호에 넣어주거나,
직접 지정해줄 경우에는 중괄호를 하나 더 써서 바로 넣어주는 것이기 때문에 중괄호가 두개처럼 보이는 것.
Head에 스크립트를 추가하면 헤드를 먼저 읽고 바디를 그리는데, Body에 넣으면 바디를 먼저 그리고 헤드를 그린다.
SPA-CSR / MPA-SSR
싱글 페이지 어플리케이션?
라우터를 써서 맵 페이지로 이동하면 뜨지 않지만, a href 태그를 쓰면 이동한다.
프론트엔드에서는 페이지를 받아오는데 모든 페이지를 모두 받아온다.
그 다음에 내가 보여주고 싶은 페이지만 보여주고 있는 것이다.
=> 이것을 싱글 페이지 애플리케이션이라고 한다.
싱글 페이지 애플리케이션 (SPA)
거대한 함수라고도 할 수 있다. 페이지 이동이 엄청 빠르다.
페이지를 받아오는 데 새로고침 과정이 없다.
서버로부터 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 것.
클라이언트 사이드 렌더링 (CSR)
슬라이드 형태로 전부 받아와서 보여주는 화면만 바뀌는 것
화면이 깜빡이지 않고 바로 수정된 데이터가 표시된다.
멀티 페이지 애플리케이션 (MPA)
웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면, 서버는 데이터를 HTML 문서로 웹 브라우저에 응답해준다. 이 때 전체 페이지가 다시 불러와지면서 화면이 깜빡거리게 된다.
서버 사이드 렌더링 (SSR)
서버사이드 렌더링(SSR) 은 페이지를 이동할 때마다 새로운 페이지를 요청 한다.
모든 탬플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.
페이지 이동시 화면이 깜빡 거린다.
페이지 요청마다 페이지 새로고침이 발생한다.
따라서 카카오 맵을 아직 받아오지 않았는데 useEffect가 실행이 되면서 카카오맵이 어디있냐? 하면서 에러가 난다.
useRouter로 이동을 하면 프론트서버에서 새로 받아오는 것이 아니라 클라이언트 서버에서 이동이 되기 때문에 에러가 난다.
a 태그를 클릭하면 접속해서 해당하는 페이지를 새로고침하며 받아온다. 단점은 느리다는 것.
router보다 link가 더 좋은 이유?
html의 태그는 태그들마다 기능이 있다. ex Button, a...
이 a는 의미는 없지만 a 태그처럼 보이게끔 속이기 위한 것이다. 실제로는 Link 태그를 통해 클라이언트 사이드 렌더링이 일어난다.
따라서 a 태그를 사용했을 때, 엔터를 쳐서 들어가면 맵이 그려질 시간이 있었지만 a 태그를 바로 사용하면 느리기 때문에 router나 Link를 사용해야 하는 것이다.
a는 가짜 a (기능X)
태그의 의미는 중요하다. => 시멘틱
router.push와 Link는 같은 CSR이지만 Link 태그는 시멘틱 요소를 포함, 의미를 가지는 태그를 가지고 있다.
속도가 빠른 장점 때문에 사용하지만 새로고침이 안된다는 단점이 있는 것을 알아두기
어떻게 해결해야 할까?
1. 다운받아 놓은 페이지를 보여주기
하지만 맵을 사용하지 않는 모든 페이지에 맵을 다운로드 받아야하므로 비효율적이다.
2. 맵을 다운받아 놓고 보여주기
쿼리스트링?
쿼리스트링이란? URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법이다. 웹개발에서 데이터를 요청하는 방식 중 대표적인 것이 GET방식과 POST방식인데, 주로 GET방식으로 데이터를 요청할 때 쓰이는 방법이다.
위도, 경도를 넣으면 해당 위치를 중심으로 지도가 그려지게 된다.
Callback / Callback-Hell
콜백함수?
async, await가 없을 때 콜백함수를 썼었다.
(비동기 작업을 동기화처리하기 위해)
인자로 함수를 받아오는 것을 콜백함수라고 한다.
콜백 함수를 사용하면서 계속 안으로 들어가는 것을 콜백지옥이라고 한다.
콜백 지옥...
Promise / Promise-Chain
콜백보다 좋다
axios라는 라이브러리에서 Promise를 리턴
Promise에 달려있는게 .then 실패했을 땐 .catch
보통 블로그에서는 프로미스하면 .then이라 함
이 형태가 근본
프로미스의 결과가 리턴이 되면 아래의 .then과 연결이 됨
체인처럼 걸려있다고해서 프로미스 체이닝이라고 한다.
await는 프로미스를 기다리고 있는 것이므로 await는 promise앞에 써줘야한다.
최근 라이브러리들은(fetch 등) 프로미스를 리턴한다.
Promise에서 주의할 점!
이 코드를 실행했을 때, 우리는 결과값으로 1,2,3,4,5의 실행순서를 기대하지만
결과에서는 기대와 다르게 나온다.
프로미스는 비동기 작업이라 Queue에 들어가게 되기 때문이다.
반면 async await는 순서가 보장이 되어있다.
MacroTask / MicroTask
태스크 큐에는 여러종류가 있다
프로미스가 들어가는 큐와 setTimeout이 들어가는 큐와 같은 Queue냐?
여기서 차이가 난다.
누가 먼저 빠질 것인가?
아니면 번갈아가면서 나올 것인가?
export default function EventLoopPage() {
const onClickTimer = () => {
console.log("=======시작!!!!=======");
// 비동기작업(매크로큐에 들어감)
setTimeout(() => {
console.log("저는 setTimeout!! 매크로큐!! 0초 뒤에 실행될 거에요!!!");
}, 0);
new Promise((resolve) => {
resolve("철수");
}).then((res) =>
console.log("저는 Promise!! 마이크로큐!! 0초 뒤에 실행될 거예요!!! - 1")
);
// 비동기작업(매크로큐에 들어감)
setInterval(() => {
console.log("저는 setInterval!! 매크로큐!! 0초마다 실행될 거에요!!!");
}, 0);
let sum = 0;
for (let i = 0; i <= 9000000000; i += 1) {
sum = sum + 1;
}
new Promise((resolve) => {
resolve("철수");
}).then((res) =>
console.log("저는 Promise!! 마이크로큐!! 0초 뒤에 실행될 거예요!!! - 2")
);
console.log("=======끝!!!!=======");
};
return <button onClick={onClickTimer}>시작!!!</button>;
}
이 코드가 실행된다고 했을때,
=> 마이크로 태스크 큐가 없어야 매크로 태스크 큐가 나온다.
