2023.04.03 TIL

열이 나고 오한이 들어 집중을 제대로 하지 못했다. 날이 갈수록 컨디션 관리가 중요한 것 같다.

오늘의 나는 무엇을 잘했을까?

멘토링 시간에 적극적으로 질문했다. 그 결과 실용적인 지식들을 많이 얻을 수 있었고, 프로젝트 진행시 더 이상 시행착오를 겪지 않아도 되는 부분들도 얻은것 같다.

몸이 많이 안좋았는데, 포기하지 않고 오늘 분량을 해냈다. 퀄리티가 많이 좋지는 않아 보이지만 그냥 안한것보다는 낫다고 생각한다.

오늘의 나는 무엇을 배웠을까?

• 반응형 웹 브라우저의 너비가 768px이상일 때는 아래 스타일을 적용하라는 뜻.

  @media screen and (min-width: 768px){
  	style..
  }

• 인터랙티브 자바스크립트 시작하기
  • document.getElementById(’아이디’);
    • 딱 하나의 태그를 선택할 때 사용
    • html에 존재하지 않는 태그를 가져오면 undefined가 아닌 null이 뜬다.
  • getElementsByClassName(’클래스명’);
    • 유사배열 형태로 저장됨다. 클래스명은 중복될 수 있기 때문이다. 정확히는 유사배열의 한 종류인 HTMLCollection 형식이다.
    • 유사배열이라 부르는 것은 splice나 push같은 Array객체의 메서드들은 사용할 수 없기 때문이다.
    • DOM트리 내에 깊이와는 상관없이 코드상 가장 상단에 있는 태그가 먼저 들어간다.
    • 존재하지 않는 클래스명을 넘겨줄 경우 값은 null이 아니고 비어있는 HTMLCollection이 된다.
  • getElementsByTagName(’태그이름’);
    • button, h1, div와 같은 존재하는 태그 이름으로 태그들을 선택한다.
    • 결과 또한 HTMLCollection을 리턴한다.
  • querySelector(’css선택자’);
    • css선택자와 동일하게 파라미터를 받는다. css에 익숙하다면 이 방법도 좋을 것 같다.
    • 해당 선택자를 만족하는 요소들 중 가장 상위의 하나의 요소만 선택된다.
    • 전부 선택하고 싶다면 querySelectorAll()을 사용한다.
    • 존재하지 않는 요소를 선택할 때는 마찬가지로 null을 리턴한다.
  • 이벤트 핸들링
    • 위 메서드들로 가져온 html요소들에는 onclick등의 이벤트 프로퍼티가 기본적으로 있다. 그 프로퍼티에 커스텀된 이벤트 핸들러함수를 할당할 수 있다.
