Language36 블로킹(Blocking)/논블로킹(Non-Blocking), 동기(Sync)/비동기(Async) 구분하기 보통 동기 = 블로킹을 같은 개념으로, 비동기 = 논블로킹을 같은 개념으로 헷갈리는 경우가 많다. 하지만 두 개념은 각각을 구분짓는 기준이 전혀 다르다. 블로킹/논블로킹은 한 작업이 처리되는 동안 다른 작업도 처리될 수 있는지에 대한 이야기이고, 동기/비동기는 작업들이 시간을 맞춰서 실행되는지 아닌지에 대한 이야기이다. 이렇게만 들어서는 아직 무슨이야기인지 헷갈리는게 당연하다. 하나씩 무슨 말인지 예시와 함께 살펴보자! 1. 블로킹(blocking) vs 논블로킹(non-blocking) 우리가 어떤 프로그램을 만들었다고 해보자. 아마 어떤 코드를 작성해서 만들었을 것이고, 이 코드는 수많은 함수들이 순서대로 나열되어있는 모습일 것이다. 이렇게 한 프로그램은 여러개의 함수들로 이루어져 있다. 어떤 함수 .. 2021. 6. 10. 이벤트 루프 (setTimeout의 시간은 정확할까?) 이벤트 기반 프로그래밍 브라우저는 어떤 특정 이벤트가 발생하면 이를 감지해 미리 정해둔 작업을 수행한다. 예를들어 회원가입을 하는 상황을 생각해보자. 키보드로 아이디를 입력하면 화면에 입력한 글자가 쓰여지는 것, 제출 버튼을 클릭하면 회원가입이 완료되었다는 메시지가 뜨는 것 모두 어떤 이벤트(키보드 입력, 마우스 클릭)가 발생했을 때, 정해둔 작업(글자 보여주기, 메시지 띄우기)을 실행하는 것이다. 이런 방식을 이벤트 기반(event-driven) 이라고 한다. 이벤트 기반의 시스템에서는 어떤 이벤트가 발생할 때, 어떤 작업을 실행할지 미리 등록해 두어야 한다. 이걸 조금 어려운(?)말로 표현하면 '이벤트 리스너(event listener)에 콜백(callback)을 등록한다'고 한다. 이벤트 리스너에 .. 2021. 6. 7. Promise (2) 프로미스 체이닝, Promise.all, Async/Await 앞선 글에서 살펴봤듯이 Promise는 then, catch, finally 등의 후속 처리 메서드를 사용함으로써 콜벡헬 문제도 해결할 수 있다. 이런 후속 처리 메서드들이 연속적으로 호출되는 '프로미스 체이닝', 여러개의 비동기작업들을 병렬로 처리해버리는 Promise.all, 그리고 async/await 키워드를 통해 후속처리 메서드를 쓰지 않고 비동기를 구현하는 방법까지 살펴보도록 하자. Promise Chaining (프로미스 체이닝) 후속처리 메서드들은 언제나 Promise를 반환하기 때문에 연속 호출이 가능하다. 이런 연속 호출 과정을 '프로미스 체이닝'이라고 한다. 아래 예시처럼 사용자 정보를 얻어 파싱과 인증 작업을 거치는 과정에 사용될 수 있다. 이렇게 거쳐야 하는 여러 과정을 then .. 2021. 2. 2. Promise (1) 콜백패턴의 문제점, Promise 생성자 비동기 처리는 ‘특정 코드 실행이 완료될 때까지 기다리지 않고, 다음 코드를 먼저 처리하는 방식’을 말한다. 이러한 비동기 처리를 위해 Javascript에서는 콜백 함수를 하나의 패턴으로 사용하기도 하는데, 콜백 헬로 인해 가독성이 떨어지거나 에러 처리가 곤란해지는 문제가 생기기도 한다. 이런 문제점을 보완하기 위해 ES6에서는 '프로미스(Promise)'를 도입했다. 프로미스는 기존의 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확히 표현할 수 있다는 장점이 있어 유용하다. 일단 콜백 패턴을 먼저 살펴보며 어떤 단점이 있는지 살펴보고, Promise를 통해 보완하는 과정을 살펴보자. 1. 콜백 패턴 일반적으로 콜백함수를 전달하는 방식으로 비동기 처리를 한 예시이다. 필요에 따라 비동기 처리에 성.. 2021. 2. 2. 단축평가, 옵셔널체이닝연산자, null병합연산자 (ES11) 단축평가(short-circuit evaluation) 단축평가는 표현식을 평가하다가 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 규칙은 아래와 같다. true || anything // true false || anything // anything true && anything // anything false && anything // false 단축 평가를 사용하면 if문을 대체할 수도 있다. 어떤 조건의 결과값이 truthy일 때 무언가 동작하게 만들고 싶다면 && 연산자를 사용해 if문을 대체해보자! let done = true; let message = ''; if (done) message = '완료'; message = done && '완료'; 반대로 조건의 결.. 2021. 1. 29. 암묵적, 명시적 타입 변환 Javascript의 모든 값들은 각자 타입을 가지고 있는데, 의도에 따라서 다른 타입으로 변환이 가능하다. 이 때 Javascript 엔진이 코드의 문맥을 고려해서 암묵적으로 데이터 타입을 강제적으로 변환하면 '암묵적 타입 변환(타입 강제 변환)'이라고 한다. 반면 사용자가 의도적으로 타입을 변환하기도 하는데 이를 '명시적 타입 변환(타입 캐스팅)'이라고 한다. 이런 변환이 어떤 식으로 일어나는지 타입 별로 살펴보자. 암묵적 타입 변환 Javascript 엔진이 코드의 문맥을 고려해서 암묵적으로 데이터 타입을 강제적으로 변환하는 것이다. 1. String 타입으로 암묵적 변환 0 + '' // '0' -0 + '' // '0' -10 + '' // '-10' 1 + '2' // '12' NaN + ''.. 2021. 1. 29. 유용하지만 위험한 화살표함수(=>) ES6 문법 중 개인적으로 가장 흥미로웠던 화살표 함수의 활용 방안에 대해 좀 더 알아보았다. 코드가 훨씬 간결해지고 읽기도 편하다는 큰 장점이 있어서 요새 많이 사용해보고 있는데, 보통 함수와는 다르게 조심해서 부분이 있어서 아무 때나 사용하기 보다는 용도에 맞춰 사용해야 할 것 같다. 먼저 화살표 함수를 활용하는 다양한 방법을 소개하고, 마지막에는 화살표 함수를 사용하지 말아야 하는 경우에 대해서도 이야기 해보려 한다. 화살표 함수 => 기호로 함수를 축약해서 표현하는 방식이다. 아래 예시를 보면, 전 ⇒ 후 형태로 표시되기 때문에 훨씬 직관적으로 내용을 파악할 수 있다는 걸 알 수 있을 것이다. ✔️ 자신의 this, arguments을 바인딩 하지 않음 // 기본 구조 (param1, param2.. 2021. 1. 16. OOP (3) Javascript에서의 객체지향 프로그래밍 (ES6 이전의 Pseudoclassical한 방법) ES6 이전에는 프로토타입기반 언어인 Javascript에서 Prototype을 통해 객체를 생성하고자 했던 다양한 시도와 방법들이 있었다. 먼저 대표적인 방식인 pseudoclassical한 방식에 대해 살펴보며 클래스 없는 객체 지향을 위해 어떤 방식으로 시도를 했는지 알아보려고 한다. 그리고 나서 ES6 이후 등장한 class 키워드를 이용해 보다 쉽게 객체 지향을 구현하는 방법에 대해 이야기해보려 한다. before 이 글을 보기 전 알아야 하는 개념들이다. 모두 안다면 바로 글을 봐도되고 모르는 개념이 있다면 이전 글들을 보고 오는 것을 추천한다. prototype = 원형이 되는 객체 (속성 및 메서드 정의 가능) constructor : 인스턴스 초기화 시 실행되는 생성자 함수 this : .. 2021. 1. 16. OOP (2) Javascript의 Prototype 기반 객체지향 지난 글에서 객체지향언어에서 핵심이 되는 개념인 클래스(Class)에 대해 소개했다. Javascript도 객체지향언어이다. 하지만 클래스라는 개념이 없을뿐.. 대신 Javascript에는 프로토타입(Prototype)이라는 개념이 존재한다! 객체 지향 프로그래밍의 네 가지 특징 중 '상속성' 이라는 게 있다는 것도 기억할 것이다. 상속성은 부모클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게하고, 기능의 일부분을 변경해야 할 경우 상속받은 자식클래스에서 해당 기능만 재정의할 수 있게 하는 객체 지향 프로그래밍의 특성이다. 클래스라는 개념이 존재하는 Class 기반 언어들은 이러한 상속을 사용한다. 하지만 Javascript는 이와 달리 Prototype 기반 언어이다. 클래스가 없기 때문에 상속같.. 2021. 1. 15. OOP (1) 객체지향 프로그래밍, 클래스 객체지향 프로그래밍은 '사람이 세계를 보고 이해하는 방법을 흉내낸 방법론'이다. 사람들이 세계를 어떻게 보고, 어떻게 이해한다는 것일까? 간단히 우리가 출근하는 상황을 생각해보자. 일단 일어나서 씻고, 밥을 먹고, 지하철을 타고 회사에 도착한다. 별거 아닌 과정처럼 보이지만 하나하나 살펴보면 '샤워기'의 물을 트는 것, '숟가락'을 드는 것, '지하철'을 타는 것.. 모두 '어떤 대상'과 상호작용을 함으로써 한 행동들이다. 이렇게 사람이 세상을 살아가며 하는 행동들, 즉 '어떤 대상'(객체)들과 서로 영향을 주고 받는 행동을 흉내낸 것이 바로 객체지향 프로그래밍이다. 일단은 객체가 무엇인지부터 알아보며 객체지향 프로그래밍의 전반적인 그림을 완성해보도록 하자. 객체(Object) 객체는 말 그대로 어떤 대.. 2021. 1. 14. this(1) 상황따라 바뀌는 this this 🦎 Javascript에서의 this에 대해 알아보기 전에, 그냥 'this(이것)'라는 말을 언제 사용하는지 먼저 생각해보자. 이거좀 먹어봐! 이거 어때? 이거 뭐야?.. 이런 식으로 '이것(this)' 이라는 말은 음식을 지칭하기도, 물건을 지칭하기도 한다. 다시 말해 상황에 따라 다른 대상을 지칭하며 쓰일 수 있는 말이다. Javascrpt에서도 this는 상황에 따라 지칭하는 대상이 바뀐다. 다만 그 상황이라는 게 '함수가 호출되는 상황'일 뿐이다. Javascript의 this는 일단 기본적으로 함수가 호출될 때 (=실행 컨텍스트 생성시) 결정되며, 보통 자신을 호출한 주체의 정보가 담기게 된다. 함수 실행 방법 그럼 먼저 '함수가 호출되는 상황'에는 어떤 상황들이 있길래 지칭 대상이 .. 2021. 1. 14. 실행 컨텍스트(Execution Context) 실행 컨텍스트는 Javascript 엔진이 코드를 실행하고 평가(표현식 해석, 값 생성 및 참조)하기 위해 필요한 환경을 제공하고 코드 실행 결과를 실제로 관리하는 영역이다. 이런 실행 컨텍스트를 기반으로 식별자, 스코프 등을 관리한다. 실행 컨텍스트(Execution Context) Context(컨텍스트)를 번역하면 '문맥'이라는 뜻이다. 이런 뜻을 바탕으로 생각해보면 Javascript의 실행 컨텍스트는 '코드의 문맥', 즉 코드가 실행되는 환경이라고 이해하면 좀 더 쉬울 것 같다. 실행 컨텍스트는 이러한 환경에서 실행될 코드들에 대한 온갖 정보를 모아둔 객체이다. 이렇게 정보를 모아 저장해둔 덕분에 코드가 여러 번 실행되어도 동일한 환경을 구성할 수 있게 되는 것이다. 일단 실행 컨텍스트의 대표적.. 2021. 1. 13. 이전 1 2 3 다음 반응형
