NOW OR NEVER

async & await 개념 비동기의 핵심 무언가 오래 걸리는 코드를 비동기적인 처리를 전혀 하지 않으면 js 엔진은 동기적으로 코드를 실행하기 때문에 즉 한줄이 끝나야지 그 다음줄로 넘어가는 동기적인 처리를 하기 때문에 오래 걸리는 코드가 처리가 끝날 때까지 필요한 기능을 구현하는 코드를 구현하지 못해 사용자는 텅텅 빈 웹페이지만 보게 될 수 있다. promise를 조금 더 간결하고 간편하고 그리고 동기적으로 코드를 작성하는 것처럼 보이게 만들어 주는 것들 promise chaining을 계속하게 되면 코드가 복잡해질 수 있는 데 이런 거 위에 조금 더 간편한 api로 async와 await을 사용하면 동기식으로 코드를 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와준다. 기존에 존재하는 pr..

Promise JS에서 비동기(async)를 자동으로 처리할 수 있도록 도와주는 object 정해진 장시간의 기능을 수행 후 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과 값을 전달 기능을 수행하다가 예상치 못한 문제 발생한다면 에러 전달 Promise is a Javascript object for asynchronous operation JS에 내장되어 있는 object async operation을 위해 쓰임 비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 쓸 수 있는 object 중요 포인트 state 상태 process가 heavy(무거운)한 operation을 수행하고 있는 중인지 아니면 이 기능 수행이 다 완료가 되어서 성공했는지 실패했는지 이런 상태에..

Async 비동기 프로그래밍 관련 단어 hoisting : var 변수 선언과 function declaration 함수 선언들이 자동적으로 제일 위로 올라가는 것 callback 함수 : 전달한 함수를 나중에 불러줘 라는 개념, 보통 arrow function 형식으로 작성 1000 ms : 1초 1. 동기와 비동기 synchronous : 정해진 순서(작성한 순서)에 맞게 코드가 실행되는 것 Javascript is synchronous 자바스크립트는 동기적이다. Executing the code block in order after hoisting : hoisting이 된 이후부터 코드가 작성한 순서대로 하나 하나씩 동기적으로 실행된다(나타나는 순서대로 자동적으로 실행됨) javascript 엔진은..

리액트 API 연동 redux는 API 연동 필수적인 요소가 아니다. API 연동 기본 npx create-react-app > yarn add axios axios 라이브러리 : rest api를 요청하게 될 때 프로미스 기반으로 처리할 수 있게 해주는 라이브러리(rest api 쉽게 요청 가능) import axios from ‘axios’; 요청 방법 : axios.HTTP메서드(요청 api 주소와 (정보)) ; rest api : 클라이언트와 서버가 소통하는 방식 중 하나(HTTP 메서드(GET, POST, PUT, DELETE)를 통해 구분) HTTP 메서드 : GET(데이터 조회), POST(데이터 등록), PUT(데이터 수정), DELETE(데이터 제거) 컴포넌트에서 api 요청하는 방법 a..

Javascript 비동기(Asynchronous) 처리 비동기 처리의 이해 동기적(Synchronous) 처리 : 작업이 끝나야 비로소 다음작업을 실행, 작업이 끝날 때까지 기다리는 동안 중지 상태가 돼서 다른 작업을 할 수 없다. ex) 1번 작업이 끝날 때까지 2번 작업 수행 못하고 2번 작업이 끝날 때까지 3번 작업을 수행하지 못함 작업을 비동기적 처리 할 때는 코드 실행 시 흐름이 멈추지 않는다. 그래서 동시에 여러가지 작업 처리 가능, 기다리는 과정에서 다른 함수를 호출도 가능 비동기 처리 예시 Ajax Web API 요청: 서버 쪽에서 데이터를 받아와야 할 경우에는 요청을 하고 서버에서 응답을 할 때까지 대기를 해야 하기 때문에 주로 비동기 처리를 함 파일 읽기 : 주로 서버쪽에서 파일을 읽..