네이버
카카오
구글
크롬
지도 싱글페이지 멀티페이지
네이버 카카오 구글 처음에는 무료임.. api한번 조회할때마다 깎임 ㅎㅎ
구글은 조회 횟수가 너무 적어서 국내용으로는 카카오를 많이 사용하는편, 전세계적으로 사용할때는 구글을 사용하는 편 상황에 따라서 ㅎ!!
오늘은 카카오로 사용해 보게뜨아
카카오 API 사용하는것 중에 어떤서비스는 검수를 하기도 한다.
내 애플리케이션 === 프로젝트명(폴더만들기)
Head 를 쓰면 헤드태그에 스크립트가 나오게되고(스크립트부터 읽고 html그림)
Script 태그를 쓰면 바디태그에 스크립트가 나오게됨(html읽고 그다음에 스크립트그림)
언제어디에 쓸지는 상황에 맞춰서 해야함 둘이 똑같은게 아님!!
어? 근데 카카오맵이 있는 페이지를 바로 들어가려면 가능한데 라우터로 들어갈라면 오류난돠..??
왜일까?
버튼 온클릭으로 안하고 a태그로 href로 하면 또 된돠... 이유가 뭐져..?
a태그를 이용했을때는 프론트에 접속해서 href의 주소에 대한 페이지를 전부 받아오는것
단점은 느리당 멀티페이지 어플리케이션(예전에 만든 홈페이지들은 버튼누를때마다 새페이지를 받아와서 보여줌)
react/view 에서는 싱글페이지 어플리케이션을함
처음에 접속할때문터 여러 페이지를 거대한 한 페이지로 받아와서 페이지 이동하면 단편적으로 보여주는것
장점은 페이지 이동(클라이언트사이드 랜더링)이 엄청 빠르다
router.push 는 싱글페이지에서 클라이언트사이드 랜더링하는것
이게 너무빠르다보니까 스크립트를 받아오기전에 랜더링이 끝나고 유즈이펙트가실행되어버려서 map을 못그린돱...!
어떻게 해결해야할까?
일단, a태그 대신 Link태그를 사용하면 href 를 사용 할 수있다!
a태그와 Link태그의 차이점
일단 Link태그가 좋다!
사실 링크태그는 안에 a태그가 있다!(눈으로 보기에만, 기능은없음)
a 태그만 사용하게되면 클라이언트사이드 랜더링이 불가능한데 Link를 사용하면 가능하다.
우리가 검색봇(네이버,구글에있는) 들과 소통하기위한 창구는 태그
태그의 의미===시멘틱
시멘틱에 따른 코딩을 하고안하고는 검색 순위가 차이난다.
검색봇은 라우터푸시는 뭔지모르고 a태그는 다른페이지로 이동한다는것을 안다.
Link태그는 a를 안고있으니 이동할때 사용하면 검색봇에도 적용되는것~
이제 router.push 만 있을때는 Link를 사용하장(단 버튼클릭에 기능넣고 끝나면 이동할땐 라우터푸시 쓸수밖에없윰..)
자.. 쨌던 Link 썼을때 클라이언트사이드랜더링 해서 스크립트 다운을 충분히 못한상태에서 페이지보여주는건 우짤꽁??
1) 스크립트를 앱닷에 넣어보면 어떨까?? 작동은 가능하나..맵안쓸수도있는데 모든페이지에서 카카오맵을 다운받아서 별로 좋은 방법은 아닌것같음
2) 그럼 스크립트 다운 다 받을때까지 기다리라 하장!
물음표 뒤에 객체형태를 보내는것을 쿼리 스트링이라함 서로의 연결은&로함
앞의 주소로
callback 함수? promise?
오 생긴걸 보아하니 map,filter, setTimeout 이랑 비슷한듯 ㅋ
aaa((){}) aaa는 자기꺼 실행해서 리절트를 자기한테 들어온 함수를 qqq라는 이름으로 받아서 qqq에 result넣움
원래 어웨이트가 없을때는 비동기적인 로직을 위와같이 동기화처리를 진행했었당
콜백지옥
프로미스체이닝
asyc await 는 아무데나 쓸 수 없다
비동기하겠답시고고 어웨이트해봤자 안됨~~
프로미스를 await 를 하는 것이기 때문임
axios.get 이 프로미스를 리턴하니 앞에 써주는것
주의 !! 프로미스가 큐로 들어간후 스텍에담긴것부터 하고 큐가 진행됨
큐는 많이 나뉘어있지만 그중 큰 두가지로는 매크로태스크 큐. 마이크오 태스크 큐 가 있다.
setTimeout setInterval
은 메크로큐에 들어가고
Primise 는 마이크로큐에들어감
마이크로 먼저 실행되고 매크로가 실행됨!
시작,타임아웃, 프로미스,셋인터벌, 끝 순으로 실행하면
시작
끝
프로미스
타임아웃
셋인터벌
순으로 실행된다.
