262_자바스크립트 읽기 타이밍 최적화하기 [적용] 자바스크립트 로딩 대기로 페이지의 표시를 방해하고 싶지 않을 때 페이지의 표시 속도를 높이고 싶을 때 [문법] 구문 의미 JS 파일을 비동기로 읽어와 즉시 실행 JS 파일을 비동기로 읽어와 HTML 실행 완료 후 실행 [내용] 브라우저는 웹 페이지를 표시할 때 HTML 코드를 위에서부터 순서대로 실행한다. head 태그 내 script 태그를 삽입하면 head 태그 실행 중 해당 script 태그에서 HTML 코드의 실행이 정지되고 동기 처리를 이용해 자바스크립트 파일의 다움로드를 시작한다. 하지만 script 태그에 defer 속성과 async 속성을 설정하면, 자바스크립트의 다운로드는 비동기로 실행되고 HTML 실행은 정지되지 않는다. async와 ..

261_자바스크립트에서 this 기능(화살표함수) 사용하기 [적용] 클래스의 멤버 변수를 메소드 내부와 이벤트 리스터에서 참조하고 싶을 때 [문법] 구문 의미 () => {} 화살표 함수 정의 [내용] 자바스크립트에서 this는 실행하는 영역에 따라 참조하는 곳이 변한다. 화살표 함수를 사용하면 실행 영역에 상관없이 this의 참조가 변하지 않으므로 코드의 가독성이 좋아진다. 클릭 횟수를 계산하는 프로그램을 통해 조금 더 자세히 알아보자. 다음은 LikeCounter 클래스의 멤버 변수 ClickedCount를 사용해 클릭 횟수를 카운트하는 목적의 프로그램이다. 우선 정상 동작하지 않는 코드를 먼저 확인해 보자. JavaScript ERROR class LikeCounter { constructor() ..

260_자바스크립트에서 클래스 데이터의 setter/getter 사용하기 [적용] 클래스의 필드처럼 동작하는 함수를 사용하고 싶을 때 [문법] 구문 의미 set 속성명(값) {} setter 정의 get 속성명 getter 정의 [내용] setter/getter는 클래스의 필드와 같은 방식으로 작동하며, set은 값을 설정하고 get은 값을 가져온다. MyClass 클래스에 customField 이름의 setter/getter를 정의하는 샘플을 확인해 보자. JavaScript class MyClass { // 'customField'의 setter set customField(value) { this._customField = value; } // 'customField'의 getter get cust..

259_자바스크립트에서 클래스 계승하기 [적용] 다른 클래스의 기능을 확장한 클래스를 생성하고 싶을 때 빌트인 객체(Built-in Object)를 계승하고 싶을 때 [문법] 구문 의미 class 클래스명 extends 생성 클래스명() 부모 요소를 계승하는 새로운 클래스 선언 [내용] 클래스에는 다른 클래스의 속성과 메소드를 그대로 이어받는 계승의 기능이 있다. MyParent 클래스를 계승하는 MyChild 클래스의 샘플을 확인해 보자. JavaScript // 계승 대상 클래스 (부모 클래스) class MyParent { parentMethod() { console.log('MyParent 클래스의 메소드입니다.'); } } // MyParent를 계승하는 클래스(자식 클래스) class MyCh..

258_자바스크립트에서 인스턴스 생성없이 정적 메소드 사용하기 [적용] 클래스 인스턴스화 없이 메소드를 호출하고 싶을 때 [문법] 구문 의미 static 메소드명() {처리내용] 정적 메소드 정의 [내용] 클래스의 인스턴스화 없이 호출하는 메소드를 정적 메소드(Static Method)라고 한다. static 선언으로 정의하며, 호출은 '클래스명.메소드명'을 사용한다. JavaScript class MyClass { static method() { console.log('정적 메소드입니다.'); } } // 정적 메소드 호출 MyClass.method(); // '정적 메소드입니다.' 다양한 용도로 사용할 수 있는 범용 메소드를 정의하거나 클래스 속성에 의존하지 않는 함수를 정의할 때도 사용된다. 전달받..

257_자바스크립트에서 인스턴스 생성없이 정적 메소드 사용하기 [적용] 클래스 인스턴스화 없이 메소드를 호출하고 싶을 때 [문법] 구문 의미 static 메소드명() { 처리내용 } 정적 메소드 정의 [내용] 클래스의 인스턴스화 없이 호출하는 메소드를 정적 메소드(Static Method)라고 한다. static 선언으로 정의하며, 호출은 '클래스명.메소드명'을 사용한다. JavaScript class MyClass { static method() { console.log('정적 메소드입니다.'); } } // 정적 메소드 호출 MyClass.method(); // '정적 메소드입니다.' 다양한 용도로 사용할 수 있는 범용 메소드를 정의하거나 클래스 속성에 의존하지 않는 함수를 정의할 때도 사용된다. 전..

256_자바스크립트 클래스에서 메소드(Method) 사용하기 [적용] 클래스에 메소드를 정의하고 싶을 때 [문법] 구문 의미 메소드명() {처리내용} 멤버 함수 정의 [내용] 클래스 내부의 함수를 클래스 메소드 멤버 함수라고 한다. 클래스에 멤버 함수를 정의하기 위해서는 다음과 같이 기술한다. 클래스 멤버 함수에 function은 사용하지 않도록 주의하자. 정의할 수 있는 멤버 함수의 수는 제한이 없다. JavaScript class MyClass { constructor() {} myMethod() { return 'Helloworld'; } } 인스턴스(new 클래스명())의 멤버 함수 접근은 '인스턴스.멤버함수명'을 사용한다. JavaScript class MyClass { myMethod() { ..

255_자바스크립트 클래스에서 변수 사용하기 [적용] 클래스에 변수를 사용하고 싶을 때 API 통신 결과 클래스를 생성하고 싶을 때 [문법] 구문 의미 this.변수명 = 값 멤버 변수 정의 [내용] 클래스에 속하는 변수를 클래스 필드, 클래스 변수, 멤버 변수라고 한다. 클래스에 멤버 변수를 정의하기 위해서는 다음과 같이 constructor() 내부에 'this.변수명'을 사용한다. 여기서 this는 클래스 자신을 가리킨다. 클래스 멤버 변수에 let과 const를 사용하지 않도록 주의하자. JavaScript class MyClass { constructor() { this.myField1 = 100; this.myField2 = '사자'; } } 멤버 변수는 초기값 대입이 가능하며, 대이하지 않으..

254_자바스크립트에서 클래스 사용하기(인스턴스화) [적용] 클래스를 인스턴스화 하고 싶을 때 생성한 클래스를 사용하고 싶을 때 [문법] 구문 의미 new 클래스명() 클래스 인스턴스화 [내용] class 선언으로 정의한 클래스를 실제 데이터로 사용하기 위해서는 new 연산자를 사용하며, 인스턴스화가 필요하다. 인스턴스화한 데이터는 클래스 내 각 요소와 메소드에 접근이 가능하다. JavaScript class MyClass { constructor() { this.classField = 12; } classMethod() { console.log('메소드가 실행되었습니다.'); } } const myInstance = new MyClass(); console.log(myInstance.classField..

253_자바스크립트에서 클래스 정의하기 [적용] 특정 기능을 클래스로 만들고 싶을 때 자바스크립트에서 객체지향 프로그래밍을 구현하고 싶을 때 [문법] 구문 의미 class 클래스명 {} 클래스를 선언 [내용] 키워드 class를 사용해 클래스를 선언하며, 클래스명은 카멜 케이스(CamelCase(첫 글자를 대문자로 하여 단어를 연결하는 방법))을 이용하는 것이 일반적이다. JavaScript class MyClass {} 클래스에 constructor()를 삽입하면 초기화 시 해당 메소드가 실행되며, constructor()문의 삽입은 한 번만 가능하다. JavaScript class MyClass { constructor() { console.log('클래스가 초기화 되었습니다.'); } } 클래스 초..