📝 JavaScript 제어 흐름
동기적 제어 흐름
💡 동기적 제어 흐름이란?
- 동기적 제어흐름은 현재 실행중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 말한다.
- 분기문, 반복문, 함수 호출이 동기적으로 실행된다.
- 코드의 흐름과 실제 제어 흐름이 동일
- 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.
비동기적 제어 흐름
💡 비동기적 제어 흐름이란?
- 현재 실행중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 말한다.
- Promise, 콜백 함수, async/await 가 비동기적으로 실행된다.
- 코드흐름과 실제 제어 흐름이 다르다.
- 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.
자바스크립트에서 비동기
💡 자바스크립트에서 비동기 처리
자바스크립트 엔진은 비동기 처리를 제공하지않지만, 정해진 함수를 이용하여 비동기 코드를 활용할 수 있다.
비동기 API로는 setTimeout,XMLHttpRequest,fetch 등의 Web API가 있다.
📢Promise
- 비동기적으로 실행하는 작업의 진행, 성공, 실패 상태를 표현한다.
- 비동기적 처리의 순서를 표현할 수 있다.
Promise 생성자
let promise = new Promise((resolve,reject) => {
if (Math.ramdom() * 10 < 5) {
resolve("성공")
} else {
reject("실패")
}
}
new Promise(callback)callback 함수는 (resolve,reject) 두 인자를 받는다
Promise가 성공했을 때resolve를 호출한다.
Promise가 실패했을 때reject를 호출한다.
Promise 메서드
promise
.then(result => {...})
.catch(error =>{...})
.finally(() =>{...})
then()메서드에 성공했을 때 실행할 콜백 함수를 인자로 넘긴다.
catch()메서드에 실패했을 때 실행할 콜백함수를 인자로 넘긴다.
finally()메서드는 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
메서드 체인
then/catch메서드가 또 다른 promise를 리턴하여, 비동기 코드에 순서를 부여한다.
이렇게 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(chaining)이라 한다.
함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 구현한다.
Promise.all([promise1,promise2,promise3]).then( ).catch( )Promise.all은 Promise의 배열을 받아 모두 성공 시 각 Promise의 resolved 값을 배열로 반환한다.
📢 async/await
- Promise를 활용한 비동기 코드를 간결하게 작성하는 문법.
- await 키워드는 반드시 async 함수 안에서만 사용해야 한다.
- async로 선언된 함수는 반드시 Promise를 리턴한다.
- async 함수는 function 키워드 앞에 async를 붙여 만든다.
async function asyncFunc() {
await 비동기 함수();
}try-catch 구문으로 비동기 코드 에러처리 가능
async function asyncFunc() {
try{
let data = await 비동기 함수();
return data;
} catch(e) {
...
}
}📢 HTTP
- Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것이다.
- 클라이언트 : 서버로 요청을 보내는 대상
- 서버는 클라이언트가 요청을 보내기 전까지 대응 x
- 서버와 클라이언트 사이에 많은 요소가 존재하는데 HTTP는 이런 존재들 사이의 통신 방법을 규정한다.
HTTP Message
- 서버주소, 요청 메서드, 상태 코드, target path, 헤더정보, 바디 정보 등이 포함
- 요청 메시지, 응답 메시지의 모양이 다름.
- HTTP/1.1 메시지는 사람이 읽을 수 있음.
HTTP Header
- 콘텐츠 관련 정보, 인증 관련 정보, 쿠키 정보, 캐시 관련 정보 등 서버와 클라이언트 간 통신 시 필요한 정보를 담는다.
HTTP Status
- HTTP 요청 시, 클라이언트는 요청의 결과에 대한 상태정보를 얻는다.
- Status Code (응답 상태를 나타내는 코드) 와 Status Text(응답 상태 간략 설명)으로 이루어져있다.
요청 메서드
- HTTP에서, 클라이언트는 서버로 요청을 보낸다.
GET: 리소스 정보 얻기POST: 리소스 생성PUT: 리소스를 생성하거나 업데이트DELETE: 리소스 삭제할 때 쓰는 메서드
📢 REST API
- API란? 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수
- HTTP URL를 통해 자원을 명시하고 HTTP Method를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미.
- HTTP 요청에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명치한 것으로 구체적인 내용으로는 요청 메서드의 의미, URL 설계, 클라이언트의 상태에 대한 동작등을 정의한다.
📢 Fetch API
- 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API이다.
- 네트워크 요청 성공시 Promise는 response 객체를 resolve 하고, 실패시 에러를 reject 한다.
- Response 객체는 결과에 대한 다양한 정보를 담는다.
response.headers: Response 객체의 헤더 정보를 얻을 수 있다.
//options에 아무것도 넘기지 않으면 요청은 GET메서드로 진행
let promise = fetch(url, [options])
promise
.then(response => {
if(response.ok){
console.log("요청 성공")
}
}).catch(error => {
console.log("요청 실패")
}) 
초보 개발자