200824_TIL

Today I learned

• window 객체
• BOM & DOM
• 고차함수
• 비동기
• 함수 메소드
• 재귀

[ Window 객체 ]

• window 객체

  • 브라우저 요소들과 자바스크립트 엔진, 글고 모든 변수를 담고 있는 객체

  • HTML 문서와 자바스크립트 구조도 다 트리구조로 돼있다.

  • DOM이 자바스크립트를 의미하는 것은 아니다.

  • window 객체는 모든 브라우저 전체를 담당하고 document 객체는 웹사이트만 담당한다.

  • document 객체는 (DOM)이라고 불리고, 나머지 전역객체들은 (BOM)이라고 불린다.

  • window 객체 내부에 screen, location, history, document 같은 객체가 존재

  • parseInt, isNaN 같은 메소드가 존재한다

  • window는 모든 객체의 조상이다. (전역객체)

  • String, Number, Boolean, Number, Function 등과 같은 자료형도 Window 객체 아래 존재한다.

  • window.close()

  • window.open()

    • opener객체

      open() 한 기존 창에 대한 접근.

  • window.encodeURI()

  • window.decodeURI()

  • window.setTimeout()

  • window.setInterval()

  • window.getComputedStyled(태그)

• BOM

  • navigator 객체

    • 브라우저나 운영체제에 대한 정보가 있다. userAgent 정보를 바탕으로 분석 사이트에선 고객에 대한 정보를 분석한다.
    • 브라우저에 따른 다른 동작을 처리할 때 , 특정 브라우저를 확인하는 용도로 사용한다.

  • screen 객체

    • screen.availHeight;
    • screen.availWidth;
    • screen.colorDepth;

  • location 객체

    • location.host
    • location.hostname;
    • location.protocol
    • loation.href
    • location.pathname

  • history 객체

    • history.pushState
    • history.forward
    • history.go
    • history.back
    • history.length

• DOM

  • Document Object Model

  • html에 접근하여 Object처럼 html을 조작 할 수 있는 모델

  • html의 아주 작은 부분까지 접근할 수 있도록 웹 개발자들이 모여 분석하여 준비된 구조 (Structure)

  • 자바스크립트는 이 구조를 잘 활용해 html로 구성된 웹 페이지를 작동하게 만들 수 있다.

  • 자바스크립트는 오랜기간 웹 브라우저를 제어하기 위해 사용되어왔다.

  • dom 구조 조회하기 위해선 console.dir이 유용하다. *DOM을 객체의 모습으로 보여준다.

  • 자식 엘리먼트 - 부모 엘리먼트

    • document.body.children
    • 여러번 접근이 필요한 DOM 엘리먼트 혹은 객체는 변수에 저장해두면 찾아가기 쉽다.

  • DOM CRUD

    • create

      • createElement

    • append

      • append
      • appendChild

    • prepaend

      • prepend

    • read

      • querySelector
      • querySelectorAll

    • update

      • textContent

      • classList.add

      • setAttribue

        Element.setAttribute(name, value);

        ex)elDiv.setAttribute('id','root2');

        var b = document.querySelector("button"); 
        b.setAttribute("name", "helloButton");
        b.setAttribute("disabled", "");

    • delete

      • remove
      • removeChild
        • 자식 엘리먼트를 지정해서 삭제

    • innerHTML은 보안상의 이유로 지양한다.

    • NodeList

      • NodeList는 라이브 콜렉션, DOM 변경사항을 실시간으로 콜렉션에 반영 (childNodes)
      • 정적 콜렉션 NodeList DOM 을 변경해도 콜렉션 내용에 변화를 주지 않는다.(querySelectorAll)

  • 동적 출력

    • 등록 버튼을 누를 때 (이벤트가 발생할 때) 데이터를 동적으로 출력시킨다.
    • 각각 출력의 문제를 기능별로 여러개의 함수로 분리하여 작성한다.
    • html 태그 등을 메타 데이터라고 부른다.
    • 데이터 값은 보통 메타데이터가 아닌 키-값의 객체 형식으로 저장된다. (ex, JSON)
    • html을 통째로 데이터베이스에 저장하는 경우는 거의 없다고 봐도 무방하다.

  • twittler 함수 복습

    • template 태그

      let tweetTemplate = document.querySelector('#tweetTemplate');
      let tweet = document.importNode(tweetTemplate.content, true);
      tweet.querySelector('.name').textContent = item.user;

    • NodeList에 대한 forEach문

  • event 객체

    • 이벤트 객체는 사용자 입력 등의 트리거에 의해 발생한 이벤트 정보가 담기는 객체이다

    • e.target

    • onsubmit

    • onchange

    • onkeyup

    • onmouseover

    • onclick

      • onclick과 addEventListener의 차이

    • event.preventDefault

    • 버튼이 추가 될때마다 새로운 함수를 만드는 것은 비효율 적이다. 이를 동일한 함수를 할당하는 방식으로 해주고 여기에 버튼이 일정 이상 추가될 땐 for 문과 같은 반복문을 이용할 수 있다

  • 자바스크립트 파일 해석 시기

    • body 끝에 추가하는 방법과 head 태그 안에 실행하는 방법의 차이

  • element는 node에 속해있다.

  • text는 node이나 element는 아니다

  • vanila javascript dom manipulation cheat sheet

  • https://gist.github.com/thegitfather/9c9f1a927cd57df14a59c268f118ce86

  • document.importNode

    var node = document.importNode(externalNode, deep);

    deep 노드를 가져올때 노드의 자식 요소들을 포함하여 가져올지 여부

