[TIL] 엘리스 SW 엔지니어 트랙 Day 054

📖 오늘 배운 내용 - 2022.01.06

• react-router-dom
• useParams, useNavigate
• CORS
• dangerouslySetInnerHTML

 

📝 react-router-dom (v6)

🛠 설치

npm install react-router-dom@6

 

📕 사용 :: <BrowserRouter>

import { BrowserRouter } from "react-router-dom";
...
...

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

• react-router를 사용하기 위해서는 최상위 컴포넌트에서 리액트 라우터를 사용하겠다고 선언해줘야 된다. ⇒ <BrowserRouter>

 

📕 Link :: URL 바꾸기

import { Link } from 'react-router-dom';
..
..
..
    <header>
    <h1><a href="index.html" onClick={onClickHandler}>{props.title}</a></h1> // 전
    <h1><Link to="/">{props.title}</Link></h1> // 후
  </header>

• 링크 태그를 react-router-dom에서 제공해주는 컴포넌트로 바꿔주기

 

📕 Routes, Route

import { Link, Routes, Route } from 'react-router-dom';
...
...
<Routes>
    <Route path="/read/:id" element={<>Read</>}></Route>
<Routes>

• id를 가변적으로 넣어주기 위해서 :id 이렇게 해준다.

 

📕 useParams

import { Link, Routes, Route, useParams } from 'react-router-dom';

const params = useParams();
console.log('params', params);

• id값을 가져오기 위해서 useParams를 사용

 

📕 useNavigate

import { Link, Routes, Route, useParams, useNavigate  } from 'react-router-dom';

<Route path="/create" element={
  <Create
    onSubmit={(_title, _body)=>{
      let newTopic = {id:nextId, title:_title, body:_body}
      let newTopics = [...topics];
      newTopics.push(newTopic);
      setTopics(newTopics);
      navigate('/read/' + nextId)
      setNextId(nextId+1);
    }}>
  </Create>}>
</Route>

• 게시글 작성 시 해당 게시글 링크로 이동 → nextid + 1

 

📝 CORS

• CORS란 Cross-Origin Resource Sharing의 줄임말로 한 애플리케이션이 다른 도메인의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 것을 말하며 애플리케이션이 사용할 자원을 가진 서버의 도메인이 자신의 도메인과 다를 때 실행한다.
• 예를 들어, https://domain-a.com 도메인을 사용하는 프론트엔드에서 https://domain-b.com/data.json 도메인을 사용하는 백엔드에 있는 API 요청을 할 때 CORS가 사용된다.
• 기존에는 서버에 있는 자원을 사용할 때 다른 외부의 접근은 해킹과 같은 악의적인 목적뿐일 것으로 생각해보자. 그래서 이러한 자원 요청을 차단하였지만, 최근에는 OpenAPI 같은 것이 등장하면서 외부의 접근이 자연스러워졌다. 그에 따라 서로 다른 도메인의 자원에 접근이 가능하도록 CORS가 만들어진 것이다.

 

📕 CORS 에러

• CORS를 이용해 외부 자원에 접근할 수는 있지만, 서버에서 무조건 이를 허용하는 것은 아니다.
• 여전히 악의적인 목적으로 자원을 이용할 여지가 있기 때문이다. 네이버에서도 다른 사람의 클라이언트 키를 도용해서 API를 호출하는 것을 막기 위해서 무조건 CORS를 허용하지는 않는다. 또한 API 사용 시 CORS를 지원하지 않는 경우도 있기 때문에 해결 방법을 알아두는 것이 좋다.

 

📕 에러 해결 방법

• 백엔드에서 특정 도메인에 대한 CORS를 허용함으로써 CORS 에러를 해결할 수 있다. 하지만 이는 OpenAPI에서 사용하기는 쉽지 않은 방법이다.
• 다른 방법으로 JSONP를 이용하는 방법이 있는데, HTML의 <script> 태그는 보안 정책이 적용되지 않는다는 점을 이용하여 외부 자원을 JSON 형태로 변환해 데이터를 받아오는 방법이다.
• 그 외에도 다양한 해결 방법이 있지만, 프록시 설정을 통해 문제를 해결할 수 있다. 서버와 사용자 간에 통신을 할 때 중계기 역할을 하는 것이 프록시 서버다. 즉, API와 사용자 간에 프록시 설정을 하여 서버의 자원을 프록시 서버에서 받아오고 사용자에게는 CORS가 허용된 것처럼 HTTP 요청을 허용해주는 것이다.
• React 프로젝트에서 프록시 설정도 가능하지만, https://cors-anywhere.herokuapp.com/을 이용하면 CORS 프록시 설정을 간편하게 할 수 있다. 해당 주소 뒤에 사용할 API 주소를 이어 붙이기만 하면 된다. 사용 시 버튼 클릭을 통해 기능을 활성화만 해주면 된다!
• https://cors-anywhere.herokuapp.com/corsdemo
• 프로덕션 레벨에서는 사용 금지. 그냥 서버에서 통신하자...!

 

💡 오늘 깨달은 것

• 리액트 라우터 돔를 사용하니까 이전에 했던 복잡한 작업이 확 줄어드는 게 보이니까 혁신적이다...!
• cors는 브라우저 정책이다. 유저를 보호하기 위해서.
• Access-Control-Allow-Origin는 허용된 페이지를 의미
• 네이버 api는 서버랑 통신하는 것을 원하지, 브라우저랑 통신하는 것을 원치 않는다. => 프록시 서버를 사용!

 

📌 참고

• JavaScript Immutability
• Immutable.js
• Declarative routing for React apps at any scale | React Router
• 리액트 라우터 v6 튜토리얼