잡다한 프로그래밍

1. <td>에 <img>를 사용할 때 height 값이 달라지는 이유

간단한 문제였지만 나중에 기억나지 않을 것 같아서 기록한다.

<td>태그 안에 이미지를 넣을때 td내부 패딩이 있는것도 아니고, 이미지 margin, border가 없는데도 이상한 px값이 아래에 추가되어 td높이값이 달라지는 현상이 있었다.

default td height는 보통 font-size와 line-height의 영향을 받게 되는데, inline요소인 img요소가 들어가서 생기는 문제이다.

2. 해결 방법

1. td태그내에 img 태그가 아닌 td의 background를 이용하여 해결하는것이 좋은 방법이다.

2. td에 line-height를 0px나 0% 등으로 없애는 방법 or img 태그에 display:block 스타일을 적용하여 해결 할 수 있다.

1. 호이스팅이란?

영어 자체의 의미로서 끌어올리기 라는 뜻으로, 변수의 선언(할당이아님)이 최상단으로 끌어올려지는 것을 의미한다 함수 내부의 변수는 함수의 최상단으로, 함수 외부의 변수는 전역 변수로 끌어올려진다.

2. 호이스팅 예시

만약 다음과 같은 예시가 있다면 결과로 error가 발생한다고 생각할 것이다. 하지만 결과는 undeifiend, 10이다 이유는 아래와 같다.

function example(){
  console.log(test);
  var test = 10;
  console.log(test);
}

자바스크립트가 var test 즉 선언 부분을 함수의 최상단으로 끌어올리기 때문에 다음과 같이 코드가 실제로 실행되고 에러가 아닌 undefined가 발생한다.

function example(){
  var test;
  console.log(test);
  test = 10;
  console.log(test);
}

다음과 같은 함수 도 호이스팅에 의해 사용 가능하다

example();

function example(){
  console.log('test');
}

호이스팅에 의해 다음과 같이 전역으로 함수가 선언되므로 사용 가능하다

function example(){
  console.log('test');
}

example();

하지만 다음과 같이 변수로 선언할 경우는 사용할 수 없다.

example();

var example = function(){
  console.log('test');
}

다음과 같이 호이스팅 되기 때문이다.

var exaple;

example();

example = function(){
  console.log('test');
}

1. DOM이란?

돔(DOM)이란 Document Object Model의 약자로 HTML 및 XML 문서를 웹 브라우저가 인식한 객체를 의미(일종의 인터페이스)

DOM은 다음과 같은 다음과 같은 workflow를 따른다. 즉 html를 읽어서 DOM 트리, CSS 트리를 만들고 DOM의 위치를 잡고 거기에 그리고 색을 채운다.

2. DOM의 단점?

단순히 HTML을 서버에서 받아 브라우저에 그릴 때는 문제가 생기지 않는다 하지만 SPA(Single page application) 같은 것들이 생겨나면서 자바스크립트를 이용해 DOM을 변경하려고 브라우저에 요청을 할 경우 다음과 같은 문제가 발생한다. 예를 들어 트위터나 페이스북에서는 스크롤을 내리면 많은 데이터가 로딩이 되고 이는 쉽게 말해 div가 많아진다는 의미인데 이때 javascript를 이용하여 DOM을 조작하면 성능에 이슈가 생긴다. 왜냐하면 위 그림과 같은 workflow가 다시 이루어지기 때문이다. 이때 만약 100번을 요청했다면 100번을 다시 painting 하는데 이러한 이슈가 발생한다.

ex) <ul> 내부에 li를 추가할때 개수가 매우 많아지면 브라우저 속도가 느려지는 이슈 발생

3. Virtual DOM 이란?

DOM의 이슈를 Virtual DOM으로 해결할 수 있다. 100번의 DOM 조작 요청이 오면, 가상 돔은 브라우저 대신 변경 내용을 가상 돔에 반영한다.(이때 화면에 그리지 않음) 변화가 반영되었다면 내용을 브라우저에게 전달하여 그리게 한다.(100번 그리던 것을 1번만 그린다) 따라서 다음과 같은 이슈를 Virtual DOM을 통해 개선할 수 있다.