동기, 비동기 정리

동기, 비동기가 계속 조금씩 헷갈려서 강의 듣는 김에 정리해봤다.

 

 

동기는 일을 순서대로 차례차례 하는 것이다.

첫번째 일이 끝나야 두번째 일을 시작할 수 있으므로 일이 끝날 때까지 기다려야 한다.

 

비동기는 여러 일을 동시에 할 수 있는 것이다.

한 일을 기다리지 않고 다른 일을 할 수 있으므로 일이 언제 끝날지 몰라도 괜찮다.

 

동기는 순서가 중요할 때 사용하고, 비동기는 순서가 중요하지 않을 때 사용한다.

 

---

 

프로미스는 자바스크립트에서 비동기 작업을 처리하기 위해 사용하는 객체다.

또, 비동기 작업이 끝난 뒤 다음에 할 일을 미리 정해둘 수 있게 도와준다.

이걸 콜백 함수라고 한다.

콜백함수!

함수 파라미터에 들어가는 함수다.

즉, 함수 자체를 전달하는 것이라고 할 수 있다.

순차적으로 사용하고 싶을 때 사용한다.

 

쉽게 말해서 함수가 실행되면 그 뒤에 콜백함수 내부 코드를 실행시켜달라는 말이다.

(비동기 작업은 바로 끝나지 않으므로 이런 작업이 해야할 일을 미리 정해두면 그 일이 끝난 후 자동으로 실행된다.)

여기서 콜백함수가 어떤 일이 끝난 다음에 실행될 함수다.

3가지 상태를 가지고 있는데, 대기(pending), 이행(fulfilled), 거부(rejected)를 가지고 있다.

 

또 주요 메서드로 then, catch, finally가 있는데, 이것은 각각

 

1. then (비동기 작어이 성공했을 때 실행될 콜백 함수 등록)

then은 여러개의 then 메서드를 연결해서 사용할 수 있다.

 

2. catch (비동기 작업이 실패했을 때 실행될 콜백 함수 등록)

거부된 이유를 받아서 처리하는 함수를 인자로 받는다.

 

3. finally (결과와 상관없이 항상 실행되는 함수)

 

의 역할을 한다.

 

---

fetch는 컴퓨터가 인터넷에서 정보를 가져오는 정보다.

---

promise.all은 여러 가지 일을 동시에 처리하는 방법이다. 

여러 작업이 다 끝날 때까지 기다렸다가 모든 작업의 결과를 한 번에 모은다.

---

async, await는 프로미스 객체를 좀 더 간편하게 사용할 수 있도록 돕는다.

async 함수는 항상 프로미스를 반환하는데, async를 사용하면 일을 다 마치면 결과를 알려주겠다고 약속하는 것과 같다.

await는 프로미스가 이행될 때까지 기다리는데, 컴퓨터가 약속이 끝날 때까지 기다렸다가 결과를 받아오는 것이다.

 

이 방법을 사용하면 비동기 코드를 동기 코드처럼 작성할 수 있는데,

async와 await를 사용하면 마치 차례대로 일을 하는 것처럼 보이게 만들 수 있다.

 

ex.

async function 아침준비() {
  await 세수하기(); // 세수가 끝날 때까지 기다림
  await 아침먹기(); // 아침 먹기가 끝날 때까지 기다림
  await 학교가기(); // 학교 가기가 끝날 때까지 기다림
  console.log("아침 준비 완료!");
}

---

try catch

는  프로그램에서 에러가 발생했을 때 그 에러를 처리하기 위해 사용하는 방법이다.

 

1. try 블록에는 실행하려는 코드를 넣는다.

2. catch 블록은 문제가 생겼을 때 실행된다.

try {
  // try 블록 안에 코드를 작성해요.
  console.log("친구 집에 가는 중입니다.");
  throw new Error("길을 잃어버렸어요!"); // 에러가 발생해요.
} catch (error) {
  // 에러가 발생하면 catch 블록이 실행돼요.
  console.log("에러가 발생했어요: " + error.message);
  console.log("친구에게 전화해서 길을 물어봅니다.");
}

---

