Javascript12 [JS] 동기, 비동기에 대해(Synchronous vs Asynchronous) 동기 vs 비동기 차이점부터 설명하자면, 동기는 '직렬적'으로 작동하는 방식이고 비동기는 '병렬적'으로 작동하는 방식이다. 즉, 비동기란 특정 코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기 처리의 예 Web API Ajax setTimeout 왼쪽 차트는 비동기로 작동하는 방식이다. 한번에 여러 테스크가 동시에 병렬적으로 실행된다. 오른쪽 차트는 동기로 작동하는 방식이다. 하나의 테스크가 끝날 때 까지 기다렸다가 다음 테스크가 실행된다. ※ 총 실행 시간으로 따지면 동기방식이 더 느리다. 동기(Synchronous)란? 직렬적으로 테스크를 수행하는 방식이다. 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 테스크를 처리할 동안 .. 2023. 10. 20. [JS] Promise와 async/await의 차이 자바스크립트에는 비동기 처리를 다룰 수 있는 방법이 여러가지 있다. 주로 callback, Promise, async/await 등을 활용한다. Promise Promise는 자바스크립트에서 비동기 처리에 사용되는 객체이다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해하면 편한다. Promise의 3가지 상태 Pending(대기) Fulfilled(이행) Rejected(실패) 비동기 처리가 완료 되지 않았다면 Pending 완료되었다면 Fulfilled 실패하거나 오류가 발생했다면 Rejected 상태를 갖는다. Promise 사용 예 const condition = true; const promise = new Promise((resolve, reject) => { if (condi.. 2023. 10. 19. [JS] React에서 자주 사용되는 JS 문법 몇가지 오늘은 React에서 자주 사용되는 JS 최신 문법(es6) 몇가지에 대해 알아보자. 1. Object Shorthand Assignment 예를 들어 name, age라는 2개의 변수와 person이라는 객체가 있다고 가정하자. 그 객체 안의 key와 value의 값은 아래와 같다. let name = "Lee" let age = "20" let person = { name: name, age: age } console.log(person); 콘솔창에 찍어보면 name에 변수 name이 age에는 변수 age가 잘 들어간 것을 볼 수 있다. 위의 경우처럼 key의 이름과 value의 이름이 서로 같다면 아래처럼 위의 코드보다 간결하게 코드를 작성할 수 있다. let name = "Lee" let age.. 2023. 2. 1. [JS] setInterval()과 setTimeout() 함수 setInterval() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있다. 이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있다. setInterval() 함수는 원하는 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. 사용법 setInterval( 함수명, 시간 ); 예를 들어 현재 시간을 1초 간격으로 출력하고 싶다면 const getClock= () => { const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`); }; getClock(); setInter.. 2022. 11. 14. 이전 1 2 3 다음
