FE 29 일차

jae·2022년 6월 17일

오늘의 목표

지도연동
싱글페이지 어플리케이션? 1페이지만 있는건가
콜백함수?
프로미스
태스크큐의 종류

1. 지도연동

대표 지도 api 구글 vs 네이버vs 카카오

유명한 기업의 경우 개발자 사이트가 존재하는 데 (구글 ,네이버, 카카오, 페이스북 등등)
자사 서비스들을 api 형태로 일부 제공해줌.
보안과 관련 없는 편리한 서비스들을 제공 받을 수 있으나 일부 유료

카카오 지도 사용해보기

1일 30만회 조회 가능

map이라는 아이디를 가진 태그를 컨테이너에 담고
그 컨테이너의 옵션을 통해 지도 생성 과 객체 리터를 한다
추후 마커를 쓰기 위해서는 맵을 별도로 담아야한다

doc를 보고 나의 키와 페이지를 입력만 하면 된다!

2. 싱글페이지 어플리케이션? 1페이지만 있는건가

export default function KakakomapPage() {
  const router = useRouter();
  const onClciMoveToMap = () => {
    router.push("/29-03-kakao-map-routed");
  };
  return (
    <div>
      <button onClick={onClciMoveToMap}>맵으로 이동하기</button> // 오류 발생
      <a href="/29-03-kakao-map-routed">맵으로 이동하기</a> // 정상작동  
    </div>
  );
}

카카오 지도의 경우 지도 페이지를 열기 위해서 지도화면을 온클릭 이벤트에 라우터로 데이터 바인딩한다면
오류가 발생함
링크 태그를 이용하여 이동해야할 페이지를 넣어준다면 정상적으로 페이지로 이동할 수 있음

이게 바로 싱글페이지 어플리케이션이기 떄문에

옛날엔 경우 프론트엔드 서버에서 브라우저로 html,css,js를 받아와서
페이지를 이동하거나 이벤트를 실행하면 브라우저가 새로고침이 되었음
그래서 속도가 느리고 서버를 매번 받아왔음 (멀티페이지 어플리케이션 MPA)

그러다가 이제 리액트나 앵귤러 뷰같은 프레임 워크가 생기고 나서
컴포넌트 기반으로 만드는 페이지다 보니 싱글페이지 어플리케이션이 발생했음
처음 접속 할때 모든 페이지를 다 받아오게 됨 그래서 처음 접속 시 느리나
처음 접속 이후로는 서버를 다시 받아오는 것이 아니라 빠르게 정보를 이용 할수 있는것
이게 싱글페이지 어플리케이션(SPA)

a 태그의 경우 페이지를 멀티페이지 어플리케이션 방식으로 다시 페이지를 가져와서 쓰는 것이라
위에서 오류가 나지 않고 사용이 가능했던 것...
리액트에서는 라우터 Push를 통하여 이동하였으나 카카오 맵에서는 오류가 발생함

하지만 우리는 리액트를 쓰니깐 리액트태그로 해결을 해야함

이떄 방법이
1. app.tsx에 미리 다운로드 받기
2. 페이지 이동 후 다운로드 될때까지 기다리기

1은 모든 페이지에서 다운로드를 받아야하니 비효율적이다
그렇기에 2의 방법을 써야한다!!

위 아래는 동일한 코드가 된다

이제 onload() 를 이용하여
로딩이 된 이후에 맵이라는 화면이 보일 수 있게 한다

쿼리스트링을 통해 false를 주야한다

최종적으로 이렇게 수정하면 되는데
스크립트 태그를 만들어주고 온로드 기능을 이용하여 map이라는 div에 데이터 받은 뒤에 보일수 있도록 해주면 된다.

https://apis.map.kakao.com/web/documentation/#Marker

추가적으로 마커를 만들수가 있는데
이제 컨테이너를 기본적으로 두고 기능등을 추가하여 만들수 있음

똑같은 기능을 하는데 어떤 것을 써야할까?

우선 a태그는 spa프레임 워크를 쓰는 의미가 없어지기에 쓰면 안된다.
그렇기에 쓰는것은 next.js에서 제공하는 링크 태그를 이용하면 된다!
링크 태그는 언제 써야하는 것일까?

이렇게 링크 태그안에 a를 쓰게 되면 개발자 도구에서는 a태그로 링크한것으로 보인다
Link안에 시멘틱 요소를 가지고 있는 html 태그로 렌더링 되기에 웹표준이나 검색 엔진 최적화 차원에서도 이점이 있다

시멘틱 태그 : 그 자체만으로도 의미를 가지고 있는 html 태그 (header,footer, nav,section,asid등)

3. 콜백함수?

단순히 함수 파라미터안에 인자로 함수가 들어가는 것이 콜백함수

async/await나 promise 문법이 아직 존재하지 않았던 시기에는

callback 함수를 이용해 데이터를 요청하고 처리했음

콜백 지옥 (Callback Hell) : API 중첩이 심해지며 가독성이 떨어짐

4. 프로미스

콜백 지옥과 같은 현상을 막고자 나온 것이 바로 Promise
promise 실습을 진행할 때에는 axios를 사용할 것

promise 실습에 axios 사용하는 이유

promise란 자바스크립트의 비동기 처리, 그 중에서도 특히 외부에서 많은 양의 데이터를 불러오는 작업에 사용되는 객체입니다. 이런 promise 객체를 이용해서 만든 라이브러리가 axio입니다. 그렇기 때문에 우리는 promise 실습에 axios를 사용하려고 합니다.

데이터 통신에 사용되는 현대 라이브러리들은 대부분 Promise를 기반

axios.get() 위에 마우스를 올려보면
요청에 대한 반환 값이 Promise로 들어오는 것을 확인하실 수 있습니다.

get에 확인해보면 Promise를 리턴해주고 있음

이걸 프로미스 체이닝이라고함

async/await가 만들어 지기 전에는 promise 객체에 제공되는 .then이라는 기능을 사용했음
콜백지옥은 생기지 않더라도 promise를 사용할 경우 프로미스 체인또는 프로미스 체이닝이 생겨 각 요청들이 체인처럼 연결되는데
콜백 지옥은 아니더라도 직관적으로 보기는 힘듦