[2] JavaScript

[객체 리터럴]

- {} 와 '키'와 '값' 으로 처리

- 클래스 없이 자유로운 데이터와 함수 표현

- 단축 속성 - Shorthand Property Names

- 동적으로 속성이나 메서드 추가 가능

 

const print = (name, age) => {
    console.log(name)
}
print ()

- 함수는 파라미터 갯수에 영향을 받지 않는다.

 

 

- 비 구조 할당

const print = ({name, age}) => {
       console.log(name, age)
   }*/
   const print(param) =>
   {
       console.log(param.name)
       console.log(param.age)
   }

 

 

- 아래 두 코드는 차이가 있을까?

> 있다 엄청나게 큰 차

//이 두개는 차이가 있을까?
obj2.doA 
    obj2['doA'] // doA는 문자열 > 동적 코딩

 

 

 

- 자바 스크립트는 리플렉션을 사용하지 않아도 동적코드를 만들 수 있다.

- 다이나믹 프로그래믹

- 자바스크립트는 동적 프로그래밍

- 

 

 

 

 

-Java Script Advanced

<단점>

- 클래스와 비교해 보는 입장

- 상속이 불가 - 사실 조합이 더 나은 방식

- 타입 검사의 어려움 - TypeScript의 명분

- 대규모의 프로젝트에서는 타입을 쓰는것을 선호한다.

- Prototype 문제 

 

 

<Java의경우 부모 자식클래스가 있다>

- 부모 클래스 {doA}

- 자식 클래스 {doB}

- 자식 obj = new 자식()

- 자식 obj2 = new 자식()

- 자식을 만드려면 부모가 있어야 한다. = super

> 위처럼하면 부모가 2개 만들어진다. ( 자식이 2개만들어졌기에 )

 

 

 

<OOP 객체지향언어>

- 가장많이 접하는 언어 : 객체, 인스턴스

- 객체와 인스턴스를 혼용하는이유가 뭐지? 

> 객체지향언어 3가지 정도 있다 :

1. 클래스 기반언어 (Java) 

2. Prototype 기반 언어

3. 기타등등 언어

> 자바스크립트는 2번이다

>>프로토 타입 베이스의 언어는 부모를 만들고 자식을 만드는 게아니고 원형을 그대로 연결해서 사용한다.

- 모든 배열은 프로토타입을 참조하게 되어있다.

//배열을 이용하는 모든코드에는 이게 사용가능하다
//객체가 1개이다.
//1개이기 때문에 생기는 문제점이 터지기 시작한다.

Array.prototype.ddd =function()
{
    console.log('ddd')
}

//프로토 타입 테스트
const arr1 = [1,3]
const arr2 = [2,4]

console.dir(arr1)
console.dir(arr2)

arr1.ddd()
arr2.ddd()

- 객체리터럴은 프로토타입이 존재하지는 않지만 어떠한 기능을 재사용할 수 없다.

 

[클로저]

- 숨겨진 참조

- 원래 함수라는 것은 f(x) => y => 상태를 유지하지 않는다.

- 상태유지를 위해 사람들이고민을 한다. : worst방법 = 전역변수를 쓰는것

- 여러개를 만들 수 없다.

 

- 리액트의 userState 는 클로저로 만든다.

 

 

[DOM과 EVENT]

- JS -> CoreJS 변수개념

- ClientSide(Browswe) -> DOM/BOM

- JRE

- Node.js - ServerSide

- Node.js하는일 : 코어자바스크립트에 서버관련 기능을 추가해서 만들어진 것

 

DHTML - 동적인 HTML > 화면 방식 (Star wars API데이터를 가져와서 화면에 출력해주는 방식)

변화가 일어나기 시작한다. 90's 홈페이지 시절~ 20년대 초반까지 -> HTML이 주인공이였다. -> 약간의 처리

- 브라우저에서 처리하기 위해 Document라는 APi를 사용한다 *( HTML 문서자체를 말함 ) , 

- 또한, Window 사용 (생략가능) prompt, alert 등등

- 화면을 갱신하는 일

- 사용자들의 이벤트 처리

- JQuery - 브라우저 호환성 보장( IE, CHROME, SAFARI ...)

