Front End/Javascript (53) 썸네일형 리스트형 [JavaScript] Async & Await 알아보기 자바스크립트 비동기 처리 방식이 자주 쓰입니다. 서버에게 리소스를 요청하거나 파일 입출력 혹은 타이머 대기 작업을 실행하는 Web APIs 들은 비동기 처리 방식으로 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없습니다.그래서 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 콜백 함수(Callback) 와 이를 개선한 프로미스 객체(Promise)가 있습니다.하지만 서비스 규모가 커질 수록 코드가 복잡해짐에 따라 코드를 중첩해서 사용하다가 가독성이 떨어지고 유지보수가 어려워지는 상황이 발생되게 되는데, 이를 콜백지옥(Callback Hell), 프로미스 지옥(Promise Hell)이라고 합니다. // 콜백 지옥(Callback hell)에 빠진다. .. [JavaScript] Promise란? “A promise is an object that may produce a single value some time in the future”Promise는 미래에 단일 값을 생성할 수 있는 객체입니다. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. 프로미스(Promise)를 이용하면 비동기 처리의 결과 값을 처리하는 콜백 함수를 비동기 함수로부터 분리할 수 있습니다. 일단은 Promise 객체를 만들어 보도록하겠습니다.함수를 비동기 함수로 만들면 됩니다. 두가지 방법이 있습니다. 첫번째는 함수명 앞에 "async" 예약어를 붙이는 겁니다.. [JavaScript] Synchronous(동기)/비동기(Asynchronous) 프로그램을 실행할 때 항상 한 작업을 끝낸 후 다음 작업을 시작하는 것을 동기(Synchronous) 프로그램이라고 하고, 그에 비해 어떤 작업을 처리하는 도중 다른 작업을 시작할 수 있으면 비동기(Asynchronous) 프로그램이라고 합니다. 동기적 처리 방식의 장점은 동기적, 순차적으로 즉시 실행되어 순서를 보장할 수 있다는것 입니다. 하지만 단점도 존재하는데 현재 작업이 종료될 때 까지 다음 작업이 실행이 되지 않는 blocking 현상이 발생하여 프로그램이 멈춰진것 처럼 보일 수 있습니다. blocking 현상이란 현재의 작업이 완료될 때 까지 작업이 중단되고 이후 코드들이 실행되지 않는현상입니다.const task1 = () => { // 작업시간이 5분 정도 소요된다.. Hook 이란? 후킹은 소프트웨어 공학 용어로, 운영 체제나 응용 소프트웨어 등의 각종 컴퓨터 프로그램에서 소프트웨어 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채는 명령, 방법, 기술이나 행위를 말한다.https://ko.wikipedia.org/wiki/%ED%9B%84%ED%82%B9 hook은 React 에만 있는 것이 아닙니다. 거의 모든 프로그램에서 Hook을 지원합니다. 기존에 정해진 프로그램의 흐름 중간에 사용자가 임의로 개입하여 별도의 추가적인 일을 실행시킬 수 있게 해 주는 툴입니다.즉, 이미 만들어진 프로그램 중간에 나만의 로직을 추가하는 것!!!이와 관련된 유튜브 영상입니다. https://www.youtube.com/watch?v=tgmvleK5vZI&ab.. [JavaScript] 배열에서 최대값/최소값 구하기 난수로 배열 채우기let getRandomNumber = (min, max) => parseInt(Math.random() * (max - min + 1)) + min;let ar = [];for (let i = 0; i 10; i++) ar.push(getRandomNumber(0, 100));console.log(ar); 가장 전통적인 방법으로 최대값 최소값 구하기let max = ar[0], min = ar[0];for (let i = 0; i if (max if (min > ar[i]) min = ar[i];}console.log(`최대값 : ${max}, 최소값 : ${min}`); for~in 사용 : index가 넘어온다.let max = ar[0], min = ar[0];.. [JavaScript] 콜백 지옥 (Callback Hell) 경험해 보기 콜백 지옥이란 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다. document.write("출근 과정 : ") gotoWork("일어나고", function(message){ gotoWork("세면하고", function(message){ gotoWork("식사하고", function(message){ gotoWork("양치하고", function(message){ gotoWork("환복하고", function(message){ .. [JavaScript] call() & apply() & bind()의 사용 2 자바스크립트 모든 함수에는 모든 매개변수를 받아주는 arguments라는 숨겨진 매개변수가 존재 합니다. arguments라는 숨겨진 매개변수는 배열처럼 사용하지만 배열은 아니고 유사 배열입니다. function exam01() { console.log(`typeof : ${typeof(arguments)}`); console.log(`typeof : ${typeof({name:'한사람'})} : ${{name:'한사람'}}`); console.log(`typeof : ${typeof([1,2, 3, 4])} : ${[1,2, 3, 4]}`); console.log(`arguments(유사배열) : ${argume.. [JavaScript] call() & apply() & bind()의 사용 자바스크립트에서 함수를 호출하는 방법은 네가지가 있습니다.함수를 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call, apply 그리고 bind메서드를 이용하는 방법이 있습니다. 보면 call은 보통 함수와 똑같이 매개변수를 콤마로 구분해서 넣고, apply는 매개변수를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있습니다. 그리고 bind() 메서드는 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만들어 리턴 하는 겁니다. 그래서 bind를 호출하고 다시 실행을 해야만 합니다.그렇다면 call과 apply 그리고 bind가 공통적으로 가진 null 인자의 역할은 뭘까요? 바로 this를 대체하는 겁니다. 다음을 보겠습니다. // 함수 선언 const fn1 .. 이전 1 2 3 4 5 ··· 7 다음
