Map
지도를 사용하고 싶은 경우 카카오 지도 API를 연동해서 사용할 수 있다.
import Head from "next/head";-
React에서 html의 head부분에 스크크립트를 삽입하고 싶은 경우, next에서 제공하는 Head를 import하여 사용할 수 있다.
-
이때, script태그를 통해 API를 다운로드 받으면 window에 저장된다.
-> window.kakao로 변경해준다. -
그러나, 다른 페이지에서 위의 코드가 있는 페이지로 버튼 클릭으로 이동시, kakao undefined로 오류가 발생하게 된다.
-
router.push는 이미 있는 페이지에서 다른 페이지로 빠르게 이동하고, 이미 페이지 이동이 완료된 상태에서 다운로드 받아오는데, kakao API를 다운로드 받아오는 속도가 더 느리기 때문에 발생하는 오류이다.
오류 해결방법
kakao가 다운로드 완료되기 전에 코드실행이 되지 않도록 설정해준다.
kakao 지도 서비스를 참고해서 onload를 사용해준다.
페이지 이동 - Link태그와 router.push
- a href="" : 기존 HTML 페이지 이동방식
- router.push : react / next 에서의 페이지 이동방식
Link 태그
import Link from "next/link"
<Link href="/">
<button>
<a>이동하기</a>
</button>
</Link>버튼이 필요할 경우 버튼 안에 a태그를 입력해서 사용해준다.
import Link from "next/link"
-> Link태그는 next에서 제공하는 a태그로, SPA 활용 가능하다. Link태그 안에 a태그를 넣어 사용해준다.
-> router 이동보다 검색엔진 최적화에 유리하다.(이동하는 페이지 간 관련성을 유추하기 때문)
=>페이지 이동은 Link태그를 사용해주기!!
router.push
router.push를 사용하는 경우
게시물 등록이나 수정 후, return 받은 아이디의 상세페이지로 이동하는 경우
📌 시멘틱 태그의 장점
- 개발자들 간 커뮤니케이션 용이
- 검색엔진 최적화(SEO)
SPA-CSR / MPA-SSR
SPA
router를 이용해서 페이지를 이동하는 것과 같은 방식을 채택하는 웹 서비스를 SPA(Single Page Application)라고 한다..
SPA에서는 서비스에 처음 접속할 때 모든 페이지의 데이터를 다 받아온다.
그리고 router를 통해 페이지를 이동할 때, 실제로는 페이지의 일부에 해당하는 컴포넌트만 교체한 뒤 페이지를 다시 그려온다. (re-rendering)
SPA의 경우 최초 로딩에는 시간이 다소 걸릴 수 있으나, 페이지를 이동할 때 걸리는 시간이 MPA에 비하여 짧다.
MPA
기존 a태그를 이용해서 페이지를 이동하는 것과 같은 방식을 채택하는 웹 서비스를 MPA(Multi Page Application)라고 한다.
MPA에서 서로 다른 url을 가진 페이지들은 각각 독립적으로 존재한다.
그래서 프론트엔드 서버에서 페이지를 그린 뒤, 브라우저로 HTML/CSS/JS를 보내주는 작업을 매 페이지 이동 시마다 거치게 되고, 페이지 이동 시마다 서버에 요청해서 데이터를 받아와야 하기 때문에 성능이 좋지 않다.
SPA / MPA 성능 차이 비교
-
SPA (싱글 페이지 어플리케이션): 페이지에 미리 데이터를 다운로드 받아놓고 router로 이동하여 속도가 빠르다.
-
MPA : 페이지마다 데이터를 다운로드 받아와서 속도가 느리다.
Cache-Modify
refetch는 API를 한번 더 요청하는 방법이므로 비효율적이다.
refetch를 개선하기 위한 방법으로 apollo-client의 cache-state를 변경해준다.
게시글 등록 / 삭제 함수로 API mutation 요청 -> DB에서 해당 게시글 데이터를 받아옴 -> refetct 대신 받아온 결과를 apollo-client의 cache-state에 접근해 추가해준다.
게시물 등록하기
게시물 삭제하기
-
refetchQueries 대신 update를 사용해준다.
-
cache.modify로 cache-state를 변경해준다.
-
data는 해당 API의 return으로 받는 데이터로, data.API이름 으로 값을 가져올 수 있다.
📌 그렇다면 refetchQueries는 언제 사용할까??
작은 서비스에서는 오히려 refetchQueries를 사용하는것이 좋다.
코드의 가독성 면에 있어서는 refetchQueries가 훨씬 깔끔하고 좋기 때문에, 성능을 크게 따질 필요없는 작은 서비스에서는 refetchQueries를 사용하는 것이 좋다.
그러나, 규모가 커지게 되면 서버의 부하를 초래할 수 있으므로 그때는 cache를 업데이트하는 방법이 더 효율적이다.
