[JavaScript - 비동기 시리즈 4] Async & Await Async & Await: 비동기 함수를 간편하게 사용하도록 함promise를 한 단계 감싸서 더 보기 편하게 만들어 주는 문법!prominse chaining 의 복잡한 chaining 없이 마치 동기적인 코드를 작성하듯 훨씬 간편하게 쓸 수 있다 Async: 비동기 함수를 정의할 때 사용하는 키워드. function 키워드 앞에 async를 붙여주면 비동기 함수로 변신한다이때 async 키워드가 붙은 함수는 항상 promise를 반환하고, 함수 내에서 어떤 값을 리턴해주면 이 값은 promise로감싸져서 반환된다 (우리 눈에는 보이지 않지만, 내부적으로 promise를 사용하는 것임) getUser로부터 반환된 user는 promise가 된다 // Asyncasync function getUser().. [JavaScript - 비동기 시리즈 3] Promise promisepromise : 비동기 처리에 사용되는 자바스크립트 객체, state(상태)와 result(결과물) 두 속성을 가진다비동기 작업이 맞이할 성공 혹은 실패를 나타냄 비동기 작업이 진행중일 때는 비어있다가, 작업이 완료되면 그 작업에 대한 결과물로 promise 상자가 채워진다= 비동기 작업의 상태(성공 혹은 실패)를 나타내는 상자 promise 상자에 붙은 딱지가 state, 상자 안에 들어가는 결과물이 result이다 promise의 3가지 상태 (Pending, Fulfilled, Rejected)1. Pending - 대기 Pending state : 비동기 작업이 진행중일때 객체는 pending state를 갖고있음 작업이 아직 성공하지도, 실패하지도 않은 대기상태기 때문. 이때 p.. [JavaScript - 비동기 시리즈 2] 비동기 Callback https://chaenilog.tistory.com/92 더 다양하고 의미있는 일을 하기 위해 매개변수 또는 인자라고 하는 입력값을 전달받을 수 있다->> 함수는 여러가지 입력값을 전" data-og-host="chaenilog.tistory.com" data-og-source-url="https://chaenilog.tistory.com/92" data-og-url="https://chaenilog.tistory.com/92" data-og-image="https://blog.kakaocdn.net/dna/l3Dvd/hyYvif6rP9/AAAAAAAAAAAAAAAAAAAAAD5T6gC7Gxpm4ia27qJ4OUywwa5s7zY5KcM2OzIYkpzi/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1767193199&allow_ip=&allow_referer=&signature=mzrgSzy5%2FWW0Rl%2Bh4kSblOXZZqc%3D [JavaScript - 비동기 시리즈 1] 동기 VS 비동기 동기 프로그래밍동기적 수행 : 한번에 하나씩, 순서대로동기 프로그래밍 : 코드를 작성 순서대로 동기적으로 수행하는 방식직관적이고 이해가 용이하지만, 오래걸리는 작업을 할 경우 blocking 현상이 나타날 수 있다 => 비동기 프로그래밍으로 문제 해결 가능 ! 비동기 프로그래밍비동기 프로그래밍 : 코드를 비동기적으로 수행하는 방식해당 작업이 끝날때까지 기다리지 않고 바로 다음 작업으로 넘어가는 방식 setTimeout(callback, 3000) : 브라우저에서 제공하는 비동기 함수, callback함수와 지연시간을 나타내는 밀리초 단위의 인자를 전달받음console.log('1');setTimeout(() => {.. [JavaScript] Callback 함수 function main(param) {} 함수 - 어떤 특정한 일을 하는 코드의 묶음-> 더 다양하고 의미있는 일을 하기 위해 매개변수 또는 인자라고 하는 입력값을 전달받을 수 있다->> 함수는 여러가지 입력값을 전달받을 수 있다. 숫자, 문자열, 객체 등 ->>> 함수는 또다른 함수를 인자로 전달받을 수 있는데, 이렇게 다른 함수의 인자로 전달되는 함수를 콜백함수라고 부른다function main(param) { param()} 콜백함수는 콜백함수를 전달받은 함수에 의해 호출된다 function main(x) { x();}function cat() { console.log('냥');}main(cat); // 출력 : 냥 function main(x) { x();}main(() => { con.. [JavaScript] this와 bind this -> {} : 어떤 객체를 가르키는 키워드, this가 가리키는 객체는 상황에 따라 바뀐다. this는 함수를 호출한 객체이다1. 전역 문맥전역적 문맥에서 this에 접근하면 this는 윈도우 객체가 된다.( 엄격모드 활성화 ( 'use strict'; ) 시에도 상관 없이 윈도우 객체를 가리킨다 )if (true) { // 1 console.log(this);}console.log(this); // 2'use strict'; // 3console.log(this); 함수 내부의 this : 함수 호출 방법에 따라 값이 달라짐 1) this : 윈도우 객체전역적으로 함수를 호출하는 것은 window.main();과 같음>> "this 는 함수(main).. [JavaScript] 일반함수 vs 화살표 함수 + this 비교 일반 함수 vs 화살표 함수 1. 화살표 함수 문법화살표 함수 : 항상 익명함수다! 1) 코드가 한줄인 경우 중괄호({})와 return 생략 가능 !! function add(a, b) { return a + b}add()function (a, b) => a + badd() 2) 매개변수가 단 하나라면 소괄호도 생략 가능 (매개변수가 하나도 없을때 또는 여려개일 때는 모두 불가능!)const print = (text) => console.log(text)print("hi")const print = text => console.log(text)print("hi") 3) 객체 리턴 시 소괄호로 묶어주기(문법에 혼란이 올 수 있음)const getObject = () => { return { name:.. 함수 선언식과 함수 표현식 // 함수 선언식function main() { console.log('hello');}main();// 함수 표현식const main = function () { console.log('hello');};main();https://www.youtube.com/watch?v=mfaQOlc73pU함수 표현식은 호이스팅 x함수 정의 이전에 호출하면 xx JS 실습 1. 실시간 계좌 잔액 조회 기능 만들기 문제 설명버튼을 클릭하면, 10만 원에서 100만 원 사이의 랜덤 잔액을 표시하세요.표시되는 잔액은 천 단위로 콤마(,) 처리되도록 하세요. HTML 코드잔액 조회잔액: ? 원 참고 ) 랜덤 : https://extbrain.tistory.com/151 [Javascript] 랜덤 정수 생성하기 (Random Number)▶Javascript 랜덤 정수 생성하기 (Random Number) ▶설명 Javascript 함수 중에 Math.random 함수가 존재합니다. 이 함수를 이용해 램덤한 정수를 반환하는 함수를 만들어보겠습니다. 참고 : https://developer.mozilextbrain.tistory.com태그 내부 값 변경하기 https://aeon.. JS 실습 8-4 함수 호출 (계산 결과 출력)[Direction:] Ÿ prompt() 함수를 통해 수식(그림2 참고)을 입력 받아 계산 결과를 출력하는 웹 페이지를 작성하시오. Ÿ 단, 수식 계산은 eval() 함수를 이용 eval()로 수식 계산 JS 실습 8-3 document.write() 함수[Direction:] Ÿ 다음 array에 들어있는 각 문자열을 그림과 같이 리스트로 출력하는 웹 페이지를 작성하시오. Ÿ let itemlist = [“라면”, “계란”, “오뎅”, “파”, “떡”, “고추장”] Ÿ length 프로퍼티를 사용한다. 맛있는 라볶이 황금 레시피 JS 실습 8-2 alert() 함수[Direction:] Ÿ 100보다 작은 정수만을 입력 받는 자바스크립트 프로그램을 작성하시오. (단, 100보다 큰 정수가 들어오면 경고창을 표시한다.) 이전 1 2 다음