HTTP+ 프로토콜

 

1. HTTP  는 인터넷에서 웹페이지를 주고받는 약속(규칙)이다.

우리가 사이트를 볼 때 브라우저와 서버 사이에 데이터를 주고 받는 방법을 정해주는 규칙이라고 할 수 있다.

클라이언트 - 서버 모델을 기반으로 동작하고, 클라이언트가 요청을 보내면 서버가 응답을 반환하는 방식이다.

 

2. 프로토콜은 인터넷에서 데이터를 주고 받을 때의 약속(규칙)이다.

컴퓨터들도 데이터를 주고 받을 때 정해진 규칙을 사용한다.

 

3. 클라이언트는 요청을 보내는 쪽(브라우저), 서버는 받아서 처리해주는 쪽(웹사이트를 저장한 컴퓨터)이다.

클라이언트가 서버에게 요청하면, 서버가 데이터를 보내준다.

 

4. HTTP  의 특징은 3가지가 있는데, 첫번째는 무상태성이다.

상태를 기억하지 않아서, 각 요청은 서로 독립적이다.

우리는 웹사이트에서 페이지를 이동해도, 이전 페이지의 정보(그 페이지에서의 상태, 행동)를 기억하지 않는다.

 

두번째는 확장성이다. 

HTTP  는 페이지에 대한 추가 정보를 헤더에 넣을 수 있다.

 

세번째는 유연성이다.

HTTP  는 다양한 종류의 데이터를 전송할 수 있다. (텍스트, 이미지, 비디오 등)

 

5. HTTP  메세지는 두 가지 종류가 있는데, 요청과 응답이다.

요청 메세지에서

요청 라인은 클라이언트가 서버에서 어떤 작업을 요청하는지 설명한다.

헤더는 요청에 대한 추가 정보를 포함한다.

본문은 주로 데이터를 전송할 때 사용한다. (로그인 정보 등)

 

응답 메세지에서

상태 라인은 서버가 클라이언트의 요청을 어떻게 처리했는지 설명한다.

헤더는 응답에 대한 추가 정보를 포함한다.

본문은 클라이언트에게 보낼 실제 데이터다. (페이지의 html 코드)

 

6. HTTP 상태 코드는 서버가 클라이언트의 요청을 처리한 결과를 나타낸다.

상태 코드는 세자리 숫자로 구성되며, 첫번째 자리에 따라 의미가 달라진다.

1xx -> 정보

2xx -> 성공

3xx -> 리다이렉션

4xx -> 클라이언트 오류

5xx -> 서버 오류

 

7. HTTP  메서드는 우리가 웹사이트에서 어떤 일을 하고 싶은지 서버에게 알려주는 방법이다.

(웹사이트에서 정보를 가져오거나, 새로운 정보 추가, 기존 정보 수정, 삭제 등의 일을 할 때)

 

REST API는 HTTP 메서드를 사용해서 클라이언트와 서버가 대화하는 방법이다.

이를 통해 데이터를 추가하거나 가져오거나 수정하고 삭제하는 작업을 할 수 있다.

 

GET -> 서버로부터 데이터를 요청할 때 사용한다. 

요청 데이터가 url에 포함되어 전송되며, 주로 데이터를 조회할 때 사용된다.

 

POST -> 서버에 데이터를 제출할 때 사용한다.

요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용한다.

 

PUT, PATCH -> 서버의 데이터를 업데이트 할 때 사용한다.

요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용한다.

 

DELETE -> 서버 데이터를 삭제할 때 사용한다.

주로 특정 데이터를 삭제할 때 사용한다.

 

7. RESTful 원칙에 따라 작성된 API 명세서

 

1) 먼저 기본 url이 있다 -> https://api.example.com

 

2) 엔드포인트는 서버에서 특정 작업을 할 수 있는 주소다.

3) HTTP 요청, 응답 예시

먼저, Content-Type: application/json 헤더는 HTTP 요청 또는 응답의 본문(body) 데이터 형식을 나타내기 위해 사용된다. 이 헤더는 서버나 클라이언트에게 본문 데이터가 JSON 형식임을 알려준다.