220422

KEEP

• 반응형 랜딩 페이지 Open Graph 정보 추가
• 자바스크립트(Udemy The Web Developer Bootcamp 2022)
  • Document Object란, 페이지의 모든 콘텐츠를 객체로 만들어서 담고, 이를 이용해서 JS로 HTML과 CSS에 접근할 수 있게끔 한다. 또한 수많은 메서드를 가지고 있다.
  • getElementsByTagName과 getElementsByClassName은 HTML 컬렉션을 반환하는데, 이는 선택된 HTML 요소(element)를 모아놓은 것.
  • 반면 querySelectorAll은 HTML 컬렉션이 아닌 NodeList를 반환
  • innerText는 선택된 요소의 내부 텍스트만 가리키고, innerHTML은 텍스트뿐만 아니라 태그를 포함한 모든 요소를 가리킨다. textContent는 innerText와 비슷하나 display: none 등을 이용해서 사용자의 눈에 보이지 않는 요소까지도 전부 선택한다.
  • getAttribute는 JS를 거치지 않고 HTML을 그대로 가져온다.
  • 직속 부모 요소는 항상 하나뿐이지만, 자식 요소는 여러 개일 수 있다.
  • nextSibling은 해당 요소의 바로 다음 무언가(텍스트, 공백 등의 노드 포함)를 반환하지만, nextElementSibling은 노드 등을 무시하고 다음 element만을 반환한다.
  • append는 appendChild와 달리 하나 이상의 요소를 추가할 수 있고, 노드가 아닌 일반 텍스트도 추가할 수 있다.
• 리액트(Udemy React 완벽 가이드)
  • 리액트의 장점은 웹 페이지를 모바일 앱처럼 매끄럽게 운용할 수 있게 해준다는 것. 페이지 전환 시마다 HTML 파일을 불러올 필요가 없기 때문. 또한 선언적 방식을 이용해서 바닐라 자바스크립트처럼 작업의 모든 단계를 하나하나 설정할 필요가 없어서 코드 양도 적고 유지 및 보수가 쉽다.
  • 그러나 단점은 컴포넌트 중심이기 때문에 내장 기능이 많지 않아 필요할 때는 서드 파티 라이브러리를 설치해야 할 때가 있다.
  • 컴포넌트란 쉽게 말해 HTML과 CSS와 JavaScript를 묶은 단위이다. 컴포넌트를 사용하면 같은 내용의 코드를 반복할 필요가 없어서 재사용성이 올라가고, 코드를 작은 단위로 분리하여 관리가 쉽다.

---

PROBLEM

• 뉴스레터가 한가득 밀렸다!
• 알고리즘 공부도 밀렸다!

---

TRY

• 일단 리액트부터 배우고 나서
  • 리액트 강의 1회독 하면 그때부터 다시 준비하자.