• 브라우저와 자바스크립트
  • 브라우저도 객체다. 바로 window라는 객체로 웹 브라우저를 다룰 수 있다. window.innerWidth, innerHeight등의 프로퍼티에 대한 정보도 얻거나 다양한 메소드를 이용하여 창을 여닫는 등의 조작도 할 수 있다. document객체, console 객체 또한 window객체의 프로퍼티 객체로 들어가 있다. global 객체인것이다.
  • DOM(문서 객체 모델)
    • DOM은 웹브라우저 상에 나타나는 HTML문서 전체를 객체로 표현한 것이다. document객체가 이 웹 문서의 최상단 객체로 엔트리포인트 역할을 한다.
    • DOM의 존재 때문에 우리가 HTML 요소들을 객체처럼 다루고, 자바스크립트로 html 요소들의 객체로서의 프로퍼티나 메서드들을 활용하여 조작하고 자유롭게 다룰 수 있는 것이다.
  • DOM 트리 위와 같이 html태그들의 부모-자식 관계를 나무의 형태에 빗대어서 DOM 트리라고 부른다. DOM 트리에서의 각 요소들은 노드라고 부르고, 인접한 노드의 관계에 따라 부모 노드, 자식 노드, 형제 노드라고 부른다.

    • html태그들은 요소 노드(Element Node), 태그 안의 텍스트들은 텍스트 노드 또는 리프 노드(Text Node, Leaf Node)라고 부른다. 텍스트 노드는 자식을 가질 수 없다.

    • 인접 노드 선택하기(children, parentElement, ElementSibling 프로퍼티)

      myBtn.children[n]  //n번째 자식 노드
      myBtn.firstElementChild  // 첫 번째 자식 노드
      myBtn.lastElementChild  // 마지막 자식 노드
      myBtn.parentElement //부모 요소 노드
      myBtn.previousElementSibling  //이전 형제 노드
      myBtn.nextElementSibling //다음 형제 노드

  • 요소 노드 프로퍼티들
    • innerHTML: 요소 안에 있는 HTML전체를 문자열 형태로 리턴
    • outerHTML: 요소를 포함한 HTML전체를 문자열 형태로 리턴, 값을 할당하게 되면 처음 선택한 요소는 사라지게 된다.
    • textContent: innerHTML과 비슷함. innerHTML의 요소안에 있는 HTML을 제외한 Text만 가져옴. 주의할 점은 textcontent에 html태그를 할당하려 하면 특수문자 텍스트로 취급되어 html태그들이 아닌 텍스트가 들어가게 된다.
  • 요소 노드 추가하기
    • 요소.append: 요소의 마지막 자식노드로 추가한다.
    • 요소.prepend: 요소의 첫 자식노드로 추가한다.
    • 요소.before: 요소의 직전 형제노드로 추가한다.
    • 요소.after: 요소의 직후 형제노드로 추가한다.
  • 노드의 이동과 삭제
    • 요소.remove(): 요소를 삭제한다.
    • 이동하기 → prepend, append, before, after활용
  • HTML 속성 다루기

    • 기본적으로 한 태그의 표준 속성은 객체의 프로퍼티처럼 점 표기법으로 접근가능하다. 하지만 비표준 속성값은 이 방법으로 접근 불가하다. (예: ul태그의 href속성)

    • 요소.getAttribute(’속성이름’); →비표준 속성값도 접근가능

      const ul = document.getElementById('my-ul');
      ul.getAttribute('href');

    • 요소.setAttribute(’속성이름’, ‘값’)

      • 속성을 추가 또는 수정할 수 있다.

    • 요소.removeAttribute(’속성이름’); → 속성 삭제

  • 스타일 다루기
    • 자바스크립트로 DOM 노드의 스타일을 다루는 세 가지 방법이 있다.
    • 첫 번째: 그냥 요소.style.스타일속성 = 원하는 속성값;
      • 주의할 점: 스타일속성은 camelcase, 속성값은 문자열로 넘겨야한다.
    • 두 번째: 미리 특정 클래스에 대한 css를 만들어 놓고
      요소.className = 그 클래스명;
    • 두 번째 방법은 추천하지 않는데, 기존 클래스명이 통째로 바뀌기 때문이다. 기존 클래스명은 놔두고 다른 클래스명만 추가하고 싶을 때는 아래의 세 번째 방법을 쓴다.
    • 세 번째: 요소.classList.add(’추가할 클래스명’);
• 멘토링
  1. 크롬 개발자도구 모바일뷰보드 → show media query에서 내가 지정해준 max-width값들로 한번에 이동할 수 있다. 수동으로 줄여가며 보는 수고를 덜할 수 있다.
  2. caniuse사이트를 이용하면 어떤 css속성이 지원되지 않는지 각 브라우저별로 지원되는 버전등을 한 눈에 볼 수 있다.
  3. css 스타일 적용을 위해서는 id선택자보다 class선택자를 많이 사용한다. id선택자는 자바스크립트에 조금 더 자주 이용된다.

오늘의 나는 어떤 어려움이 있었을까?

몸이 너무 안좋아서 내가 다음에 뭘 해야 할 지 정리도 안된 채로 꾸역꾸역 했다. 컨디션관리가 필요할 것 같다.

내일의 나는 무엇을 해야할까?

• velog TIL 포스팅
• 자소서 써보기
• 위클리 미션 3주차 끄적여보기