*학교 프로젝트 과목을 들으면서 백엔드 API 통신을 처음 해보게 되었다.
까먹었을때 수시로 다시 찾아보기 위해 블로그에 정리해본다!
*비동기(Asynchronous) 함수
-function앞에 async를 붙이면 해당 함수는 항상 Promise를 반환
-Promise 아닌 것도 Promise로 감싸 반환
-await: async 함수 안에서만 동작 => javaScript는 await 키워드를 만나면 Promise 처리가 될 때까지 기다린다.
-await 함수는 thenable 객체를 받음 -> then method가 있는 호출 가능한 객체(.then/.catch문 사용으로 간편한 예외처리)
*CRUD란?
특정 객체에 대한
*Create: 등록
*Read: 조회
*Update: 수정
*Delete: 삭제
동작을 수행하는 것을 의미함.
1) Post
Create는 주로 POST 메서드를 많이 이용.
필요에 따라 요청 URL에 보낼 데이터 값을 함께 실어보냄.
then-> 요청 성공시 로직 핸들링/ catch-> 요청 에러시 로직 핸들링
2) Get
Read시 사용하는 메서드. 응답 method 처리 동일
3) Update
수정은 axios의 put 혹은 patch method를 이용해 주로 처리함.
put -> 모든 데이터 수정 시 사용
patch -> 일부 데이터 수정시 사용
4) Delete
삭제는 delete method를 이용해 처리
*API란?
Application Programming Interface의 줄임말. 다른 소프트웨어 시스템과 통신하기 위해 따라야하는 규칙을 정의함.
*RESTful API란?
우선 REST란 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처이다.
처음에 인터넷과 같은 복잡한 네트워크 통신을 관리하기 위한 지침으로 만들어졌다.
REST 기반 아키텍처 사용해 대규모의 고성능 통신을 안정적으로 지원할 수 있음.
REST 아키텍처를 구현하는 웹서비스를 RESTful 웹서비스라고 하고, REST아키텍처 스타일을 따르는 API를 REST API라고 한다.
*REST API 설계 시 가장 중요한 항목
1) URI는 정보의 자원을 표현해야 한다.
2) 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.
*HTTP 응답 상태 코드
-> 표 출처: https://meetup.nhncloud.com/posts/92
----------------------------------------------------------------------------------------------------------------------------------------------------
postman을 이용한 data 접근
1) POST 형식으로 회원가입 후 /accounts/ -> key 발급
2) POST 형식으로 로그인 완료 /aaccounts/token/-> access token 발급
3) GET 형식으로 이벤트 페이지 접근 시도 /events/
-> Headers에 Authorization(Key)-{Bearer 발급받은 access token} 넣고 실행하면 제대로 나옴.
access token 없으면 아래와 같이 나옴.
localStorage란?
웹브라우저에서 제공하는 저장소로, key-value 쌍을 이용해 데이터를 로컬 컴퓨터에 저장할 수 있게 해줌.
여기 저장된 data는 브라우저 세션이 끝나도 남아있으므로 사용자가 브라우저를 닫았다가 다시 열어도 정보를 유지할 수 있음.
1) data 저장하기
localStorage.setItem('access',accessToken);
localStorage.setItem('refresh', resfreshToken);
2) 데이터 불러오기
const accessToken=localStorage.getItem('access');
const refreshToken=localStorage.getItem('refresh');
3) 데이터 삭제하기
localStorage.removeItem('access');
localStorage.removeItem('refresh');
->모든 데이터 삭제 시 localStorage.clear();
로그인에 성공해서 accessToken, refreshToken 받은것을 localStorage에 저장한다.
그리고 다음 페이지에서 API 요청을보낼 때 저장한 accessToken을
const accessToken=localStorage.getItem('access');로 불러와서 axios로 API에 GET 요청할때
아래와같이 headers에 Authorization 키를 추가해 "나 자격 인증 데이터 있는 애니까 data 줘라"라고 알려준다.
그리고 data받아서 이런 API 명세를 가진 data에서 image를 불러와봤더니 잘 불러와지는 것을 확인했다.
----------------------------------------------------------------------------------------------------------------------------------------------------
[헤맸던 부분]
1) "TypeError: category.map is not a function"
해당 에러는 map함수는 배열에서만 사용할 수 있는 함수이기 때문에 발생하는 오류였다.
category변수가 예상한 data가 아닐때 발생하는 오류였는데, setStoreCategory를 (response.data)가 아닌 (response)로
가져오면서 발생한 오류였다.
Axios 응답은 { data: ..., status: ..., headers: ..., ... }와 같은 형태로 반환되므로,
실제 필요한 데이터는 response.data 내에 있다는 걸 명심하고 까먹지 않고 response.data를 불러와야 한다!!
