Day 29.

wisdomdom·2022년 2월 28일
0

[ Map ]

구글, 네이버, 카카오

github에 올리면 app 키가 노출된다 -> 해킹해서 사이트 도메인을 바꾸지 않는 이상 괜춘~

보안에 예민한 정보는 백엔드에 넣어놓고 api로 요청해서 받는 방식으로 키를 사용한다.!

라우터로 이동 안됨ㅜ

페이지를 이동하는 방법
순수 html : a태그는 이동 가능

멀티페이지 어플리케이션 MPA
할때마다 서버에다 요청해서 데이터를 받아오니까 성능이 좋진않다

싱글페이지 어플리케이션 SPA
처음 접속은 느릴 수 있는데, 데이터를 싹 다 받아오기 때문에 처음만 조금 느리고 뒤에는 빠른 속도로 페이지를 연다,-> 어플리케이션으로 빗대면 편하다. 바로바로 바뀌고 속도도 빠르다

하나의 큰 페이지라고 볼 수 있다 -> 파노라마 너낌~
리액트를 가면 주소라는게 없다. 가짜로 만들어낸 주소 , 안에서 위치를 찾기위해 만든 가짜주소

클라이언트사이드렌더링
브라우저(클라이언트)
클라이언트사이드에서 렌더링을 진행했다 CSR

서버(프론트엔드)
서버에서 내려주는 html, css, j등등..서버에서 렌더링을 하는데 (SSR)
정적인 페이지말 내려줄 것인지/ 동적으로 변하는 데이터까지 포함 (요즘의 SSR)해서 줄 것인지에 따라 종류가 나뉜다.

모든페이지가 SSR이라고 좋은건아니다~ 배포 때 더 할 내용

더 많은 내용은 10분 쉬었다가~! 제발~

SSR 이 너무 빨라서 map을 다운받지 못하고 불러오게 되니까 없다고 나온다..
해결방법 두가지
Head를 모든 페이지에서 미리 받는다 app.tsx
-> 좋은 방법은 아니다. 맵이 필요없을 때도 정보가 들어있기때문에 비효율적임

router.push 말고 next의 Link 기능

어떤 차이가 있냐?
태그들의 시멘틱요소~
검색엔진이 검색봇 프로그램을 돌릴 때, 중요한 내용이나 신경써야할 부분들을 반영한다. 링크태그도 검색봇이 들어왔을 때 Link는 모르지만 a태그(클라이언트사이드렌더링 된다)는 알아본다. 그래서 링크의 상관관계를 유추한다. 뭐라는거지…
2개의 상관관계가 깊다~ 카카오라우팅페이지가 나왔다~ 그러면 라우티드 페이지를 옆에다 보여준다던지, 알고리즘 영역으로 들어간다. 먼소리먼소리.. 라우터푸쉬안쓰고 Link로 가급적 사용하자.
라우터푸쉬를 반드시 쓸 때는 보드아이디등 같은거 쓸 때~. 근데 메뉴 눌러서 이동하는거는 LinkTmaus whgek

오늘 수업 개어려움~~ 나중에 수업 100번 들어야댐~~ 한개도 모르겠다

[ Callback 함수 ]

함수의 인자로 들어가는 함수 : 콜백함수

콜백함수를 왜 쓰냐? 함수 안에 기능ㅇ이 있을 텐데, 끝나거나, 이후네 내가 넣은 함수를 실행시키고싶을 때 콜백함수를 사용한다

함수 실행 후 함수 실행하고 싶을 때 사용한다

Api 요청 끝나고 함수 실행시키고 싶다~


My function : state에 저장하는 함수
Aaa: 외부에 api 요청하는 함수

콜백을 왜써? 요청해서 로드될때까지 기다렸다가 실행시켜줘~ state에 저장해서 사용해도 됨~
setTimeout, useEffect, set등등 콜백함수였다.

콜백함수의 문제점

Api 연달아서 요청했을 때 생기는 콜백의 문제점

콜백지옥

Promise 어쩌구 이거 라이브러리에서 확인해보자!!!

외부에 통신하는 라이브러리는 promise를 기반으로 만든다

Async await는 promise를 기다리는 애들
마우스를 올렸을 때 Promise라고 뜨는 애들 만 Async await 붙일 수 있다
Async await ( promise 앞 )

콜백지옥은 해결했지만 직관적이지 못하다.
-> async await는 굉장히 심플~

—> 에이싱크 최고~ 깔끔하고 보기도 좋다! 최애고!

리턴결과가 promise라
axios가 promise로 만들어진거라 async 사용가능하다! 안에서 프로미스를 사용하고 있다
있는 기ㅓ능을 조합해서 어쩌구 저쩌구


Fetch도 promise라 얘도 await 가능

promise에 있는게 .then이다!

Queue도 종류가 많다

MacroTaskQueue

MicroTaskQueue

큐가 1개가 아니고 여러개라 순서를 정리할 필요가 있따

  1. MicroTaskQueue 먼저
  2. MacroTaskQueue 실행

지도는 포폴 만들 때 최소기능만 넣지 말고 드래그 영역 지정 등 코드지갑 빵빵하게 만들어보자
라이브러리는 배워본거 계속 쓸 수 있으니까 제대로 공부해두자

왜 에이싱크 어웨이트를 쓰는지까지
콜백지옥 -> 프로미스체이닝, 큐에 들어감 -> 에이싱크 어웨이트

Axis, fetch등이 promise로 만들어져서 .then을 사용가능하구나~
그래서 promise와 setTimeout 이 태스크큐에 들어가는데 큐에도 종류가 있고 우선순위가 있다.
그 중에서 마이크로큐, 매크로 큐가 이썼다(이거말고 더 많음)

profile
가보자고~

0개의 댓글