운영진 스터디 5주차 -1

SSO·2022년 2월 8일
10기APIReactweb멋사멋쟁이사자처럼
0

LikeLion10th

목록 보기
4/16

이번주차는 내가 발표할 차례다...............
설날 연휴를 틈타 준비하기 위해서 5주차를 택했는데 주제가 너무 어렵다!!!
개념 정리부터 좀 힘들었는데 실습을 준비하는게 아무래도 너무 힘들었다ㅜㅜ

  • API란?
  • 비동기 프로그래밍, 프로미스
  • Fetch vs Axios
  • 외부 api 받아오기 - 실습!

API란 무엇일까!

Application Programming Interface

어떠한 응용 프로그램에서 데이터를 주고 받고 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.

어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 어떠한 데이터를 제공 받을 수 있을 지에 대한 규격들.

  • 어떻게 작동할까?
    • 작성된 프로그램은 API에게 데이터를 요청
    • API는 요청받은 명령을 처리하기 위해 응용 프로그램 or 애플리케이션과 상호작용 → 이후 결과물을 작성된 프로그램에게 전달

비동기 프로그래밍

  • 비동기란?

정의한 코드가 완료되지 않아도 다음 코드를 실행하는 것

애플리케이션이 멈추지 않기 때문에 동시에 여러가지 요청을 
처리할 수 있고 기다리는 과정에서 다른 함수도 호출할 수 있다
    function Example(){
    	console.log('Hello world');
    }
    setTimeout(Example, 3000);
    console.log('대기');

Quiz. 위의 코드를 실행하면 어떤 결과가 나올까요?-?

    대기
    
    (3초 뒤)
    
    Hello world

    

이렇게 출력이 되는데 이는 setTimeout이 사용되는 시점에서 
코드가 3초동안 멈추는 게 아니라 코드가 위부터 아래까지 다 호출되고 
3초 뒤에 우리가 지정해 준 Example이 호출되고 있는 것

- 그럼 시간이 3초가 아니라 0초면?-?
    
    대기하는 시간 없이 바로 출력될 것!
    

위의 코드에서 Example이 3초 뒤에 호출되도록 setTimeout의 
인자로 함수를 넘겨주었는데 이런 함수를 콜백함수라고 한다

단, 비동기 방식은 코드가 실제로 실행되는 순서가 섞이게 되므로 
가독성이 떨어지고 디버깅을 어렵게 만들면서 콜백지옥에 빠지게 된다!!!!!!!!

Promise

  • Promise란?
    • 비동기 상태를 값으로 다룰 수 있는 작업의 결과값을 담는 객체
      • 비동기 프로그래밍의 문제점이었던 콜백지옥 현상이 생기지 않도록 하는 기능
      • 이를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식으로 코드를 작성할 수 있다!
      • ES6 이후 포함됐음
  • 프로미스 생성

    1. Promise.resolve 정적 메서드 사용

      const p = Promise.resolve(1);

      1 이라는 결과값을 담는 Promise객체 생성

    2. Promise 생성자를 통해 생성

      const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('2초가 지났습니다.');
    resolve('hello');
  }, 2000);
});

      Promise 생성자는 콜백을 인수로 받음.

      이 콜백의 첫 번째 인수로 resolve 함수가 들어오는데, 콜백 안에서 resolve를 호출하면 resolve에 인수로 준 값이 곧 Promise 객체의 결과값으로 ****처리됨 상태가 된다.

      두 번째 인수로 들어오는 reject 함수는 비동기 작업에서 에러가 발생했을 때 호출하는 함수.

  • 프로미스의 상태
    • pending(대기)
      • 최초에 프로미스 객체를 생성하면 대기 상태가 된다
    • fulfilled(이행)

      • 프로미스를 생성하면서 받은 콜백함수의 인자 resolve 를 실행하면 이행 상태가 된다

      • 또한 이행 상태가 되면 then을 사용해 처리 결과 값을 받을 수 있다!

        Example

        function create() {
 return new Promise(function(resolve, reject){
  resolve();
  console.log("step1");
 });
};

