Develop

1. Why? 개발을 하다보면, 분명 백틱(backtick) 자리가 "1" 왼쪽에 있는걸 알고 있다. 하지만, 간혹 가다가는 원화 모양이 입력 될 때가 있는데 원인을 알지 못하고 내가 잘못 기억했는지? 아니면 위치가 특정 조건에만 가능한지 답답함을 가지고 사용을 했었는데 "한글"로 전환 될 때 이러한 문제가 발생 한다는 사실을 알게 되었다. 이를 통해, 한/영 모든 값에서도 원화가 아닌 backtick이 고정적으로 입력이 되는 방법을 공유 하고자 글을 쓰게 되었습니다 ^^7 2. 설정 방법 // 라이브러리 폴더로 이동합니다. cd ~/Library // 폴더로 이동 후, KeyBindings 이라는 폴더를 만듭니다. mkdir KeyBindings // KeyBindings 폴더로 이동합니다. cd Ke..

2021. 9. 10.

Develop/JavaScript

1. 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 아래의 코드에서 보이는 것처럼 myNumber 는 23이라는 값을 식별할 수 있다. var myNumber = 23; 이 때, 23 이라는 값을 직접 저장하는 것이 아닌, 이 값을 참조 하고 있는 메모리 주소를 기억해야 한다. 즉, 식별자는 메모리 주소에 붙여진 "이름" 이라고 생각을 해주면 좋을 것 같다. 2. 변수 선언 자바스크립트는 메모리 직접 제어를 통해 발생할 수 있는 에러를 방지 하기 위해서 개발자의 접근을 허용하지 않습니다 . 그렇기 때문에, 10 + 20과 같은 값을 재사용 하기 위해서는 이를 변수에 저장해서 사용을 합니다. 이러한 변수를 사용 하기 위해서는 우선적으로 선언이 이루어지는데, 선언을 한다는 것은 값을 저장..

2021. 8. 17.

Develop/JavaScript

1. ES5의 리스트 순회 일반적인 프로그래밍 언어와 같이 숫자라는 "키"로 순회 하였습니다. const list = [1,2,3]; for ( var i = 0; i < list.length; i++ ) { console.log(list[i]); } 2. ES6의 리스트 순회 ES6 에서는 가독성을 위해 for of의 사용을 권고합니다. 하지만 일반적인 경우와는 달리 "키"가 없는데, 어떤 방식으로 순회를 하는걸까요? // 훨씬 간결하고, 선언적인 순회 방법 const ( const val of list ) { console.log(val); } 3. [ Array, Set, Map ] 을 통해 알아보는 이터러블 & 이터레이터 3-1 이터러블 & 이터레이터 이란? - 자바스크립트의 [ 배열, 객체, 맵..

2021. 8. 9.

Develop/JavaScript

들어가기전에 정규식은 특정 문자열을 찾고, 이를 특정한 내용을 바꿀 때 "매우 매우" 유용하게 사용됩니다. 실제로 정규식을 사용 하고는 싶었으나 ! 이해가 어려워서 미루고 있던 도중 강의를 만나게 되어 ! 정리를 하게 되었습니다. 1. 정규식 생성하기 정규식의 생성은 아래와 같이 "//" 로 감싼 뒤, 변수에 담아두는 방식과 const regExp = /abc/; 다음과 같이 생성자를 이용하여 만들 수 있습니다. const regExp = new RegExp("abc"); 2. 정규식 사용법 특수 문자 특수문자는 \(백슬래쉬)를 앞에 붙여 줌으로써, 특수문자가 그대로 사용 될 수 있도록 해야합니다. const regExp1 = /\*/; const regExp2 = /\?/; 플래그 조금 더 섬세한 패턴..

2021. 8. 3.

Develop/JavaScript

실행 문맥(Execution Context)란? 소스코드를 실행하는데 필요한 환경과 결과를 관리하는 영역입니다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 컨텍스트를 실행 및 관리합니다. 식별자와 스코프는 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨택스트 스택으로 관리합니다. 소스 코드의 타입 ECMAScript는 소스코드를 4가지 타입으로 구분합니다. 1) 전역 코드 - 전역에 존재하는 소스코드를 말합니다. 전역에 정의된 함수, 클래스 등의 내부코드는 포함 X - 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성합니다. 2) 함수 코드 - 함수 내부에 존재하는 소스코드를 말합니다. 함수 내부에 중첩된 코드는 포함 X - 지역 스코프를 생성하..

2021. 7. 19.

Develop/JavaScript

머릿말 "let과 var의 차이는 스코프에 있다" 정도는 알고 있었지만, 어떠한 원리로 다르게 작동하는지 알지 못했습니다. 그러던 도중, "코드종" 님의 영상과 최근 보고 있는 "모던 자바스크립트 Deep Dive" 의 내용을 합쳐 보다 깊게 설명 해보고자 글을 작성하게 되었습니다. 스코프 1-1. var var의 스코프는 "함수" 로 정의가 됩니다. function print_t() { { var t = "안녕 나는 t"; } console.log(t) // 안녕 나는 "t" } 그렇기 때문에, 함수 -> "중괄호" 내부에서 t를 선언 하더라도, "t" 의 값이 출력이 됩니다. 1-2. let 반면에 let은 블록 레벨 스코프로 정의가 되어있습니다. function print_t() { { var t ..

2021. 7. 14.

Develop/JavaScript

This 란? This의 값은 함수를 "호출하는 방법"에 의해 결정된다. 호출 방법과 무관하게 This 를 고정 시키려면 "bind" 를 사용하면 된다. 여기서 꼭 기억 해야 하는 것은 "누가 호출을 했는지?" 이다. 예시 및 설명 someone.whoAmI() someone.whoAmI() 를 출력하면, 그 결과는 donghyeon이 출력된다. 그 이유는 someone이라는 함수가 "whoami"를 출력 했기 때문이다. myWhoAmI 이번에는 someone.whoAmI() 를 전역 변수인 myWhoAmI에 담아서 출력을 했다. 이 것을 브라우저에서 작동 시키면, window 객체가 출력이 되는데 그 이유는 글로벌은 윈도우에 의해 호출 되기 때문이다. btn btn의 이벤트로 호출을 하면? 역시 버튼에..

2021. 7. 14.

Develop/FrontEnd

스코프란? 스코프는 코드가 유효한 범위를 의미합니다. 우리는 스코프를 크게 "지역" 과 "전역" 으로 나누죠 :D 이를 조금 더 자세히 이야기 해보자면, 식별자(=변수이름, 함수 이름, 클래스 이름) 가 본인이 선언된 위치에 따라 다른 코드에서 참조될 수 있는지 없는지를 결정하는 것을 의미합니다. 이를 아래의 코드를 통해 설명 해보겠습니다. function add(x,y) { console.log(x, y); // 2, 3 return x + y; } add(2,3); // 5 console.log(x,y) // Reference Error : x is not defined 2,3 은 함수로 전달이 되어 x, y라는 지역 변수에 저장이 된다. 그렇기 때문에 함수 내에서는 자유롭게 사용이 가능합니다. 반면..

2021. 7. 13.