2024. 06. 21 (금) 8주차 - Daily Coding - Day05

 

 

 

 

60강

HTTP 통신 Part 1.
- GET Request
- 비동기 (콜백, 프로미스, async/await)

 

GET 요청을 직접 보내보기

필요한 것
- url
- (브라우저에서 제공하는) fetch API
- (선택) header 등 다른 옵션들

 

 

비동기
하나의 프로세스가 완료되기 전에 다음 프로세스를 시작하는 방식

 

콘솔은 어떻게 찍힐까?

 

 

콜백 함수
setTimeout() 같이 특정 함수 안에 매개변수 형태로 전달받은 함수를 의미

 

 

Promise
ES6(ECMAScript2015)에서 등장한 자바스크립트에서 비동기를 처리하기 위해 사용하는 객체

 

 

 

Async/await
ES7(ECMAScript2016)에서 등장한 자바스크립트에서 Promise를 가지고 비동기를 동기처럼 사용하는 문법

 

 

 

61강

HTTP 통신 Part 3.
- Loading 처리
- Error 처리

 

Loading 처리
클라이언트에서 서버에 요청을 보내고, 그 요청을 응답받기까지는 시간이 걸린다.
(일반적으로 수십 ms, 하지만 데이터 크기 및 네트워크 환경에 따라 오래 걸리기도 함)

Error 처리
서버로부터 응답이 항상 성공적으로 오는 것은 아니다.
응답에 상태 코드(status code)가 있는데, 이에 따라 응답이 성공인지 실패인지 알 수 있다.

- 대표적인 status code
200 : Success
401 : Unauthorized
403 : Forbidden
404 : Not Found
500 : Internal Server Error

서버와 요청, 응답을 주고받는 코드를 try { } … catch() {} 로 감싸준다.

 

 

62강

HTTP 통신 Part 4.
- POST 요청 with Google Firebase
- 백엔드 개발자와의 협업 꿀팁

 

Post 요청
기본적으로 서버에 데이터를 보낼 때 사용하는 HTTP 메서드.
일반적으로 파일 업로드, Form 형태의 제출에서 많이 사용한다.

 

 

 

Post 요청 - Headers
Content-Type: application/x-www-form-urlencoded

 

 

Content-Type: application/json

 

 

Google Firebase
백엔드 없이 서버리스 API를 만들 수 있는 도구

 

더미 데이터베이스를 만들어서 POST 요청을 보내보기
필요한 것 : 구글 계정
- 파이어베이스 로그인
- 콘솔로 이동해서 새 프로젝트 추가
- GA 사용 X
- Realtime database
- 데이터 베이스 만들기, test mode

 

const postRequestHandler = async () => {
  await fetch('https://test-owen-f2913-default-rtdb.firebaseio.com/test.json', {
    method: 'POST',
    body: JSON.stringify({
      key1: 'value1',
      key2: 'value2',
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

return <div>
  <button onClick={postRequestHandler}>POST</button>
</div>;

 

 

백엔드 개발자와의 협업 꿀팁

1. 데이터 구조를 설계하는 회의에 초대를 해 달라고 하거나, 회의가 끝나고 구현 하기 전 먼저 결과를 공유해 달라고 부탁하기
: 테이블 구조는 기존에 데이터가 쌓인 것들도 있고, 다른 테이블과 관계가 있는 것들도 있어서 한 번 설정하면 이후에 변경하기가 어렵다.(불가능은 아니지만)

- Entity Relationship Diagram

2. 데이터 구조가 바뀌면, 기존에 있던 데이터를 싹 다 밀고(지우고), 새로운 마음으로 시작하기.
이 작업을 백엔드 개발자에게 적극적으로 부탁하기
: 바뀌기 전과 후가 섞여 있으면 테스트 시에 오류가 나기도 쉽고, 자주 질문을 주고 받아야 해서 생산성이 떨어지기가 쉽다.

 

3. 개발 환경이 배포가 되었으면, POSTMAN이나 GraphQL Playground 같은 API 명세를 볼 수 있는 페이지를 꼭 달라고 요청하기
: 이런 도구들에 API 작업 사항들을 잘 업데이트 해 놓으면, 매번 백엔드 개발자에게 물어보지 않아도 된다.