[고차함수]

• higher order function

• 일급객체의 정의

  • 함수 : 일급객체의 한 종류. 함수 또한 데이터 다루듯 다룰 수 있다.
  • 함수의 선언식과 표현식, 그리고 호이스팅.

• 고차 함수

  • 다른 함수(콜백함수)를 인자로 받거나, 다른 함수를 리턴하는 함수.
    • caller(콜백함수를 인자로 받은 함수) 는 조건에 따라 콜백함수의 실행 여부를 결정. 여러번 실행할 수 있다.

• 내장 고차함수

  • forEach
  • find
  • filter
  • map
  • reduce
  • sort
  • some
  • every

• 추상화

• 커링과 클로저

  https://yceffort.kr/2020/03/javascript-currying-closure/

• 선언형 프로그래밍 과 절차형 프로그래밍

[자바스크립트 심화개념]

• 비동기
  • 주요사례
    • 마우스 , 키보드 입력
    • 페이지 로딩
    • 타이머 API
      • setTimeout(callback, millisecond)
      • setInterval(callback, millisecond)
      • clearInterval(timerId)
    • 애니메이션 API (requestAnimationFrame)
    • fetch API, AJAX API
• 함수 메소드
  • call , apply, bind
    • bind를 사용하면 함수의 this값을 영구적으로 바꿀 수 있다. 참고
    • bind를 이용하여 커링을 구현할 수 있다. (필요한 인자를 여러개 중 한개만 하여 bind 함수를 실현하면 커링 함수와 같이 사용할 수 있다)
  • setTimeout 에 콜백함수로 전달되는 함수에서 this는 window를 가리킨다. (기본적으로 window 객체 바인딩). 다른 this 값이 들어가도록 해야할 경우 bind()함수를 이용해야한다.
• 서버요청
• this
  • this의 5가지 패턴

[재귀]

• 구조는 동일하나 더 작은 경우를 해결함으로 문제를 해결하는 방법
• 재귀 사용의 때
  • 주어진 문제가 더 작은 문제로 나뉘어 질 수 있는 경우
  • 중첩된 루프가 많거나 정도를 미리 알 수 없는 경우

[Comment]

@@ 오늘은 코드스테이츠 3,4 주차에 걸쳐 배운 내용에 대해서 복습하는 시간을 가졌다.

DOM 부터 헷갈리는 부분이 많고, 수강 이전 독학했던 이전 챕터들에 비해 버거운 느낌이 들어서 차근차근 urclass 및 제로초 블로그 글들을 리뷰하며 개념을 다시 익히는 시간을 가졌다.

twittler 과제도 리뷰하는 시간을 가졌는데, underbar, recursion에 대해서는 복습하는 시간을 좀 더 가져야 할 것 같다.

내일은 hiring assessments 가 기다리고 있다. immersive 코스를 밟을 준비가 돼 있는지 진단 받는 절차로, 이 과정을 통과 못하게 되면 기수 이동 및 하차가 진행된다.

배운 개념들을 최대한 활용해서 내일 만전을 다 하고 차분하게 임해야 겠다. 난이도가 가늠이 안돼서 좀 두렵지만 스스로도 진단해 볼 좋은 기회이기에 부담갖지 말고 임하되 부족한 부분에 대해서는 솔로 위크를 활용해서 최대한 채워 나가야겠다.