📆 2025.04.14 - client‐side JS, DOM, node types [멋쟁이사자처럼부트캠프 프론트엔드13기]

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

• 클라이언트 사이드 자바스크립트란?

  • 웹 브라우저에서 실행되는 자바스크립트 환경
    ECMAScript: 자바스크립트 언어에 대한 표준
    patrick Charollais | ECMA-262 - Ecma lnternational
    

  • DOM(Document Object Model): 웹페이지 제어를 위한 표준

    • https://dom.spec.whatwg.org
    • window.document 등
    • Event

  • BOM(Browser Object Model): 웹페이지 외부의 브라우저 기능 제어를 위한 표준

    • HTML 표준 : https://html.spec.whatwg.org
    • window. navigator: 브라우저와 운영체제에 대한 정보 제공
    • window.location: 현재 페이지의 URL 에 대한 제어 읽기 , 수정
    • window.history: 브라우저의 과거 페이지 이동 정보에 대한 제어 읽기 , 수정
    • alert, setTimeout 등

  • Web APIs: 브라우저가 제공하는 웹 기능을 위한 표준

    • https://spec.whatwg.org
    • XMLHttpRequest: 서버와 통신에 사용되는 객체 (Ajax)
    • Web Storage, Notifications API, WebSocket 등
      
      
    • 1. DOM / 2. BOM / 3. WEB APls
    • 서버 사이드 vs 클라이언트 사이드

      • 🌐 클라이언트 사이드 (Client-side)
        

        • ✅ 정의
          
          클라이언트는 사용자가 직접 보는 브라우저 쪽에서 동작하는 부분이에요.
          즉, HTML, CSS, JavaScript가 브라우저에서 실행되어, 화면에 보이고 사용자의 행동에 반응하는 거예요.

        • ✅ 특징

          • 브라우저에서 실행됨
          • 즉각적인 반응 제공 (예: 버튼 클릭 → 팝업 열기)
          • 주로 UI 처리, 입력 검증, 애니메이션 등을 담당

        • ✅ 예시

          쇼핑몰 웹사이트에서 제품 목록을 보고, "장바구니 담기" 버튼을 누르면 숫자가 올라가는 기능

          → 이건 브라우저에서 JavaScript가 실행된 결과 = 클라이언트 사이드

        ---

      • 🖥️ 서버 사이드 (Server-side)

        • ✅ 정의

        서버사이드는 브라우저와는 떨어진 서버에서 실행되는 코드예요.

        Node.js 같은 백엔드 기술이 여기에 해당돼요. 브라우저가 서버에 요청(request)을 보내면, 서버는 데이터를 가공해서 응답(response)을 돌려줘요.

        • ✅ 특징

          • 서버에서 실행
          • 데이터베이스 조회, 로그인 처리, 파일 저장 등 보안이나 데이터 처리에 강함
          • 사용자는 서버 코드에 직접 접근할 수 없음

        • ✅ 예시

          로그인 버튼을 눌렀을 때, 입력한 이메일과 비밀번호가 서버에 전달되고, 서버가 데이터베이스를 확인한 후 로그인 성공 여부를 돌려주는 것

          → 이건 서버에서 Node.js가 동작한 결과 = 서버 사이드

        ---

        • 🎯 비유로 이해해보기
          | 역할 | 설명 | 비유 |
          | --- | --- | --- |
          | 클라이언트사이드 | 사용자에게 보이는 화면을 꾸미고 반응 | 레스토랑의 메뉴판과 종업원 |
          | 서버사이드 | 사용자의 주문을 처리하고 요리를 제공 | 주방에서 요리를 만드는 셰프와 주방 시스템 |

• DOM(Document Object Model)

  • 문서 객체 모델
  • HTML, XML 등의 문서를 제어 하기 위한 방법을 정의
  • JavaScript로 HTML을 조작할 수 있게 해주는 인터페이스
  • 텍스트 기반의 HTML, XML 문서를 일정한 규칙에 의해 객체로 만들고 이를 이용하여 문서를 제어 특정 요소를 추출 , 삽입 , 삭제 , 이동 등

