[TIL #27] 231120_비동기 프로그래밍, Promise객체, JSON

Bora.K | 권보라·2023년 11월 20일

React TIL

TIL

목록 보기

27/51

오늘 한 일

[개인Project] 팬레터함 만들기
- 개인과제 해설영상 및 개념 정리

학습 내용

비동기 프로그래밍

1. 비동기 프로그래밍의 개념

(1) 동기적 방식이란?
현재 실행 중인 코드가 끝나야 다음 코드를 실행하는 순차적 방식

일반적인 프로그래밍 코드는 동기적으로 실행

(2) 비동기적 방식이란?
실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식

setTimeout, addEventListner 등
별도의 요청, 실행 대기, 보류 등과 관련된 코드
서버 통신과 관련된 로직들

(3) 콜백지옥

콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우
주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생
뭐가문제? 가독성, 수정도 어려움

2. Promise 객체

(1) Promise 개념

💡 이름이 promis(약속)인 이유는?

비동기 작업은 수행의 제어권을 제 3자에게 넘겨준 후 작업이 완료되면 다시 제어권을 이양받는다.

localhost:3000 에서 버튼을 클릭해서 네이버 서버에 날씨 API 정보 요청

그 API 문서에 적혀있는 약속대로 약 0.3sec가 지나고 데이터 전송

localhost에 있을 때 모든 제어권은 나에게 있다가, 네이버에 api 요청을 하는 순간 제어권은 네이버에게 넘어갔다가 데이터를 전달받는 순간 다시 제어권은 나에게 넘어온다.

(2) promise 객체에 담기는 주요한 상태정보

대기 : pending
localhost에서 네이버에 요청한 직후, 아직 성공(resolve) 또는 실패(rejected)되지 않은 상태
이행 : fulfilled
네이버가 localhost한테 정상적으로 데이터 전달을 해준 상태
거부 : rejected
어떤 이유로 네이버가 localhost에게 데이터를 전달을 못해준 경우

(3) Promise 객체 핸들링 방법

axios, fetch
- then(콜백함수 response => {}) 정상
- catch(error) 오류
- finally 정상, 오류 상관 없이 항상 실행

axios.get('http://api.naver.com/weather/today')  // Promise 객체
.then(response => {
	console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {
	console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{
	console.log('항상 실행되는 부분입니다!');
});

async() 비동기 함수 앞에 async
await : await를 만나면 끝날 때까지 기다렸다가 다음 실행
api를 불러와야 다음 코드인 콘솔이 실행되기 때문에 await로 데이터를 기다려 준 후 실행

JSON

1. JSON이란?

JavaScript Object Notation
자바스크립트 객체 문법에 토대를 둔 문자 기반의 데이터 교환 방식

2. JSON의 구조

자바스크립트 객체 리터럴 작성법을 따른다.
문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다.

3. JSON 메서드

stringify()
자바스크립트 객체 → JSON 문자열 변환
parse()
JSON 문자열 → 자바스크립트 객체 변환

네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해
JS 객체로 변환할 때 사용한다.

오늘의 회고

오늘 개인과제를 무사히(?) 제출했다. props-drilling이랑 context API로 리팩터링하는 것까지는 했는데, redux 사용법이 너무 어려워서 결국 못하고 제출했다. 개념은 대충 알겠는데, 활용이 너무 어렵다. 개인과제 해설 영상을 보고 내일 다시 만들어 봐야겠다.
확실히 과제를 하면서 많이 배우는 것 같다. 강의만 들었을 때는 개념만 있는 상태라서 정리가 잘 안되었었는데, 과제를 하고 과제 해설 영상을 보니 '이런 개념들은 이렇게 활용되는구나!' 하고 이해가 더 잘 되었다. 이전에 들었던 강의 내용도 더 잘 이해할 수 있었다. 이래서 2회독을 하는게 중요하구나... 2회독이 목표이지만, 너무 빡세서 시간이 없다는...