> CSS 의 querySelector( ., # ...)

>> 표준

- 딱 두개의 메서드만 기억하면된다.

const target = document.querySelector('#target')

const arr = document.querySelectorAll("li")

 

- querySelector - 한개만나옴

- querySelectorAll > 배열

-css queryselector + 서버와의 통신 > MS-IE (Ajax사용하게됨 : 지도, 검색, 메일) 

- 브라우저 : 싱글쓰레드

<deffer>

-연기하는것

- 스크립트 로딩자체를 뒤로 미뤄라 (가능한 밑에 있는것이 좋다)

 

 

<defer>

- 문서내의 도큐먼트가 다 처리된 다음에 처리되도록 연기하는것이다.

- 윗쪽에 썼지만 아랫쪽에 쓴것처럼 동작해줘

 

[C R U D]

<C>

- createElement - append 작업 (실무에서는 잘 안씀)

 

 

 

[ 브라우저는 어떻게 DOM이 변경된 것을 알 수 있을까? ]

- 트리가 메모리상에서 두개 만들어진다.

1. 돔트리

2. css 렌더링 트리 : css가 적용되서 어떤애가 보이고 안보이고 하는것

- 레이아웃 및 페인트 과정(리페인트)

- 힐크(Hit Testing) 및 리플로우

 

- createElement자체가 나쁜게 아니라 다시 렌더링해야 하는상황이 생기는 그 횟수를 줄이라는것

 

<li onclick....>

- 인라인 방식

- 권장하지 않는다

- 초창기 웹은 전부 이방식 : 2000년도 웹사이트

> 이 방식은 특별한 문제점이 있는것은 아니지만 HTML의 위치가 바뀐다. 

>> 홈페이지 시절 자바스크립트는 한정적이였다 ( 결과만 나오면 됨 )

>>>포털 사이트의 시절 ->  문서의 정보는 많이지는데 검색엔진 입장에서는 불필요한 정보, 자바스크립트를 지원하지 않는 브라우저에서 문제가 생기기 시작함

>>>>'HTML은 순수한 데이터만 가지고 있어야 해' -> MVC (HTML이 결과물이라고 생각했었다)

- 개선을 할 때 문제점 : 함수를 하나밖에 못쓴다. ( 클릭을 했을때 여러가지 동작을 처리할 수 없었다 )

> 그래서 데이터와 이벤트를 분리하자 > Dom Event Model2

>> MS가 제대로 쓰지 않았다. (MS 에서는 click이라고 써도 됐던것)

>>>다른 브라우저에서 엉망진창이 되었다.

 BUT > React, Vue는 쓴다 하지만 내부적으로 다르게 처리됨

- addEventListener(이벤트 종료, 함수, 버블링) 세가지를 파라미터로 받는다.

 

- 초창기 게임 : CPU사용량이 적다 > 대부분 퍼즐게임 > 동적인것들이 많이 필요하지않았다.

> 액션게임의 등장 : for, while루프를 돌리는 경우가 생김 > 객체들의 위치를 조금씩 다 바꿔주고 충돌검사를 한다.

>>게임루프와 똑같이 동작하는것이 이벤트 모델이다.

>>>이벤트 루프 (nojs도 이렇게 동작함 ) > 비동기 처리와 관련이 있음

>>>>이벤트를 처리하는 첫번째 파라미터는 '항상' 이벤트 이다.

>>>>> 이벤트 모델2를 사용한다. > 분리 > addEventListener로 분리한다.

- 이벤트를 걸 때 대상이 반드시 존재해야 한다.

> 여러번 걸지마라 > 가능하면 한방에 걸어라 (<li> 에 각각 걸지말고 <ul>한번에 걸어라)

- remove = 제거할 자기 자신에게 remove를 해버린다.

- 이벤트의 단골 시험 문제 : 버블링, 캡처링

버블링 : 안쪽에서 바깥쪽으로 

캡처링 : 바깥쪽에서 안쪽으로

> 대부분의 브라우저는 버블링을 한다. 

- (false)값은 캡처링 하지마라는 것

- 레이어드된 화면에서 굉장히 치명적인 오류를 발생시킨다. (지도가 레이어드 화면이다) 

* 네이버와 다음 지도는 다르다. > 문서가 있다 ( 사용자 설명서 ) > 콩나물이라는 회사가 있었는데 인수해서 만들었다.

- 위성지도 = 레이어 겹치는것, 음식점같은것 찾으면 레이어가 결합을해서 보여주는것 > 클릭하면? > 음식점에 대한 정보부터 나와야 한다. > 이벤트가 걸려있으면 이벤트가 여러개 걸리는것이다

document.querySelector(".inner").addEventListener('click', function()
{
    console.log("INNER")
},false)
document.querySelector(".outer").addEventListener('click', function()
{
    console.log("OUTER")
},false)

- 버블링 옵션 

 

- 이벤트 메서드 중요.

e.stopPropagation()

e.preventDefault()

 

- form태그 안에 있는 a태그는 submit이다.

- 싱글페이징 어플리케이션할때는 a태그를 사용하면안된다 다른걸 사용해야 한다. 

> React, Vue에서는 라우터를 만들어서 사용한다. ( 가장 조심해야할 태그중 하나 )

>> 라우터 : a누르면 a만보이게 b누르면 b만보이게 하는것

 

- dom closest

> Element.closest()

>>얘도 셀렉터인데 자기에서부터 가장 가까운 부모를 찾는다.