JavaScript

ES6의 모듈에 대해서.

이번에 바닐라 JS 로 채용 과제를 진행하면서, 스크립트 파일의 엔트리포인트를 설정하기 위해 경로를 지정하며 type의 module 이라는 속성을 사용했습니다. module 속성값이 무엇인지 잘 모르고 썼는데, 자바스크립트 딥다이브를 읽다보니 해당 부분에 대한 내용이 나와 정리해보려고 합니다. 모듈이란 애플리케이션의 크기가 커질 때 이를 관심사별로 여러개의 파일로 분류하게 됩니다. 이 때 분리된 각 파일을 module 이라고 합니다. 이렇게 모듈화하여 유지보수성을 높이고 보다 체계적으로 코드를 관리할 수 있다는 장점이 있습니다. 모듈을 어떻게 쓰나요? 자바스크립트에서 모듈을 내보내고, 가져오는 문법은 단순합니다. 저희가 숨쉬듯 사용하는(?) import 와 export 키워드를 사용하면, 클래스나, 함수..

[JavaScript] 이벤트 위임, 이벤트 전파, e.target & e.currentTarget 차이

❓이벤트 위임이란 개별 요소 각각에 이벤트 리스너를 생성하는 대신에, 개별 요소의 상위 요소에 이벤트 리스너를 등록한 뒤 조건문을 통해 하위 요소 중 어떤 요소에 이벤트가 발생했는지 특정짓는 것이다. 어떤 상황에서 유용한지 간단하게 알아보자. 아래와 같은 메뉴가 있다고 할 때, 메뉴 리스트에 등록된 각 메뉴 아메리카노, 프라푸치노에 클릭 이벤트를 달아주려고 한다. 위와 같은 메뉴가 있다고 할 때, 메뉴 리스트에 등록된 각 메뉴 아메리카노, 프라푸치노에 클릭 이벤트를 바인딩 하려고 한다. 각각의 자식 노드에 이벤트를 바인딩하려면 아래와 같이 반복문을 돌리거나 혹은 DOM 요소를 찾아 등록해주어야한다. // #espresso-menu-list 라는 상위 엘리먼트의 각 자식 노드에 이벤트 리스너를 등록한다. ..

[JavaScript] 비동기 흐름 제어 -2 : async / await 활용하기

[JavaScript] 비동기 함수 제어 : 콜백함수, promise, async / await 비동기란 무엇이죠? 왜 비동기가 필요한가요? 🤔 유튜브를 보려고 하는데 실수로 다른 영상을 클릭해버렸다... 그런데 이 유튜브세상은 모든 것이 순차적으로 동작하기 때문에, 다른 버튼을 클 friedegg556.tistory.com ↑ 위 글에서 이어지는 글 ↑ async / await을 활용해보자! async / await 문법은 ES2017에 도입된 최신 문법이다. 코드만 보면 프로미스를 사용하지 않는 것처럼 보일 수 있지만, 사실은 프로미스를 사용하는, promise의 syntactic sugar 라고 할 수 있다. 이 문법을 사용하면 비동기 코드를 마치 동기 코드인 것처럼 활용할 수 있다! 우선 이 코드..

[JavaScript] 비동기 흐름 제어 -1 : 콜백함수, promise

비동기란 무엇이죠? 왜 비동기가 필요한가요? 🤔 유튜브를 보려고 하는데 실수로 다른 영상을 클릭해버렸다... 그런데 이 유튜브세상은 모든 것이 순차적으로 동작하기 때문에, 다른 버튼을 클릭하기 위해서는 그 실수로 클릭한 영상이 모두 로딩이 될 때 까지 기다려야만 한다. 그냥 손이 미끄러졌을 뿐인데.. 정말 화나지 않을까? 100% 정확한 예시는 아닐 수도 있지만 어쨌든, 이처럼 하나의 동작이 모두 완료가 되어야만 그 다음 동작을 할 수 있는 처리 방식을 동기적 처리 방식이라고 부른다. 이렇게 순차적으로 실행되는 방식도 물론 필요하겠지만, 웹페이지처럼 모든 동작을 순서에 상관 없이 실행시킬 수 있어야 한다면, 앞선 예시처럼 불편한 상황이 일어날 것이다. 그런 문제점을 해결하기 위해 비동기적 처리 방식을 사..

[JavaScript] 클래스간의 상속 (프로토타입 상속)

클래스간의 상속 자바스크립트에서는 엄밀히 따지면 일반적인 클래스 개념이 존재하지 않지만, 편의를 위해 클래스라고 지칭함. 하나의 클래스에서 다른 클래스에게 프로토타입을 상속하는 것을 클래스간의 상속이라고 할 수 있다. 말그대로 기존의 클래스를 활용해 다른 클래스를 생성하면서 기존 클래스를 확장시켜 활용할 수 있는 것. 장점은 역시 DRY 원칙을 지킬 수 있다는 것이다. 클래스 상속 구현을 위해서 부모 클래스의 속성을 가진 자식 클래스의 속성을 직접 작성하면, 부모 클래스에서 변동사항이 생겼을 때 그것이 자식 클래스에 자동적으로 반영되지 않는다. ES5 생성자 함수 방식에서 구현 ES5 생성자 함수 방식에서 클래스간 연결을 위해서는... 먼저 프로퍼티 상속을 위해 자식 클래스 생성자 함수 내부에서 부모 클..

