본문 바로가기

분류 전체보기

 (64)
[ES6] Destructuring 개념 일단 Destructuring 이라는 단어의 의미부터 알아보자. Destructuring은 비구조화 라는 의미를 가지고 있다. 그렇다면 여기서 말하는 "구조" 란 어떤 구조를 말하는 것일까 ? 여기서의 "구조" 는 배열이나 객체 리터럴의 틀에 값이 들어가 있는 형태를 말한다. let arr = [1, 2, 3]; let obj = { a: 1, b: 2, c: 3 }; 위의 코드 형태를 구조화된 형태 라고 보면 되겠다. 그렇다면 이러한 형태를 비구조화 한다는 의미는 어떤 것일까? 이 내용은 비구조화를 사용하는 코드를 보면서 알아보자. 사용 방법 배열 // ES5 var num = [2, 4, 7]; // before var two = arr[0]; var four = arr[1]; var seven..
[ES6] Module 개념 먼저 모듈(Module) 이란 무엇일까 ? 왜 나타나게 되었을까 ? 일단 개념부터 알아보자면, 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며, 애플리케이션은 필요에 따라서 모듈을 로드하여 재사용한다. 사실 다른 언어에는 이러한 모듈기능을 다 가지고 있는 반면, Javascript는 태생 자체가 웹페이지의 보조적 기능을 수행하기 위해 만들어졌기 때문에 한계가 있었다. 이것은 script 태그를 통해서 js 파일을 받아올 수는 있었지만, 이렇게해서 여러개의 파일을 받아올 경우 이 파일들이 모두 하나의 전역 객체를 공유하기때문에, 같은 이름의 변수나 method가 존재할 경우 문제가 발생하게된다. 자바스크립트는 기본적으로..
[ES6] Iteration 개념 ES6에서는 데이터 컬렉션을 순회하기 위한 규약을 만들었는데, 이것이 바로 Iteration Protocol이다. 이전의 Spread 글에서 언급했던 것과 같이, 이 Iteration Protocol을 준수한 객체만이 Spread 문법을 사용할 수 있고, 더 나아가 for ... of 문으로 순회가 가능하다. 그렇다면 Iteration Protocol은 무엇일까 ? 이것은 이터러블 프로토콜(Iterable Protocol)과 이터레이터 프로토콜(Iterator Protocol) 을 말한다. 이 둘에 대해 간단히 말하자면, 이터러블 프로토콜은 반복 가능한 객체 를 일컫는 말이고, 이터레이터 프로토콜은 작성한 순서대로 처리하는 프로토콜을 일컫는 말이다. 이 이터레이션 프로토콜을 가지고 있는지에 대한 여..
[Git] Open Source 기여를 위한 first step 글을 시작하며 ... 사실 개발공부를 하면서 다른 개발자 분들 중에서도 이런 분들이 많겠지만 나도 나중에는 꼭 오픈소스에도 기여하는 개발자들의 개발자가 되어야겠다 ...! 라는 생각을 하고 있었다. 하지만 생각이랑 실천은 다르지 않은가 ? 일단 해보기 위해 먼저 오픈소스에 기여하는 방법부터 알아보았고, 생각보다 그 절차가 간단하여 이번에는 이 내용부터 소개하려고 한다. 일단 Git은 개인적으로 사용법에 대해서는 어느정도 인지하고 있는 상태이기 때문에 기본 개념은 추후 기회가 될 때 하나씩 정리하도록 하고, 첫 글은 이것으로 시작하겠다. ++) 아래의 설명은 첫 pull request를 실습해볼 수 있도록 해외 개발자분이 만들어 둔 https://github.com/firstcontributions/fir..
Scope Scope scope란 기본적인 사전적 의미로는 ' 범위 ' 라는 의미를 가지고 있고 프로그래밍적인 정의를 찾아보기 위해 항상 많이 배우는 poiemaWeb의 한 구절을 가지고 와보자면 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다. 라고 한다. 이는 식별자가 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 가지게 되는데, 이를 스코프(Scope) 라고 부른다는 것이다. 그렇다면 왜 스코프라는 개념이 있어야 했던 것일까 ? 이에 대해서도 만약 스코프가 없게 된다면 같은 식별자 이름은 하나의 프로그램 ..
[ES6] Symbol Symbol 이란 ...? 먼저 이 Symbol에 대해 간단히 설명하자면 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용하는 고유의 값 이라고 할 수 있다. Javascript에는 총 6가지의 타입이 존재하는데, 이는 5가지의 원시 타입(Primitive Type) String Number Boolean null undefined 과 Object 라는 객체 타입(Object Type) 이 존재한다. Symbol은 이 6가지 타입에 이은 7번째 타입으로, 이는 원시 타입에 속한다. 그러면 이걸 왜 만들었는지...? ES6의 모든 추가 내용이 그랬던 것처럼 어떤 필요에 의해서 Symbol이라는 것이 생겼을 것이다. 그렇다면 왜 Symbol을 만들었을까 ?..
[ES6]Spread, Rest Parameter 배경 지식 Rest 와 Spread 는 기본적으로 argument, parameter 에 관한 내용이다. 그런데 이 둘은 그 차이가 크지 않아 표현 상에서 혼동하여 사용하기가 쉽다. 이러한 이유때문에 일단 둘의 개념 차이부터 정확하게 잡고 가는게 좋겠다. 먼저, 둘의 의미에 대해 알아보면 parameter는 매개변수 라는 의미를 가지고 있고 argument는 전달인자 라는 의미를 가지고 있다. parameter는 함수를 선언할 때 의 인자들을 '매개 변수', parameter 라고 부르고, argument는 해당 함수를 호출할 때 의 인자들을 '전달 인자', argument라고 부른다. 확실히 이해하고 넘어가기 위해 아래의 예제 코드를 보고 다음으로 넘어가자. // 여기서의 x, y는 parameter(..
sync/ async JS 개념에 대해서 공부하다보면 항상 여기저기서 심심치않게 자주 나타나는 용어가 있다. 그것은 비동기 에 대한 내용이다. 그러면 비동기의 반대 개념인 동기와는 어떤 차이가 있고, 정확히 두 동작이 어떻게 진행되는지에 대해 의문이 생겼다. 자주 나오는 만큼 확실하게 개념을 잡고 넘어가 보는게 좋겠다는 생각으로 여러가지 글을 찾아보고 공부해 보았다. 기본 개념 단순하게 일단 기본 개념부터 보자. ' 동기 '방식은 이전 글중 하나인 Promise, async/ await 에서도 간단하게 언급한 적이 있다. 그때 언급한 내용을 잠시 들고와보자면 js의 기본 동작은 'Run to Complete' , 즉 하나의 task가 끝나면 다음 task를 실행하는 동기식 처리방식인데, 이보다 더 많은 동작을 하기 위해서는 ..

티스토리툴바