HanSol

- 클로저란 함수와 함수가 선언된 어휘적 환경의 조합. (MDN 정의)

- 함수가 속한 렉시컬스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능

function outer() {
  var a = 2;
  function inner() {
    console.log(a);
  }
  return inner;
}
var func = outer();
func(); // 2

위 예제에서 GC(GarbageCollector)가 outer()의 참조를 없앨 것 같지만 내부함수인 inner()가 해당 스코프의 변수인 a를 참조하고 있기 때문에 없애지 않음

따라서 스코프 외부에서 inner()가 실행되도 해당 스코프를 기억하기 때문에 2를 출력

즉, 여기서 클로저는 inner()가 되며 func에 담겨 밖에서도 실행되고 렉시컬 스코프를 기억

클로저로 자바스크립트에는 없는 캡슐화라는 개념을 구현할 수 있고 정보 은닉과 캡슐화가 가져다주는 이점들을 얻을 수 있다.

Reflow

- DOM 엘리먼트 추가, 제거, 변경

- CSS 스타일 추가, 제거, 변경

- CSS 스타일 직접 변경 or 클래스 추가로 인한 레이아웃 변경

    - 엘리먼트의 길이를 변경하여 DOM 트리에 있는 다른 노드에 영향을 줄 경우

- CSS3 애니메이션과 트랜지션

    - 애니메이션의 모든 프레임에서 리플로우 발생

- offsetWidth 와 offsetHeight 의 사용

    - offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거 되어 수치를 계산

- 유저 행동 or 유저 인터렉션으로 발생

    - hover 효과

    - 필드에 텍스트 입력

    - 창 크기 조정

    - 글꼴 크기 변경

    - 스타일시트 or 글꼴 전환

Repaint

- 가시성이 변경되는 순간

    - opacity, background-color, visibility, outline

- Reflow가 실행된 순간 뒤에 실행

- 브라우저가 화면 요소를 렌더링 할 땐 크롬: 블링크(Blink), 사파리: 웹킷(Webkit), 파이어폭스: 게코(Gecko) 등과 같은 렌더링 엔진을 사용

- 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path, 중요 렌더링 경로) 이라는 프로세스를 사용

렌더링의 단계

- HTML 파싱 > DOM(Document Object Model) 트리 구축

- CSS 파싱 > CSSOM(CSS Object Model) 트리 구축

- Javascript 실행 

    - ! HTML 중간에 스크립트가 있을 경우 HTML 파싱 중단 !

- DOM과 CSSOM을 조합하여 렌더트리 구축

- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 : Layout(Reflow) 단계

- 계산한 위치/크기 기반으로 화면을 그림 : Paint 단계

1. URL 주소 중 도메인 네임 부분을 DNS( Domain Name System) 서버에서 검색
2. DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달
3. 브라우저는 HTTP 프로토콜을 사용하여 요청 메세지를 생성하고 HTTP 요청 메세지는 TCP/IP 프로토콜을 사용하여 서버로 전송
4. 서버는 Response 메세지를 생성하여 다시 브라우저에게 데이터를 전송
5. 브라우저는 Response를 받아 파싱하여 화면에 렌더링

- 호이스팅이란 "끌어올린다" 라는 뜻

- 선언문이 스코프 내의 최상단으로 끌어올려지는 현상

변수 호이스팅

console.log(a);
var a = 2;

- 컴파일러는 Javascript 엔진이 인터프리팅을 하기 전에 컴파일을 하는데 이 때, var a = 2; 를 2개의 구문으로 해석

• var a
• a = 2

- var a는 변수 선언문으로 컴파일할 때 처리하고, a = 2는 실행할 때까지 내버려 둠

- 변수 a는 호이스팅 되고 콘솔에는 다음과 같은 결과가 표시됨

undefined;

- var는 선언, 초기화가 동시에 이루어지기 때문에 undefined를 출력
- let,const는 선언단계만 호이스팅 되기 때문에 Reference Error를 출력

함수선언문 호이스팅

func();
function func() {
  console.log('함수 호이스팅');
}

console :

함수 호이스팅

- 함수표현식은 호이스팅 되지 않음

eslint --fix . --ext .js,.vue src

/*********************************************

* @name fnConwaySequenceInit

* @description Conway Sequence 초기화 처리 함수

**********************************************/

const fnConwaySequenceInit = () => {

// 첫번째 숫자가 될 변수 R 초기화

const R = 1;

// 출력할 라인번호가 될 숫자 변수 L 초기화

const L = 6;

// Conway Sequence를 만드는 함수를 담은 변수 sequence 초기화

const sequence = fnMakeSequence(R, L);

// fnMakeSequence 함수로 만들어진 sequence 배열을 문자열로 변환하기 위한 변수 output 초기화

const output = fnPrintSequence(sequence);

// 만들어진 output 콘솔에 표시!

console.log(output);

};

