[React] Day_22 데일리 정리

오늘의 TIL로 개인프로젝트 중간점검을 쓸 예정이었던 림졍...

근데... 아니 왠걸 특강에서 냅다 새로운 개념을 알려주시면서

진짜 머리 싸매면서 '와 이거 뭐임????' 했던 부분을 냅다 해결해주셨길...래

과감하게 프로젝트 중간점검을 내일로 미뤄버리고(?)

오늘은 행복하게 특강정리 할겁니다 ..^-^!

그럼 가보작호~

싱나는(?) 특강정리 ^-^)b

달리기반 특강정리

동기사랑... be동기사랑... 그리고 프로미스(promise)9...밖에 기억이 안난다... (후비적)

동기 / 비동기 방식

- 동기 방식 (순차적 실행)

요청 보내고 결과 나올때 까지 기다렸다가 다음 작업으로 넘어감, FM 정말 기가막히게 잘지키는 친구

(한마디로 더럽게 깐깐하고 원리원칙주의자라 '그 단계 못넘어 가면 그 다음은 없어!' 이기에.. 웨이팅이 있음..)

console.log("손님1 커피 주문");
console.log("손님1 커피 제조 시작");
console.log("손님1 커피 제조 완료");

console.log("손님2 커피 주문");
console.log("손님2 커피 제조 시작");
console.log("손님2 커피 제조 완료");

- 비동기 방식

요청 보내고 결과 기다리지 않고 바로 다음 작업으로 넘어감, 동기 보다는 유도리가 넘치는 친구

(덕분에 기이이이이이다리는 시간은 줄어드니 잘 써먹으면 동기보단 효율적인 방법)

결과의 경우, 작업이 완료되는 대로 나오지만... but... 도착 시간 예상은... 미지수🥲

+) 유도리 넘치는 친구라 깐깐한 동기에게... 순서를 양보해줌 (이런 착한자식 ㅠㅠ)

console.log("손님1 커피 주문");
console.log("손님1 커피 제조 시작");
setTimeout(() => {
	// 손님1 커피 제조 진행중...
  console.log("손님1 커피 제조 완료");
}, 2000); // 2초 후에 실행	
// 0초여도 비동기라 바로 다음 작업으로 넘어감. 동기일 경우에만 기다림!!

console.log("손님2 커피 주문");
console.log("손님2 커피 제조 시작");
// ...

Blocking (& NonBlocking)

- Blocking(블로킹)

실행 중인 코드 완료 될 때까지 다음 코드의 실행을 멈추게 함 (주로 동기 코드에서 흔히 발생)

function blockingTask() {
  const start = Date.now();
  // 3초 동안 블로킹
  while (Date.now() - start < 3000) {
    // 시간이 지나기만을 기다립니다.
  }
  console.log("블로킹 작업 완료");
}

console.log("작업 시작");		// 1
blockingTask();					// 2
console.log("작업 완료");		// 3

- Non-blocking(논블로킹)

blocking과 다르게 다른 코드의 실행을 멈추지 않음. 시간이 소요되지만 비동기적으로 작업을 처리

function nonBlockingTask() {
  setTimeout(() => {
    console.log("논블로킹 작업 완료");
  }, 3000);
}

console.log("작업 시작");		// 1
nonBlockingTask();
console.log("작업 완료");

이벤트 루프 작동 방식 (Preview)

동기적 코드인 사용자 정의 함수, call Stack 적재 잘됨
Web APIs는 다른 저장소에 있다 시간이 지나면 Task Queue로 적재

Call Stack에 아무것도 없을때.. Callback Queue의 대기중인 task 실행

결론 : 비동기는 유도리 있는 친구라 깐깐한 동기 코드들이 완료 된 후에 실행됨! (이런 착한 자식들!2)

Promise

- Promise(프라미슨데... 왜 프로미스라고 하죠?)

말 그대로 작업에 대한 '약속'. 비동기 코드의 (성공/실패) 를 나타내는 객체 (in JS)

- Promise 상태 3가지

Pending : 아직 결과 못받음

Fulfilled : 작업 성공!

Rejected : 작업 실패!

각 상황에 맞는 메세지 혹은 로직을 부여하면 그것이 비동기적으로 실행!

둘이 나오기 전의 상태 (혹은 실행되지 전의 상태)는 대기

완료된 상태는 fulfilled (이행됨)

- Promise 생성

생성자 함수의 콜백 매개변수 (2) → resolve (성공) / reject (실패)

// 생성 예시
const promise = new Promise((resolve, reject) => {
  const success = true; // 작업 성공 여부를 나타내는 예시 변수

  if (success) {
    resolve("작업 완료");
  } else {
    reject("작업 실패");
  }
});

// 생성은 동기적으로 실행, 생성 이후의 콜백들 비동기적으로 실행
const promise = new Promise((resolve, reject) => {
	console.log('Promise executor');  // 즉시 실행됨 (동기적)
	resolve();
});
console.log('After promise creation');

- Promise 사용

사용 메서드 → then / catch

