Crafting My Future with Code

동기 : Synchronous , 시간을 맞춤

비동기 : Asynchronous, 시간을 맞추지 않음

둘의 차이

동기는 먼저 이전의 것이 끝나야 다음 것을 할 수 있지만 비동기는 1번을 하면서 2번을 할 수 있고 3번, 4번도 할 수 있다.

JavaScript는 동기 언어입니다.

자바스크립트는 한 줄 실행하고 또 다음 줄 실행하는 동기 언어입니다.

하지만 setTimeout 같은 경우 비동기기입니다 어떻게 된 걸 까요?

비동기 코드를 작성하기 위해서 자바스크립트 이외의 도움을 받습니다

.

setTimeout도 사실 자바스크립트의 일부분이 아닙니다.

브라우저에서 사용을 한다면 브라우저 api를 사용하는 것이며 ( window.object),

Node에서 사용한다면 Node api를 사용하는 것입니다 (global object).

콜스텍 작동 확인하기

속도를 느리게 해서 보면 보기 편합니다

https://kamronbekshodmonov.github.io/JELoop-Visualizer/

undefined 와 null의 공통점

• 둘 다 원시 타입(primitive)입니다.
• undefined 타입은 undefined 값이 유일하며, null 타입은 ull 값이 유일합니다.

undefind

• undefined는 '아무 값도 할당받지 않은 상태'를 의미합니다.
• var 키워드로 선언한 변수는 호이스팅으로 올라가 undefined로 초기화 됩니다.
  그 이후 인터프리터가 해당 소스코드에 도달했을 때 할당한 값이 들어가게 됩니다.

• undefined는 개발자가 의도적으로 할당하기 위한 값이 아닌 자바스크립트 엔진이 변수를 초기화할 때 사용합니다.
  그래서 개발자가 의도적으로 undefined를 할당하는 것은 권장되지 않습니다.

• 변수에 의도적으로 값이 없다고 할 때는 null을 사용합니다.

null

• null은 '비어있는, 존재하지 않는 값'을 의미합니다.
• null은 NULL, Null과 다릅니다.
• 의도적으로 변수에 값이 없다는 것을 명시하기 위해서 undefined가 아닌 null을 사용합니다.
• null을 할당하면 변수가 이전에 참조하던 값을 명시적으로 참조하지 않겠다고 하는 것이므로,
  자바스크립트 엔진이 이 변수에 메모리 공간에 대해 가비지 콜렉션을 수행합니다.
  (가비지 콜렉션 : 더이상 사용하지 않는 메모리를 자동으로 정리하는 것, 추후 정리하겠습니다.)

자바스크립트 타입

1. 원시 타입 : 불리언(Boolean), 문자열(String), 숫자(Number, BigInt), null, undefined, Symbol (불변성을 가지고 있다.)

  원시 타입 데이터는 변수에 할달될 때 메모리에 고정된 크기로 스택 영역에 저장되고 해당 변수는 값을 보관한다.

  또한, 원시 타입 자료형은 변수 선언, 초기화, 할당 시 값이 저장된 메모리 영역에 직접적으로 접근한다..

  즉 변수에 새 값이 할당될 떄 변수에 할당된 메모리 블록에 저장된 값을 변경한다는 뜻이다.

  원시타입은 값 자체를 복사하기 때문에 원본이 바뀌더라도 복사한 값에는 영향을 주지 않는다.

2. 참조 타입 : 객체(Object), 배열(Array), 함수(function)

  참조타입은 변수에 할당될 때 값이 직접 저장되는 것이 아니라, 변수의 값이 저장된 Heap 메모리 주소의 값을 저장한다

  변수의 값이 저장된 Heap의 주소를 가지고 있기 때문에, 변수가 가지고있는 주소를 이용해 접근한다

arr2는 arr의 주소값을 저장했다.

즉 [1,2,3] 이라는 배열의 값이 저장된 Heap 메모리의 주소값을 통해 arr과 arr2는 접근을 하는것이가

그러므로 arr === arr2는 true이다.

