[JavaScript] 비동기

비동기

Single Thread 언어

• 단 하나의 실행 컨텍스트 스택 (한번에 하나의 작업만)
• Memory Heap 변수와 객체의 메모리 할당
• Call Stack 어떤 순서로 작업을 수행하는지 기록 (작업 스케쥴링)

동기/비동기

• 동기 : 태스크 처리할 동안 나머지 태스크 대기
• 비동기 : 대기X, 다음코드 실행

비동기 처리

비동기 처리 방식의 문제점

function getUser() {
	let user;
	setTimeout(function() {
		user = 'jnary';
	}, 0)
	return user;
}

• 비동기 함수 처리 결과 반환 → 순서 보장 X, 후속 처리 X

Callback

• 매개변수로 함수 자체 전달
• Callback Hell

  • 콜백함수를 익명함수로 전달하는 과정에서 콜백 안에 함수 호출이 반복

  • 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

    → Promise, Async로 해결

Promise

• 비동기 처리에 사용되는 객체
• 생성 시점 : 알 수 없는 값을 위한 대리자
• 연산 종료 후 : 결과값, 실패 처리

// Promise 객체 생성
const promise = new Promise((resolve, reject) => {
	// 비동기 작업 수행
	if (/* 성공 */) {
		resolve('result');
	} else ( /* 실패 */) {
		reject(new Error('failure'));
	}
});

Promise 상태

1. Pending 대기
   • 비동기 처리가 수행되지 않은 상태
   • resolve, reject 함수 호출 X
2. Fulfilled 성공
   • 비동기 처리가 수행된 상태 (성공)
   • then 을 통해 처리값 반환
3. rejected 실패
   • 비동기 처리가 수행된 상태 (실패)
   • catch 를 통해 실패 처리 결과값 반환

Promise 후속 처리 메서드

• then

  • 인자 : (성공 시 호출되는 콜백함수, 실패 시 호출되는 콜백함수)

  • Promise 반환

    promise.then(
    	result => alert(result),   // 안 다루고 싶으면 null
    	error => alert(error)      // 안 다루고 싶으면 생략
    );
    
    // 성공 콜백만 다루고 싶을 때
    promise.then(
    	result => { alert(result); }
    )
    promise.then(
    	result => alert(result)
    )

• catch
  • then(null, f) 와 동일
• finally
  • 성공, 실패 관계없이 항상 실행

    promise.finally(() => alert('처리되었습니다.'));

  • Promise Chaining → 순차적으로 처리해야하는 비동기 작업이 다수 있을 때 해결
    
  • then(f, f) 와 달리 인수 필요 X

Promise Chaining

• 여러개 Promise 연결하여 사용할 수 있는 특징
• 오류 던지면 catch로 이동 → 오류 안 던지면 catch 건너뛰고 then으로 이동 [Javascript] Promise 예제 풀어보기

  Promise.reject('Error!')
    .catch(error => {
      console.log('첫번째 catch:', error);
      // 여기서 오류를 다시 던지거나 거부된 Promise를 반환하지 않는다면,
      // 다음 then은 실행됩니다.
      return 'Recovered';
    })
    .then(result => {
      console.log('첫번째 then:', result); // 'Recovered' 출력
      throw 'New Error!';
    })
    .catch(error => {
      console.log('두번째 catch:', error); // 'New Error!' 출력
      // 여기서 아무것도 반환하지 않거나 값을 반환하면, 다음 then이 실행됩니다.
    })
    .then(result => {
      console.log('두번째 then:', result); // undefined 또는 catch에서 반환한 값 출력
    });
  

  Promise.reject('Error')
    .catch(error => {
      console.log('Caught an error:', error);
      throw 'New Error from catch';
    })
    .then(result => {
      // 이 블록은 실행되지 않음
      console.log('This will not run:', result);
    })
    .catch(error => {
      // 여기서 두 번째 오류를 처리
      console.log('Caught another error:', error);
    });
  

Promise 문제점

• 가독성 저하
• 디버깅 불편 ← 길어지는 체이닝
• 예외처리 try ... catch 와 직관성 떨어짐

→ async/await 등장

async/await

• async

  • function 앞에 위치

  • 해당 함수는 항상 Promise를 반환

  • Promise 아닌 값 반환해도 fulfilled 상태의 Promise로 반환

    async function f() {
    	return Promise.resolve(1);
    }
    f().then(alert);   // 1

• await

  • async 함수 내에서만 사용 가능

  • 해당 키워드 만나면 Promise가 처리될 때까지 대기

  • promise.then 보다 가독성 굳

    async function f() {
    	let promise = new Promise((resolve, reject) => {
    		setTimeout(() => resolve('success!'), 1000)
    	});
    	let result = await promise;   // Promise 처리될 때까지 대기
    	alert(result);   // 'success!'
    }

에러 핸들링

• try ... catch 예외를 처리하기 위한 문법
• 동기 / 비동기 구분없이 에러 핸들링으로 예외 처리 가능

REST API (HTTP 메서드)

REST

• 모든 자원(이미지, 동영상)에 고유한 이름을 부여하여 해당 자원의 상태를 주고받는 모든 것
  • HTTP URI 를 통해 자원 명시
  • HTTP Method 를 통해 자원 읽고 씀 (CRUD: Create, Read, Update, Delete)
• Server-Client

  • REST Server : API 제공 → 비즈니스 로직 처리 및 저장

  • Client : 사용자 인증, context 관리

    → 서로 간 의존성 감소

• Stateless
  • HTTP : Stateless Protocol
  • Client의 context를 Server에 저장 X
• RESTful : REST 설계 규칙을 올바르게 지킨 시스템

REST API

• REST(REpresentational State Transfer) 기반
• 리소스 나타내는 방법에 대해 개발자들이 정한 규칙

HTTP Method

• GET 데이터 조회
• POST 데이터 추가 및 등록
• PUT 데이터 갱신
• DELETE 데이터 삭제
• PATCH 부분적으로 수정

REST API 작동방식

• Header

  • Authorization, Content-Type 등 부가정보 전송

    try {
    	const data = axios.get(
    		`api/name/validation?userName=${userName}`,
    		return data;
    	);
    } catch (err) {
    	console.error(err);
    }

• Body
  • 요청과 함께 보내고자 하는 XML, JSON, Multi Form 데이터

Response

• Status Code
  • 2xx 성공
  • 3xx 리다이렉션 (캐싱, 다른 쪽으로 대체)
  • 4xx 클라이언트 요청 오류 (Bad Request)
  • 5xx 서버 내부 오류
• Header : 요청에 대한 부가적인 정보
• Body : 요청에 대한 응답 데이터가 담겨 오는 곳

데이터 통신

Axios

• 브라우저, node.js에서 사용할 수 있는 Promise API 활용하는 HTTP 비동기 통신 라이브러리
• 자바스크립트 내장 fetch api 존재 → but axios 가 더 편리

환경 변수 (.env)

• 외부로 알려지면 안 되는 중요한 값 넣는 곳
• .gitignore 에 포함
• import.meta.env 로 접근
• VITE_ 로 시작 → VITE 배포시 인식하도록

Postman

• 개발한 api 테스트
• 테스트 결과 공유, API 개발의 생산성 증가
• 테스트 자동화, Collection, API문서화, 모니터링 등 기능 추가 → 단순한 API테스트 용도로 쓰기엔 무거움!
  

Thunder Client

• Postman 무거움을 보완한 가벼운 플랫폼
• VSCode extension으로 설치