[TIL] Day 6

HTML (Hyper Text Markeup Language) - 문서의 의미와 전체 구조를 담당

CSS - 문서의 표현을 담당

HTML5 -

• 영성과 음성을 처리하기 위한 멀티미디어 요소가 추가 -audio video ccanvas
• 구조적인 요소가 추가. - header, nav, article, section, aside, footer ...
• 표현을 담당하던 태그가 삭제되고 의미를 담은 태그가 추가. s -> del, b-> strong ...

  주의할 점

1. 태그마다 기본 스타일이 있다 ex) ul 쓰면 점생기는거
   • CSS Tools: Reset CSS 기본 스타일 지워줌
2. 브라우저마다 기본 스타일이 있다 ex) 사파리 크롬 등이 서로다른 기본모양
   • Normalize.css 브라우저마다의 기본 css를 동일하게

CSS -

• 가장 최신버전은 CSS3
• 어디에 어떤 어떻게 로 구성

  selector{
  property value
  ...
  }

  어디에 selector 어떤 perperty 어떻게 value

CSS 적용방법 세가지

• 인라인, style태그, css파일 추가
  css 예시들

DOM 구조 -트리구조

• 문서 노드
  • 최상위 노드, 돔트리의 시작점
• 요소 노드
  • HTML 태그 그자체 문서 구조를 그대로
• 속성 노드
  • 태그에 정의되어있는 속성들
• 텍스트 노드
  • TEXT 표현

DOM 선택하기

• .getElementById : 요소 노드를 id를 찾음 같은 id 존재시 가장 먼저 찾은 id
• .getElementsBycClassName : 요소 노드를 class로 찾음 일치하는 모든 요소 반환
• .getElementsByTagName : 요소 노드를 태그이름으로 , 일치하는 모든 요소 반환
• .querySelector : 요소 노드를 CSS Selector 문법으로 찾는다. 제일먼저 찾은 요소 하나 반환
• .querySelectorAll : CSS Selector 문법으로 찾는다. 일치하는 모든 요소 반환
• window.[id] : window 객체를 통해 찾기도 가능, 여러개라면 리스트로 반환.

DOM 탐색

• parentNode : 선택한 요소의 부모 노드 반환
• firstElementNode : 선택한 요소의 자식 요소 노드중 첫 번째를 불러옴 없으면 null
• children : 선택한 요소의 모든 자식 노드 반환
• nextElementSibling : 선택한 요소의 다음 형제 요소 노드 반환 없으면 null
• previousElementSibling : 선택한 요소의 이전 형제 요소 노드 반환 없으면 null

Virtual DOM

DOM 내부의 내용 수정시 새로 구조를 만들게 되는데
여러개의 DOM을 조작하게 된다면 바뀔 때마다 새로 구조 생성 -> 성능 느려짐
-> Virtual DOM 이라고 가상으로 만들어 두고 변경되는 부분만 새로 그려보자!
해서 나온것

평가? 일급? 일급 함수 고차함수?

평가

• 코드가 계산되어 값을 만드는 것
  • ex) 1+2 했을 때 3이 되는 것, 평가가 언제 이루어 진다~

일급

• 값으로 다룰 수 있다.
• 변수에 담을 수 있다.
• 함수의 인자로 사용될 수 있다.
• 함수의 결과로 사용될 수 있다.

일급 함수

• 함수를 값으로 다룰 수 있다.
• 조합성과 추상화의 도구 -조합성 덕분에 고차 함수가 가능해!

JS 에서 함수는 일급이다

• 변수에 함수를 값으로 담을 수 있다.
• 함수안에 함수가 인자로 들어 갈 수 있다.

함수가 일급이기 때문에 함수형 프로그래밍이 가능하다

고차함수

• 함수를 값으로 다루는 함수 - 함수가 일급이니까!
• 함수를 인자로 받아서 실행하거나
• 함수를 만들어 리턴이 가능하다.

이터러블 / 이터레이터 / 이터러블/이터레이터 프로토콜 / 제너레이터

• 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]() 메서드 를 가진 값
• 이터레이터 : {value , done } 객체를 리턴하는 next() 메서드 를 가진 값
• 이터러블/이터레이터 프로토콜: 이터러블을 for...for, 전개연산자 등과 함께 동작하도록한 규약
• 제너레이터: 이터레이터이자 이터러블을 생성하는 함수
  • 쉽게 이터러블한 애 만들어 주는 애 => 제너레이터
  • 순회할 수 있는 값을 만들 수 있다.
  • 어떠한 값이든 순회 할 수 있는 형태로 만들어 준다.

    기본적인 제너레이터 구성

    function *gen(){
      yield 1;   //next() 할때마다 나옴
      if (false) yield 2;  //하면 2 생략가능
      yield 3;
      return 100; //가장 마지막에 done 할때 나오는값 설정가능
    }

제너레이터의 yield라는 단어가 뭘까 라는 생각이 들어서 찾아보니 생산하다라는 뜻을 갖고 있었다. next() 마다 하나씩 생산한다라고 생각해도 되지않을까??

DOM, for of , 전개 연산자( [...a] ) , 구조 분해, 나머지 연산자 등 JS에서는 많은 기능들이 이터러블 / 이터레이터 프로토콜을 따른다.

마치며

오늘은 HTML, CSS 기본적인 부분과 DOM 트리 조작을 조금 해보았고, 이터러블 / 이터레이터 / 제너레이터 등에 대해 공부 하였다. 평소에도 코딩 연습을 하다보면 이터레이터가 아닙니다!! 하는 에러코드를 종종 보았던거 같은데 뭐야 어디야 하면서 기능 구현만 되도록 수정하기 급급하느라 이터레이터가 도대체 무엇인지 모르고 지나갔는데 이번 기회에 정말 기본 용어들부터 시작해서 설명 해주시니 이해가 쏙쏙되어서 바로 흡수 되는 느낌이었다. 걱정되는 것은 기본 개념은 다 이해가 됐지만 잘 활용 할 수 있을까 하는 점이다. 앞으로의 강의를 더 열심히 들어야겠다.

첫째주는 git/github 사용법도 잘 모르고 새로 배우는 것들도 많았어서 많이 힘들었지만 과제 제출하고 pr 요청도 해보고 TIL,Study 내용도 올리면서 조금씩 익숙해지니 git/github 사용법도 그리 어려운것 같지 않다는 생각이든다. 그리고 오늘 강의를 들으면서 메모장에 md파일 형식으로 요약 정리를 하니까 md파일 작성 연습도 되고, TIL 정리하는 시간이 정말 많이 줄어들었다. 앞으로도 이 방법을 이용해야겠다.

누구에게나 처음은 있다.