[인프런 워밍업 스터디 클럽 1기] FE 1주차 발자국

[인프런 워밍업 스터디 클럽 1기] FE 1주차 발자국

임하스 15일 전

시작

공부하며 개인적으로 중요하다 생각하는 부분과 복습할 내용, 헷갈리던 부분들을 정리해보았다. 프레임워크와 라이브러리에 의존적이던 나를 되돌아보는 시간이었던 것 같다.

 

 

정리

Console 객체

  • console.log(...data: any[]): void 로그

  • console.error(...data: any[]): void 에러

  • console.warn(...data: any[]): void 경고

  • console.table(tabularData?: any, properties?: string[]): void 객체 데이터를 테이블로 표기

  • console.time(label?: string): void, console.timeEnd(label?: string): void 사이에 코드를 입력하여 속도 측정 가능. label을 넣어서 무엇에 대한 측정인지 설명을 달 수 있음

  • console.count(label?: string): void, console.countReset(label?: string): void 호출된 횟수 반환
    (특정 데이터가 몇 번 호출됐는지)

 

변수의 참조 범위(scope)

  • 자바스크립트는 블록 레벨 스코프

 

호이스팅

  • var, let, const 셋 다 호이스팅 됨

  • 근데 var는 선언과 undefined로 할당되기 때문에 참조가 가능하고, let과 const는 선언만 되고 할당되지 않음

 

자바스크립트 타입

  • 원시타입은 콜스택에 저장(불변성을 가짐)

  • 참조 타입 값은 힙에 저장

    • 값에 대한 주소는 콜스택에 저장

  • 원시타입 : Boolean, String, Number, null, undefined, Symbol

  • 참조타입 : Object, Array, functuon, classes, …

  • 자바스크립트는 동적 타입이다

    • 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당) 가능

  • 배열(Array)은 typeof를 쓰면 obejct로 나오기 때문에, Array.isArray(변수) 메서드를 통해 배열인지 확인할 수 있다

    • 배열이 object 타입이라고 나오는 것이 잘못된 것이 맞는데, 공식에서도 이것을 인지하고 있지만 당시에 이미 object로 처리하여 개발한 곳들이 너무 많아서, 혼란을 일으키지 않기 위해 그대로 object로 두기로 했다고 한다

 

자바스크립트 타입 변환

  • String(변수), 변수.toString() 차이

  • Number(변수), parseInt(변수) 차이

  • 자바스크립트가 자동으로 변수 타입을 변경하는 기준(ex. string 타입 + number 타입 ⇒ string 타입)

 

Loops

  • for … in : 객체의 속성을 따라 반복 ⇒ 객체 순회

    • 객체의 열거 가능한 속성들을 반복할 때 사용됩니다.

    • 객체의 속성들을 순회하며 각 속성의 이름(키)을 반환합니다.

    • 일반적으로 객체의 속성을 순회할 때 사용되며, 배열을 순회할 때는 사용하지 않는 것이 좋습니다.

  • for … of : 반복 가능한 객체를 반복 ⇒ 배열 순회

    • 반복 가능한(iterable) 객체(배열, 문자열, 맵, 셋 등)의 요소들을 반복할 때 사용됩니다.

    • 각 요소의 값을 반환합니다.

    • 객체의 속성을 직접 열거하지 않고 요소들을 순회할 때 사용됩니다.

  • forEach() : void 타입, for 루프는 await과 함께 작동하지만 얜 아님.

  • map() : return 필요

  • for 루프가 forEach보다 빠름

 