/*******************************************************************

* @name fnMakeSequence

* @params seed -> 첫번째 숫자

* @params iteration -> 출력할 라인 숫자

* @description 시작 숫자와 출력할 라인 숫자에 따라 Conway Sequence 생성

********************************************************************/

const fnMakeSequence = (seed, iteration) => {

// return 될 시퀀스 값을 저장 할 배열에 첫번째 숫자를 담은 seq변수 초기화

let seq = [seed];

// 0 ~ 5까지 반복하여 증가하는 반복문

for (let i = 0; i < iteration - 1; i++) {

// 출력할 라인 숫자까지 만들어질 동안의 시퀀스 값들을 저장하기 위한 배열 newSeq 초기화

let newSeq = [];

// 현재 index 숫자의 갯수 표시를 위한 변수 k 초기화

let k = 1;

// seq 배열의 index 비교를 위한 변수 j 초기화

let j = 1;

// 현재 반복이 첫번째 반복인지 검사하기위한 while문

while (j < seq.length) {

// seq 배열의 j번째 자리 숫자가 앞자리 숫자와 다르면 if문 실행

if(seq[j] != seq[j-1]) {

// newSeq 배열에 k를 push

newSeq.push(k);

// newSeq 배열에 seq[j-1]를 push

newSeq.push(seq[j-1]);

// k의 값을 1로 초기화한다.

k = 1;

}

// seq 배열의 j번째 자리 숫자가 앞자리 숫자와 같으면

else{

// k의 값에 1을 더한다.

k++;

}

// j의 값에 1을 더한다.

j++;

}

// newSeq 배열에 k를 push

newSeq.push(k);

// newSeq 배열에 seq[j-1]를 push

newSeq.push(seq[j-1]);

// 만들어진 시퀀스를 seq변수에 저장

seq = newSeq;

}

// 완성 된 Conway Sequence return

return seq;

};

/***************************************************************************************

* @name fnPrintSequence

* @params seq -> 시퀀스 값을 저장한 배열 seq

* @description fnMakeSequence 함수로 만든 시퀀스 값 담은 배열을 문자열로 변환시키기 위한 함수

****************************************************************************************/

const fnPrintSequence = (seq) => {

// 문자열로 변환된 시퀀스 값을 담을 변수 str 초기화

let str = '';

// 시퀀스 값을 담은 배열 seq의 갯수만큼 반복

for(var i = 0; i < seq.length; i++) {

// str 변수에 seq 배열 값 하나하나를 더한다.

str += seq[i] + ' ';

};

// str 값에 왼쪽/오른쪽 공백 제거 후 return

return str.trim();

};

// Conway Sequence init function 실행

fnConwaySequenceInit();

/**
 * @name fnBackWarning
 * @description 뒤로가기 시 변경된 값이 있으면 경고창 표시 기능
 */
function fnBackWarning() {

    // 브라우저 세션 히스토리와 상태 변경이 있으면
    if (window.history && history.pushState) {

        // window load 시
        addEventListener('load', function () {

            // 가짜 상태변경을 한다
            history.pushState(null, null, null);

            // 히스토리 엔트리가 변경될 시
            addEventListener('popstate', function () {

                    // document에 textarea태그를 가진 모든 요소를 textarea변수에 담는다.
                var textarea = document.getElementsByTagName('textarea'),

                    // document에 input태그를 가진 모든 요소를 input변수에 담는다.
                    input = document.getElementsByTagName('input'),
                    inputCheck = false;

                // textarea 갯수만큼 반복
                for (var i = 0; i < textarea.length; i++) {

                    // 현재 textarea요소의 data-edited속성값이 있으면
                    if (textarea[i].getAttribute('data-edited')) {
                        
                        // inputCheck를 true로한다.
                        inputCheck = true;
                    }
                }

                // input 갯수만큼 반복
                for (var i = 0; i < input.length; i++) {

                    // 현재 input요소의 data-edited속성값이 있으면
                    if (input[i].getAttribute('data-edited')) {

                        // inputCheck를 true로한다.
                        inputCheck = true;
                    }
                }

                // inputCheck가 true면
                if (inputCheck) {
                    
                    // 경고 메세지를 표시하고
                    var stayOnPage = confirm("변경사항을 저장 하시겠습니까?");
                    
                    // 취소를 누르면
                    if (!stayOnPage) {
                        
                        // 뒤로간다.
                        history.back()
                    } 
                    
                    // 확인을 누르면
                    else {
                        
                        // 가짜 상태변경을 한다
                        history.pushState(null, null, null);
                    }
                }

                // inputCheck가 false면
                else {

                    // 뒤로간다.
                    history.back()
                }
            });
        });
    }
}

fnBackWarning();

sudo chmod -R 777 {경로}