💻 HTML, CSS, DOM

HTML

마크업

수정사항을 표시하는 자료를 칭한다. 디지털에선 출력물을 표시하는 방법을 뜻한다.

HTML

• 웹 문서를 표현하기 위한 마크업이다.
• 웹 문서는 하이퍼링크를 통해 연결되고 이동하기 때문에 하이퍼링크 마크업 랭귀지가 되었다.

  워드 문서의 친척?

HTML 만으로 문서의 뼈대와 위치를 잡았는데 하나씩 수정해야하는 문제가 있었다.
그래서 CSS 라는 별도의 문서를 만들어 모든 문서를 한번에 수정할 수 있게 되었고
점차 CSS 가 스타일을 담당하도록 발전하면서 HTML 은 문서의 의미와 전체 구조를 담당하고 CSS 는 그 문서의 표현을 의미한다.

HTML5

• 2014년 10월 28일에 표준안이 확정

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

주의할 점

• 태그마다 스타일이 있다.
• 특수한 태그는 어떻게 구성이 되어있는지 파악할 필요가있다.
• 브라우저마다 미묘하게 기본 스타일이 다르다.

CSS

브라우저의 스타일을 담당하는 Style sheet 언어다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성한다.

p {
  color: red;
}

CSS3가 가장 최신버전이다.

DOM

DOM은 Document Object Model의 약자로 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있다.

DOM은 JS가 탄생하면서 같이 등장하였고 HTML 문서와 상호작용이 가능하게 되었다
점차 발전하여 HTML 문서를 직접 수정까지 가능하게 되었다.

DOM의 각 요소는 프로토타입 객체로 정의 되어있다. 최상위에서 하위로 뻗어나가는 구조

DOM 선택 방법

• getElmentById
• getElmentByClassName
• getElmentByTagName
• querySelector
• querySeletctorALL
• window.[id]

DOM 탐색 방법

• parentNode
• 선택한 요소 노드의 부모를 불러온다
• firstElementNode
• children
• nextElementSibling
• previousElementSibling

DOM 조작 방법

• class 접근
• hasAttribute
• getAttribute
• setAttribute
• removeAtrtribute
• textContent
• innerHTML (가급적 사용 권장하지않음 XSS위험있음)
• createElement
• appendChild
• removeChild

Virtual DOM

가상돔은 실제 DOM트리를 자바스크립트 객체로 만든것이다.

직접 DOM을 수정하지않고 가상 DOM을 바뀐부분만 수정해서 렌더링수가 줄어든다.

Virtual DOM 은 DOM 보다 빠르다는 것은 아니고 편의성과 대부분의 상황에서 충분히 빠르다고 느끼는것이다.
탐색 두배고 메모리도 두배지만 성능 최적화보다 개발 편의성이 중요할 때가 있을때는 Virtual DOM을 사용하는 편이다.

📖 모던 JavaScript DEEP Dive

함수

함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

• 입력을 전달받은 변수를 매개 변수( parameter )
• 입력을 인수( argument )
• 출력을 반환값( return value )
  

함수를 사용하는 이유

실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다. 즉 코드의 재사용이라는 측면에서 매우 유용하다.

• 유지보수의 편의성
• 코드의 신뢰성
• 코드의 가독성

함수 리터럴

자바스크립트 함수는 객체 타입의 값이다. 따라서 함수도 함수 리터럴로 생성할 수 있다.

함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체 로 구성된다.

함수는 객체지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

함수 정의

함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.

함수 선언문

function add(x,y) {
 return x+y;
}

• 함수 선언문은 함수 리터럴과 형태가 동일하다. 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.
• 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다.
• 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
• 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

함수 표현식

var add = function (x,y) {
 return x+y;
}

• 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체 라 한다.

• 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식 ( function expression )이라 한다.

• 함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수 라 한다.

  함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.

Function 생성자 함수

var add = new Function('x', 'y', 'return x+y;');

• Function 생성자 함수로 생성한 함수는 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

화살표 함수(ES6)

var add = (x,y) => x+y;

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표를 이용해 좀 더 간략한 방법으로
  함수를 선언할 수 있다.

• 화살표 함수는 항상 익명 함수로 정의한다.

  화살표 함수는 함수로만 쓰자😁

함수 생성 시점과 함수 호이스팅

• 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르다. 그렇기에 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수가 없다.

• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.

• 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

함수 호출

매개변수와 인수

• 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달한다.

• 매개변수의 스코프는 함수 내부다.

