본문 바로가기

자바스크립트 공부하기

 (13)
[러닝자바스크립트] 자바스크립트 개발 도구 러닝 자바 스크립트 기준으로 쓰여진 글입니다. Git: 개발 협력 버전 컨트롤 도구 Node: 브라우저 밖에서 자바스크립트를 실행할 수 있게하는 도구. Gulp: 반복적인 개발 작업 자동화하는 도구 Babel: ES6코드를 ES5코드로 변환하는 트랜스 컴파일러 ES린트: 자주 하는 실수를 피하기 위한 프로그램 ES6사용하기 자바스크립트의 장점은 어디서든 쓰인다는 것이다. 거의 항상 브라우저 스크립트 언어의 표준이엇고 노드의 등장으로 브라우저 바깥으로 영역을 확장하고 있다. ES6로의 트랜스 컴파일을 시작하기 전에 준비 작업이 있다. 터미널 명렁어 ls : 현재 디렉터리 파일 리스트 cd : 다른 디렉터리로 이동하는 명령 pwd: 현재 디렉터리 경로 출력 mkdir test: 현재 디렉터리에 서브 디렉터리..
[코어자바스크립트] 클래스 자바스크립트는 프로토타입 기반 언어라서 상속 개념이 존재하지 않는다. 그러나 개발자들은 클래스 기반의 언어에 익숙하고, 이러한 니즈에 따라 결국 ES6에는 클래스 문법이 추가되었다. 클래스와 인스턴스의 개념 이해 가령 '음식'은 직접 만질 수도 볼 수도 없는 추상적인 개념이다. 반면 '과일', '채소'등은 직접 만질 수 있는 실존하는 사물이다. 또한 음식은 과일, 채소 등의 관계에서 상위의 개념이고, 과일 등은 하위의 개념이다. 과일, 음식은 모두 클래스이다. 음식은 과일보다 상위클래스superClass이며, 과일은 음식보다 하위클래스subclass이다. 과일 안에도 귤류 등의 하위 클래스들이 존재할 수 있다. 하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가되는 것이다. 음식 클래스가 '먹을..
[코어자바스크립트] 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 상속을 사용하지만, 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로토타입의 개념 이해 var instance = new Constructor(); 위의 그림은 해당 코드를 추상화 시킨 것이다. prototype이라는 프로퍼티와 __proto__라는 프로퍼티가 프로토타입 개념의 핵심이다. prototype은 객체이다. 이 객체 내부에는 인스턴스가 사용할 메서드를 저장한다. 이를 참조하는 __proto__도 객체이다. 그러면 인스턴스에서도 숨겨진 프로퍼티인 __proto__를 통해 이 메서드들에 접근할 수 있게 된다. 예를 들어, Person이라는 생성자함수의 prototype에..
[코어자바스크립트] 클로저 클로저는 "어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상"으로, 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. 자바스크립트 고유 개념은 아니다. 외부함수에서 변수를 선언하고 내부함수에서 해당 변수를 참조하는 형태의 간단한 코드를 작성해 보자. //외부 함수의 변수를 참조하는 내부 함수 var outer = function(){ var a = 1; var inner = function(){ console.log(++a); }; inner(); }; outer(); outer함수에서 변수 a를 선언했고, outer의 내부함수인 inner함수에서 a의 값을 1만큼 증가시킨 다음 출력한다. inner함수 내부에서는 a를 선언하지 않았기 때문에, 상위 컨텍스트인 outer에 접근..
[코어자바스크립트] 04. 콜백함수 콜백함수 콜백함수란 call + back, 되돌아 호출해달라는 명령이다. 즉, 다른 코드(함수 또는 메서드)에게 인자를 넘겨줌으로 그 제어권도 함께 넘겨주는 함수이다. 콜백함수를 넘겨받은 코드는 이 콜백 함수를 적절한 시점에 실행할 것이다. 예를 들어, 어떤 함수 x를 호출하면서 특정 조건일 때 함수 y를 실행해서 나에게 알려달라는 요청을 함께 보내는 것이다. 이 요청을 받은 x함수는 해당 조건이 갖춰졌는지 스스로 판단하고 y를 직접 호출한다. 제어권 var count = 0; var timer = setInterval(function(){ console.log(count); if(++count > 4) clearInterval(timer); }, 300); setInterval을 호출할 때, 두 개의 ..
[코어자바스크립트] 03.this 다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 클래스에서만 사용할 수 있기 때문에 혼란의 여지가 별로 없다. 그러나 자바스크립트의 this는 어디서든 사용할 수 있다. 함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 유일한 기능이다. 상황에 따라 달라지는 this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 전역 컨텍스트를 생성하는 주체가 전역..
[코어자바스크립트] 02.실행 컨텍스트 실행 컨텍스트 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고 this값을 설정하는 등의 동작을 수행한다. => 자바스크립트가 실행되기 위한 변수, 스코프 등을 묶어서 말하는 것. 1) Global execution context : global로 자바스크립트가 실행되는 환경, 무조건 하나만 존재할 수 있음 2) Functional execution context : 호출된 함수가 실행될때 생성되는 execution context 3) Eval : 극히 드문 경우 그리고 또 이로 인해 다른..
[코어자바스크립트] 1단원 정리 자바스크립트 데이터 타입 기본형: 일반적으로 불변값 참조형: 일반적으로 가변값 변수: 변경 가능한 데이터가 담길 수 있는 공간 식별자: 그 변수의 이름 변수를 선언하면 메모리의 빈 공간에 식별자를 저장하고, 그 공간의 값은 undefined가 할당된다. 이후 그 변수에 기본형 데이터를 할당하려고 하면 별도의 공간에 데이터를 저장하고, 그 공간의 주소를 변수의 값 영역에 할당함. 없음을 나타내는 값은 undefined와 null 두 가지가 있음. undefined: 어떤 변수에 값이 존재하지 않을 경우 null: 사용자가 명시적으로 없음을 표현하기 위해 대입한 경우
[코어자바스크립트] 6.undefined와 null 자바스크립트에서는 없음을 나타내는 두 가지 값이 있다. undefined와 null. 이 두 가지는 같은 것 같지만 미세하게 다르고, 사용 목적 또한 다르다. undefined : 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하기도 한다. 자바스크립트 엔진은 사용자가 응당 어떤 값을 지정할 것이라고 예상되는 상황임에도 실제로는 그렇게 하지 않았을 때 undefined를 반환한다. 값을 대입하지 않은 변수, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할때 return 문이 없거나 호출되지 않는 함수의 실행 결과 사용자가 명시적으로 부여한 경우와 비어있는 요소에 접근하려 할 때 반환되는 un..
[코어자바스크립트] 5.불변 객체 불변 객체란 무엇일까? React, Vue.js, Angular등의 라이브러리나 프레임워크에서 뿐만 아니라, 함수형 프로그래밍, 디자인 패턴 등에서도 매우 중요한 기초가 되는 개념이다. 이전 시간에 배웠듯, 참조형 데이터의 가변은 데이터 자체가 아닌 내부 프로퍼티를 변경할 때만 성립한다. 데이터 자체를 변경하고자 하면(새로운 데이터를 할당하고자 하면), 기본형 데이터와 마찬가지로 기존 데이터는 변하지 않는다. 그렇다면, 내부 프로퍼티를 변경할 필요가 있을때마다 매번 새로운 객체를 만들어 재할당하기로 규칙을 정하거나 자동으로 새로운 객체를 만드는 도구를 활용한다면 객체 역시 불변성을 확보할 수 있을 것이다. 혹은 불변성을 확보할 필요가 잇을 경우 불변 객체로 취급하고, 그렇지 않은 경우에는 기존 방식대로 ..

티스토리툴바