api

1.비동기처리

 

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성 (동기처리로 할경우 코드실행을 기다리고 기다려야하니 어플리케이션을 실행하는 대 시간이 오래걸림)

-예로 setTimeout() 도 비동기 처리이다. (3초뒤에 실행하라고 했을때 뒤에 나오는 다른 코드수행을 먼저하고 3초후에 setTimeout이 실행된다.)

-비동기처리로 인해 api통신을 할때 undefined가 나오므로 콜뱀함수로 특정로직이 끝났을때 동작을 실행시킬 수 있다.

-비동기처리 로직을 위해 콜백함수를 연속으로 사용하면 콜백지옥에 빠질 수 있는대 이를 해결하기 위해 나온것이 Promise나 Async 이다.(콜백함수 분리)

 

2.자바스크립트 Promise

 

Promise는 자바스크립트 비동기 처리에 사용되는 객체

-서버에서 받아온 데이터를 화면에 표시할때 사용(데이터를 다 받아오기도 전에 화면에 데이터를 표시하면 에러가뜸)

*Promise의 세가지 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태(new Promise() 를 호출했을 - 콜백 함수의 인자는 resolve, reject)
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태(resolve()를 실행 했을때, then()을 이용하여 처리 결과 값을 받을 수 있음- 실패결과를 then의 두번째 인자로도 받을 수 있음)
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태(reject()를 실행했을때, 실패한 이유 또는 결과 값을 catch()로 받을 수 있음 - 😌콜백함수 내부에서 나오는 오류를 잘 잡지 못하므로 then()의 두번째 인자 보다는 catch()로 처리하는것이 더 효율적)

-Promise는 여러개의 Promise를 연결할수 있다.(then()메서드로 연결하여 새로운 Promise 객체가 반환됨)

 

3.async & await

 

자바스크립트의 비동기 처리 패턴(기존 비동기처리 방식인 콜백함수와 Promise의 단점을 보완)

async function 함수명() {
  await 비동기_처리_메서드_명();
}

-비동기 처리 메서드가 Promise를 반환해야 await가 작동함(일반적으로 axios등 Promise를 반환하는 api 호출함수)

-await을 사용하지않는다면 콜백함수나  then()으로 처리해야함

-여러개의 비동기 처리코드를 다룰때 async & await 사용

-async & await에서 예외처리하는 방법은  try catch(try{}안에 이행할 코드를 catch{}안에는 에러코드를 넣으면됨)

 

🙄꼭 try catch로 해야하는가?

다만 유일하게 try-catch를 꾸준히 써야 하는 부분이 있는데 바로 컨트롤러 레이어 로직이다.

비동기 코드가 성공하든 에러가 발생하든 결국 클라이언트에게는 정상적인 응답을 내주어야 한다.
그 응답이 해당 요청을 수행할 수 없다는 에러이더라도 말이다.
때문에, 서비스로직까지는 비동기에러를 계속 try-catch 없이 그대로 전파해 주는게 바람직하고,
컨트롤러에선 try-catch를 통해 더 이상 에러가 전파되는것을 차단하고 에러내용을 정리해 400~500번대 상태코드와 함께 응답을 해주는 것이다.

https://velog.io/@vraimentres/async-%ED%95%A8%EC%88%98%EC%99%80-try-catch

 

4.타입스크립트 재네릭

 

재사용성 높은 컴포넌트를 만들 때 사용되며, 한가지 타입보다 여러 타입에서 동작하는 컴포넌트를 생성하는데 사용

-any 타입을 쓰면 함수의 인자로 어떤타입이 들어갔는지 어떤타입을 반환해야하는지 알수없으므로 제네릭을 사용하여 커버함

-제네릭은 함수의 파라미터를 넣는것과 같이 사용함

// 1. 어떤 타입을 받을 건지 먼저 정의 (함수명<T>)
// 2. params 타입으로 정의 (params: T)
function 함수명<T>(params: T): T {
  console.log(params);
  return params;
}
// 3. 함수를 호출할때 타입 정의
const str = 함수명<타입정의(예:string)>("a");

//인자로 받을때 타입을 지정해주면 그 타입으로 바뀌게 된다.
//여러타입을 사용해야할경우에는 함수에서 조건문으로 제어해준다.

function 함수명<T>(params: T): T {
	if(typeof params === 'number' ){ //이런식으로 조건문을 달아줌!
    	console.log(params);
    }
  return params;
}