• 매개 변수보다 인수가 더 많은 경우 초과된 인수는 무시된다.

  초과된 인수는 그냥 버려지는 것은 아니고 암묵적으로 argument 객체의 프로퍼티로 보관된다.

인수 확인

ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다.

매개변수의 최대 개수

• 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.

  따라서 매개변수는 3개 이상 넘지 않도록 하는 것을 권장
  만약 그 이상 매개변수가 필요하다면 하나의 매개변수를 선언하고 객체를 인수로 전달하는 것이 유리하다.

반환문

• return 키워드와 표현식으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환( return )할 수 있다.

• 반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시된다.

• return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환된다.

• 반환문은 생략할 수 있다.

• 반환문은 함수 몸체 내부에서만 사용할 수 있다. 전역에서 반환문을 사용하면 문법에러가 발생한다.

<!DOCTYPE html>
<html>
  <body>
    <script>
      return; // SyntaxError: Illegal return statement
    </script>
  </body>
</html>

참조에 의한 전달과 외부 상태의 변경

함수를 호출하면서 매개변수에 값을 전달하는 방식을 값에 의한 호출, 참조에 의한 호출로 구분해 부르는 경우도 있으나 동작 방식은 값에 의한 전달, 참조에 의한 전달과 동일하다.

다양한 함수의 형태

즉시 실행 함수

• 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수라고 한다. 즉시 실행 함수는 단 한번만 호출되며 다시 호출할 수 없다.

• 즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다.

• 즉시 실행 함수는 반드시 그룹 연산자 (...)로 감싸야 한다.

• 즉시 실행 함수도 일반 함수처럼 값을 반환할 수 있고 인수를 전달할 수도 있다.

재귀 함수

• 함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 재귀 호출을 수행하는 함수를 말한다.

• 재귀 함수는 자신을 무한 재귀 호출한다. 따라서 재귀 함수 내에는 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야한다.

  탈출 조건이 없으면 무한 호출되어 스택 오버플로 에러가 발생한다.

• 재귀 함수는 반복문을 사용하는 것보다 직관적으로 이해하기 쉬울 때만 한정적으로 사용하는 것이 바람직하다.

중첩 함수

• 함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라 한다.

콜백 함수

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수를 고차 함수라고 한다.

• 고차 함수는 콜백 함수를 자신의 일부분으로 합성한다.

• 고차 함수는 매개 변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.

• 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

• 콜백 함수는 함수형 프로그래밍 패러다임뿐만 아니라 비동기 처리에 활용되는 중요한 패턴이다.

document.getElementById('myButton').addEventListener('click', function () {
 console.log('button clicked');
 });
 
setTimeout(function () {
 console.log('1초 경과');
}, 1000);

순수 함수와 비순수 함수

순수 함수

var count = 0;

// 순수 함수 - increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환한다.
function increase(n) {
  return ++n;
}

// 순수 함수가 반환한 결과 값을 변수에 재할당해서 상태를 변경
count = increase(count);
console.log(count); // 1

count = increase(count);
console.log(count) // 2

비순수 함수

var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화한다.

// 비순수 함수
function increase() {
  return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}

// 비순수 함수는 외부 상태(count)를 변경하므로 상태 변화를 추적하기 어려워진다.
increase();
console.log(count); // 1

increase();
console.log(count) // 2

회고🥲

분명 TIL을 간편하게 쓰려고 했는데 점점 자료를 정리하여 올린 글이 되어가고 있다...
하지만 TIL 과 자료 정리한것을 따로 쓰는건 아직 조금 무리라는 생각이 들어서 분리하는 작업을 하고 싶긴 한데 언제 할 수 있을지는 모르겠다.
모던 JavaScript는 이런 방식으로 계속 정리하고 싶기도 하고 초반에 비해 장이 넘어 갈수록
이해하는 속도가 느려져 빨리 나가기도 힘들고 이런 식으로 정리하면서 다시 되짚어 보는 시간이 되기도 하는거 같다.
내일부터는 VanillaJS를 사용하여 만드는 클론 코딩도 같이 해볼 생각이다. (진도는 빠르게 넘어갈 수 있을지 모르겠다.)
아직 알고리즘, 함수형 프로그래밍, CS기술은 손도 잘 못대고 있어서 앞서 말한 것들을 먼저 어느정도 정리를 빨리 하고 넘어가야겠다. 하루에 할 수 있는 양이 점점 주는거 같아 아쉽지만 양보다는 질이기에 페이스를 잘 유지하며 공부해야겠다.

참고

모던 JavaScript Deep Dive