그리고 같은 주소를 가지고 있는 상태에서 push로 값을 추가하면

arr과 arr2는 둘다 같은 곳을 참조하기 console.log 에도 같이 값이 변경이 된다.

얕은 비교란?

숫자, 문자열 등 원시 타입은 값을 비교합니다.
배열, 객체 등 참조 타입은 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교합니다.

첫번째는 원시 타입들끼리 값을 비교해 1 === 1 은 true가 나왔습니다.

두번째는 참조 자료형들의 비교입니다.

참조 자료형들은 값, 속성이 아닌 참조되는 위치(주소)를 비교합니다.

속성이나 값은 같을지언정, 각각 Heap에 저장된 장소가 다르기 때문에 false가 나옵니다

깊은 비교란?

얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교합니다

1. Object depth가 깊지 않은 경우 JSON.stringify 사용

2. Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용

Pure Function 이란?

함수형 프로그래밍 페러다임의 한 부분이며, 순수 함수는 두가지 규칙을 가지고 있습니다.

1. 같은 입력값이 주어젔을 때, 언제나 같은 결괏값을 리턴한다. (same input => same output)
2. 사이드 이펙트를 만들지 않는다.

Pure Function 을 사용하는 이유는?

1. 클린 코드를 위해서
2. 테스트를 쉽게 하기 위해서
3. 디버그를 쉽게하기 위해서
4. 독립적인 코드를 위해서 (Decoupled / Independent)

Impure 함수의 예시

const a = ['A','B'];

const addItem = (originalArray , newItem) =>{
   originalArray.push(newItem);
   return originalArray;
}

console.log(addItem(a,'C'));
console.log(a);

const a = ['A','B'];

const addItem = (originalArray , newItem) =>{
   return [...originalArray, newItem];
}


console.log(addItem(a,'C'));
console.log(a);

}

결론

프로젝트를 생성하기 위해서 Impure함수도 당연히 필요합니다.

하지만 순수 함수를 사용하면 특정 함수가 다른 함수에 미치는 예기치 못한 영향을 최소화 하고

함수를 만들고 실행할 때 어떤 결괏값을 리턴할지 예측할 수 있다는 장점이 있기에 

Pure 함수로 처리할 수 있다고 생각되는 부분은 최대한 Pure 함수로 만들어서 사용할 수 있도록 하는게 좋습니다.

1. 즉시실행함수(IIFE)란?

즉시 실행 함수를 의미 IIFE는 정의되지마자 즉시 실행되는 자바스크립트 함수를 말합니다.

( // 첫번째 () 소괄호는 '전역 선언을 막고' IIFE 내부로 다른 변수의 접근을 막습니다.
    function () {

    }
)() // 두번째 소괄호는 '즉시 실행 함수'를 생성하는 괄호이며, 이를 통해 자바스크립트 엔진은 즉시 해석 및 실행을 합니다.

IIFE의 주된 사용 목적

IIFE를 사용하는 주된 이유는 변수를 전역(global scope)으로 선언하는 것을 피하기 위해서입니다.
또한 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수도 있습니다.

첫번째는 IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장합니다..

두번째는 표현 내부의 변수는 외부로부터 접근이 불가능합니다.

구조 분해 할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript의 표현식 입니다

.

객체 구조 분해 할당

조금더 깊게 들어가보면

배열 구조 분해 할당

생략도 가능하다.

다른 변수명으로 변경 가능

활용 예시

this가 너무 햇갈려서 여러 영상과 블로그를 찾아보고

가장 이해하기 쉬웠던 설명으로 정리를 해보았습니다.

간단하게 정리하면

this는 호출될 때 결정된다!

지금부터 this에 대해 알아보자

1. this는 기본적으로 window객체를 가르킵니다.

2. this를 바꾸는 경우는?

• 객체를 통한 호출 (위에서 말한 호출될 때 결정된다!)
• new를 통한 객체 생성!
• 화살표함수를 사용할 때
• bind, apply, call 등을 사용할때

위의 4가지의 경우에 this가 변경됩니다.

전부다 살펴보겠습니다.