create().then(
	console.log("step2");
);
      1. create() 함수 생성, 실행x
      2. create().then(){} 에서 create 함수 실행
      3. 함수가 호출되면서 함수 내부에 선언된 코드가 실행되고 new Promise에 콜백함수로 선언한 함수가 실행
      4. resolve 는 선언되었지만 조건이 충족되기 전에는 실행되지 않고 console.log("step1");이 실행
      5. create 함수 실행이 끝나면 이어서 then() 을 실행하며 console.log(“step2”) 실행
    • rejected(실패)
      • 비동기 처리가 실패하거나 오류가 발생한 상태
      • reject를 호출하게 되면 실패 상태가 된다
  • async/await
    • Promise를 더 쉽게 사용할 수 있도록 해주는 문법
    • 장점
      • 코드가 간결해지고 가독성이 높아진다!
      • 에러 확인이 쉽다!
    • 사용방법

      • async 는 함수에서 비동기 처리를 위한 promise 동작을 한다는 것을 명시해주며 함수 이름의 제일 앞에 사용한다

      • await 은 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작하며 해당 함수 내부에서 promise의 앞부분에 사용한다.

        !주의!

      • await의 뒷부분은 꼭 promise를 반환해야 하며 async함수 자체도 promise를 반환해야 한다

  • try/catch
    • 동기식 코드에서 사용하는 try/catch 구문을 async/await을 사용하는 구조에서는 사용이 가능하다

Promise 예제

function increase(number) {
	const promise = new Promise((resolve, reject) => {
		setTimeout(()=>{
			const result = number + 10;
			if(result > 50){
				const e = new error('error!');
				return reject(e);
				// 에러를 발생시키며 reject 함수 호출
			}
			resolve(result); //에러가 아니면 resolve함수 호출
		}, 1000)
	});
	return promise;
}

async function number(){
	try{ //try, catch를 사용해 에러 처리
		let result = await increase(0);
		console.log(result);
		result = await increase(result);
		console.log(result);
		result = await increase(result);
		console.log(result);
	} catch(e) {
		console.log(e);
		// 에러를 캐치하면 console에 출력
	}
};

HTTP 메서드

  • GET : 입력한 url에 존재하는 데이터를 가져와서 보여준다
  • POST : 사용자가 생성한 파일, 데이터를 서버에 업로드할 때 사용
  • DELETE : 데이터베이스에 저장되어 있는 내용 삭제

Fetch 함수

  • 기본적인 사용법
    fetch("API 주소", {
 method: "GET"
 headers: {
  "Content-Type": "application/json",
 },
 bodys: JSON.stringfy({
   key: value,
 })
})
.then(response => response.json())
.then(response => {
	//data를 응답받은 후의 로직
});
    • 첫 번째 파라미터는 API 주소, 두 번째 파라미터에는 request의 옵션
    • GET : 정보를 가져올 때 / POST : 어떠한 정보를 보낼 때, 생성할 때 / DELETE : 정보를 삭제할 때
    • headers : 메타정보
    • bodys : body에 담아서 보내고 싶은 내용들. body는 객체로 이루어져 있어야 하며 객체에서의 key값은 백엔드에서 요구하는 key값으로 정해서 보내줘야 한다. js 파일로 작업을 했기 때문에 JSON.stringfy() 방식을 사용해 해당 내용을 JSON으로 바꿔준다.
    • response.json() 은 받아온 데이터는 json 타입인데 자바스크립트에서 사용하기 위해 js 형식으로 바꿔주는 역할을 한다.
  • fetch의 기본 메서드는 GET
fetch('http://api.google.com/user')
  .then( res => res.json())
  .then( res => {
    if (res.success) {
      	console.log(`${res.user.name}`님 환영합니다);
    }
});

메서드를 추가로 명시하지 않을 경우에는 기본인 get으로 호출한다.

  • 메서드가 POST인 경우 → 이 경우에는 fetch함수에 메서드 정보를 인자로 넘겨주어야 한다.
    fetch('http://api.google.com/user',{
	method: 'post',
	body: //전달할 내용
})
  .then( res => res.json())
  .then( res => {
    if (res.success) {
      	console.log(`${res.suer.name}`님 환영합니다);
    }
});

Axios

  • Axios란? 현재 가장 많이 사용되고 있는 HTTP 클라이언트 HTTP요청을 Promise 기반으로 처리한다는 장점!
  • 설치 및 사용방법 yarn add axios import axios from 'axios'; GET 메서드 사용
    axios.get('api url')
	.then() //api를 받아온 이후 실행할 코드 작성
    POST 메서드 사용
    axios.post('api url', {
	// 보낼 데이터를 객체형태로 작성
})
.then() // 이후 실행할 코드 작성

그래서 뭐가 좋은데

위와 같은 차이점이 있고 두 가지 모두 기능 면에서는 유사하지만 axios 가 조금 더 볌용성이 높다! fetch의 경우 axios에 비해 지원되지 않는 기능들도 있고 지원되지 않는 브라우저도 있기 때문에 axios가 더 좋을 듯 하다.

실습

간단한 API 불러오기 실습하러 가기

profile
SSO
Github_qkrthdus605
이전 포스트

Git study

다음 포스트

간단하게 API 불러오기 실습

0개의 댓글