분류 전체보기

[JavaScript_study] 유용한 객체들

* 자바스크립트 런타임환경 (Browser or Node) 우리가 자바스크립트 코드를 작성하면 우리 어플리케이션은 자바스크립트 런타임 환경에서 동작할수 있다. 런타임 환경은 브라우저가 될수도있고 노드환경이 될수도있다. [ 런타임 환경안에 있는 객체의 종류 ]​ 1. 내장객체(Built-in Objects) 2. 호스트 객체(Host Objects) 자바스크립트 만으로는 브라우저에 있는 화면을 보여주거나 네트워크 전송을 하거나 컴퓨터에 있는 파일을 읽을수 없다. 이런일들을 수행하기 위해서는 런타임 환경에서 제공해주는 호스트 객체(Host Objects)를 사용해야한다. 호스트 객체란 ??? 브라우저 런타임 환경이라면 브라우저 호스트가 제공해주는 다양한 객체들 및 Web APIs들을 뜻하고 노드 환경이라면 ..

[JavaScript_study] 자바스크립트 엔진에 대해서

[자바스크립트 엔진에 대해서] * 어떻게 자바스크립트가 컴퓨터와 우리의 브라우저 위에서 동작할 수 있는지?? > 자바스크립트 엔진에 대해서 알아야한다. * 브라우저 자체에 내장되어있는 자바스크립트 엔진이 필요하다. > 동작하고있는 시간(런타임)에 코드를 한줄한줄씩 읽어서 실행을 한다.(인터프리터 언어) > 인터프리터 : 런타임시 코드를 한줄씩 번역해서 실행 > 자바스크립트를 동작하기 위해서는 엔진이 필요하다. > 보통 다른 프로그래밍 언어는 컴파일러가 필요하다. ex) JAVA * 컴파일러 vs 인터프리터 > 컴파일러 : 실행하기전 모든 코드를 컴파일링함 : 컴파일링 단계에서 시간이 오래걸린다. : 한번 실행파일을 만든뒤 실행을 할때는 빠르게 실행할 수 있다. > 인터프리터 : 일단 실행후 하나하나씩 필..

[JavaScript_study] 상속 (extends)

* 상속(extends) 비슷한 유형의 class가 있을 경우 상속을 이용하면 더 간결하고 효율적으로 사용이 가능하다. * super 내가 상속하고 있는 부모를 의미한다. 부모의 생성자 함수를 호출해서 부모의 생성자에 필요할 정보를 전달해주고 함수안에서도 super다음에 부모의 함수를 호출하면 상속하는 class의 함수를 먼저 호출하고 추가적인 작업을 할 수 있다. ex) super.eat() 내가 필요한작업후 부모 함수를 호출하면 super와 위아래로 자리만 바꿔주면 된다. * 오버라이딩 (overriding) 자식 class에서 부모 class에 있는 함수를 덮어 씌운다. 위의 예시에서 Animal에도 eat메서드가 있지만 해당 행동을 그대로 덮어씌워서 다른 행동을 만든다. 부모 class의 기능을 ..

[JavaScript_study] setter, getter

* getter, setter = 접근자 프로퍼티 (Accessor Property) > 만약 함수로 get, set을 접근하지 않고 프로퍼티로 변경 및 수정내역을 프로퍼티로 지정을 하게 될 경우 문제가 발생한다. > 어떠한 생성자를 만들고 나서 생성자를 호출하면 프로퍼티가 다 지정이 된다 이후 프로퍼티를 변경해주면 일부 변경되지 않는다. 생성자에서 한번 만들고나서 업데이트가 되지 않는다. > 함수를 호출하는 시점에 이름이 만들어 질 수 있도록 별도로 메서드안에서 이름을 변경하는 로직을 관리해주어야한다. * get 접근자 프로퍼티 > 함수호출을 프로퍼티 호출처럼 만들어준다. > 함수지만 고정된 값이 아닌 호출하는 시점에 데이터를 만들어서 return해준다. > 이러한 호출은 행동보단 속성에 가깝기 때문에..

[JavaScript_study] 필드(field)

* 필드(field) > 보통 자바스크립트에서는 constructor에서 주어지는 데이터라면 생략 가능 > 인스턴스를 만들때 초기화가 되어야하는 데이터라면 constructor 윗 부분에 작성해서 초기값(default) 설정 가능 : ex) type = '과일'; * 접근제어자 ( # ) > 객체를 만들었을때 class외부에서 변경이 불가능하게 만들고 싶을때 사용한다. : ex) apple.name = '오렌지' // 외부에서 apple이라는 객체의 name값으로 오렌지를 추가하려고 시도중 > 접근제어자를 이용해서 캡슐화를 할 수있다. > 내부상으로 필요한데이터를 보이지 않도록 수정할 수 없도록 캡슐화해놓는다. > 다른 프로그램언어에서는 private(#), public(기본), protected등을 이..

[JavaScript_study] static, 인스턴스(instance)레벨, 클래스(Class)레벨

* static (static 키워드는 클래스의 정적 메서드를 정의한다.) // static 정적 프로퍼티, 메서드 class Fruit { static MAX_FRUITS = 4; // 생성자: new 키워드로 객체를 생성할때 호출되는 함수 constructor(name, emoji) { this.name = name; this.emoji = emoji; } // 클래스 레벨의 메서드 static makeRandomFruit() { // 클래스 레벨의 메서드에서는 this를 참조할 수 없음 // 주어진 데이터가 없는 템플릿 자체이므로 this를 참조할 수 없다. return new Fruit('banana', '🍌'); } // 인스턴스 레벨의 메서드 display = () => { console.lo..