2023.01.25
✅ MAP란?
-> Multiple Page Application
- 페이지 마다 해당하는 문서(HTML)이 존재
- 페이지 이동 시 해당하는 문서를 서버에서 전송함
✅ SPA란?
-> Single Page Application
- HTML 문서 전체가 아니라 업데이트에 필요한 데이터만 받아, JS가 이 데이터를 조작하여 HTML 요소를 생성하여 화면에 보여주는 방식!
- 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹
👍 SPA 장점
- 필요한 부분의 데이터만 업데이트 하기에 사용자와의 상호작용 빠름
- 서버에서 요청 받은 데이터만 넘겨 주기에 서버 과부화 문제 줄어듬
- 전체 페이지를 렌더링 할 필요가 없기 때문에 더 좋은 유저 경험
❌ SPA 단점
- JS 파일의 크기가 크다.
=> JS 파일 대기로 인하여 첫 화면 로딩 시간 증가 - 검색 엔진 최적화(SEO)가 좋지 않다.
✅ Wireframe, Mockup
Wireframe이란?
- 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤관석을 잡는 것
Mockup이란?
- 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인 한 것
- 카카오 오븐 같은 툴을 이용하여 작업
✅ React Router
- React SPA에서 라우팅을 위해 사용하는 라이브러리
Routing?
- 다른 주소에 따라 다른 뷰를 보여주는 과정
🖥️ React Router의 주요 컴포넌트
- BrowserRouter : 라우터 역할
- Routes, Route : 경로를 매칭
- Link : 경로를 변경
- <Link/>와 a 태그의 차이
- a : 페이지 전환 과정에서 페이지를 불러옴(처음부터 렌더링)
- <Link/> : 페이지 전환을 방지하는 기능(SPA 구현)
import {BrowerRouter, Routes, Route, Link} from "react-router-dom"
매일매일