728x90 반응형 JavaScript39 [JavaScript] 자바스크립트 비동기 처리와 콜백 함수(callback, promise, async/await) 목차들어가며비동기 처리? 그게 뭔가요?비동기 처리의 첫 번째 사례비동기 처리의 두 번째 사례콜백 함수로 비동기 처리 방식의 문제점 해결하기비유로 이해하는 콜백 함수 동작 방식콜백 지옥콜백 지옥을 해결하는 방법마무리글보다 더 쉽게 배우는 온라인 강좌이해가 잘 안되시나요? 방송에서 직접 물어보세요 :)[Javascript] 비동기, Promise, async, await 확실하게 이해하기들어가며얼마 전 수강생 한 분에게 Promise에 대해서 잘 설명된 글이나 예제 코드를 공유해달라고 요청받았습니다. 영어로는 잘 정리된 글이 많은데 한글로 쉽게 설명된 글을 찾아드리려고 하니 생각보다 자료가 많지 않더라구요. 그래서 Promise를 정리하기 위해 글을 쓰기 시작했습니다.‘Promise는 자바스크립트 비동기 처.. 2023. 3. 10. [JavaScript] 자바스크립트 비동기 처리 📌 동기 처리동기(Synchronization): 어떤 일이 순차적으로 발생한다.📌 비동기 처리비동기(async): 어떤 일을 병렬적으로 실행한다.📕 배경자바스크립트의 특징 중 하나는 단일 스레드로 동작한다는 것이다.(엥 단일 스레드요? 그게 뭐죠?)쉽게 생각해서 단일 스레드란, 한번에 하나의 일을 처리하는 것. 이라 표현할 수 있다.이러한 특징으로 인해 자바스크립트에서는 한가지 문제가 발생하게 된다.너무 오래 걸리는 작업이 있으면 그 작업을 하느라, 다른 작업들은 그만큼 기다려야 한다는 점이였다. (블록킹)이를 해결하기 위해 나온 개념이 비동기 처리이다.특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 비동기 처리라 부르고, 이를 이용해 코드의 블록킹을 방.. 2023. 3. 10. [JavaScript] 자바스크립트 클로저(Closure)란? 클로저의 의미클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 자바스크립트 고유의 개념이 아니라서 ECMAScript 명세에서도 클로저의 정의를 다루지 있습니다. 더구나 클로저를 설명하는 문장 자체도 이해하기 어려운 경우가 많습니다.클로저는 실행 컨텍스트의 스코프 체인과 깊은 관련이 있습니다.어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에는 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnvironment에도 접근이 가능하겠죠. A에서는 B에서 선언한 변수에 접근할 수 없지만 B에서는 A에서 선언한 변수에 접근 가능합니다. 이 부분이 바로 클로저를 관통하는 개념입니다.클로저의 원리inner 함수의 실행 시점에서 o.. 2023. 3. 10. [JavaScript] 자바스크립트 프로토타입 상속 원문 : 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance문자열, 배열, 객체에서 .length, .split(), .join()과 같은 기본 내장 메소드를 사용할 수 있는 이유가 궁금한적 있나요?우리는 그 메소드들을 명시한적 없는데 그것들은 어디서 오는걸까요? 이제 그것들을 마법이라 하지 마세요.바로 프로토타입 상속이라 불리는 것 덕분입니다. 이건 꽤 멋지고, 여러분이 알고 있는 것보다 더 자주 사용합니다!우리는 종종 같은 타입의 객체를 많이 만들어야 합니다. 사람들이 개를 검색할 수 있는 웹사이트가 있다고 가정해 봅시다.모든 개를 위해, 그 개를 묘사하는 객체가 필요합니다. 매번 새로운 객체를 작성하는 것 대신에, 우리는 constructor .. 2023. 3. 10. [JavaScript] 자바스크립트 프로토타입 기반의 함수 Class (ES6) JavaScript 프로토타입 기반의 함수 Class안녕하세요 !오늘은 ES6에서 도입 된 Class에 대해 알아보겠습니다.들어가기 전 이야기 드리고 싶은 부분이 있습니다.JavaScript는 프로토타입 기반 객체 지향 언어입니다. 모든 객체는 각 부모 역할을 담당하는 객체와 prototype으로 연결이 되어 있다. 그렇기 때문에 class가 필요 없이도 객체 지향 프로그래밍이 가능하다. 어떤 커뮤니티에서는 JavaScript가 무슨 객체 지향 언어냐 라고 이야기를 하는 분들을 본 것 같은데 나는 그분들이 생각하는 다른 언어보다 상상 이상으로 충분한 조건을 갖추고 있는 객체 지향 언어라고 생각한다.이제 본격적으로 시작해보자.class 는 어떤 것을 제공 해주나 ?기존 prototype 기반의 상속 보다 .. 2023. 3. 10. [JavaScript] 자바스크립트 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) Pass-by-reference(참조에 의한 전달)객체의 타입은 객체 타입 또는 참조 타입이라한다. 참조 타입이란 객체의 모든 연산이 실제값이 아닌 참조값으로 처리됨을 의미한다. 원시 타입은 값이 한 번 정해지면 변경할 수 없다(immutable). 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다.let bar = { num : 1}let foo = bar;console.log(bar.num, foo.num); // 1, 1console.log(bar === foo); // truebar.num = 2;console.log(bar.num, foo.num); // 2, 2console.log(bar === foo); // true변수 foo에 bar 값을.. 2023. 3. 10. [JavaScript] 자바스크립트 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후에 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'Lee';person.sayHello = function () { console.log('Hi! My name is ' + this.name);};console.log(person); // {name: "Lee", sayHello: f}person.sayHello(); // Hi! My name is Lee생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 .. 2023. 3. 10. [JavaScript] 자바스크립트 기명함수 / 익명함수 기명함수 함수선언 방식과 익명함수 함수표현 방식이 있다.function sum(x, y) { // console.log(x + y); return x + y; // return 키워드가 있는 시점은 코드가 종료되는 시점이다. // 그렇기 때문에 return 키워드 아래의 코드는 실행되지 않는다.}const a = sum(1, 3);const b = sum(4, 12);console.log(sum(5, 9));console.log(b);console.log(a + b);✅ 화살표 함수// () => {} vs function () {}const double = function (x) { return x * 2;};console.log('double :', double(7));const double.. 2023. 3. 10. [JavaScript] 자바스크립트 함수(Function) 함수란?일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.함수는 함수 정의(function definition)를 통해 생성한다.function add(num1, num2) { return num1 + num2;}이 때, 함수 내부로 입력을 전달받는 변수를 매개변수(parameter)라고 한다.그리고 return 을 통해 출력하고자 하는 값을 반환값(return value)이라고 한다.함수 정의만으로는 함수를 실행할 수 없다.var result = add(1, 2);console.log(result);// 결과3입력 값인 인수(argument)와 함께 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출(function call)이라고 한다.. 2023. 3. 10. 이전 1 2 3 4 5 다음 728x90 반응형
