[TIL] 엘리스 SW 엔지니어 트랙 Day 055
글 작성자: 망고좋아
반응형
📖 오늘 배운 내용 - 2022.01.07
- SPA
- Private Route
- react-router
📝 SPA와 라우팅
📕 Single Page Application
- SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식이다.
- 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낄 수 있다.
📕 Multi Page Application
- MPA(Multi Page Application)은 서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달한다.
- 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송된다.
- 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리한다.
- 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘들다.
📕 SPA의 특징
- Client-side routing 기술을 활용, 페이지 진입 시 리로드 없이 라우팅 한다.
- AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다.
- MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다.
- 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 된다.
📕 SPA의 기술적 장점
- 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱이 가능하다.
- 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다.
- 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다.
- 웹사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와 패턴을 적용할 수 있다.
📕 SPA의 기술적 난관들
- MPA방식보다는 Search Engine Optimization에 불리하다.
- 하나의 자바스크립트 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용 등이 중요해진다.
- 여러 페이지를 전송받는 것보다, 하나의 거대한 자바스크립트 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려진다.
- ⇒ code-splitting, tree-shaking, lazy-loading 등의 처리를 통해 번들 사이즈, 코드의 양을 줄이고 필요할 때만 코드를 로드할 수 있다.
📕 SPA에서의 라우팅
- 주로 History API 혹은 URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현한다. ⇒ History API를 더 많이 사용한다.
- history, location 등 HTML5 API를 활용한다.
- visibilitychange, popstate, beforeunload 등 window event를 활용하여 페이지 전환 등의 이벤트 시 핸들러를 등록한다.
- react-router, reach-router 등의 라이브러리를 활용하면, 라우팅 관련 기능을 쉽게 사용할 수 있다.
📝 react-router 소개
📕 react-router 소개
- Declarative routing for React
- ex)
<Link to='/login'>
- ex)
- React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현할 수 있다.
- 웹에서는 react-router-dom을 사용한다.
- 적용 시, 서버의 모든 path에서 같은 앱을 서빙하도록 해야 한다.
📕 react-router의 기능
- React 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진입 시 컴포넌트를 렌더링 하게 한다.
- Link는 anchor tag를 래핑 한다.
- query, path variable 등 URL parameter를 얻어 활용할 수 있다.
- 조건에 맞지 않을 경우 redirect를 해줄 수 있다.
- 페이지 이동 시, 이벤트 핸들러를 등록할 수 있다.
- history.listen으로 이벤트 핸들러를 등록한다.
- /posts/my-post-1 등의 nested route를 구현할 수 있다.
📕 react-router의 사용 (v5)
<BrowserRouter>
로 감싸 Router Context를 제공해야 한다.- 반드시 Context 안에서만 BrowserRouter가 동작한다.
- Route로 path를 정의하고, 그 안에 렌더링 하고자 하는 컴포넌트를 넣어준다.
- Link로 특정 페이지로 이동 시, 리로드 없이 페이지가 이동한다.
- Switch로 매칭 되는 라우트 하나만을 렌더링 한다.
- Switch는 가장 위의 매칭 되는 path의 컴포넌트를 렌더링 한다.
🛠 App.jsx
import { BrowserRouter, Route, Switch } from 'react-router-dom'
export function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/about"><AboutPage /></Route>
<Route path="/contact"><ContactPage /></Route>
<Route path="/"><HomePage /></Route>
</Switch>
</BrowserRouter>
)
}
🛠 HomePage.jsx
import { NavLink } from 'react-router-dom'
function HomePage() {
return (
<div>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</nav>
<div>Home 페이지</div>
</div>
)
}
🛠 AboutPage.jsx
import { NavLink } from 'react-router-dom'
function AboutPage() {
return (
<div>
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contact">Contact</NavLink>
</nav>
<div>About 페이지</div>
</div>
)
}
📝 react-router 컴포넌트
📕 BrowserRouter
- HTML5의 History API를 사용하여, UI와 URL의 싱크를 맞추는 역할을 담당하고 있다.
- 모든 URL에 대해 동작하게 하기 위해서는 서버 설정 필요하다.
- 모든 path 앞의 basename을 지정할 수 있다.
- ex) basename="/ko"
- forceRefresh로 페이지 이동 시 리프레시할 것인지 지정할 수 있다.
📕 Switch
- 여러 Route 중 매치되는 Route 위에서부터 하나 선택하여 렌더링 한다.
- 매칭 되는 Route가 없으면 아무것도 보여주지 않는다.
- fallback용으로 404 Not Found Page를 추가할 수 있다.
- path="/"의 경우 모든 path에 매칭 되므로 exact 키워드를 추가하거나 가장 아래로 내려준다.
📕 Route
- path와 컴포넌트를 매칭 할 수 있게 해 준다.
- 매칭 되는 컴포넌트는 children으로 넣어주거나, component prop으로 넘긴다.
- exact 키워드로 정확하게 매칭 하는 path를 설정한다.
- 라우트가 매칭 되지 않는다는 버그가 있다면 exact 키워드로 정확하게 매칭 해주는 처리가 필요하다.
- exact가 없을 경우, to prop으로 보낸 path가 포함되면 매칭 된다.
- Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받는다.
- render prop으로, 매칭 되었을 때 실제 어떤 컴포넌트를 렌더링 할지 통제할 수 있다.
📕 Redirect
- Link와 비슷하나, 렌더링 되면 to prop으로 지정한 path로 이동한다.
- Switch 안에서 쓰일 경우, from, to를 받아 이동하게 만든다.
- ex)
from="/" to="/login"
- ex)
📕 Link, NavLink
- to prop을 특정 URL로 받아, 클릭 시 네비게이션 한다.
- anchor tag를 래핑 한다.
- NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있다.
- to에 location object나 함수를 받을 수 있다.
- location object(hash, pathname, state)
<Link to ={location} />
이렇게 넘겨줄 수 있다.
📕 useHistory, useLocation, useParams, useRouteMatch
- 최상위 컴포넌트가 아니더라도, hook으로 react-router 관련 객체에 접근할 수 있다.
- history, location, params, match 객체에 접근할 수 있다.
- useParams를 이용해 내부 컴포넌트에서도 params 객체를 사용할 수 있다.
📝 react-router 응용
📕 Private Route 만들기
- 특정 조건이 충족되지 않았을 때 다른 페이지로 Redirect 하도록 하는 기능이다.
- 유저의 상세 페이지, 개인정보 변경 페이지 등을 만들 때 사용된다.
📕 Private Route 만들기 - declarative
function PrivateRoute({ component: Component, ...props }) {
return <Route {...props} render={props => {
const isLoggedIn = !!getUserInfo()
if (!isLoggedIn) {
return <Redirect to="/login" />
}
return <Component {...props} />
}}
}
📕 Private Route 만들기 - imperative
function usePrivateRoute(validateFunc) {
const history = useHistory()
useEffect(() => {
if (!validateFunc()) {
history.push("/login")
}
}, [])
}
📕 query string 활용하기
- URL의 query string 정보를 활용해 앱을 구성할 수 있다.
- URLSearchParams API를 활용한다.
function ContactPage() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const email = searchParams.get("email");
const address = searchParams.get("address");
return (
<PageLayout header="Contact Page">
<em>{email}</em>
<br />
<strong>{address}</strong>
</PageLayout>
);
}
function App() {
// ...
return (
<Link to="/contact?email=example@example.com&address=Seoul">
Contact
</Link>
);
}
📝 useLocation
- useLocation : 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks
📝 URLSearchParams
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
URLSearchParams
인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의한다.
💡 오늘 깨달은 것
- 어제는 v6를 기준으로 배웠는데 온라인에서는 v5로 가르치니 헷갈린다.
- 어렵다 어려워!!! 반복해서 학습하자!!
📌 참고
반응형
'프로그래밍 > Today I Learned' 카테고리의 다른 글
[TIL] 엘리스 SW 엔지니어 트랙 Day 057 (0) | 2022.01.16 |
---|---|
[TIL] 엘리스 SW 엔지니어 트랙 Day 056 (0) | 2022.01.13 |
[TIL] 엘리스 SW 엔지니어 트랙 Day 054 (0) | 2022.01.13 |
[TIL] 엘리스 SW 엔지니어 트랙 Day 053 (0) | 2022.01.11 |
[TIL] 엘리스 SW 엔지니어 트랙 Day 052 (0) | 2022.01.10 |
댓글
이 글 공유하기
다른 글
-
[TIL] 엘리스 SW 엔지니어 트랙 Day 057
[TIL] 엘리스 SW 엔지니어 트랙 Day 057
2022.01.16 -
[TIL] 엘리스 SW 엔지니어 트랙 Day 056
[TIL] 엘리스 SW 엔지니어 트랙 Day 056
2022.01.13 -
[TIL] 엘리스 SW 엔지니어 트랙 Day 054
[TIL] 엘리스 SW 엔지니어 트랙 Day 054
2022.01.13 -
[TIL] 엘리스 SW 엔지니어 트랙 Day 053
[TIL] 엘리스 SW 엔지니어 트랙 Day 053
2022.01.11