오늘 배울 내용!
Map
각각의 큰 사이트를 보면 devlopers가 있다 구글, 네이버, 깃허브 등등 사이트에 들어가면 개발자들이 사용할 수 있게 API를 무료, 유료로 이용할 수 있다.
수업에선 kakao developers에서 지도 API를 들고 오는 연습을 한다.
docs가 친절하게 다 나와있어서
똑같이 적어주면 되지만 next.js에선 js에서 적던 거랑 좀 달라서 이런식으로 적어준다.
useEffect은 박스가 그려지고 안에 있는 것들이 실행되어야 되기 때문에 적어줬다.
기존 HTML 페이지 이동방식
<a href="">게시글 등록하러가기</a>이동할때마다 프론트엔드 백엔드를 다시 다운받아서 오기때문에 속도가 느리다.
react/next에서의 페이지 이동방식 - router.push
클릭을 하면 pre-rendering을 거치지않고 바로 이동하기 떄문에 이동속도가 굉장히 빠르다.
react와 next에서 map을 routed페이지로 routing을 하면 오류가 뜬다. 왜 그럴까?
router.push는 첫 로컬호스트에 들어갈때 pre-rendering을 할 때와는 다르게 router버튼을 누르면 pre-rendering을 하지않고 다음페이지에서 기존에 있던 부분에서 없는 부분을 업데이트를 하게된다.
routed페이지에 Head부분이 다운받기 전에 실행이 되서 오류가 뜨는 것!
app.tsx에 다운받고 사용해도 되지만 그럼 모든 페이지에서 다운받아 쓰는 것임으로 속도가 느려지고 비효율적이다.
docs에 있는 부분을 안에 넣어주면 다운받고 로드가 되기때문에 잘 구현된다.
MPA(Multiple Page Application)
SPA(Single Page Application)
SPA는 한 페이지에 여러개의 Page가 있는거다. 그래서 react,next에서 router를 이용해서 페이지를 이동하면 굉장히 빠른속도로 이동을 한다. 또 SPA는 첫 페이지를 불러올때만 백엔드와 통신을하고 그 이후엔 데이터를 받아올 때만 통신을 해서 시간과 비용을 절약할 수 있다.
페이지 이동하기!!!<//button>
어쩔 수 없이.. 게시글 등록 후, 리턴받은 아이디의 상세페이지로 이동
게시물이 등록이 돼야지 id값이 생기기 때문에.
<a href="/26-03-kakao-map-routed">페이지 이동하기!</a>
매 페이지를 새로 다운로드 받음으로 SPA를 활용 못함
<Link href="/26-03-kakao-map-routed">
<a>페이지 이동하기!!</a>
</Link> next에서 제공하는 a태그 이므로, SPA 활용 가능
앞으론 이걸로 쓰기! button으로 이동하는 것과 차이는 없다. 근데 왜 쓰냐?
a태그를 쓰고 검색봇이 그 안에 주소를 보고 관련성이 높다고 생각하고 점수를 더 준다.
시멘틱태그의 장점
1. 개발자들간에 커뮤니케이션 용이
2. 검색엔진 최적화(SEO)
Cache-modify
1.뮤테이션 요청
2. cache 변경
Cache State를 직접적으로 수정하게 되면 변경된 state때문에 자동으로 리렌더링이 된다.
따로 refetch를 할 필요없기 때문에 시간, 돈절약됨.
