20220504 배울 것은 많고 시간은 한정적이다.

💭 회고

시간 분배를 잘못함

매일매일 알고리즘 풀이를 하기로 마음먹고 계획을 했지만 기초적으로 알아야 할 웹 수업의 하루 목표치를 달성하지 못해서 미루고 미뤄진다. 나 스스로에 대한 객관화가 되지 않거나 해당 수업의 목차를 제대로 확인하지 않고 세워서 엉터리 계획이 세워지는 것 같다. 스스로 할 수 있는 분량에 조금 더 힘든 정도로 목표를 설정하고 점진적으로 늘리는 게 맞는 방법인 걸 알지만 스스로 적용을 하지 않고 있다는 것을 또다시 인지하게 되었다. 조금 더 스스로를 객관적으로 바라보고 생각한 것을 적용할 필요성이 있는 것 같다.

빨리 배운 것을 써보고 싶다.

오늘은 인터렉티브 자바스크립트에 대한 강의 반까지 진도가 나갔다.

정적인 웹 페이지에 자바스크립트를 활용해 동적으로 웹페이지의 요소들을 바꾸는 코드와 원리를 이해하니 재미있고 빨리 만들어 보고 싶은 마음이 들었다. 적당히 2주 뒤에 기초를 끝내고 만들어 볼 수 있으려나?

🙄Problem & 🧐Solution

P - 금일 해야 될 일에 대한 시간 관리가 제대로 안된다.

S - 여러 가지 밸런스 있게 공부하기 위해서 각각의 할 일에 최소 마지노선인 시간이 지나면 다음 공부로 넘어간다. 주어진 시간에 해결하고 남은 시간에 달성하지 못한 목표를 마무리하자.

🔻오늘 한 일

• 자바스크립트 심화[코드잇]
  • 인터랙티브 자바스크립트(0%-52%) 8시간 35분
• 개발관련 커뮤니티 2시간
• 알고리즘 - 백준 기초 1단계 ?1시간
• 모던 자바스크립트 deep dive 정독
  • 데이터 타입

배운 것

• 자바스크립트로 태그 다루기❗
  • 왜 getElementById 메서드는 존재하지 않는 id 값으로 입력시 null이라는 값을 반환하고 getElementsByClassName 메서드는 존재하지 않는 class 값을 입력시 undefined를 출력 할까? id는 const나 let 키워드를 쓰고 class는 var 키워드를 쓰는 건가?
  • 유사배열(Arry-Like Object)
    • 형태는 배열과 유사하게 생겼지만 배열의 매소드를 사용 할 수 없는 배열
    • 사용이유?
      • 배열의 메소드를 막고 싶거나 특정한 배열의 매소드를 만들고 싶을 때 활용
      • 특징 4가지
        • 배열 매소드 사용 불가, indexing 가능, length 프로퍼티 사용가능, Array.isArray(’유사배열’) 은 false
    •  
  • CSS 선택자 사용법
    • id 사용시
      • querySelector(#~)
    • class 사용시
      • querySelectorAll(.~)
  • getElemnt vs querySelector
    • 한 메서드로 id와 class 둘 다 사용 할 수 있는 querySelector가 더 간편할 듯 하다.
• 브라우저와 자바스크립트
  • 윈도우 객체❗
    • console과 document객체가 사실은 윈도우의 내장 객체라니!!!
    • 위도우 객체는 자바스크립트의 모든 객체와 내장함수를 포함하기 때문에 어느곳에서나 윈도우 객체에 접근이 가능하다!
    • 자바스크립트 안에 윈도우 객체가 있고 모든 자바스크립트의 객체와 내장함수는 윈도우 객체에 포함하기 때문에 자바스크립트 > 윈도우 객체> 자바스크립트 내장객체 함수 이렇게 되나?
  • DOM(Document Object Model)
    • HTML 문서를 객체로 표현한 것(자바스크립트로 웹 문서를 다룰 수 있게 도와 주는 객체)
  • log 와 dir
    • log는 html형식의 값을 dir은 객체의 속성을 출력함
  • 내부 HTML 코드 접근법
    • element.innerHTML
    • element.outerHTML
    • elemnt.textContent
  • 노드 삭제와 이동 메서드
    • remove()
    • prepend()
    • append()
    • before()
    • after()