본문 바로가기

전체 글

 (62)
[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를 실행하는 동기식 처리방식인데, 이보다 더 많은 동작을 하기 위해서는 ..
[ES6]Template Literal 템플릿 리터럴이란 ? 먼저 이 단어 자체에 대해서 생각을 해보자. Template 은 흔히들 기본적으로 어떠한 틀을 일컫는데 사용하는 단어이다. Literal 은 사전에서 찾아보자면 ' 원문 그대로의 ' 라는 뜻인것을 찾을 수 있겠다. 그러면 Template Literal은 ? ' 원문 그대로의 틀 ' 이라는 용어로 해석해볼 수 있겠다. 자, 이제 이 뜻을 생각하면서 사용법과 기능에 대해 알아보려고 한다. 사용법 기본적인 사용법은 백틱이라고 불리우는 `` 로 문자열을 감싸주는 것인데 이 백틱은 자판기의 영문자 상태에서 1의 왼쪽 ~/₩ 라고 적혀있는 자판을 누를 시에 나타난다. 기능 기능은 아래 코드를 보면 직관적으로 이해할 수 있다. // 일반적인 형태의 string 표기법 // 1. 일반적인 문자열 ..
[ES6]Arrow Function Arrow Function? 1. 화살표 함수란 ...? 화살표 함수란 기존에 사용하던 function 키워드 대신 ' ⇒ ' 를 사용하여 함수를 표현하는 방식. 2. 사용방법은 ? 기존의 함수 호출 방식인 // 함수 선언식 function Hello() { // Something... } // 함수 표현식 let Hello = function () { // Something ... } 요 위의 두가지 방식과 다르게 // 기본적으로 let something = () => { ... } 의 구조 // ex) let Hello = () => { // Something ... } 이와 같이 function 키워드 대신 ' ⇒ ' 를 사용하여 함수를 나타낼 수 있다. 3. 사용 시의 유의사항 // 1. 매개변수..

티스토리툴바