둘기노트 둘기노트

오늘은 클로저에 대해 알아보도록 한다. 세부 내용을 다루기 전에 저자가 이야기 하는 outerEnvironmentReference, LexicalEnvironment, 그리고 environmentRecord에 대해 먼저 짚고 넘어가고자 한다. lexicalEnvironment : 실행 환경의 프로퍼티 (다른 프로퍼티로는 variable environment가 있다). 정의에 따르면 "특정 변수와 함수에 대한 식별자의 연결을 정의하는, mapping 을 보유하고 있는 구조이다. outerEnvironmentReference : lexicalEnvironment에 접근할 수 있다는 뜻. lexicalEnvironment에서 변수를 찾을 수 없다면, 외부에서 찾도록 JS엔진이 동작한다. environmentR..

오늘은 CSS 선택자와 그 우선순위에 대해 정리해보고자 한다. 아는 것들만 쓰게 되지만 다시 한번 정리하는 차원에서 자세히 뜯어보고자 한다. 먼저 CSS 선택자는 인라인 CSS > 외부 > 내부 순으로 적용된다. 존재하는 모든 선택자들을 테이블로 정리하면 다음과 같다. 선택자 문법 설명 아이디 #id - 중첩 사용 가능 - 문서 스타일이나 자바스크립트 선택자 사용할 때 대체로 사용 클래스 .class - 섹터 구분할 때 주로 사용 - 중첩 사용 가능 - a 태그를 활용하여 특정 id 로 이동 가능 하위선택자 section ul {} - 태그 안의 태그를 선택할 때 사용 자식선택자 section > ul {} - 부모 요소의 자식 요소를 선택 인접 형제 선택자 h1 + ul {} - 앞 태그 직후 나오는 ..

프로토타입? 그거 어려운거 아니야? 코어자바스크립트 스터디를 시작하며, 항상 어려워했던 "프로토타입"을 주제로 발표를 하게 되었다.. 하여 블로그에 프로토타입에 대해 내가 이해한바를 공유하고자 한다. (미래의 내가 이 글을 본다면.. 대체 왜 이렇게 이해했지? 라는 생각을 들수도 있을 것 같단 생각이 들지만 최선을 다해보고자 한다) 프로토타입이란? 먼저 코어자바스크립트의 저자는 아래의 그림을 이해하면 프로토타입의 모든것을 이해할 수 있다고 말한다. var instance = new Constructor(); 위의 코드를 형상화 한 것이 바로 위의 도식이다. 이에 대해 저자는 다음과 같이 설명하고 있다. 생성자 함수를 new 연산자와 함께 호출하면.. Constructor를 바탕으로 새로운 instance..

멋쟁이사자 프론트엔드스쿨을 본격적으로 시작하기 전 코드라이언 강의를 통해 html과 css기초를 기반으로 이력서만들기를 진행했다. 먼저 완성된 이력서는 다음과 같다. 샘플 이력서를 기반으로 먼저 전체적인 섹션을 나누어 html마크업을 해나갔다. 전체적인 컨테이너, 섹션, 아티클을 나누어 작성했다. 멋사프론트엔드스쿨 수업 진행 한달 후의 나는.. 현재 이 코드를 보고 왜이리 더티할까 생각되지만... 그때 당시 최선을 다했다고 생각된다. 당시 html태그와 css에 대해 알게 된 새로운 점들은 다음과 같다. *1. section 태그 * div 밭이 된 나의 html을 구원해 줄, 섹션을 나눌 때 주로 사용하는 태그다. 2. article 태그 section 내의 콘텐츠를 담고 구분하기 위해 사용한다. *3..

오늘은 ES6 함수의 추가 기능에 대해 알아보려한다. ES6 이전의 함수는 명확한 구분이 없었으나, ES6 이후 함수는 다음과 같은 구분을 가진다. 일반 함수 메서드 (ES6)이전에는 없었다!! 화살표 함수 (ES6)이전에는 없었다!! 여기서 일반 함수의 경우, 메서드와 화살표 함수와는 달리 constructor 와 prototype 을 가진다고 한다. 이는 ES6전과 동일하다! 메서드 객체안에 선언된 함수를 우리는 메서드라고 부른다! 이때 축약표현으로 정의된 함수만 메서드, 일반적으로 정의 된 함수는 일반함수이다. const jiyun = { x:1, // 메서드 apple() {return this.x;}, // 일반 함수 banana: function() {return this.x;} }; ES6에..

오늘은 클래스에 대해 알아보도록 한다. 원래 자바스크립트 언어는 우리를 힘들게 하는 프로토타입 기반의 언어이다. 하여 이전 ES5에서는 프로토타입을 통해 생성자 함수와 객체지향 언어를 구현할 수 있었다! 이후 등장한 클래스(aka. 붕어빵틀)는 생성자 함수와 매우 유사하게 동작한다. 하지만 우리가 알아야 할 몇가지 차이점이 있다! 클래스를 new 연산자 없이 호출하면 에러 발생! 클래스는 상속을 가능케하는 extends와 super키워드를 제공한다. (생성자 함수는 그렇지 못함) 클래스는 호이스팅이 발생하지 않는 것처럼 동작함! (하지만 사실 됨) 클래스 코드 내 암묵적으로 strict mode가 실행됨 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트 [[Enu..

오늘은 함수와 일급 객체에 대해 알아보도록 한다. 일급 객체란? 무명의 리터럴로 생성할 수 있다 (런타임에 생성 가능) 변수, 객체, 배열 등에 저장할 수 있다 함수의 매개변수에 전달 가능하다. 함수의 반환값으로 사용할 수 있다. 위의 조건을 모두 충족하는 것이 일급 객체! (다할 수 있는 만능이란 뜻인 것 같다) 그렇다면 우리가 알고 있는 것들 중 일급 객체인 것들은? *함수는 일급 객체이다 * (first class object) // *딥다이브 예제로 나온 더하기, 빼기 함수 // 1. 무명으로 생성할 수 있다 // 2. 변수에 넣을 수 있다 const increase = function(num){ return ++num; }; const decrease = function(num){ return ..

오늘은 11장의 원시 그리고 객체 타입에 대해 알아보도록 한다. 자바스크립트의 다양한 데이터타입은 크게 원시 타입과 객체 타입으로 나뉜다. 먼저 원시 타입이란 변경이 불가능한 값이다. 이는 읽는 것만 가능한 값으로 변경할 수 없다. 변수가 주머니라면, 값은 메모리 공간을 차지하는 저장된 데이터 이다. 여기서 변경이 불가한 것은 변수가 가진 값을 의미한다. const a = {}; //const 의 값은 재할당이 불가능하다. var나 let과 같은 변수가 가진 값이 재할당 되면 값은 여전히 같은 메모리 공간을 차지하지만, var와 let이 가르키는 값과 주소가 바뀐다. 따라서 해당 변수들이 이전에 가지고 있던 값들은 여전히 존재하며, 변경이 불가하다. (메모리 효율에 안좋을 듯 하다) 문자열은 원시 타입이..