객체를 통한 호출

확인용 window.name 을 만듭니다.

1. obj.sayName()을 했을때 나오는 값은?

정답은 드레그

J-plum

obj라는 객체를 통해 sayName을 호출 그러므로  this는 obj가 됩니다.

위에서 말한 호출될 때 this가 결정되는 상황입니다.

this가 obj이기때문에 this.name은 obj.name이므로 콘솔에 J-plum이 출력됩니다.

난이도 업!

2. obj.sayName()을 했을때 나오는 값은?

정답은 드레그

J-plum

test

obj라는 객체를 통해 sayName을 호출 똑같이 sayName의 this는 obj가 됩니다.

햇갈릴 수 있지만 sayName() 안에서는 inner 라는 함수를 하나 만들었을뿐!

호출을 한게 아닙니다

inner()는 그냥 호출이 되었을뿐 this를 바꾸는 요인 하나도 없기때문에 this는 기본값인 window객체가 됩니다

그래서 test가 출력이 됩니다

화살표함수를 사용할 때

1. 다음의 실행값은?

정답은

test

obj객체를 통해 호출을 했기 때문에 this가 obj라고 생각할 수 있지만.

this를 바꾸는 방법 중 하나인 화살표 함수가 있다.

화살표 함수가 가장 우선시되며, 화살표 함수 사용시 해당 블록스코프의 상위 스코프가 this가 된다.

sayName의 경우 obj의 블록 스코프에 해당하며 obj의 상위 블록 스코프는 window 객체가 된다

그러므로 답은 test

2. 다음의 실행값은?

정답은

J-plum

J-plum

처음 콘솔의 값은 설명하지 않겠습니다. (위에 있습니다)

두번째 inner 함수가 화살표함수로 선언이 되어있는데

inner는 sayName의 블록스코프 안, sayName의 상위 블록 스코프는 obj이다

그러므로 this는 obj가 된다.

bind, apply, call 등을 사용할 때

기본적으로 함수에서의 this는 window객체를 가리킨다

1. call의 사용법

call메서드는 함수를 호출하는 함수이며, window 객체 대신에 매개변수로 들어온 함수를 this로 받게됩니다.

사용법 : 함수.call(전달할 것, 값1, 값2); (매개변수는 없어도 됩니다.)

2. apply의 사용법

call과 비슷하지만 call은 인자를 나열해서 받고 (1, 2, 3, ...)

apply는 한번에 배열로 받습니다 (test, [1,2,3...]);

3. bind의 사용법

bind는 생성만 하기에 ()를 붙여 호출을 해주어야합니다.

기타

addEventListener의 호출은? 여기서는 밑줄이 호출입니다 (function은 호출이 아니라 선언입니다)

사실 외워야...  addEventListener의 앞에있는 header가 this입니다.

버블링(Bubbling)이란

가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 (bubble up) 전달 되는 것을 의미합니다.

예제

body 안의 모든 태그들에 click 이벤트가 발생시 log를 출력하도록 만든 예제입니다.

See the Pen Bubbling Test2 by J-Plum (@J-Plum) on CodePen.

a태그인 fruit 를 클릭했을때 body까지 alert가 출력됩니다.

자식 요소에서 발생한 이벤트 객체는 부모를 통해 상위 요소로 전달됩니다.

이벤트가 상위 요소로 올라가는것이 물속의 거품처럼 보인다고해서 이벤트 버블링이라고 합니다.

버블링이 일어나지 않는 이벤트와 대체제

• focus (x) -> focusin (o)
• blur (x) -> focusout (o)
• mouseenter (x) -> mouseover (o)
• mouseleave (x) -> mouseout (o)

버블링을 막는 방법?

stopPropagation()을 사용하면 버블링을 막을 수 있습니다.

하지만 막을 수 있지만.stopPropagation을 사용해서 막는건 좋은 방법은 아니라고 합니다

웹 사이트를 이용하는 유저의 동향을 파악 및 데이터를 수집하기 위해, 웹의 애널리틱스는 자주 사용하는데