Window 객체

  • **window 객체**

    • 브라우저에서 제공하는 객체

    • 브라우저의 창(window)을 나타냄. 브라우저 창에 대한 정보를 알 수 있고, 제어도 가능

    • var 키워드를 통해 변수를 선언하면 window 객체의 프로퍼티가 됨

    • let과 const는 window 객체 내부의 블록에서 선언된 것 → 전역 객체의 프로퍼티로 활용될 수 없음

    • DOM(Document Object Model)

      • 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해주는 객체 모델

      • window.document

    • BOM(Browser Object Model)

      • 웹 브라우저와 상호작용하는 데 사용되는 객체 모델

      • window.location, window.history, window.navigator 등

      • 속성

        • window.innerWidth 속성

          • 브라우저 창의 내부 너비

          • 컨텐트 영역의 너비

          • 콘솔창/스크롤 바가 있는 경우에는 이를 제외한 영역의 너비

        • window.outerWidth 속성

          • 브라우저 창의 외부 너비

          • 창의 테두리를 포함한 전체 외부 너비

        • **window.scrollX 속성**

          • x축 scroll의 시작점 좌표

        • **window.scrollY 속성**

          • y축 scroll의 시작점 좌표

        • **window.location 속성**

          • 현재 창의 URL을 나타내는 객체

        • **window.history 속성**

          • 브라우저의 세션 기록을 조작하고 탐색할 수 있는 객체

        • window.location.href vs window.history.push()

          • 일반적인 이동은 history.push(), 이동과 함께 새로고침이 필요한 경우는 window.location.href 추천

          공통점 : 페이지 이동 location.href history.push() HTTP 요청 수행 O X 새로고침 O X Applcation 상태 유지(ex. 리액트의 state) X O 용도 현재 페이지의 URL 제어 브라우저의 탐색 히스토리 조작

        • **window.navigator 속성**

          • 브라우저의 정보와 기능을 제공하는 객체

          • 주로 브라우저의 종류, 버전, 운영 체제, 언어 설정 등을 확인하고, 이에 따라 웹 애플리케이션을 조건부로 실행하는 데 사용함

  • 웹 페이지 빌드 과정(CRP, Critical Rendering Path)

    1. HTML → DOM Tree

    2. CSS → CSSOM Tree

      • 1, 2

        • 렌더 엔진이 문서를 읽어들여 파싱

        • 어떤 내용을 페이지에 렌더링할 지 결정

        • 비용이 크지 않은 작업

    3. DOM Tree + CSSOM 결합 → Render Tree

      • 브라우저가 DOM과 CSSOM을 결합

      • 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리 출력

    4. Layout(reflow)

      • 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산

    5. Paint

      • 실제 화면에 그리기

 

DOM

  • 노드 타입

    • Element, Attribute(deprecated), Text node, Comment node, Document itself, Doctype

  • 모든 타입의 노드에 적용 가능한 탐색 프로퍼티

    • parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling

  • 요소 노드(Element 타입)에만 적용 가능한 탐색 프로퍼티

    • parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling

  • 자식 노드

    • 바로 아래의 자식 요소

  • 후손 노드

    • 중첩 관계에 있는 모든 요소

    • 자식 노드와 그 아래 자식 노드 모두 포함

  • **element.innerHTML**

    • html까지 출력됨

  • **element.innerText**

    • **innerText**는 해당 요소의 텍스트 콘텐츠만을 반환

    • HTML 태그를 고려하여 렌더링된 텍스트를 반환함(공백을 하나로 처리)

    • CSS로 display: none; 또는 **visibility: hidden;**으로 숨겨진 요소의 텍스트는 반환하지 않음

    • **innerText**는 보다 시각적으로 화면에 나타나는 텍스트만을 반환하며, 렌더링된 결과를 고려하여 처리됨

  • **element.textContent**

    • **textContent**는 해당 요소의 모든 텍스트 콘텐츠를 포함하여 모든 하위 요소의 텍스트도 포함하여 반환

    • HTML 태그를 무시하고 텍스트만을 고려함. 즉, HTML 구조를 고려하지 않고 텍스트만을 처리

    • HTML 태그의 텍스트도 그대로 반환되며, 스크립트에서 태그를 제거할 필요가 없음

    • **textContent**는 보다 일반적인 텍스트 콘텐츠를 반환하며, 숨겨진 요소의 텍스트도 포함될 수 있음

  • **element.childNodes**

    • text 노드가 포함된 NodeList 반환

    • text 노드 : line break(엔터, 한 칸 띄움) 포함하여 반환

    • 배열 같아 보이지만, 유사 배열 객체인 컬렉션 타입

    • 컬렉션 타입 특징

      1. 배열에서 사용하는 메서드를 사용할 수 없음

      2. 배열의 반복 for … of, forEach() 사용 가능 (for … in 불가능)

  • **element.children**

    • children element nodes 반환

    • text 노드도 포함

 

DOM 제어

  • parentNode.appendChild(node) : node 추가

  • parentNode.removeChild(node) : node 삭제

  • parentNode.replaceChild(newNode, oldNode) : oldNode를 newNode로 대체

 

Event Listener & Event 객체

  • 이벤트를 등록하는 방법

    1. 자바스크립트 코드에서 프로퍼티로 등록 (ex. onload)

    2. HTML 태그에 속성으로 등록 (ex. onClick)

    3. addEventListener 메서드 활용

      element.addEventListener(이벤트명, 실행할 함수명, 옵션)

  • Event 객체

    • event.clientY : 브라우저로부터의 마우스 이벤트가 발생한 거리 Y 좌표

    • event.offsetY : 요소로부터의 마우스 이벤트가 발생한 거리 Y 좌표

    • event.target : 실제 이벤트가 시작된 타겟 요소

    • this 또는 event.currentTarget : 핸들러가 할당된 요소

 

