1. 추상화와 일반화

• 추상화는 코드들을 바로 사용하며 떠올릴 수 있게끔 하는 나의 생각을 말한다.
• 일반화는 그 추상화된 것을 어떤 상황에서든 변수들을 사용해 적용시킬 수 있게 되면 된다.

2. CRUD

• 내가 이 컴퓨터 언어를 알고 있는가? 를 알고 싶을때 이것이 다 되는가? 를 보면 된다.
  • Create
  • Read
  • Update
  • Delete

3. addEventListener

addEventListener('click, () => {
    console.log("hellow world");
})

• 약간 최신 메소드, 이벤트를 재활용할 수 있게 해 준다!

4. 이벤트

• 이벤트의 타깃 => 이벤트가 발생한 곳의 주소 (target) => currentTarget 이 있으니까 진짜 target을 정확히 해줘야 함. 아니면 그 자식들이 싹 다 실행됨.
• DOM도 객체이니까 참조 자료형인걸 생각한다.

계속 써봐야 늘 것 같다. 개념은 알겠다.
계발자 도구와 친해지는 것이 좋겠다. 몹시 불편하다.
알고리듬 문제도 좋지만, 조금은 재미있다고 생각되는 것들을 위주로 배우면서 필요한 부분을 알아가는 것이 더 좋을 것 같다. 마구 때려 넣으면 역시 지치긴 한다.
그렇다고 알고리듬 문제가 싫은 건 아니지만 피곤함이 차원이 다르다.

1. DOM(Document Object Model)

• 별다른 의미가 없는 문자열 같은 정보를 HTML 이 알아들을 수 있도록 바꿔주는 것이다!(parse) => 이걸 Node로 한다
• 그래서 스트링이 의미가 생겼으니 하나하나 다 쪼개버린다. 심지어 빈칸까지 자른다.
• 자바스크립트는 원하는 요소를 '조작' 하는 것에 의의가 있으니까, DOM은 의미 있는 부분으로 잘라서 선택을 해주는 역할을 담당하게 된다.
• 예시를 들면, 이렇게 쓸 수 있다.

console.log(atts.getAttribute('style'));

• 왜 body의 마지막에 넣나 :
  • html로 뼈대를 짜고 그 위에 기능을 넣는 것이 script이다. html은 script를 만나면 기능을 멈춘다. 그러므로 틀이 다 짜인 body를 넘어서 script가 들어가는 것이 옳다.
• 이 정도는 알아두자 '노드 프로퍼티'
  • childNodes
  • firstChild
  • lastChild
  • parentNode
  • previousSibling
• 이정도는 알아두자 '노드 메서드'
  • appendChild
  • renoveChild
• 이 정도는 알아두자 '도큐먼트 메서드
  • document.createElement()
• 이 정도는 알아두자 'HTML 엘리먼트 프로퍼티'
  • innerText
  • innerHTML
  ! : 기능은 해석해 보면 알 수 있다! 단어와 기능을 연결 지어 외우려고 하지 말고, 일단 보자!

2. 상속

• 부모는 자식에게 '상속'을 해 줄 수 있다.
• HTML이 '트리 구조'로 되어 있기 때문에 윗단계의 부모가 자식에게 상속이 가능하다.

3. DOM을 이용해 HTML의 구조를 확인하는 법

• console.dir : console.log 와 다르게 DOM을 객체의 모습으로 출력한다.
• 그래서 간단하게 어떠한 태그를 찾고 싶으면 document. 부모 태그. 자식 태그 순으로 다 찾을 수 있다.

4. DOM 사용 시 주의할 만한 사항

• 이벤트 속성에 이벤트 핸들러를 등록할 때, 함수 그 자체를 써야 한다. 실행한답시고, ()를 넣으면 안 된다!
• value 값으로 여러 가지 엘리먼트의 '입력값'을 얻어 낼 수 있다.
• classList 쓸 때,.(닷) 안 찍고 그냥 넣어도 된다. 이미 클래스에 대해 다루고 있다고 이름이 설명하고 있다.

5. document node

• HTML 문서 전체의 정보를 가진 녀석
• document. 바디, 헤드, 타이틀 같은 큰 태그들 : 바로 접근 가능
• document.querySelector : 한 태그 바로 찍어버림

6. HTML Element Object Propperties and Methods

• HTML Element Object : HTML의 요소 전체에 정보를 가진 녀석
• createElement()
• tagName
• getAttribut()
• setArrtibut()
• hasAttribut()
• removeAttribute()
• classList