[JavaScript] 프로토타입 체인

프로토타입 상속과 프로토타입 체인 생성자 함수(클래스)의 프로토타입 속성은, 그로부터 생성된 인스턴스의 프로토타입이 된다. 인스턴스의 constructor 속성은 해당 클래스를 가리키고, 클래스의 prototype 속성은 인스턴스를 가리키고 있다. 한 인스턴스의 (.__proto__로 확인할 수 있는) prototype 즉 클래스의 prototype 속성도 "객체"이다. 자바스크립트에서 모든 객체는 프로토타입을 가지고 있다. 예시를 들자면, hyejung.calcAge()라는 메서드를 사용할 때 자바스크립트는 먼저 인스턴스 객체인 hyejung 객체 안에 calcAge 프로퍼티가 존재하는지 조회한다. 없을 경우 그 상위 프로토타입 객체를 조회하고, 거기서도 없을 경우 그 프로토타입의 프로토타입을 참조하게..

[JavaScript] 프로토타입

자바스크립트는 프로토타입 기반 언어이다 생성자 함수(클래스)의 prototype 프로퍼티 여기서 프로토타입이란 모든 객체들이 상위 객체의 속성과 메서드를 상속받기 위한 프로토타입 객체를 가진다는 의미이다. 생성자 함수를 포함한 모든 자바스크립트의 함수(객체)는 prototype이라는 속성을 갖는다. 이 prototype 속성/프로퍼티에 인스턴스 객체들에게 상속시켜줄 수 있는 혹은, 인스턴스 객체가 접근할 수 있는 모든 프로퍼티와 메서드들이 저장된다. 생성자 함수로 만들어진 인스턴스는 이 프로토타입을 상속받는다. class Person { constructor(firstName, birthYear) { this.firstName = firstName; this.birthYear = birthYear; } ..

[JavaScript] OOP in JavaScript : 생성자 함수, 클래스 문법

프로토타입 기반 객체 지향 자바스크립트는 엄밀히 따지면 클래스와 인스턴스를 기반으로 한 전통적인(?) 방식의 객체 지향 언어는 아니다. 다만 프로토타입이라는 것을 활용해 마치 클래스를 사용하는 것 처럼 보일 뿐이다. 프로토 타입을 간단하게 정의하면, 모델의 청사진/ 설계도를 만들 때 쓰는 원형 객체이다. 우리가 생성하는 모든 자바스크립트 객체가 이 프로토타입과 연관되어 있다. 자바스크립트에서는 이 프로토타입 객체를 복제하여 마치 클래스로부터 인스턴스가 생성되는 것 처럼 활용한다. 말하자면 프로토타입 객체는 부모 객체가 되는 것이다. 프로토타입이 가진 메서드를 모든 인스턴스 객체가 접근하여 사용할 수 있는데. 이를 프로토타입 상속이라고 하며, 클래스 상속과는 약간 다른 개념이다. 일반 클래스에서 인스턴스 ..

[JavaScript] 객체지향 프로그래밍 : OOP란 무엇인가?

객체 지향 프로그래밍 : Object Oriented Programming 말 그대로 객체의 개념에 기반을 둔 프로그래밍 패러다임이다. (여기서 패러다임이란 우리가 작성하는 코드의 스타일, 코드를 어떻게 작성하고 조직화 할 것인가에 대한 체계, 개념같은 것이다.) 객체를 현실 세계의 개념이나 요소를 표현하기 위해 - 모델링 하기 위해서 사용한다. 사람이 현실 세계를 이해하는 방식을 모방한 방식이라고 생각하면 된다. 객체는 데이터(프로퍼티)와 그에 상응하는 행동(메서드)를 포함한다. 객체 하나가 하나의 개념을 표현한다면, 이 개념과 연관되어있는 데이터와 행동들을 따로 분리하는 것이 아니라, 객체라는 구조 안에 모아두어 활용성을 높인다. 이런 객체들이 여럿 모여 애플리케이션을 구성하고, 다른 객체들과 상호작..

[JavaScript] 클로저와 커링 초간단 정리

클로저와 커링의 차이가 무엇일까? 클로저 함수 Closure 외부 함수의 변수에 접근 가능한 내부 함수. 내부함수를 리턴하는 외부함수가 존재할 때, 내부 함수에서 외부함수에 있는 변수를 조회하고 있으면 이런 현상을 클로저, 이런 함수를 클로저 함수라고 한다. function outerFunc(num1, num2, num3) { return function (num2) { return function (num3) { return num1 * num2 * num3; }; }; } console.log(outerFunc(3)(5)(2)); // 30 커링 함수 Currying 함수 인자를 여러개 받는 대신에, 인자를 하나씩 분리하여 한 번에 한 인자를 받는 여러개의 함수로 만드는 것! // 인자를 여러개 받는..