비전공으로 프론트엔드를 시작하면서
컴공 지식이 낯설고 어렵게 느껴질 때가 많았다
때문에 비전공자가 꼭 참고해야 할 내용을 다뤄볼까 한다

📌 Header의 응답 상태 코드

백엔드에서 받은 API로 프론트에서 연결을 해주지만
에러가 나게 됐을 때 연결을 잘못한건지, API가 잘못된건지 구분 할 줄 알아야 한다
응답 상태 코드를 확인하면 어디서 잘못된건지 알 수 있다

보는 방법은
개발자도구인 F12를 누른 후 Network 탭에서 Header를 보면 나온다

응답 상태코드

• 100 ~ 599까지의 숫자로 구성
• 200 성공
• 400 프론트 에러
• 500 백엔드 에러

📌 API

API는 백엔드가 주로 만드는데
화면에 필요한 데이터 종류대로 모델을 지정해서 만든 후
view와 url설정 후 API가 만들어지게 된다

💡 API 종류

API 종류에는 REST API와 GraphQL이 있다
REST API의 한계 때문에 GraphQL이 탄생하게 됐다는데
어떤 경우에 어떤 API를 선택하는게 좋을까?

REST API가 적절한 경우

• 간단한 CRUD 작업이 필요할 때
• 고정된 데이터 구조가 필요할 때
• 보안이 강한 제약이 필요할 때

GraphQL이 적절한 경우

• 데이터의 양과 종류가 복잡하고 요청이 많을 때
• 클라이언트의 종류가 다양할 때
• 프로젝트 성격이 데이터 구조가 자주 변경될 때

유연성, 확장성이 좋은 것은 GraphQL지만
비용이 높고 REST API를 대체하기엔 부족하다
그래서 상대적으로 익숙한 REST API를 추천한다

💡 API를 구분하는 4가지 방식(CRUD)

생성 API ⇒ CREATE
조회 API ⇒ READ
수정 API ⇒ UPDATE
삭제 API ⇒ DELETE

💡 API 요청 결과 타입(JSON)

자바스크립트 객체 표기법 JSON(JavaScript Object Notation)
API 요청의 결과가 자바스크립트의 객체처럼 표기되어 JSON이라 부른다.

{
	classmate: "철수",
	age: 13
}

💡 API 연결하기

1. 백엔드가 보내준 API 명세서를 확인한다
2. 연결해줄 데이터의 CRUD와 파라미터를 확인한다
3. get, post, put, delete를 이용하여 연결해준다
4. 보내줄 파라미터가 있다면 파라미터 안에 값을 넣어준다
5. 통신을 확인한 후 화면에 출력해본다

//api 정보 가져올 때
axios.get('https://jsonplaceholder.typicode.com/todos/1')
 .then((result) => {
    // 성공 시 실행할 코드
  })
  .catch((error) => {
    // 에러 발생 시 실행될 코드
  })
  .finally(() => {
    // 성공/실패 여부 상관없이 마지막으로 실행 될 코드
  });

//api에 데이터 보내줄 때
axios.post('url', {userId : 2, id : 1, title : 'jiurinie', completed : true })
  .then((result) => {
    // 성공 시 실행할 코드
  })
  .catch((error) => {
    // 에러 발생 시 실행될 코드
  })
  .finally(() => {
    // 성공/실패 여부 상관없이 마지막으로 실행 될 코드
  });

📌 동기와 비동기

서버와 데이터를 주고 받는 방식이다
제일 중요한건 Javascript는 동기이다
이걸 모르면 아래의 내용이 헷갈릴 수 있다

💡 동기

서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신
한번에 하나씩 통신
응답이 모두 끝난 후 요청

💡 비동기

서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신
서버에 요청(등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않고 다른 작업 진행
동시에 여러개 통신
오래걸리는 일(이메일 전송하기, 게임 다운 받으면서 카톡하기)

📌 async await

API는 프론트에서 변수에 담아서 사용된다
API를 변수에 담아서 사용하려면 Js는 동기이기 때문에
통신이 완료될 때까지 기다려야하는데
async await을 사용하면 동기 비동기 방식을 선택할 수 있다

// 비동기 통신
async function 함수이름(){
	axios('API이름') // 서버 컴퓨터에 요청(기다리지 않음)
}

// 동기 통신
async function 함수이름(){
	await axios('API이름') // 서버 컴퓨터에 요청(기다림)
}

---

필자가 API를 다루면서 중요하다고 생각했던 내용을 넣어보았다
다음엔 API를 한 파일에 넣고 뿌리는 방법을 다뤄볼 것이다