　결론 : DOM은 정말 흥미롭다, 유저와 의사소통 혹은, 자바스크립트의 반응까지 필요하고 원하는 곳에 넣고 빼고, 다 한다!
그래서 사실 진짜 중요한 것은, '내가 원하는 곳에 접근하려면 어디에서 어떤 값을 빼내야 하는가?'이다.
그다음에 중요한 것이 DOM의 상태를 조작하면 되는 것이다!
　여담 : 그래서, 다양하고 최신화된 명령들을 받아 내려고 하다 보니, 구형 브라우저들은 알아먹지 못하는 경우가 있다. 이때 필요한 것이 jQuery 이다. 그 브라우저가 알아먹지 못 하는 명령을 알아들을 수 있는 대체 명령으로 바꿔 주는 이쁜 짓을 한다. 그래서 명령이 하도 많아서 무겁고, 많은 이들에게 널리 널리 오랜 기간 '사랑받아(퇴물 취급이 없지 않다 카더라...)' 왔다.
　여담 2 : DOM 은 충분히 안 직관적이다. 걱정마라 '리 엑트'가 도와준다고 한다. 오늘은 아니야... 흑흑

1. spread와 rest

• spread : 그 전의 남아 있는 '모든 인자'를 하나의 배열로 펼쳐서 가져온다. 즉, '하나인 값을 여러 개의 요소로 펼쳐준다' 정도의 spread의 의미를 생각하면 될 것 같다. 대신, 따로 매개변수가 있다면 따로 남겨놓고 가져오게 된다.
• rest : 그 전의 남아 있는 '모든 요소'를 하나의 배열로 합쳐서 가져온다. 즉, '여러개의 요소를 하나의 값으로 합쳐준다.'는 느낌.
  • 왜 씁니까? : 함수의 파라미터 안에서도 사용될 수 있어서, 함수의 파라미터가 뭐가 올지 모르는 경우애도 rest를 사용하여, 가져와서 처리할 수 있다.
• 그래서, 그들을 하나씩 개별적인 변수에 담을때, 하나하나 요소를 정해서 담아 주거나, 혹은 큰 배열이나 객체 덩어리도 하나로 담을 때 그 각각의 요소들이 따로 담겨있게 할 수 있어서 '구조 분해 할당'이라고 한다.

2. 문자열과의 계산

• 문자열 + 무언가 다른 요소들 : 문자열과 어떠한 것들을 더해도 뒤에 나올 것을 '문자열' 타입으로 바꿔서 더한다.
• 가령, '1' + true 같은 상황도 '1true' 로 만든다.

3. typeof function

• object 일꺼라고 생각했지만 function 도 타입이다!
• array와 객체(object)만 조심하면 더 좋을 듯하다.

정답은 다 쓰여있다고 하였거늘...
진짜다. 영어라고 대충 읽지 말고 똑바로 읽어 보자.
기본적인 개념은 대충 잡혀있는데 다양하게 적용할 수 있는 방향으로 생각해 보자.
CLI로 npm, git 사용법을 똑바로 익혀야 한다. 아니면 곧 후회할 것 같다.

1. 깨끗한 코드 작성하기

• 깨끗한 코드라면, 다른 설명 없이 코드만 읽어도 '아... 이런 기능을 하고 이런 이유로 코드를 작성했는데 작동도 잘하는구나!' 하고 몇 달 뒤, 혹은 다른 사람이 보았어도 이해가 가는 코드.
• 첫 번째 팁 : 누구나 사용하는 이름을 쓰자. 함수명은 동사를 쓰자.
  • 함수는 하나의 역활만 해야 한다.
  • 그걸 동사로 적어서 그 일만 하는 것을 강조하자.
  • 만약 하나의 함수가 두 가지 일을 하면? 쪼개자.
• 두 번째 팁 : 함수 안의 인수는 3개 정도가 적당하다.
  • 더 많은 인수는 객체로 묶어주자.
• 세 번째 팁 : boolean 인수는 많이 사용하는 것을 추천하지 않는다.
  • if와 else if로 부수적인 예외 사항을 줄이자. boolean 은 유용한 만큼 예외 사항도 많이 만든다.

2. Indentation (들여 쓰기)

• 가독성의 시작이다. 일단 보이지 않으면 클린 코드고 뭐고 쓸모가 없다.
• 한번 2칸이든 4칸이든 띄어쓰기를 시작했다면, 그 규칙으로 끝까지 가라.
• 부모와 자식의 관계를 설정할 때, 부모보다 아래 줄에, 그리고 설정한 들여 쓰기 한 만큼 더 들어가서 자식을 써주자.
• 스페이스바 2칸이냐, 스페이스바 4칸이냐, Tab 한 번이냐 로 나눠서 대부분 쓴다.

3. 인라인 style을 쓰고 있다면?

• 가서 뒤통수를 쳐줘라. 유지 보수 불가능에 가깝다.

css로 다 분리하자.

그놈의 오타를 줄이는 것이 포인트.
그러려면 일단 들여 쓰기부터 똑바로 하자.