[JS]자바스크립트 - 이론 정리 (this, 클로져, 비동기 , 이벤트, 프로토타입, 클래스 )

< function 과 method > 둘다함수

function 

method  = 오브젝트 안에 {   } 들어 있다.   실행은 object.메소드네임(); 으로 실행시킨다.

<this 란 ? >

ㅡ 객체 자기자신을 가리킴

ㅡ method 의 경우 실행하고 있는 객체를 참조한다. 

ㅡ 일반 함수의 경우 전역격체 (window , 상위) ckawh

 

ㅇ js 에서 this 는 ?

ㅡ 어떤식으로 함수가 호출 되었는지에 따라 다르게 매핑된다.

ㅡ 기본적으로는 전역객체 (window객체가 나옴) /오브젝트 안에서는 해당 오브젝트가 나온다.

blind() 라는 함수로 this가 가리키는 객체 수동 매핑 가능하다. (=Explicit binding)

 

ㅇ Js 의 strict mode (엄격한)

ㅡ 예측 불가 동작들을 명로하게 만들고자

ㅡ 'use strict'; 파일 최상단 또는 함수 첫 줄에 적어줘서 활성화시킴

 

<클로져 Closure>

: A함수 안에 B 함수가 선언 되었을때  B 함수가 참조하는 A힘수 안쪽 영역

ㅡ fuction factory :함수를 만들어내는 함수

ㅡ module design pattern : IIFF(즉시실행함수) 를 활용한 priavate 변수와 mothod를 가지는 module생성가능하다.

 

< 비동기 async> 

동기(Sync) : 어떤식으로든 b 함수 작업이 끝난 것을 확인 후, 마무리를 A함수에서 하는 것

비동기(Async) : A는 b함수호출까지만을 담당 했을 뿐 처리+마무리는 B함수가 한다. (쿨거래)

 >> 특정 작업을 위한 제어흐름의 최종 마무리를 어디서 하는지에 대한 속성이다.

 

< 블로킹과 논-블로킹 >

블로킹 : a - b -a   ( a는 쉬고 b작업 끝나고 a작업 진행)

논블로킹 : a - a,b -a  ( 콜백으로 b 는 거의 바로 반환해서 작업한다 ) (즉시반환)

>> 제어권이 넘어갔을 때 곧바로 반환 여부에 대한 속성이다.

>>> 자바스크립트는 Non-blocking+Async 방식이다.

 

< 콜백함수  Callback function >

: 어떤 함수를 호출할 때, 인자값으로 넘기는 나중에 실행될 함수 ! (async 쿨거래)

ㅡ 콜백함수 용도

ㅡ js의 비동기작업을 처리하기위한 방법이다. ㅡ 주로 어떤 작업이 끝난 이후, 그 결과값을 가지고 뒤에 이어서 처리되어야 하는 로직을 담는다 .ㅡ콜백지옥 ??? 콜백함수를 겹겹이 연달아서 구현하는 형태...가독성 안좋고 이해 어려움

 

<Ajax > 

ㅡ 비동기 자바스크립트와 XML 을 줄임말 ( JSON이 대체함)

ㅡ 페이지 내 필요한 만큼만 데이터를 가져와서 부분만 동적으로 보여줌

 

< promise > then  과 catch 로 ( finally )이루어짐 

ㅡ js비동기 작업의 최종적인 성공이나 실패의 제어 흐름을 알아보기 쉽게 표현해주는 객체이다.

ㅡ비동기 로직 구현시 콜백함수를 활용하는 방식보다 더 편리해짐.

ㅡ ES6 에 도임 / 3가지 상태가 있음 ( pending 대기 , fulill 완료/성공, reject 완료/실패)

ㅡ promise chain >> 리턴랄때 똑같은 promise객체로 리턴해줘야함 .

ㅡ resolve (성공) reject (실패) -콜백과 유사한 형태로 생성함 .

 

< Async &wait > 

ㅡ js 의 비동기 로직 처리 실패 패턴 중 가장 인간이 보기 쉬운상태이다.

ㅡ 일반적으로 코드를 위에서 아래로 읽으며 실행 순서를 파악하는 점을 감안하여 만든 기능이다.

Async 

ㅡ 비동기 로직을 포함하는 함수 앞에 붙임

ㅡ 함수가 promise객체를 리턴하게 만듬. 함수내부에서 await키워드 사용이 가능하게 됨 

 

wait 

ㅡasync키워드를 붙인 함수안에서만 사용가능

ㅡ promise객체를 리턴하는 함수 호출 코드 앞쪽에만 붙일 수 있음

ㅡ promise 의 then()부분에서 전달받던 것 성공시, 결과값을 곧바로 얻을 수 있다 .

>>>callback > promise > async awit  순서로  가독성/ 개발편리성이 좋아짐 개발됨 

 

< 이벤트 >

