후롱트 5주차 세션 회고

후롱트 다섯 번째 세션

API란?

• 데이터를 요청하고 응답을 받을 때 특정 기능을 사용
• 소프트웨어가 다른 소웨 기능 사용을 위해서 중간에 필요한 체계
• 다른 소프트웨어에서 빼내서 사용하고 싶을 때 사용한다고 보면 댐
• 클라이언트가 요청 / 서버가 응답 / API가 전달
• 브라우저에서 요청한 데이터를 서버에서 받아와서 전달해주는 ‘인터페이스’

API 진행방식

• 요청을 보내는 컴퓨터 = 클라이언트
• 응답을 주는 컴퓨터 = 서버
• 프론트는 요청, 백엔드는 응답 (?)
• 요청의 종류
  • 확인
  • 삭제
  • 추가
• 응답의 종류(처리 상태)
  • 데이터 미존재
  • 요청 형식 오류
  • 응답 측 오류

API 정의

• 서로 다른 컴퓨터에서 요청과 응답을 주고 받을 수 있게 만든 체계

API 요청의 종류

• Create - 올려줭(생성)
• Read - 불러와줭(조회)
• Update - 바꿔줭(교체)
• Delete - 지워줭(삭제)
• 요청은 각각의 주소 파라미터를 가짐
• 클라이언트는 해당 서버 컴 주소로 요청 전송하면 완료
• 체계적인 주소 관리를 위해 생성된 REST API
• 요청의 종류를 메서드로 관리

API 요청의 종류

API 응답의 종류

• OK → 200번대 코드
• Not Ok
  • 400번대 코드 - 요청 측 문제(클라이언트)
  • 500번대 코드 - 응답 측 문제(서버)
• 더 알고싶다면 HTTP 상태 코드를 검색해보자!

API 정리

• 특정 기능 사용을 위해 주소로 요청하면 응답을 받는 소웨간 체계
• 데이터를 빼와서 개인적인 웹 화면에 사용가능하게 하는 머 그런느낌~

API 사용를 사용하려면?

• HTTP의 P는? → Protocol - 컴퓨터끼리 데이터를 주고받을 때 지켜야되는 통신 규약
• HTTP는? → 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 통신 규약

HTTP의 통신 방식(어떤 통신 규약이 있는지)

• 요청과 응답 방식
  • 요청과 응답을 코드로 작성해서 보냄
    • 구성 = 헤더와 바디로 구성
    • 수단 = fetch(1번 인자(http 요청을 전송할 url), 2번 인자(옵션 인자(ex)메서드, 헤더, 페이로드) == 어떤 요청을 할지 알려주는 2번인자
• Stateless & Conntectionless
  • 상태를 저장하지않고, 이전 연결에 대한 기억을 하지 않는 방식
  • 요청과 응답끼리 연결되어 있지 않고, 각각의 요청과 응답이 독립적
  • 좀 전에 받은 데이터를 기억해야할 땐? ex) 로그인 상태 기억
    • 쿠키나 세션을 사용!(인증/인가 배울 때 자세하게 배우니까 기억하기)

fetch 함수로 http 요청하기

• url과 옵션 2가지 인자 필요
• GET, POST, PUT, DELETE
• GET: fetch 함수의 디폴트 메서드라서 URL만 입력하고 옵션인자인 GET을 입력하지 않아도 된다, 하지만 옵션을 주고 싶다면 본인이 원하는 데이터에 대해 옵션을 걸어서 보내면 된다.
• POST: 메서드 옵션에 POST를 입력하고 Header에는 JSON 포맷 사용한다고 알려주고, Body 에는 요청 전문을 JSON 포맷으로 넣어준다.
• PUT: 메서드만 PUT 옵션 인자 구성 방식은 POST와 유사하다
• DELET: 데이터를 삭제하는 것이기 때문에 헤더와 바디 옵션이 필요없다.
  • 해당 게시물의 아이디를 보내고 해당 아이디의 게시물을 삭제해달라는 요청을 보내는 것

데이터 요청 및 응답

• 요청할 데이터 → 데이터를 담을 수 있는 형식은 무한대….
• 그래서 데이터를 요청하고 응답 받을 때는 JSON형식으로 하자고 개발자들끼리 통일함
• JSON
  • 중괄호로 시작
  • 키와 값으로 구성
  • 배열이면 대괄호로
  • 객체의 내용을 기술하기 위한 TEXT파일이라고 생각하자
• 요청 방식
  • Web API의 fetch 함수 호출
  • axios 라이브러리 사용
• fetch 함수
  • 1번 인자 = url
  • 2번 인자 = 옵션 객체(입력 할 수도 있고 안할 수도 있고)

• Promise를 반환 받았다면? 후속처리!
  • then을 사용해서 resolve(성공적으로 응답)한 객체를 전달받음
  • catch를 이용해서 rejected(실패한 응답)한 객체를 전달받음

 

Promise

• 경우의 수는 2가지
  • 성공적으로 응답을 받거나
  • 못받거나
• Proise 객체의 반환 값을 사용하면 두 상황에 대비해 미리 짠 코드 작동 가능
• 자바스크립트 비동기 처리에 사용되는 객체
• 비동기 작업의 단위
• 비동기적 작업 처리 시에 작업의 성공 실패 여부에 따라 미리 대비 가

Promise 객체의 반환값

• 대기
• 이행(fulfill)
• 거부(reject)
• 이행 상태면 then을 이용해 처리 결과 값을 받기 가능
• 거부 상태면 catch를 사용해 에러 상태 다루기 가능

Promise 생성방식

• 나중에 코드 정리해서 넣기!

 

 

async, await, 동기, 비동기

• 비동기 = 요청과 응답이 동시에 일어나지 않는 것
  • 요청과 응답이 다른 시간대에 존재한다.
  • 노드 사이의 작업 종료 시간이 제각각
• 동기 = 요청과 응답이 동시에 일어남
  • 요청한 자리에서 결과가 주어짐
  • 노드 사이의 작업 처리 단위를 동시에 맞추겠다.

— 이해가 완벽하지 않아서 따로 다시 공부하기

 

 

 

• await는 async가 붙은 함수 안에서만 동작
• await란?
  • Promise가 처리될 때까지 실행을 기다리게 하는 키워드.
  • 함수 실행 중에 await 키워드를 만났다면, 반환되지 않은 Promise가 있다면 Promise 상태가 이행될 때까지 기다렸다가 다음 코드 실행
  • 동기식 흐름 제어 가능

모든 작업이 비동기 방식으로 진행된다면?

• 어떤 코드가 먼저 실행되었는지 순서 확인 어렵
  • 에러 원인 불명확
  • 디버깅 어려웡
  • 코드 예측성 저하
• 코드 중첩
  • 가독성 저하
• await를 이용하면 코드에 대한 가독성과 예측성 증가

 

 

느낀점

- openAPI를 사용하면 만들고싶은 프로젝트를 더 간편하게 만들 수 있다는걸 알았고, 그 방법도 배웠지만 아직 그 내부적인 이론에 대한 이해는 아직 부족하다고 생각이 든다.

- openAPI를 찾아보다가 맘에 드는것이 보인다면 간단하게라도 프로젝트를 작성해보고싶어졌다.