API....어우..

corintori

안녕하세요 여러분들! 원래 오늘 다른 주제로 다루고자 했지만 기억에서 잊어버리기 싫어 오늘 배운걸

바로 작성해보려 합니다! 많이 미숙한 부분이 있다면 댓글로 알려주시면 바로바로 수정하겠습니다!

그럼 바로 들어가볼까요!

API

여러분들은 API에 대해서 알고있나요? 보통 웹 개발을 진행할때 기초로 배우실 수도 있는데요!

그림과 같이 API는 클라이언트와 서버간의 정보에 대한 요청과 응답의 과정을 말하는데요 이 과정속에서
동기와 비동기라는 용어가 나옵니다.

동기 / 비동기

그림만 보면 이해하기 힘드시죠? 짧게 설명 드려보겠습니다

첫번째 두번째 사진 모두 달리기를 하는데 동기와 비유를 하면 첫번째 사진은 한명이 다 뛰어서 돌아올때까지 다른 선수들은 아무것도 못하고 가만히 있어야하는 상황이고 비동기의 경우 한명만 띄는것이 아닌 다른 선수들도 함께 뛸 수 있습니다

즉

동기의 경우 출력이 시작하면 하나의 값이 나올때 까지 대기를 해야하는 상황이고

비동기의 경우 출력이 시작하면 비동기를 담당하는 함수가 잠깐 백그라운드에 들어가 값이 나올때까지 있다가 다른 함수로 넘어가 출력을 시작하고 값이 나왔다면 백그라운드에서 다시 돌아와 출력을 하게됩니다.

그럼 비동기만 따로 설명해 보겠습니다

비동기란?

비동기란 함수의 내용을 끝까지 쭉 실행하지 않고, 중간에 다른 작업을 처리하다가 다시 돌아와 마무리를 하는 함수 입니다.

(비동기 함수의 경우 보통 asyns function() 과 같이 비동기 함수를 만들 수 있습니다)

그림과 같이 비동기 함수에서 출력이 시작하면 잠깐 백그라운드에 들어가 '음... 답장이 올때까지 기다려볼까~?' 를 하며 기다리다가 다른 함수들이 차례대로 출력을 하기 시작합니다 출력값이 많다면 중간에 백그라운드로 넘어갔더 비동기 함수가 '어! 답장왔다 돌아가서 알려줘야지~' 라는 생각으로 돌아와 출력되게 됩니다.

하지만 여기에도 시간을 정해주는 함수가있습니다 바로 setTimeput 인데요

그림과 같이 보통 사용하게 되는데 그림과 같이 setTimeout(parameter1, parameter2)의 형식이 맞지만
메소드와 호출 시간을 주어주면서 '300이라는 값을 2(2000)초뒤에 출력해줘!' 라는 의미를 담고 있습니다.

비동기의 경우 시간이 어떻든 백그라운드로 넘어가기에 비동기가 아닌 함수를 출력할때에는 비동기가 아닌 함수부터 출력된 다음 비동기의 함수가 출력되는점 알고있으면 좋을 것 같습니다.

그렇다면 과연 비동기함수는 어떻게 출력이 될까요?

그림과 같이 3가지로 출력이 되게 됩니다.(주석처리 //)
Promise { <//pending> } : 대기중이라는 의미입니다.
Promise { <//fullfield> } : 결과값이 나왔다는 의미입니다.
Promise { <//reject> } : 에러가 출력됬다는 의미입니다.

그럼 프로미스를 사용하는 방법이 다양한데요

.then이 있습니다 then(() =>{})은 비동기를 백그라운드로 보내고 아래의 함수를 먼저 실행하고 결과값이 나오면 then으로 돌아오게 합니다. 보통은 Fetch나 axios의 반환된 값이 then 파라미터로 담깁니다.

await은 그림과 같이 어?! 잠만! 이라는 의미 처럼 응답값을 얻을때까지 아래 코드를 실행 시키지 않습니다.

그럼 글에서 나온 Fethc와 axios는 무엇일까요?

그림에서도 나와있듯이 Fetch는 내장 함수로 자바스크립트에 기본적으로 내장 되어있는 함수입니다.

axios는 외부에서 함수를 가져오는 것으로 보면됩니다!

두개의 공통점은 URL을 가져오는데에 사용을 하고
Fetch는 바로 옆으로 Fetch(URL) 이렇게 사용하지만 axios의 경우 axios.get 또는 axios.POST로 URL을 가져옵니다!

어?! 그럼 외부에서 함수를 가져온건데 어떻게 사용하나요? 라고 물어보실 수 있는데

여기서 NPM이라는 용어가 나옵니다

NPM 이란 말그대로 NODE Package manager의 줄인말로

https://www.npmjs.com/

위와 같은 사이트에서 자신이 사용할 모듈이 있다면 NPM install [모듈이름] 이렇게 명령 프롬포트 나
VS코드에서 다운을 받으실수 있습니다.

그럼 위에서 axios는 어떻게 다운받을까요? 바로 NPM install axios 라고 입력하면 axios에 입력되어있는

함수를 외부에서 가져와서 사용할 수 있습니다!

그럼 Fetch는 내장함수인데 안에서 보내고 받기는 안되나요!? 라고 물어보실수 있는데요!

그림과 같이 EXPORT와 IMPORT를 사용해주면 됩니다.

간단하게 설명하자면 EXPORT는 만든 함수를 보내주는 것이고 IMPORT는 보낸 함수를 받는 함수입니다.

그림과 같이 나는 abc의 같이 "abc"라는 것과 good이라는 함수를 다른 곳에서도 사용하고 싶어! 라고 한다면

보내줄 수 있습니다.

반대로

그림과 같이 나는 'good이라는 함수가 포함된 경로에서 good 함수를 가져올꺼야!' 라고 한다면 import를 사용해 가져오면 됩니다.

try catch err

다음은 try catch err인데요

트라이 캐치 에러의 경우 스크립트가 죽는것을 방지라고 에러를 잡아서 합당한 무언가를 할 수 있게 해줍니다

동작은 try안의 코드가 먼저 실행되고 -> 에러가 없다면 try의 마지막까지 실행되고 catch블럭은 건너 뜁니다

에러가 있다면 try코드가 중단되고 catch(err)블록으로 넘어가 변수err에 무슨일이 일어났는지에 대한 설명이 담긴 에러 객체를 포함해줍니다.

이 다음 부터는 간단하게 설명 해보려 합니다

API METHOD

API METHOD 여러 종류가 있지만 5가지만 가져와봤습니다
GET : 데이터를 가져올때 사용합니다
POST : 데이터를 보낼때 사용합니다.
PATCH : 데이터를 수정할 때 사용합니다.
DELETE : 데이터를 삭제할 때 사용합니다.
PUT : 데이터를 수정할때 사용합니다.

API를 사용하는 이유는? API를 요청하기 위해서는 METHOD와 URL이 필요하기 때문입니다.

다음으로는