유저가 웹에서 html element 에 가하는 각종 액션에 의히 발생 되는 것 !

발생은 html 뼈대 요소이지만, 구체적 로직은 js로 구현한다 ~

HTML event예제

ㅡ  이미지 찾아보기 ~~~~

ㅡ 예제 HTML 

<button onclick ="this.innerHTML=Date()" > 버튼 < /button> 

ㅡ 예제 js - addEventListener()   메서드 method 

//이벤트 예제

document.addEventListener("clock", myFunction);

function myFunction() {

  document.getElementById("deme").innerHTML = "Hellow";

}

 

 

 

<프로토타입  1>

ㅡ js는 prototype-based 언어라고 불린다.

ㅡ js는 모든 객체가 기본적으로 object라는 built-in-prototype을 탑재하고 있다.

ㅡ 생성자 함수와 new라는 키워드만 있으면 새로운 프로토타입을 만들 수 있음

ㅡ 일반 OOP용어의 js버전 은 ?

: class > 프로토타입 prototype

 멤버변수 > 프로퍼티 property 

<프로토타입  2>

ㅡ js에서 어떠한 객체(=개념)을 설계할 수있는 수단이다.

ㅡ js에서 객체의 설계도를 상속받을 수 있는 메커니즘이다. (원리,구조)

ㅡ 프로토타입 체인 : prototype 을 이용한 상속의 연결고리

ㅡ 객체의 프로토타입에 엑세스 하는 방법 2가지

obj.__proto__

Object.getPrototypeOf(obj) 

 

 

ㅇ 객체 지향 프로그래밍 ( OOP)

: 코드 간결함을 유지하고 재사용성을 향상하기 위한 프로그래밍 방법론

ㅡ class와 object 개념을 활용/ 클래스로 상태와 기능을 기술하고 object를 생상할수 있음

* OOP 이해를 위한 필수 개념 !!!!! 중요

ㅡ 객체 object : 특정정보를 구성하는 독립적인 개념/ 단위를 일컫는 말 

ㅡ 클래스 class : 객체를 생성할수 있는 내부 변수와 함수를 정의한 설계도

ㅡ 멤버변수 member variable : 클래스 객체의 각종 상태값을 저장하고 있는 자체 변수

ㅡ 메서드 method : 클래스 또는 클래스 객체가 보유한 자체 함수

ㅡ 생성자 constructor : 클래스로 객체를 생성할때 사용하는 객체 초기화 함수

ㅡ 인스턴스 instance ** : 클래스를 이용해 생성된 객체가 메모리에 올라간 것 ! 객체 생성코드가 실행된것 !

ㅡ 캡슐화 encapsulation : 객체의 상태정보와 기능을 클래스라는 테두리 안에 가두어 설계하는 것

ㅡ 상속  inheritance :이미 존재하는 클래스를 기반삼아 더 확장된 기능을 가진 클래스를 만드는 것

 

< 클래스 >

ㅇ js에서 클래스 란 ?

ㅡ 객체를 만들기 위한 설계도 ( = 일반적 정의와 동일하다 ) 

ㅡ 프로토타입 성질을 좀더 쉽게 사용하기 위한 '문법적 부가기능' 이다

ㅡ prototype과 달리 constructor 라는 함수가 별개로 있다.

ㅡ 클래스 선언은 호이스팅 되지 않음. (상단에서 참조안됨 )

ㅇ 좋은 클래스 만드는 법 ?

ㅡ 높은 응집도와 낮은 결합도를 가진 클래스를 설계하자

ㅡ 적절하게 관심사 분리하여 각 항목이 높은 독립성을 가지도록 설계한다 

ㅡ 응집도 ( 한 묘듈 내부의 요소들이 서로 관련되어 있는 정도 )

ㅡ 결합도 ( 서로 다른 모듈, 클래스 간 상호 의존 정도 )

 

 

ㅇ 정적 (static) 변수 & 메서드

ㅡ 인스턴스가 아닌 "클래스" 자체에 붙게되는 속성이다.

ㅡ 클래스명으로 직접 참조 가능하다

ㅡ  static이라는 키워드를 직접 사용한다.

 

ㅇ static 용도

ㅡ 클래스 단위로 관리되어야 하는 변수나 함수가 필요할때 사용한다

ㅡ ex1.http 요청을 보내는 작업들만 모아둔 클래스일때 공용 헤더 보관

ㅡex2.클래스 메서드에서 공통으로 사용할 에러 핸들링 or로깅 함수를 선언

ㅡ 상태정보가 필요없는 유사한 성질의 유틸성함수들을 클래스로 묶고 싶을때 사용

ㅇ 클래스 상속 (inheritance)

extends 키워드를 사용하여 상속/ super 키워드를 사용하여 부모 클래스 접근 가능하다.

잘 쓰면 - 시간단축 / 못 쓰면 - 코드간 의존성이 커져서 유지보수가 어려워짐