20240110_TIL 13일차

[1] TIL

  1. 개인 과제 피드백

   (1) 파싱

     1) html 엔진 : 파서

     2) 파싱 : 위에서부터 아래로 쭉 읽는 것

     3) DOM Tree가 만들어진 후 Javascript로 html을 제어할 수 있음.

     4) 제어권  

      a. Html 파서 -> download > JS engine 제어권 얻음.

      b. 초기에 null -> html 파서 제어권 되찾고 -> DOM tree

      

    (2) semantic tag

      1) semantic : 의미론적인

      2) 검색 엔진이문서를 쉽게 분석하려면 쉬운 태그로 코드 작성

       a. snake case : all_movie_list  => 파이썬

       b. camel case : allMovieList    => Javascript 

       c. kebab case : all-movie-list  => css  

   

     (3) event

       1) onclick : eventhandler attribute 방식으로 할당

         a.  [메모리 측면]  onclick <<< event handler : addEventListener

           => 한 번만 써주면 되기 때문에

       2) 이벤트 위임 :하위 요소에서 발생한 이벤트를 상위 요소에서 대신 처리

        a. 이벤트 전파가 위에서부터 내려옴

        b. Target phase에서 event handler를 처리함 

        c. event bubbling : 이벤트 전파

          Event-phase : 1, 2, 3

          1 : capturing

          2 : target phase에서 targeting

          3 : bubbling

        3)  addeventhandler의 요소

         a. event-type

         b. eventhandler 함수

         c. capturing 여부 : boolean => bubbling을 capture해서 eventhandler를 실행시킬 것인지 

               Yes => true, No => false

         d. event.target : 이벤트가 발생한 요소

            event.curretTarget : 이벤트 핸들러가 등록되어있는 상위 요소

 

      (4) 기타 기본적인 요소

        1) reduce(callback 함수, “” )

           “” : 누적값의 초기값

        2) filter : true or false boolean type 

        3) 삼항연산자 : if 문을 간단하게 표현

        4) .focus : 깜빡깜빡거리는 method

        5) innerHTML : 문자열

        6) .join : 배열을 문자열로 만들어주는 method

        7) form 태그

         -  submit event가 발생하면 기본적으로 새로고침이 발생함.

         -  event.preventDefault()로 새로고침을 막아줌

         -  Default : 기본 동작

        8) async : 항상 promise 반환

         - 함수는 언제나 return 값이 있음. 없으면 undefined

         - await 뒤에도 항상 promise