본문 바로가기
728x90

분류 전체보기259

[자바스크립트] 프로미스 - Promise Handler 프로미스의 개념과 기본 사용법 [자바스크립트] 프로미스 - 개념 & 기본 사용법 프로미스의 탄생 : 콜백지옥 자바스크립트에서는 서버에서 데이터를 받아오는 등 시간이 걸리는 작업을 처리를 할 때, 대게 비동기함수를 사용하여 처리한다. 비동기는 특정 코드의 실행이 완 codingralro.tistory.com 저번 포스팅에서는 프로미스의 탄생 배경과 개념, 그리고 기본 사용법에 대해서 알아 보았다. 이번 포스팅에서는 프로미스 객체의 상태에 대해 후속 처리를 하는 프로미스 핸들러에 대해서 알아보겠다. 프로미스 3가지 상태 프로미스 핸들러에 대해서 알아보기 전에, 먼저 프로미스의 3가지 상태에 대해서 알아보겠다. 프로미스는 비동기 작업의 결과에 대한 약속 객체를 반환한다고 하였다. 그렇기 때문에 new Prom.. 2023. 11. 6.
[자바스크립트] 프로미스 - 개념 & 기본 사용법 프로미스의 탄생 : 콜백지옥 자바스크립트에서는 서버에서 데이터를 받아오는 등 시간이 걸리는 작업을 처리를 할 때, 대게 비동기함수를 사용하여 처리한다. 비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하기 때문에, 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때에는 콜백 함수를 사용해 왔다. 콜백 함수는 비동기 작업이 완료되면 자바스크립트 엔진의 콜백 큐로 다시 불러오는(call back) 함수의 의미로, 비동기 함수의 매개변수로 함수 객체를 넘기는 것을 뜻한다. 이런 콜백 함수를 통해 비동기 작업의 결과로 그 다음의 작업을 수행할 수 있었던 것이다. 하지만 콜백함수를 사용하면 코드가 복잡하고 가독성이 떨어지는 단점이 있다. 여러 개의 비동기 작업을 순차적으로 수행하.. 2023. 11. 6.
[자바스크립트] 프로토타입 - 응용 https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EA%B0%9C%EB%85%90 [자바스크립트] 프로토타입 - 개념 프로토타입 기반의 언어 : 자바스크립트 자바스크립트는 클래스 기반의 객체지향 언어가 아닌 프로토 타입 기반의 객체지향 언어이다. 그렇기 때문에 클래스라는 개념이 존재 하지 않는다. 여 codingralro.tistory.com 프로토타입의 응용 저번 포스팅에서는 프로토타입에 대한 개념을 알아보았다. 이번 포스팅에서는 프로토 타입을 응용하는 방법에 대해서 다루어보겠다. 기본적으로 프로토 타입은.. 2023. 11. 4.
[자바스크립트] 프로토타입 - 개념 프로토타입 기반의 언어 : 자바스크립트 자바스크립트는 클래스 기반의 객체지향 언어가 아닌 프로토 타입 기반의 객체지향 언어이다. 그렇기 때문에 클래스라는 개념이 존재 하지 않는다. 여기서 생기는 의문점은 "그렇다면 자바스크립트에서 사용하는 class 키워드는 무엇이냐"이다. 자바스크립트의 class를 공부하다보면 "class지만 자바스크립트 엔진 내부에서는 prototype 타입 체이닝 방식과 똑같이 동작한다"는 말을 들어본 적이 있을 것이다. 즉, 클래스는 개념보다는 기존의 프로토타입 체이닝 방식을 자바의 클래스 방식을 참고하여 편하게 구현할 수 있도록 하는 "문법" 인 것이다. 그렇기 때문에 자바스크립트는 클래스라는 개념이 없고 프로토타입이라는 개념을 기반으로 하는 언어인것이다. 프로토타입은 기존의 .. 2023. 11. 4.
[자바스크립트] 명시적 this 바인딩 명시적 this 바인딩 저번 포스팅에서는 this의 기본 개념과 this가 어디에서 호출되는 지에 따라 어떤 객체가 바인딩되는지에 대해서 알아보았다. 이번 포스팅에서는 this를 임의로 바인딩 해주는 명시적 바인딩에 대해서 알아보겠다. 명시적 바인딩을 하기 위한 메소드로는 함수 객체(Function Object)의 정적 메소드로 apply(), call(), bind() 메소드를 사용할 수 있다. 아래의 예제를 통해 각각의 메소드의 사용방법에 대해서 알아보자. https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-This [자바스크립트] this - 개념 this란? 프로그래밍을 공부하다보면,.. 2023. 11. 3.
[자바스크립트] this - 개념 this란? 프로그래밍을 공부하다보면, this라는 키워드를 많이 마주하게 치게 된다. this는 영어로 이것이라는 의미로 프로그래밍 언어에서는 this를 호출한 '이것'을 의미한다. 그렇기 때문에 this는 누가 호출했냐에 따라 어떤 객체에 바인딩 되는지가 정해지는 것이다. 여기서 바인딩이라는 말은 bind, 묶다라는 의미를 지닌 용어로 this의 객체를 바인딩한다는 것은 this의 객체를 묶는 것을 의미한다. 간단하게 tihs의 객체가 할당되는 것이다. 위에서도 언급하였듯이 this는 어디에서 호출했냐에 따라 바인딩 되는 객체가 달라진다. 이번 포스팅을 통해서 상황에 따른 this의 바인딩에 대해서 알아보자. 단독으로 사용한 this 일반적으로 this는 자신을 호출한 객체를 바인딩한다고 하였는데 그.. 2023. 11. 3.
[자바스크립트] iterable & iterator iterable 이터러블(iterable)이란 자료를 반복할 수 있는 객체를 말한다. 반복할 수 있는다는 객체가 어떤 의미일까? 반복할 수 있는 객체, 즉 이터러블한 객체는 순회할 수 있는 객체를 의미한다. 우리가 흔히 사용하는 배열이 바로 이터러블한 객체이고 그렇기 때문에 다음과 같이 for of 문을 통한 순회도 할 수 있다. let arr = [1,2,3] for(const a of arr) { console.log (a) // 1 2 3 } 만약 위의 배열이 iterable하지 않게 된다면 어떻게 될까? let arr = [1,2,3] arr[Symbol.iterator] = null; // 이렇게 하면 순회가 되지 않는다 for(const a of arr) { console.log (a) // .. 2023. 11. 3.
[자바스크립트] 클래스 상속 https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Class-%EA%B0%9C%EB%85%90%EA%B3%BC-%EA%B8%B0%EB%B3%B8-%EB%AC%B8%EB%B2%95 [자바스크립트] Class 개념과 기본 문법 클래스 (Class) 자바스크립트의 클래스 문법은 ES6에서 추가된 것으로 좀 더 JAVA와 비슷하게 객체 지향을 표현하기 위해 추가된 것이다. ES5까지는 클래스가 없었기 때문에 프로토타입 체이닝을 통 codingralro.tistory.com 저번 포스팅에서는 자바스크립트 클래스의 개념과 기본 문법에 대해서 다루었다. 이번 시간에서는 클래스의 주요 개념 중 하나인 상.. 2023. 11. 3.
[자바스크립트] Class 개념과 기본 문법 클래스 (Class) 자바스크립트의 클래스 문법은 ES6에서 추가된 것으로 좀 더 JAVA와 비슷하게 객체 지향을 표현하기 위해 추가된 것이다. ES5까지는 클래스가 없었기 때문에 프로토타입 체이닝을 통해서 다음과 같이 유사하게 구현해왔지만, // 생성자 function Person({name, age}) { this.name = name; this.age = age; } Person.prototype.introduce = function() { return `이름 : ${this.name} 나이 : ${this.age}`; }; const person = new Person({name: 'kim', age: 26}); console.log(person.introduce()); // 이름 : kim 나이.. 2023. 11. 3.
[자바스크립트] 정적 메소드 정적(Static) 메소드 자바스크립트의 메소드를 사용하다보면, 어떤 메소드는 생성한 인스턴스를 통해서 사용하고 어떤 메소드는 클래스 자체를 호출하여 사용을 한다. // 생성한 인스턴스를 통해 메소드 호출 const arr = [1, 2, 3]; arr.forEach(el => console.log(el)); // 클래스를 통해 메소드 호출 const obj = { 1 : 'java', 2 : 'javascript', length : 2 } Array.from(obj); 이러한 호출의 차이가 발생하는 이유는, 바로 메소드의 선언 방식의 차이 때문이다. 클래스를 생성할 때, 메소드를 정적(static)으로 선언하게 되면, 클래스 자체에서 메소드를 호출해야 되지만 정적으로 선언하지 않은 메소드는 생성한 객체.. 2023. 11. 3.
[자바스크립트] 정규표현식 예제 정규 표현식 예제 https://codingralro.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%95%EA%B7%9C-%ED%91%9C%ED%98%84%EC%8B%9D [자바스크립트] 정규 표현식 정규 표현식 정규 표현식(정규식 : Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표젹으로 입력칸에 전화번호나 이메일을 입력하라고 했을 때 옳지 않은 codingralro.tistory.com 이 전 포스팅에서 알아본 정규 표현식을 토대로, 이번 포스팅에서 많이 사용되는 정규 표현식 예제를 알아보겠다. 특정 단어로 끝나는지 검사 특정 파일이 원하는 확장자의 .. 2023. 11. 3.
[자바스크립트] 유사 배열 객체 배열의 구조 유사 배열에 대해서 알아보기 전에 먼저 자바스크립트에서 배열이 어떤 구조를 가지고 있는지 살펴보겠다. 이를 알아보기 위해서 브라우저의 콘솔 창에 배열은 선언한 뒤 출력해보면 다음과 같이 배열의 구조를 볼 수 있다. 자바스크립트에서 배열은, 객체의 한 종류이기 때문에 배열의 구조를 파헤치면 객체의 형태를 띄는 것을 볼 수 있다. 이를 자세히 보면, 인덱스와 해당 요소가 key, value 쌍으로 구성되고, 아래의 length 프로퍼티를 가진다. 그리고 배열이기 때문에 prototype으로 배열의 메소드를 상속 받는 구조를 가지는 것 또한 확인할 수 있다. 이를 정리하면 배열의 구조는 아래의 구성요소를 가진다. 인덱스(key) : 요소값(value) length 프로퍼티 Array prototy.. 2023. 11. 3.
728x90
반응형

티스토리툴바