What is RestAPI

rest api는 위키디피아 혹은 그외에 정리되어진 여러가지 칼럼들이 난무한데
길게 말할 필요없다고 생각한다. 간단히 요약하면
Representational state transfer
프론트와 백엔드 통신을 원할하게 하기위해 정의해놓은 규칙을 이야기 하는 것으로
Get post put delete 와 같은 메써드들이 정해져 있다.
(그외에도 여러가지가 있고, 그외 것들은 논란이 있는 것도 있으나 위의 것들이 대표적이면서 대명사로서 쓰이는 것들)

How to use at React

우선 컨텐츠를 보여주기 위해 서버에 있는 내용들을 다운받아 사용하는 것이 일반 적인 것으로 리엑트 에서는 보통 api 적용시 컴퍼넌트가 마운트 될때 한번만 통신 할 수 있도록

useEffect(()=>{api}, []) 

이렇게 정의한다. 그리고 아래의 예문은 fetch 적용했을 때 postman 으로부터 출력해준 코드 예문이다.

const requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=bts&key=AIzaSyA8HgKL9NHSUh2wAhoZyL2KwxjtvAFJoX8", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

** 위의 response.text는 json() 으로 변경하는 것이 개발툴로 데이터를 열람하기 좋다.
Json 으로 변경하고 데이터를 보면서 사용하고자 하는 데이터 값을
리엑트로 생성한

const [videos, setVideos] = useState([]) 

이곳

Result => setVideos(result.item) 

usestate로 데이터를 관리하는 곳에 출력하도록 로직을 정리해주는 것이 일반적으로 사용되는 방법이다.

Fetch와 axios

axios가 일반적으로 많이 쓰이고 있는데
반환되는 response를 json()화 없이 바로 적용 가능하다.
그리고 주소부분의 가독성이 좋도록 정리하기 좋은 점으로 많이 사용되는 이유중에 하나이다.

중요하면서 기본(보안)

비즈니스 로직의 경우 최대한 로직을 숨기는것이 좋다.
비즈니스 로직이 담긴 구문을 각 하나의 기능으로 정의하고
index.js 에서 independency injection
(url 정보와 키를 index.js에 정의하고 index에 서비스를 임포트하여 인자로 넘겨 로직을 정리함)으로 처리해주어 코드가 노출되지 않도록 하는 것이 좋다.
여기에 더 나아가 .env를 생성하여 키와 서버정보를 기록하고 gitignore로 로컬 외에 공간에서는 공유할 수 없도록 설정하는 것이 보안을 위해 꼭 해줘야하 하는 부분이다.