then : 약속된 작업을 실행 후 결과를 받을 때 사용 잘못되면 error 실행

 new Promise(동기함수)
  .then(비동기함수)
  .catch(비동기함수);

모든 비동기 함수가 Promise는 아님!

ex) then(함수) 에서 () 안의 함수 = 비동기적

Promise를 생성 및 그 내부 함수 = 동기적

Fetch 일종의 Promise!, but setTimeOut = Promise (X)!

// Promise 활용하여 비동기 작업 처리하기

function orderCoffee(order) {
  return new Promise((resolve, reject) => {
    console.log(`${order} 커피 주문을 받았습니다.`);

    // 커피 제조 시간 (2초)
    setTimeout(() => {
      if (order) {
        resolve(`${order} 커피가 준비되었습니다.`);
      } else {
        reject("주문 오류: 커피 주문이 잘못되었습니다.");
      }
    }, 2000);
  });
}

// Promise 사용
orderCoffee("카푸치노")
  .then(result => {
    console.log(result); // 커피 제조 완료 메시지 출력
  })
  .catch(error => {
    console.error(error); // 에러 메시지 출력
  });

- 예시코드 순서 예측

console.log('1');
const promise = new Promise((resolve, reject) => {
	console.log('2');
	resolve('3');
}).then(result => console.log(result))
.catch(err => console.log(err);
;
console.log('4');

// 1243

[해설집 두두등장!]
Promise의 작업 동기적으로 실행 (1 출력)

console.log('2')생성과 동시에 실행 (2 출력)

3은 비동기이므로 다음 동기적 부분인 4실행 (4 출력)

비동기 로직인 resolve부분 즉 console.log('3')이 실행됨 (3 출력)

async/await

- async

함수 앞에 붙여 비동기 함수 제작 가능, return = Promise.resolve()

async function myAsyncFunction() {
  return "Hello, Async!";	// 즉, 이 부분이 Promise.resolve 부분 (fulfilled)
}

myAsyncFunction().then(result => {
  console.log(result); // "Hello, Async!"
});

- await (꼭 async function 안에서 써주자!)

Promice가 해결될 때까지 비동기 함수의 실행을 일시 중지

async function fetchData() {
	const res = await fetch("~~");
	return await res.json();
}

- 에러 핸들링

fetch에서 발생하는 에러처리 해결 가능

// 에러 핸들링
export async function fetchData() {
  try {
    const res = await fetch("~~");

    // 에러 메세지 생성
    if (!res.ok) {
      // res 메타데이터 말고 body part 저장
      throw new Error(
        `HTTP error! Status: ${res.status}`
      );
    }

    return await res.json();
  } catch (error) {
    console.warn(error);
  }
}

- async/await의 장점
가독성 향상
디버깅 용이
직관적 에러 처리

cf. 가끔 여러 비동기 작업을 동시에 처리하고 그 결과를 기다릴 때 Promise.all을 사용함

URL과 네트워크 요청

URL

인터넷 상의 자원의 위치를 나타내는 주소 (결론 그냥 주소임.)

url의 구성

protocol(프로토콜) : http, https 등
Domain Name (도메인명) : example.com 어짜고 자짜고
Path (경로) : ' /' 로 구분, 서버 내 리소스 위치
Query String(쿼리 문자열) : ?로 구분, 여러 매개변수 = &

네트워크 요청

XMLHttpRequest / fetch

→ 네트워크 요청 보내는 주요 방식

- XMLHttpRequest

구식 네트워크 요청법, 어... 뭐... 그렇다... 잘 안쓰이는듯?

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1");

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error("Error:", xhr.status);
    }
  }
};

xhr.send();

- fetch

신식 네트워크 요청법 훠얼씬 간단 + 직관적인 API 제공!

fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then((response) => response.json())
        .then((data) => console.log(data))
        .catch((error) => console.err("Error:", error));

마무리 - 내일부터 J 다운 삶을 살아보도록 하자꾸나 림졍림졍아.

내일의 계획.

개인 프로젝트 모달이랑 CSS만 우다다 만져서

개인프로젝트 중간과정 TIL 빠르게 작성하고?

달리기반 실습 집중 뽝 하고?

코드카타 열심히 하나하나씩 해놓고?

해야할 일들 우다다다다다다...

하아...열분... 일단 오늘은 이거 적었다고 지쳤으니 내일 뵐게요

(이거 월요일 디버프임 암튼 그럼.)

그래서 오늘의 KPT 회고는요?

Keep : 그래도 내용은 나쁘지 않게 이해해서 다행인 림졍.
Problem : 너 개인과제 TIL 자꾸 미뤄짐.
Try : 내일은 쓰자 응^^? 안쓰면 주...ㄱ...어...읍

끝.

728x90

'React TIL' 카테고리의 다른 글

[React] Day_24 개인 프로젝트 후기 (3)	2024.10.23
[React] Day_23 개인 프로젝트 중간점검 (2)	2024.10.22
[React] Day_21 데일리 정리 (1)	2024.10.18
[React] Day_20 데일리 정리 (3)	2024.10.17
[React] Day_19 데일리 정리 (2)	2024.10.16