이 애널리틱스는 버블링을 이용해서 데이터를 수집하기때문에 버블링을 막을경우

데이터 수집이 재대로 되지 않을 수 있다고 합니다.

아래는 stopPropagation과 다른 방법으로 해결했습니다.

See the Pen Bubbling Test by J-Plum (@J-Plum) on CodePen.

이벤트 캡처링

버블링과 다르게 가장 상단의 요소(브라우저)로부터 아래로 내려오는 것을 말합니다.

이벤트는 3단개의 흐름이 있습니다.

캡처링 단계 -> 타깃 단계 -> 버블링 단계

위 흐름에서 캡처링의 흐름을 확인하려면 addEventListener의 capture옵션을 ture로 설정해야합니다.

    ???.addEventListener(... , {captrue: true})
    ???.addEventListener(... , true)

동일하게 동작합니다

capture는 두가지 옵션이 있습니다.

• false 이면 (default) 버블링 단계 동작
• true 이면 캡처링 단계 동작

이벤트 위임

자신에게 발생한 이벤트를 다른 요소에서 처리하는 방법입니다.

하위 요소에서 동일한 이벤트를 처리하는 반복적인 일을 보다 편리하게 해결이 가능합니다.

상위 요소에서 이벤트를 제어한다면 보다 편리하게 관리를 할 수 있습니다.

  <body>
    <div id="box">
      <ul id="list">
        <li id="apple" class="active"><a href="#">Apple</a></li>
        <li id="orange"><a href="#">Orange</a></li>
        <li id="banana"><a href="#">Banana</a></li>
      </ul>
    </div>
    <script async>
      const list = document.querySelector("#list");
      const listChildren = list.children;

      list.addEventListener('click',(e)=>{
        for(let li of listChildren){
          li.classList.remove('active');
        }
        e.target.classList.add('active');
      })
    </script>
  </body>

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

클릭시 active 라는 클래스를 추가해서 강조를 해줍니다. 최초 실행시

Apple에 지정되어 있습니다. 이벤트는 ul 태그에 걸려있으며 클릭시 for of문을 이용해 모든 li의 클래스를 지우고

그 후 이벤트 타겟에 active클래스를 추가해서 강조하는 방식입니다.

위 방식은 ul태그에 이벤트를 걸어 자식태그인 li 에 이벤트를 위임 시키는 방식입니다

하지만 li를 클릭시에는 정상적으로 작동 하지만 a 태그를 클릭시 의도한 바와 다르게 작동합니다

이는 버블링에 의해 발생하는 현상으로

ul 의 자식인 li> a 까지 이벤트가 위임이 된 것 입니다.

문제 해결

e.target 은 이벤트가 발생한 요소이며, e.currentTarget 은 이벤트 핸들러가 등록된 요소입니다.

이벤트가 발생한건 orange인 li 태그 이며 (e.target) 이벤트가 등록된건 list 인 ul태그 (e.currentTarget)입니다.

이벤트 위임을 사용하지 않았다면 target과 currentTarget은 같았겠지만 지금은 다른 상황입니다.

a 태그를 클릭시 currentTarget은 list이며 target은 a입니다.

저희가 원하는 것은 a태그를 클릭 하더라도 li 태그의 색상의 변경입니다.

target의 tagName이 "A" 일때 target을 A가아닌 부모노드 (li)를 지정하도록 했습니다.

그런데 .ul 태그를 클릭했더니 ul 태그도 바뀌는 일이 생겼습니다.

target과 currentTarget을 비교하여 동일할 경우 에는 return로 넘겨주었습니다만.

for문의 위치가 if문보다 상단에있어, class를 삭제후 else if에 걸리면, active 클래스가 전부 사라지는 현상이 있어서

for문의 위치를 if문 밑으로 변경하였습니다.

그러면 else if에 return에 걸리더라도 동작을 안할뿐더러 클래스를 지우지 않기 때문에 정상 작동합니다.

아래는 결과물입니다.

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

참고

https://dev-son.tistory.com/35?category=1189273 

https://www.codeit.kr/community/threads/16879

Node와 Element 의 차이?

