Typiler

클로저란?

내부 함수가 정의될 때 외부 함수의 환경을 기억하고 있는 내부 함수를 말합니다. 외부 함수 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수가 함수에 접근하여 사용할 수 있습니다. 클로저는 Javascript 고유개념은 아닙니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특징중에 하나입니다. 그래서 ECMAScript 명세에 클로저의 정의는 없다고 합니다. MDN에서는 아래와 같이 정의를 하고 있습니다.

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

역시나 말이 어렵습니다. 간단하게 다시 설명을 하면, 자바스크립트의 함수는 일종의 객체입니다. 그래서 다른 객체와 같이 임의의 키를 추가가 가능합니다. 클로저는 함수를 구성하는 코드와 함수가 생성될 당시의 스코프 환경(공식적으로 위에서 설명한 렉시컬 환경)으로 구성됩니다. 클로저는 스코프 환경을 알고 있기 때문에, 함수가 생성될 당시의 모든 변수를 기억해 두었다가 함수가 호출될 때 사용할 수 있습니다.

사용이유

클로저는 자바스크립트의 강력한 기능으로 비록 메모리 차원에서 손해를 볼 수 있긴하지만, 적극적으로 사용해야합니다. 아래의 이유로 사용을 할 수있습니다.

1. 상태유지: 현재 상태를 기억하고 변경된 최신 상태를 유지할 수 있다.
2. 전역 변수의 사용 억제: 상태 변경이나 가변 데이터를 피하고 오류를 피하는 안정성을 증가 시킬수 있다.
3. 정보의 은닉: 클래스 기반 언어의 private 키워드를 흉내낼 수 있다.

각각의 예제는 아래 사이트를 통해서 확인 가능합니다.

https://poiemaweb.com/js-closure

참고사이트

https://hyunseob.github.io/2016/08/30/javascript-closure/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

https://tislwlstnf.tistory.com/8

https://medium.com/sjk5766/javascript-closure%EB%8A%94-%EC%99%9C-%EC%93%B8%EA%B9%8C-81bcdef6352

Hoist 라는 사전적 정의는 "(흔히 밧줄이나 장비를 이용하여) 들어 올리다, 끌어 올리다" 입니다. Javascript에서 호이스팅은 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 클러저(Closuer)같은 문법들의 효용성을 이해하기 위해서 고전 Javascript가 가졌던 특징입니다. var 이나 let, const 로 정의된 변수나 함수선언문, 함수표현식이 유효범위의 최상단으로 끌어올려지는 것처럼 보여지는 현상인데, 실행 컨텍스트가 활성화 되었을때 해당 영역에서 변수의 이름을 메모리에 먼저 수집하는 현상으로 인해 발생하는 현상이라고 합니다. 

이렇게 이야기하니 너무 어렵네요. 간단하게 '유효범위 코드가 실행되기 전 메모리에 먼저 저장했던 선언문을 사용할 수 있다'는 의미입니다. 간단한 예제를 확인해 보겠습니다.

Javascript가 어떤 코드 구분을 실행하기 전에 함수 선언을 메모리에 저장하는 방식의 장점 중 하나는 코드에 선언하기 전에 함수를 사용할 수 있다는 것입니다. 간단한 예제를 만들어 보았습니다. 아래는 정상적으로 동작하는 코드입니다.

      function printName(name){
        console.log("My name is " + name);
      }

      printName("typiler");

이제, 함수를 작성하기 전에 함수를 호출하면 어떤 일이 있는지 살펴봅시다.

      printName("typiler2222");
      
      function printName(name){
        console.log("My name is " + name);
      }

비록 함수를 작성하기 전에 함수를 호출하였지만, 코드는 여전히 동작합니다. 이는 Javascript에서 컨텍스트 실행이 작동하는 방식 때문입니다. 

호이스팅은 다른 데이터 타입 및 변수와도 잘 작동합니다. 변수는 선언하기 전에 초기화하여 사용될 수 있습니다. 그러나 초기화 없이는 사용할 수 없습니다.

    cnt = 6;
    cnt += 5;
    var cnt;
    console.log(cnt);

cnt가 선언되지 않더라도 에러를 내지 않습니다. Javacript는 초기화가 아닌 선언만 끌어올립니다(Hoist). 만약 변수를 선언한 뒤 나중에 초기화시켜 사용한다면 그 값은 undefined로 지정됩니다. 아래 두 예제는 같은 동작을 보여줍니다.

    var i = 0;
    console.log(i + " " + j);
    var j = 0;

    var x = 7;
    var y;
    console.log(x + " " + y);
    y = 3;

이와 같은 호이스팅 때문에 의도한 결과가 나오지 않을 수도 있으니 개발 시 이부분에 대한 이해가 필요합니다.

더 많은 정보는 아래 사이트를 참고하여 주십시오. 여기까지 간단한 호이스팅에 대한 설명이였습니다. 

참고사이트

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

https://namu.wiki/w/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

브라우저는 컴퓨터 혹은 모바일에서 가장 많이 사용하는 소프트웨어일 것 입니다. 그렇다면 브라우저는 정보를 어떠한 과정을 걸쳐 화면에 표시하는것 일까요? 간단하게 알아보도록 하겠습니다.

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 자원은 보통 HTML 문서입니다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정합니다. 브라우저의 구성요소는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있습니다. 여기서 저는 화면을 표시하는 부분인 렌더링 엔진에 대해서 알아보도록 하겠습니다.

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일을 합니다. HTML 및 XML 문서와 이미지를 표시할 수 있습니다. 렌더링 엔진은 브라우저마다 다릅니다. 

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻은 것으로 시작합니다. 아래는 기본 동작 과정을 요약한 그림입니다.

렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환합니다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱합니다. 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성합니다. 렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시됩니다.

렌더 트리가 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다. 다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정을 합니다. 일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요합니다. 

동작 과정 상세 (예: 웹킷)

1. HTML을 파싱하여 DOM 노드를 만듭니다. 이 DOM 노드들을 병합하여 DOM 트리를 만듭니다.
2. CSS를 파싱하여, 스타일 규칙을 만듭니다.
3. DOM 트리와 스타일 규칙을 사용하여, 어테치먼트 라는 처리를 하여 렌더 트리를 생성합니다.
4. 렌더 트리를 배치합니다.
5. 렌더 트리를 화면에 그립니다.

각 단계별로 자세한 설명은 아래의 참고사이트를 이용하면 자세한 설명이 있습니다. 가장 중요한 것은 아래 5단계입니다.

1. DOM 파싱: HTML 마크업을 처리하고 DOM 트리를 생성
2. CSS 파싱: CSS 마크업을 처리하고 스타일규칙 생성
3. 어테치먼트: DOM 트리와 스타일 규칙을 결합하여 렌더 트리 생성
4. 배치: 렌더 트리에서 각 노드의 기하학적 형를 계산
5. 그리기: 개발 노드를 화면에 그림

참고사이트

https://d2.naver.com/helloworld/59361

https://chanyeong.com/blog/post/43

https://beomy.github.io/tech/browser/browser-rendering/