개인과제를 시작했다. 자꾸 과제만 하려 치면 부담감부터 느껴지는 나.. 아 ㅋㅋ 시작이 젤 어려운 거라고 ㅋㅋ... ㅋ... 그래서 바로 시작. 오늘은 Router 개념이 제대로 안 잡힌 나를 위해 Router 개념 특식을 준비했다. 아 ㅋㅋ 진수성찬 아니겠냐고
농담 그만하고 목차 적자면 다음과 같다. 아 그리고 Router 내용에 평소에 궁금했던 404 error 내용이 나오길래 이에 대해서 좀 더 알아보고 작성해보았다.
< 목차 >
1. 개인과제 막혔던 부분들
(1) React 절대경로 안 됨
(2) 배경사진 안 들어감
2. Router (라우터)
(1) 그건 알겠는데, React-Router는 '왜 사용'하는 걸까?
(2) Router 종류
(3) 404(페이지를 찾을 수 없음) 오류
(4) React-Router-Dom
3. 금일 소감
1. 개인과제 막혔던 부분들
(1) React 절대경로 안 됨
저번 개인 과제 때도 에러 떠서 그냥 절대경로 적용 안 하고 제출했는데 이번에도 떠버렸다.
절대경로 코드 그대로, 제대로 작성했는데도 자꾸 에러가 뜨길래 혼자 알아보다가 답이 안 나와서 튜터님께 갔다. 아예 VS Code를 껐다가 다시 켜보라셔서 했더니.. 됐다 ㅎ.. 이런 환경 재설정하는 거나 전체적으로 적용을 다시 해주는 건 보통 프로그램을 아예 껐다가 켜면 된다고 하셨다 ㅎ,,
(2) 배경사진 안 들어감
사진 빼고 다른 CSS는 다 적용이 된다. 기이한 현상
'Background 사진 안 나옴'으로 검색하면 해결책으로 넓이랑 높이 지정해야 한다고만 나오길래 '다 제대로 지정했는데 왜 안 나오지?' 하다가 튜터님께 갔다.
하이라이트 처리한 곳처럼 자꾸 주소에 띄어쓰기 한 칸이 된 상태로 붙여넣어졌다. 크롬의 문제인 듯. 저 띄어쓰기 한 칸 지우면 사진이 정상적으로 나온다. 크롬 즌쯔 웃긴다 너
2. Router (라우터)
: 서로 다른 네트워크 사이에서 통신 경로를 지정해주고, 데이터가 전송되도록 중간에서 중개해주는 장치
서로 다른 각각의 네트워크들을 연결해서 또 다른 더 큰 네트워크가 형성되도록 한다. 즉 다양한 주소의 요청이 들어왔을 때, 각각 맞는 콘텐츠로 이동시켜주는 작업이라고 볼 수 있다.
(1) 그건 알겠는데, React-Router는 '왜 사용'하는 걸까?
'<a /> 태그나 다른 Hook을 사용해도 되는데, 굳이 Router를 사용하는 이유가 있나?'
: 'SPA 사용자 경험 향상'이 목적이다.
<a /> 태그를 사용하면 페이지 전체가 새로 로딩된다. 흔히 말하는 화면 깜빡임이 필수적으로 발생하고 이는 사용자 경험을 떨어뜨리는 큰 요인이다. 따라서 Routing을 통해 '부드러운 화면 전환'을 이루고자 하는 것이다.
'그럼 그냥 SPA 안에서 모든 페이지를 전부 렌더링해주는 형식으로 만들면 되는 거 아닌가?'
이렇게 하면 아래와 같은 다양한 문제가 발생한다고 한다.
① 특정 페이지 즐겨찾기 등록 불가
⇒ 화면 전환이 되어도 URL은 고정되어 있어서 내가 원하는 페이지를 특정할 수 없다.
② 뒤로가기 불가
⇒ 해당 SPA 하나에 URL이 하나이기 때문에 뒤로가기를 누르면 이전에 보던 다른 웹사이트로 이동하게 된다.
③ 새로고침 불가
⇒ 새로고침을 누를 시, 보던 페이지가 아닌 맨 처음의 페이지가 나온다.
④ SEO(검색 엔진)로 의해 원치 않는 방식으로 색인될 가능성이 있다.
(2) Router 종류
① HashRouter
: URL의 해쉬(#)값을 이용하는 Router
- 주소에 해쉬(#)가 붙는다.
- 검색 엔진(SEO)이 읽지 못한다.
- 별도의 서버 설정을 하지 않더라도 새로고침 시, 오류가 발생하지 않는다. 이는 해쉬 라우터가 해쉬(#) 뒤의 값은 브라우저에서만 관리하고(Routing하는 사실을 서버가 모름), 서버는 기본 URL로 서버에 데이터를 요청하기 때문이다.
- history API를 사용하지 않기 때문에 동적 페이지에 불리하다.
② BrowserRouter
: HTML5의 history API를 활용하여 UI를 업데이트
- history API를 사용
- 별도의 서버 설정이 없다면 새로고침 시, 404 에러가 발생
- 큰 프로젝트에 적합
- 서버가 존재하고, SEO가 필요한 프로젝트라면 BrowserRouter를 사용하는 것이 좋고, 그 외에 개인적이거나 작은 단위의 프로젝트라면 HashRouter를 사용해도 좋음
'사이트 들어가보면 404 error가 자주 뜨던데, 404 에러가 뭘까?' (평소 궁금했던 에러)
(3) 404(페이지를 찾을 수 없음) 오류
- 일반적으로 404 오류는 사이트의 검색 성과에 영향을 미치지 않음
- 오류로 표시된 URL이 확실하게 내 사이트에 존재하지 않는다면 무시해도 됨
- 404 URL 및 기타 잘못된 URL이 404 HTTP 응답 코드를 적절하게 반환하며 사이트의 robots.txt 파일로 차단되어 있지 않은지는 확인해야 함
* 404 오류를 처리하는 방법
- 해결할 필요가 있는지 결정하자. 많은(어쩌면 대부분의) 404 오류는 해결할 필요가 없다. 404 오류는 사이트의 색인 생성이나 순위에 영향을 미치지 않기 때문
- 색인 생성을 위해 제출한 URL인 경우(오류 상태)엔 다음과 같이 실행
- URL 옆에 있는 제출 아이콘을 클릭하여 URL이 제출된 위치를 확인하고 검색 정보를 살펴보면서 URL을 검사한다. 필요한 경우, 사이트맵을 업데이트
- 콘텐츠가 이동했다면 리디렉션을 추가하기
- 콘텐츠를 영구적으로 삭제했으며 새로운 콘텐츠로 교체할 생각이 없다면 이전 URL이 404 또는 410을 반환하게 한다(현재 Google에서는 410(존재하지 않음)을 404(찾을 수 없음)와 똑같이 취급).
- 알 수 없는 URL: 사이트에 존재한 적이 없었던 URL에 404 오류가 표시되는 경우도 있다. 이 오류는 사용자가 사이트에서 존재하지 않는 URL을 탐색했을 때 발생한다. 브라우저에서 URL을 잘못 입력했거나 링크 URL을 잘못 입력한 것일 수 있다. 이러한 오류가 아주 흔하게 발생한다면 해당 URL의 리디렉션을 생성할 수 있다.
- 가짜 콘텐츠를 생성하거나, 홈페이지로 리디렉션하거나, robots.txt를 사용하여 404 오류를 차단하면 안 된다. 이렇게 조치하면 Google에서 사이트 구조를 인식하고 제대로 처리하기가 어려워진다. 이를 soft 404 오류라고 한다(Google에서 성공적으로 URL을 크롤링하면 URL을 계속해서 크롤링하려 할 수 있다. 300 수준 리디렉션을 실행하면 상당히 오랫동안 재크롤링 시도가 지연된다.). URL 삭제 도구를 사용하여 URL 삭제 요청을 제출해도 이 보고서에서는 오류가 삭제되지 않는다.
- Google Search Console 中
* Redirection(리디렉션)
: 사용자가 특정 사이트나 페이지를 방문했을 때 자동으로 다른 URL로 이동되는 메커니즘
* 색인
: 사용자의 검색 결과에 해당 게시글이 뜨게 하기 위해서 검색봇(구글봇)이 게시글의 일부 내용을 긁어가는 것
Google 크롤러('Googlebot')에서 페이지를 방문하면 Google에서 페이지의 색인을 생성하며 Google 크롤러에서 페이지의 콘텐츠와 의미를 분석하여 Google 색인에 저장한다. 색인이 생성된 페이지가 Google 검색 Essentials를 준수하는 경우, 해당 페이지가 Google 검색 결과에 표시될 수 있다.
- Google Search Console 中
(4) React-Router-Dom
: React로 생성된 SPA(Single Page Application) 내부에서 '페이지 이동'이 가능하도록 만들어주는 라이브러리
▼ 설치 명령어 (터미널에서 작성! (* window는 bash 맞는지 체크 필수!))
yarn add react-router-dom
// 혹은
npm add react-router-dom
▼ 세팅
import { BrowserRouter, Routes, Route } from 'react-router-dom'
* 가장 많이 사용되는 모듈 3가지
BrowserRouter
- history API를 활용해 history 객체를 생성
- history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 URL 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 된다.
- Routing을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고, 감싸줘야 한다.
Route
- 현재 브라우저의 location(window.href.location 정보를 가져온다) 상태에 따라 다른 element를 렌더링한다.
- Route.element: 조건이 맞을 때 렌더링할 element, <Element />의 형식으로 전달된다.
- Route.path: 현재 path값이 URL과 일치하는지 확인해 해당 URL에 매칭된 element를 렌더링해준다.
Routes
- 모든 Route의 상위 경로에 존재해야 하며 location 변경 시, 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아준다.
▼ Router 기본 설정 및 컴포넌트 생성
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Karina from "pages/Karina";
import Giselle from "pages/Giselle";
import Winter from "pages/Winter";
import Ningning from "pages/Ningning";
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Karina />} />
<Route path="/giselle" element={<Giselle />} />
<Route path="/winter" element={<Winter />} />
<Route path="/ningning" element={<Ningning />} />
</Routes>
</BrowserRouter>
)
};
export default Router;
▼ 상위 렌더링 요소에 컴포넌트 연결
import Router from "./Router";
const App = () => (
<>
<Router />
</>
);
export default App;
Link
: Router 내에서 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트
- to 속성에 경로를 넣어주는 방식으로 사용
▼ 예문
import React from 'react';
import {Link} from 'react-router-dom';
function Nav(){
return (
<div>
<Link to='/'> Home </Link>
<Link to='/about'> About </Link>
</div>
);
}
export default Nav;
useNavigate
: 특정 이벤트(onChange, onClick 등)가 발생했을 때, 페이지 이동을 trigger 가능
▼ 예문
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
const onClick = () => {
navigate('/')
}
중첩 라우팅
: 특정 페이지 내에서 하위 페이지를 만들 수 있고, 해당 페이지마다 경로를 이용한 데이터 전달도 가능
중첩 라우팅을 구현할 경우, 해당 하위 페이지 이외에는 콘텐츠가 바뀌지 않는다.
Router 내부에 아래와 같이 자식 요소 Route를 만들어준다.
이렇게만 설정해도 Router 내부적으로는 /about 주소 하위에 /location 이라는 하위 Routing이 되었다고 판단한다. 따라서 우리가 /about/location으로 주소를 이동할 경우, 주어진 Location 컴포넌트가 Rendering된다(about 컴포넌트도 함께 렌더링됨).
▼ 예문
<Route path="/about" element={<About />}>
<Route path="location" element={<Location />}></Route>
</Route>
Outlet
: Routing 컴포넌트 내부에서 사용되며, 중첩된 자식 Route가 렌더링되는 위치를 지정
이래 예문과 같이 About 컴포넌트 내부에 Outlet 컴포넌트를 렌더링해주면 Router에서 이를 인식하고, Outlet 자리에 Location 컴포넌트를 렌더링하게 되는 것! (물론, 주소가 일치하는 경우)
▼ 예문
import { Outlet } from 'react-router-dom';
function About() {
return (
<div>
<div>
<h2>여기는 About 페이지입니다.</h2>
<p>대충 쇼핑몰 페이지라는 뜻</p>
</div>
<Outlet />
</div>
);
}
더 깊은 내용은 아래의 링크를 참조하자!
https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0
[Reference]
1) https://www.ktpdigitallife.com/%EB%9D%BC%EC%9A%B0%ED%84%B0router%EC%9D%98-%EB%9C%BB%EA%B3%BC-%EA%B0%9C%EB%85%90/
2) https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0
3) https://codingbroker.tistory.com/72
4) https://support.google.com/webmasters/answer/2445990?hl=ko
3. 금일 소감
와 오늘도 공부하며 작성하다 보니 시간이 좀 걸렸다. 하지만 제대로 공부했죠? 지금 뿌듯하죠?
역시 하나를 알더라도 확실히 알고 가는 게 추후 다른 내용을 공부하더라도 좀 더 도움되고 공부가 잘 되는 것 같다. 전엔 공부할 양이 너무 많다는 압박감에 애매하게 알거나 헷갈리는데 그냥 넘어가는 게 거의 99%였는데 지금은 블로그에 정리하는 김에 더 자세히, 더 명확히 알려고 하는 데에 집중하다 보니 좀 더 뇌가 말끔해지며 정리되는 느낌이 강하게 든다. 내 생각에도 지금 방식이 맞다는 느낌이고, 아주 잘하고 있는 것 같다 굿굿 그리고 너무 재밌다.
지금은 자정 조금 넘은 시각,,, 개인과제 오늘 절반 정도는 하고 자야 하는데 아직 별로 못했다.. 좀 더 하다가 잠 쏟아질 것 같을 때 자야겠다. 정신 차리고 새벽도 파이팅!!!
잠 깨는 김에 귀여운 짤 하나 다시 보며 글을 마치려고 한다. 아까 아래 짤 보고 엄청 웃었다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
'[Front-end] 개발자 공부' 카테고리의 다른 글
| [개발 공부 30일차] Error 직면과 문제해결 | useState, useEffect (0) | 2024.02.02 |
|---|---|
| [개발 공부 29일차] 이번에도 찾아온 난관 | 개인과제 (1) | 2024.01.31 |
| [개발 공부 27일차] useParams, useNavigate, Batch (0) | 2024.01.29 |
| [개발 공부 26일차] 선언형 프로그래밍 | every(), some() (1) | 2024.01.29 |
| [개발 공부 25일차] 코드 리뷰 | Cookie, Cache, Heap, 일급객체 (0) | 2024.01.27 |