• 노드의 종류

  노드 (Node)
  DOM 트리구조는 모든 구성원이 각각의 객체로 인식되며 이러한 객체 하나 하나를 노드라고 함

  • 노드의 종류 주로 사용되는 노드

    • 문서노드 (document Node)
    • 요소 노드 (element Node)
    • 속성 노드 (attribute Node)
    • 텍스트 노드 (text Node)

    종류	설명	nodeName	nodeType	nodeValue
    문서 노드	문서	#document	9	null
    요소 노드	태그	태그의 이름	1	null
    속성 노드	요소의 속성	속성의 이름	2	속성의 값
    텍스트 노드	요소의 내용	#text	3	문자열 값

  • 노드 찾기

    • 태그의 id 를 이용하여 노드 찾기
      document.getElementById (id): id 속성값에 해당하는 노드객체를 반환

      const purchases = document.getElementById("purchases");

    • 태그명을 이용하여 노드 찾기
      요소노드 getElementsByTagName(tagName)
      지정한 요소노드의 하위 모든 요소를 대상으로 태그명 (tagName) 에 해당하는 요소노드를 배열로 반환 tagName 에 “*”을 지정하면 모든 요소를 배열로 반환

      const liList = purchases.getElementsByTagName("li");

    • 트리구조를 이용하여 노드 찾기

      • 부모 자식 노드 찾기

        요소노드의 속성	설명
        childNodes	자식 노드가 배열 형태로 저장 ⇒ 유사 배열 객체
        firstChild	첫번째 자식 노드(요소, 텍스트, 주석)
        firstElementChild	첫번째 자식 요소 노드
        lastChild	마지막 자식 노드(요소, 텍스트, 주석)
        lastElementChild	마지막 자식 요소 노드
        parentNode	부모 노드

        const purchases = document.getElementById('purchases'); // id를 추출하는 코드
        const firstItem = purchases.firstElementChild; // 첫번째 자식만 선택함
        const lastItem = purchases.lastElementChild; // 마지막 자식만 선택
        const liList = purchases.childNodes; // 유사배열 객체 추출

        • 형제 노드 찾기

          속성	설명
          previousSibling	바로 앞의 형제 노드(요소, 텍스트, 주석)
          previousElementSibling	바로 앞의 형제 요소 노드
          nextSibling	바로 뒤의 형제 노드(요소, 텍스트, 주석)
          nextElementSibling	바로 뒤의 형제 요소 노드

          const purchases = document.getElementById("purchases");
          const secondItem = purchases.childNodes[3];
          const firstItem = secondItem.previousElementSibling;
          const lastItem = secondItem.nextElementSibling;
          

    • class 속성으로 노드 찾기
      document.getElementsByClassName(className): class 속성값이 className 인 요소 노드의 목록을 반환

      const purchases = document.getElementsByClassName("list")[0];

    • CSS 셀렉터 이용

      • Selector: CSS 에서 사용하는 노드 선택 구문
        • https://www.w3.org/TR/selectors-3/
      • document.querySelector (selector)
        • 지정한 selector 구문에 매칭되는 노드 목록 중 첫번째 노드를 반환
      • document.querySelectorAll (selector)
        • 지정한 selector 구문에 매칭되는 노드 목록을 반환

      var purchases = document.querySelector(".list");
      var purchases = document.querySelector("#purchases");
      var purchases = document.querySelectorAll("ul")[0];

🔗 배웠던 파일

• ex05-01.html 쇼핑목록
• ex05-01-02.js 첫번째 구매 항목 출력(두부)
• ex05-01-03.js 첫번째와 마지막 구매 항목을 출력
• ex05-01-04.js querySelector 이용
• ex05-02.html 숫자 올리기
• ex05-02-01.js 숫자 올리기 JS

❓ 생긴 질문 / 더 알아볼 것

• 오늘은 그래도 아는 내용이라서 수업을 대충대충 들었던 기분이었다 내일은 좀 더 집중해서 들어야지

🔗 참고 자료

• css 선택자 | w3
• 노션 정리 링크