[항해 99 주특기] 심화강의 통신

Json-sever

BackEnd에서 아직 준비가 덜 될을 때 테스트를 해야하는 상황이 있을텐데 이때 테스트용으로 사용하는 서버가 json sever이다(패키지)

 

사용법

1. 설치

yarn add json-server

이후 src 밖에서 db.json file을 만들고 데이터를 입력해 넣으면 된다 (객체형태)

궁금증 1) 이게 JSON방식인가? JSON 방식이란게 정확히 뭘까??

 

2. 실행

yarn json-server --watch db.json --port 3001

 

이후 접근할 떄는 /post 이런식으로 url에 적어서 접근하면 됨

 

---

HTTP 프로토콜

웹통신

클라이언트와 서버가 서로 데이터를 주고 받는 것이다. 이때 우리는 어떤방식으로 주고받을지에 대해서 약속을 해서 그 방식으로만 데이터를 주고 받는데 이때 그 약속을 HTTP 프로토콜이라고 한다. 

 

요청과 응답

 

URL의 구조

 

 

통신을 할 때 사용하는 메서드의 종류는 다양하게 있는데 그중에서 자주 사용하게 되는 get (조회), post (생성), put patch (수정), delete (삭제)

이 외에도 많은 메서드가 있지만 필요할 때 나중에 찾아보자

 

상태코드

아까전에 /post/comments 하니깐 404오류가 났다  이때 오류가 나는 것이 상태코드이다

맨 앞자리 숫자에 따라서 종류가 결정되며 요청에 대한 응답이 상태코드를 가진다.

• 1xx 요청 받았다는 의미 (거의 못봄)
• 2xx 성공이란 의미
• 3xx 추가요청이 필요하단 소리
• 4xx 에러 클라이언트에서 요청할 때 잘못됨 (문법이 잘못되었거나 무튼 클라이언트 니 잘못임)
• 5xx 에러 서버가 잘못했을 때 오류임 (서버가 꺼져있거나 기타 등등)

 

---

비동기통신

axios 

가장 많이 사용되는 패키지 pomise 기반으로한 http 통신 라이브러리이다.

 

사용방법

yarn add axios

패키지 설치를 먼저하고 json sever도 설정

이후 테스트용 db.json으로 정보를 간략하게 생성

 

useEffect hook을 이용해서 마운트 될 때 정보를 불러오게끔 만들어보자

(최초에 마운트 될 때 db로 부터 값을 가져올 것이다.)

 

주의사항

사용 시 port를 현재 react가 실행되는 port와 db가 저장되는 port 2개가 있고 각각 다른컴퓨터에 있다고 생각을 하면된다

await를 사용하지 않았을 때 promise 객체로 반환하는데 이건 await을 통해서 response를 할당 받고 나서 출력을 해야하는데 할당 받기 전에 출력이 되었기 때문이다

궁금증2) 옵셔널체이닝이란 무엇인가

 

DB에 정보가 저장 될 때 id 값을 자동적으로 가지는 NoSQL의 속성으로 인해서 id값은 따로 부여하지 않아도 될 것같다(근데 숫자로 표현되는데 괜찮은거 맞겠지?) 

<form> 안에 <button >은 항상 submit(이벤트)을 가지고 있기때문에 자동으로 새로고침이 된다. e.preventDefault()를 통해서 submit을 막아주어야 한다.

함수를 호출할 때 호출선언(함수())을 하게 되면 랜더링과정에서 이미 함수를 실행해버리고 랜더링을 해버린다 함수로 감싸줘야 함수 호출(()=>함수())하고 랜더링하지 않는다

(인자를 받아야하는경우 호출형식으로 들어가니까 그떄는 함수형식으로 써줘야겠네 ()=> 함수())

실시간으로 반영하게 하기위해서는 setTodos를 꼭 같이 해줘야한다 

아이디의 형이 다른경우가 있기에 일치연산자와 동등연사자 구분해서 사용

 

api명세서 확인하기

path variable와 query방법을 적절히 혼합사용하면 되는데 상세정보와 같은 것은 path를 통해서 filter와 같이 정보를 걸러야하는경우에는 query를 통해서 하는 것이 공식문서의 내용이다.

 

 

이후 구현한 로직은 참고자료를 보자 

https://teamsparta.notion.site/04-axios-fetch-5bbc8e9005004549b9d4358d241d61f8

04. 비동기 통신 - axios, fetch

 

---

Interceptor

axios 심화로써 중간에서 가로채는 역할을 하는 놈 요청과 응답의 중간과정에서 어떠한 역할을 하는 것이 interceptor다.

 

instance.interceptors.request.use()

요청을 보내기 전 수행되는 함수,  오류요청을 보내기 전 수행되는 함수

instance.interceptors.response.use()

응답을 내보내기 전 수행되는 함수, 오류함수를 내보내기 전 수행되는 함수

둘 다 2개의 인자를 받는다  

정상의 경우에는 retrun을 통해서 나타내고 오류는 Promis.reject(error) 를 꼭 해주어야한다

 

 

예시)

주소가 3001 => 4000으로 바뀌었을때 사용한 주소부분을 다 찾아가서 새롭게 고쳐서 인적리소스의 낭비가 너무나 심하다 그래서 반복적으로 발생하는 일들을 공통적으로 처리할 수 있게끔 나온 개념이 interceptor이다 

 

env파일을 핸들링 

https://tooo1.tistory.com/582

[React] .env (환경변수 관리)

 

axios instance 

axios를 가공해서 사용하는 방법인데 가공하게 되면 풀네임으로 쓰던 API를 줄여서 쓸 수 있다.

axios를 import 해오는것이 아닌 가공한 api를 가져와서 가공할 때 적은 basURL로 쓴 url 이후 page or path만 쓰고  axios라고 쓴 것을 api로 바꿔주면 된다.