Event 종류

  • UI 이벤트

    • load문서나 객체가 로드 완료 되었을 때 발생

    • change객체의 내용이 변동되거나 focus를 잃었을 때 발생

    • resize객체의 크기가 바뀌었을 때 발생

    • scroll스크롤바를 조작할 때 발생

    • error에러가 발생했을 때 발생

  • 키보드 이벤트

    • keydown키를 눌렀을 때 발생

    • keyup키를 눌렀다 뗐을 때 발생

    • keypress사용자가 누른 키의 문자가 입력되었을 때 발생

  • 마우스 이벤트

    • click객체를 클릭했을 때 발생

    • dblclick객체를 더블클릭했을 때 발생

    • mousedown마우스를 클릭했을 때 발생

    • mouseout 마우스가 요소 밖으로 나갔을 때 발생 (자식 요소에 대해서도 이벤트를 처리함)

    • mouseleave마우스가 요소 밖으로 나갔을 때 발생 (자식 요소에 대해서는 이벤트를 처리하지 않음)

    • mouseover 마우스가 요소 위로 올려졌을 때 발생

    • mousemove마우스가 움직였을 때 발생

    • mouseup마우스에서 손을 뗐을 때 발생

  • 포커스 이벤트

    • focus객체에 focus가 되었을 때 발생

    • blur객체가 focus를 잃었을 때 발생

  • 폼 이벤트

    • inputinput, textarea 요소 값이 변경되었을 때 발생

    • changeselect box, check box, radio button의 상태가 변경되었을 때 발생

    • select텍스트를 선택했을 때 발생

    • reset리셋 버튼을 눌렀을 때 발생

    • submit사용자가 버튼키 등을 활용해 폼을 전송할 때 발생

    • cut/copy/paste사용자가 폼 필드의 콘텐츠를 잘라내기/복사/붙여넣기했을 때 발생

  • 동일한 요소에 이벤트가 적용되어 있을 때, 이벤트 발생 순서

    • keydown → keypress → keyup

    • mousedown → mouseup → click

  • 이벤트의 3단계 흐름

     

    1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계

    2. 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계

    3. 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

 

Event Bubbling

  • 이벤트 버블링이란, 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로(bubble up) 전달 되는 것을 의미함

  • 타깃 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생

  • 3번 요소, 2번 요소, 1번 요소에 이벤트 핸들러가 있다면, 3번 요소 핸들러 → 2번 요소 핸들러 → 1번 요소 핸들러 순으로 실행됨

  • event.stopPropagation() 메서드를 활용하여 버블링을 중단하면 부모 요소(상위 요소)의 핸들러는 호출되지 않음

 

Event Capturing

  • 이벤트 캡처링이란, 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 의미함

  • addEventListener() 메서드의 두 번째 인수에 { capture : true } 옵션을 넣어주면 캡처링 과정을 확인할 수 있음

 

이벤트 위임 (Event Delegation)

  • 하위 요소의 이벤트를 상위 요소에 위임하는 것을 의미. 즉, 하위 요소의 이벤트를 상위에서 제어함

  • 동일한 기능을 가진 요소임에도, 추후에 코드를 통해 추가된 요소일 경우 이벤트 리스너를 다시 등록해줘야 하는 번거로움이 있음 → 이벤트 위임을 활용하여 해결할 수 있음

  • 하지만 주의할 점이 한 가지 있음. 상위 요소에 등록된 이벤트 핸들러가 하위 요소에 있는 요소에 대해서만 동작하도록 설정해야함. 이렇게 하지 않으면 상위 요소의 아무 곳이나 클릭했을 때도 이벤트가 발생할 수 있음

  • 하위 요소가 버튼이라고 쳤을 때, 이벤트 핸들러에서 클릭된 요소가 버튼인지 확인하는 로직이 필요함

 

 

회고

역시 기본기가 가장 중요하다는 것을 다시 느꼈다. React를 쓰며 state로 인해 자동으로 업데이트 되는 화면에 익숙해졌던 것 같다. 프레임워크와 라이브러리에 대한 의존 없이도 스스로 구현해낼 수 있도록 연습하는 것이 좋겠다.

 

 

댓글을 작성해보세요.