Development/JavaScript

defer와 async란?

요즘은 정말 신기한 스크립트들이 많다. 다양한 기능을 지원하고 그것도 오픈소스로 제공하는 것들이 많다. 이렇게 신기한 기능들을 지원하다 보니 모던 웹 브라우저에서 지원하는 스크립트들은 대부분 HTML 보다 무거운게 사실이다. 용량이 크기 때문에 로딩하는데 많은 시간이 걸리고 처리하는 것 역시 마찬가지다. Script 로딩 이슈 브라우저는 HTML을 읽다가 태그를 발견하면 스크립트를 먼저 실행하기 때문에 DOM 생성을 잠시 멈춘다. 이것은 src 속성이 있는 외부 스크립트를 만났을 때도 마찬가지다. 외부 파일에서 스크립트를 다운받아 실행한 후에 남은 DOM을 생성처리 할 수 있다. 이런 브라우저의 동작 방식으로 인해 두 가지 중요한 이슈가 발생한다. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할..

Javascript - 원시값(Primitive)의 메서드

원시값의 메서드 (Methods of Primitive) 원시값 (Primitive)이란? Javascript에서 말하는 원시값(Primitive)이란 무얼 뜻하는 것일까? 아래는 MDN에서 정의한 원시 값의 뜻이다. 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터 입니다. 자바스크립트의 원시 값은 객체가 아니지만, 마치 객체처럼 다룰 수 있다. 원시값에도 객체에서처럼 메서드를 호출할 수 있다. 이와 관련해서는 아래에서 조금 더 깊게 알아보도록하자. 다만 원시값은 객체가 아니라는 점은 꼭 기억해야 한다. 원시값 vs 객체 원시값과 객체는 아래와 같은 차이점을 가지고 있다. 원시값 원시형 값으로, 총 일곱가지 종류가 있다. 문자(string), 숫자(numb..

Javascript - Set을 알아보자

이전 포스팅에서는 Key, Value로 이루어진 맵(Map)이라는 자료 구조형을 알아보았다. 유용한 Property 및 메소드 등을 활용하여 유용하게 쓰이는 자료구조였지만 맵은 중복 값을 허용한다. 이를테면 아래와 같다. let map = new Map(); map.set('s', 1); map.set('s', 2); map.set('r', 3); console.log(map) // Result // s : 2 // r : 3 위의 코드를 보면 알 수 있듯이, set함수를 통해 's'라는 동일한 키 값으로 저장할 경우 이전 데이터를 엎어 쓰게 된다. 이를 방지하려면 set을 하기전, has()함수를 통해 값이 있는지를 확인하고 저장해야 하는 번거로움이 있다. Map 뿐만 아니라, 다른 상황에서도 마찬가지..

Javascript - 맵(Map)을 알아보자

자바스크립트로 개발하면서 가장 많이 사용하게 되는 자료구조에는 객체와 배열이 있다. 객체는 키가 있는 컬렉션을 저장할 수 있고, 배열은 순서가 있는 컬렉션을 저장한다. 하지만 점차 복잡해져가는 소프트웨어 시장속에서 위의 두 자료구조만으로 개발하기에는 코드가 많이 복잡해짐에 따라 맵(Map)과 셋(Set)이 등장하게 됐다. (Set에 관해서는 다음 포스팅에서 다뤄볼 예정이다) 맵 (Map) 맵은 키가 있는 데이터를 저장한다는 관점에서는 객체와 유사하다. 하지만 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. 아래의 코드처럼 다양한 자료형을 Key에 사용할 수 있다. let map = new Map(); map.set('1', '1'); // 문자 Key map.set(1, 'one'); // 숫..

구조 분해 할당(Destructuring Assignment) - 객체, 중첩구조 편

이전 포스팅에서는 구조 분해 할당에서도 배열을 분해하는 방법에 대해서 알아보았다. 이번 포스팅에서는 객체를 분해하는 방법과 중첩 구조를 분해하는 방법, 그리고 기타 내용들에 대해서 다뤄보고자 한다. 구조 분해 할당(Destructuring Assignment) 객체 분해하기 구조 분해 할당 기법을 통해서 객체 역시도 분해가 가능하다. 아래 코드를 통해 기본 문법을 확인해보자. let {v1, v2} = {v1:..., v2:...} 할당 연산자 우측엔 분해하고자 하는 객체가 있으며 좌측엔 상응하는 객체 프로퍼티의 Patter을 넣는다. 말이 어려울 수 있으니 아래 예제 코드를 통해 조금 더 쉽게 알아보도록 하자. let book = { 'title': '디자인패턴', 'author': 'GoF', 'pr..