[SOPT] week04 세미나 TIL - API 통신

비동기

Single Thread 언어

js는 싱글스레드 언어! => js 엔진은 단하나의 실행 컨텍스트 스택을 가지며, 한번에 하나의 작업만 수행 가능

 

동기 / 비동기

js는 싱글스레드 언어! => js 엔진은 단하나의 실행 컨텍스트 스택을 가지며, 한번에 하나의 작업만 수행 가능

 

js의 동시성을 지원하는것이 바로 '이벤트루프'!

비동기 처리

비동기처리 방식의 문제점 -> 반환 결고 ㅏ가지고 후속처리 불가

-> callback 사용

Callback

매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는것

즉, 함수 자체를 매개변수로 전달하는것

 

Callback Hell

=> Promis, Async

Promise

resolve(value)

reject(error)

 

비동기처리가 성공하면, 콜백함수의 인자로 받은 resolve 함수 호출

실패하면, reject 함수 호출

 

Promise의 세가지 상태

• pending 대기
• fulfilled 성공
• rejected 실패

Promise의 후속처리 메서드

then

- 두개의 콜백함수를 인자로 전달받아, promise를 반환함 (인자 1: 성공시 호출, 인자 2: 실패시 호출)

성공경우만 다루고싶다면 인자 한개만 전달

실패경우만 다루고 싶다면 첫번쨰 인자에 null

 

catch

- 실패시 호출할 하나의 콜백함수를 인자로 전달받음. promise를 반환함

- .then(null,f)와 동일

 

finally

- promise가 처리되면 항상 실행될 하나의 콜백함수를 인자로 전달받음. 성공실패와 관계없이 항상 실행

.then(f,f)와 차이점?

• finally 핸들러에는 인수가 없음
• 자동으로 다음 핸들러에 결과와 에러 전달 => Promise Chaining
• 간결함!

 

- 여러개의 promise를 연결해서 ㅅ사용할 수 있음

 

catch().then() : catch 걸리는게 잘 실행된 후 then  실행. 왜냐면 catch도 promise 반환해주니까

 

Promise & then의 문제점
1. 가독성 저하. 디버깅 불편 (길어지는 체이닝)
2. 예외처리(try catch와 then catch) 혼용시 헷갈림 
=> async/await

 

Async/Await

기본 문법

1. async 함수

- async는 항상 function앞에 위치해야함

- 해당 함수는 항상 promise를 반환

2. await

- awync 함수에서만 사용가능

- js에서는 await 키워드를 만나면 promise가 처리될 떄까지 기다림

 

에러 핸들링

1. try문 실행

2. 에러 있다면 try 실행 중단, catch 블록으로

3. 에러 없다면 그냥 try 다 실행

 

-> 동기/비동기 구분없이 trycatch로 일관되게 예외처리 가능

 

REST API (HTTP 메서드)

REST API

리소스를 나타내는 방법에 대해 개발자들끼리 정한 규칙

Rest란?

- 모든 자원에 고유한 이름을 부여하여, 해당 자원의 상태를 주고받는 모든것

- HTTP URI를 통해 자원 명시

- HTTP Method를 통해 자원 읽고씀(CRUD)

 

Rest 필요 이유

- 애플리케이션 분리 및 통합

- 다양한 클라이언트의 등장

 

Rest 특징

- Server-Cliient 구조

- Stateless

- Cacheable

- Layered System

- Code-On-Demand

- Uniform Interface

 

HTTP Method

- 통신 요청이 어떤 요청인지 구분해주는 메소드

• GET
• POST
• PUT : 서버의 데이터 갱신(대체)
• DELETE
• PATCH : 리소스의 일부 부분적으로 수정

 

Request

• url
  • query string?
• header
  • Authoriization, Content-Type 등
• body
  • 요청과 함께 보내고자 하는 XML, JSON, Multi From 등의 데이터
  • GET은 request에 Body 없음. url에서 쿼리스트링으로 사용할것

 

Reponse

• 응답 상태 코드
  • 2xx 성공
  • 3xx 리다이렉션
  • 4xx 요청 오류
  • 5xx 서버 내부 오류
• header
  • 요청에 대한 부가적인 정보
• body
  • 요청에 대한 응답 데이터가 담겨오는 곳

데이터 통신

Axios

axios: 브라우저와 node.js에서 사용할 수 있는 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

 

js 내장 fetch도 있지만, 여러 이유로 axios 선호

- fetch 단점

• CSRF 보호 기능 x 
• json 데이터 형식 자동 변환 ㄴㄴ. json()메서드 사용해야함
• 에러 응답을 받더라도 reject하지 않음

 

환경변수 - .env

• import.meta.env 로 접근
• VITE_로 시작해야 인식함

Postman

Thunder Client