[JS] 비동기 처리 - Promise, async/await Promise ES6에서 Promise가 도입되어 사용되기 전에는 주로 콜백함수를 다른 함수의 인자로 넘겨서 비동기 처리를 코딩했었다. 하지만 콜백 지옥이라는 문제점으로 인해 여러 방법이 논의되었고 거기서 나온 해결법 중 하나가 Promise이다. Promise는 현재 당장 얻을 수는 없으나, 근 미래에 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공한다 I/O나 네트워크를 통해 데이터를 얻는 경우가 대표적인데, CPU에 의해 실행되는 코드 입장에서 엄청나게 긴 지연 시간으로 여겨지기 때문에 논블로킹을 지향하는 자바스크립트에서는 비동기 처리가 필수적이다. 생성방법 new Promise에 전달되는 함수는 executor(실행자, 실행함수)라고 부른다. new Promise가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작 코드를 포함한다. executor의 인수 resolve와 reject는 …

[JS] 비동기 처리 - 콜백 image 바닐라 자바스크립트를 이용하여 넘블챌린지를 진행하던 도중, API를 받아오고 이벤트를 처리하는 과정에서 비동기처리에 대해 이해가 부족하다는 생각이 들어 공부하게 되었다. 비동기 처리 자바스크립트에서 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것이다. 동시에 여러가지 작업을 처리할 수 있고, 기다리는 과정에서 다른 함수를 호출할 수 있다. 동기-비동기는 프로세스 수행 순서 보장에 대한 매커니즘이다. 동기(Synchronous) : 작업을 동시에 수행하거나, 동시에 끝나거나, 끝나는 동시에 시작 호출하는 함수가 호출되는 함수의 작업 완료 후 리턴을 기다리거나, 리턴 받더라도 미완료 상태라면 작업 완료 여부를 스스로 계속 확인하며 신경쓴다. image 비동기(Asynchronous) : 시작/종료가 일치하지 않으며, 끝나는 동시에 시작을 하지 않음 테스크 2가 테스크 1을 호출할 때 콜백함…

자바스크립트 정규표현식 코드를 짜다보면 전화번호, 이메일 등의 체크 형식에서 정규표현식을 종종 사용하는 경우가 있는 데, 한눈에 봤을 때 코드를 이해하기 어려운 경우가 종종있었다. 어떤 방식으로 정규표현식을 작성하는지 알아보기 위해 공부해보았다. 정규표현식 정규 표현식(regular expression)은 문자 검색과 교체에 사용되는 패턴이다. 자바스크립트에서는 RegExp 객체와 문자열 메서드를 조합하여 정규표현식을 사용할 수 있다. 정규 표현식은 패턴과 선택적으로 사용할 수 있는 플래그로 구성된다. 정규식 객체를 만들 때는 두 가지 문법이 사용된다. 긴 문법 긴 문법은 아래와 같이 사용한다. 짧은 문법 짧은 문법은 /를 사용한다. /는 자바스크립트에 정규 표현식을 생성하고 있다는 것을 알린다. 문자열에 따옴표를 쓰는 것과 동일한 역할 짧은 문법이든 긴 문법이든 상관없이 regexp는 내장 클래스 RegExp의 인스턴스가 된다. 단, 두 문법의 차이점은 /…/를 사용하면 문자열…

자바스크립트 고차함수 알고리즘을 풀고, 우테코 프리코스를 하는 중에 내 코드를 보면 항상 for문만을 사용하여 문제를 해결하고 있었다. 코드 리뷰에서 다양한 고차함수를 적절히 활용하면 좋을 것 같다는 이야기를 듣고 공부하게 되었다. 고차함수(Higher-order Function)?👀 함수를 매개변수로 사용하거나 함수를 반환하는 함수 1. forEach() for문을 대체하는 고차함수 반복문을 추상화하여 구현된 메소드이며 내부에서 주어진 배열을 순회하면서 연산을 수행한다. 2. map() forEach() 같이 순회하면서, 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환 forEach()와 map()의 차이 : 두 메서드 모두 배열을 순회하는 것은 동일 forEach() : 각 요소를 참조한 연산이 이루어짐 map() : 각 요소를 다른 값으로 맵핑하나 새로운 배열이 반환된다. forEach()는 for문을 대체하여 사용하고, map()은 연산의 결과로 새…

자바스크립트 this 우테코 코드리뷰를 하면서 다른 분들의 코드에서 this 활용을 봤다. 기존 내 코드에서는 기본 바인딩으로만 사용하여 전역변수처럼 활용하고 있었는데, 경우에 따른 다양한 this를 활용해보고자 공부하게 되었다. What is this?👀 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다. this는 코드 어디서든 참조할 수 있다. 함수 내부에서 인자를 지역변수처럼 사용할 수 있는 것과 같이, this도 지역 변수처럼 사용할 수 있다. 종류 : 기본 바인딩, 암시적 바인딩, 명시적 바인딩, new 바인딩, 화살표함수(es6) 우선순위 : new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩 1. 기본 바인딩(Default binding) 기본 바…