-타입이 정확하게 정해져 있다면 interface로 타입을 정의하고 그 interface를 상속(extends )하여 사용한다.

-가장많이 쓰이는 부분은 api를 호출할 때 Promise를 제네릭 타입으로 선언함

 

+++제네릭

자바에서 제네릭(generic)이란 데이터의 타입(data type)을 일반화한다(generalize)는 것을 의미합니다.
제네릭은 클래스나 메소드에서 사용할 내부 데이터 타입을 컴파일 시에 미리 지정하는 방법입니다.
이렇게 컴파일 시에 미리 타입 검사(type check)를 수행하면 다음과 같은 장점을 가집니다.

 

1) 클래스나 메소드 내부에서 사용되는 객체의 타입 안정성을 높일 수 있습니다
2) 반환값에 대한 타입 변환 및 타입 검사에 들어가는 노력을 줄일 수 있습니다.

 

export interface 타입명A { //api 호출시 데이터의 body부분에 들어가는 부분을 정의한 것!
    result: boolean;
    message: string;
    errorData?: any;
}

export interface 타입명B<T> extends 타입명A { 
	//타입명A에서 상속받겠다는 의미 - 이부분은 API를 보고 결정할수 있음
    //타입명B는 타입명A의 하위타입이므로 타입명A는 무조건 포함된다.
    //추가타입옵션 : 타입
    list:T[] 
}
//api 호출시 데이터의 body부분에 들어가는 부분을 정의한 것= 타입명A, 타입명B


/*호출할때*/
export const API변수명 = async (opt: C) => { //C는 파라미터 타입정의
    return <타입명B<타입명D>>await api를받아오는 변수명('API주소', opt, 'POST');
    //Promise 타입으로 타입명B 타입으로 쓸것인대 제네릭의 타입(<T>)을 타입명D로 하겠다는 의미
};

//api 호출시 나오는 각 내용을 또 타입으로 정의해 준것 = 타입명D
//api를받아오는 변수명쪽은 axios, fetch로 받아오는 부분을 정리해둔곳

 

도움받은곳

https://developer-talk.tistory.com/195

https://kyounghwan01.github.io/blog/TS/fundamentals/generic/#%E1%84%8C%E1%85%A6%E1%84%82%E1%85%A6%E1%84%85%E1%85%B5%E1%86%A8%E1%84%8B%E1%85%B5%E1%84%85%E1%85%A1%E1%86%AB

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

 

5.fetch vs axios

 

*공통점

-비동기 이다.

- 설정옵션이 없을경우 기본적으로 GET요청을 생성

 

*차이점

-성능 부분에서는 native Fetch가 axios 보다 살짝 더 빠름

-axios 의 경우 인스턴스를 생성할 수 있음(baseUrl, headers, timeout 등을 axios의 instance로 생성하여 여러곳에서 반복해서 작성할 필요가 없음) 👋인스턴스로 작성할 수 있는 항목 확인하기

 

 

1)JSON데이터처리 차이

 

-Fetch의 경우 then()메서드에서 처리된 Promise를 반환, JSON데이터 포맷이 아니므로 .json()메서드를 호출해야함

-axios 의 경우 응답테이터를 기본적으로 JSON타입으로 사용

 

2)응답 데이터

 

-Fetch의 답객체의 경우 JSON.stringify() 를 이용하여 객체를 문자열로 변환한 후 body에 할당해야함 

-axios 의 응답객체의 경우 data는 data프로퍼티에 할당되어 사용할 수 있음

 

3) 에러처리

 

-Fetch의 경우 404 에러나 다른 HTTP 에러 응답을 받았다고 해서 promise를 거부(reject)하지 않고 네트워크 장애가 발생한 경우에만 promise를 거부(reject) 합니다. 따라서 .then절을 사용해 수동으로 HTTP 에러를 처리 함

-axios 의 경우 Axios의 promise는 상태코드가 2xx의 범위를 넘어가면 거부(reject)하며 여러 객체에 응답 또는 요청 프로퍼티가 포함되어 있는지 확인하여 에러에 대한 자세한 정보를 확인 할수 있음 , fetch에  비해 더 간결함

 

🙄두개다 Promise가 거부(reject)되면 .catch()를 사용하여 에러를 처리할 수 있다

https://velog.io/@eunbinn/Axios-vs-Fetch