Node는 텍스트와 태그 모든걸 포함한다. linebreak(줄바꿈 , 앤터키) , 주석 등 모든걸 포함해서 보여준다
Element는 <div> , <p> 등 우리가 알고있는 태그들을 보여준다

DOM 탐색하기

1. childNodes, firstChild, lastChild로 자식 노드를 탐색할 수 있다.

childNodes는 자식 노드 들을 보여준다.

firstChild는 자식 노드중 첫번째 노드를 보여준다.

lastChild 는 자식 노드중 마지막 노드를 보여준다.

자식들을 보여주는 메소드중 children도 있다

childNodes는 자식 노드 전체를 보여주며

children 은 자식 태그들을 보여준다.

첫번째 로그의 노드리스트를 보면 childNodes를 이용해 parent의 하위 노드들을 보여준다

0번째는 <div class="parent"> 이후의 줄바꿈이 들어가있다 . 열어서 보면 nodeValue  : "\n" 으로 표기되어있다

1번째는 p태그와 그안의 택스트가 들어가있다.

7번재는 주석이다 주석도 포함되어있는걸 볼 수 있다.

두번째 로그를 보면 p 태그 4개만 보인다.

노드들을 보여주는가 , 태그들을 보여주는가의 차이가 childNodes와 children의 차이 인것 같다.

유사 배열 객체

childNodes, children는 마치 배열처럼 보입니다.

하지만 배열이아닌 반복가능한(iterable, 이터러블) 유사 배열 객체인 컬렉션입니다.

이터러블

ES6에서 도입된 순회 가능한 자료를 '이터러블 ' 로 통일하여 for..of문, 스프레드 문법, 배열할당으로 사용할 수 있다

나중에 좀더 자세히 정리해봐야겠다.

이터러블과 유사 배열 객체

유사 배열 객체는 마치 배열처럼 index로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.

유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.

(배열 메소드는 사용할 수 없다)

유사 배열 객체이 전부 다 이터러블은 아니지만, arguments, NodeList, HTMLCollection 은 유사 배열 객체이면서 이터러블이다.

ES6 에 도입된 Array.from 메서드를 사용하여 유사 배열 객체 또는 이터러블을 배열로 변환할 수 있다.

Array.from을 사용하여 유사 배열 객체를 배열 만들기

참고

https://ko.javascript.info/iterable

https://velog.io/@thumb_hyeok/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%9D%B4%ED%84%B0%EB%9F%AC%EB%B8%94https://velog.io/@thumb_hyeok/

윈도우 객체의 속성인 document

window.document 라고 접근을 해야하지만 전역객체인 window이기 때문에

document로 사용가능합니다

document는 HTML에 관한것을 담당하는 객체이며 태그를 선택하고 조작하는데 사용합니다.

window 객체가 브라우저 창이라면 document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체입니다.

자주 사용하는 document 객체를 적어보겠습니다

let ex1 = document;
console.log(ex1);

let ex2= document.querySelector('#hi'); 
console.log(ex2);

let ex3= document.querySelector('.hello');
console.log(ex3);

let ex4= document.getElementById('hi');
console.log(ex4);

let ex5= document.querySelectorAll('p');
console.log(ex5);
console.log(ex5[0]);
console.log(ex5[1]);
console.log(ex5[2]);

1. querySelector 의 경우 css 선택자로 선택합니다.
   1. 아이디는 # , 클레스는 . (점) ,태그명은 그대로입니다.
   2. 부모 > 자식, 부모 자손 등 다양하게 사용가능합니다.
2. getElement~ 의 경우 앞에 Id, ClassName, Name, TagName등은 별도의 선택자없이
   클레스, 이름, 태그를 직접 적습니다
3. getElementById를 제외한 나머지는 getElementsBy~ 들은 Elements로 여러개가 선택이 됩니다
   배열의 형태를 하고있습니다. querySelectorAll 도 같습니다

결과

이외에도

document.haed , body, title 등 html의 head, body에 접근하고, 문서의 제목에 접근하고 바꿀수 있습니다.