Closures

특정 두 가지 함수와 렉시컬환경 콤비네이션.
내부 함수에서 외부 함수에 있는 환경에 접근할 수 있는 권한을 주는 것.

자신이 생성될 때의 렉시컬 환경을 기억하는 함수다.
클로저에 의해 참조되는 외부함수의 변수를 자유변수라고 부른다.

• 내부 정보를 은닉하고, 공개 함수(Public, 외부)를 통한 데이터 조작을 위해
• 캡슐화와 정보은닉을 위해 쓰임
• 클래스 private 필드 또는 메소드를 사용하는 효과와 동일!
• 최신 JS, TS에서는 Class를 이용해서 내부 변수를 숨길 수 있고, Closure를 대신한다.

function makeCounter() {
  let count = 0;
  function increase() {
    count++;
    console.log(count);
  }
  return increase;
}

const increase = makeCounter();
increase();
increase();
increase();

// 최신 JS, TS에서는 Class를 이용해서 내부 변수를 숨길 수 있고, Closure를 대신한다.
class Counter {
  #count = 0;
  increase() {
    this.#count++;
    console.log("#Counter : ", this.#count);
  }
}

const counter = new Counter();
counter.increase();

Closure Q. - var와 let의 차이

• var는 블록 스코프가 없고, 함수 스코프만 가지고 있다.
• let은 블록 스코프와 함수 스코프 둘 다 가지고있다.

function varLoop() {
  const varArray = [];
  //var와 let의 차이점
  for (var i = 0; i < 5; i++) {
    // var는 블록 스코프가 없음. 함수 스코프만 해당함.
    varArray.push(function () {
      console.log("var i : ", i);
    });
  }
  return varArray; // 5 5 5 5 5반환
}

const varArray = varLoop();
varArray.forEach((func) => func());

function letLoop() {
  const letArray = [];
  //var와 let의 차이점
  for (let i = 0; i < 5; i++) {
    // let은 블럭 스코프가 있음.
    letArray.push(function () {
      console.log("let i : ", i); // i를 log찍는 "함수"를 letArray 배열에 넣음.
    });
  }
  return letArray; // 0 1 2 3 4 반환
}

const letArray = letLoop();
letArray.forEach((func) => func()); // i를 log찍는 "함수"를 letArray 배열에 넣음. 그래서 파라미터로 func()을 넣어줌.

---

This

자바스크립트에서의 This는 문맥에 따라 This가 가리키는 것이 달라짐.

C#, Java에서는 코드상에서 this 바인딩이 정적으로 결정된다.
하지만 JS, TS 런타임 상에서 this 바인딩은 동적으로 결정된다.
이 때문에 예상하지 못한 코드 실행결과가 나올 수 있음.

객체 안에서 This를 사용

• 앞으로 내가 만들어질 인스턴스 OR 지금의 객체 자기 자신을 가리킬 때 용도.
• 특정한 객체와 this를 묶어둔 것 => this 바인딩

동적 바인딩

• 자바, C#, C++ 대부분의 객체지향 프로그래밍 언어에서는 this는 항상 자신의 인스턴스 자체를 가리킴.
• 정적으로 인스턴스가 만들어지는 시점에 this가 결정된다.
• 하지만, 자바스크립트에서는 누가 호출하냐에 따라서 this가 달라질 수 있다.
• 즉, this는 호출하는 사람(caller)에 의해서 동적으로 결정된다.

// 동적 바인딩
function Cat(name) {
  this.name = name;
  this.printName = function () {
    console.log(`고양이 이름 출력 : ${this.name}`);
  };
}

function Dog(name) {
  this.name = name;
  this.printName = function () {
    console.log(`강아지 이름 출력 : ${this.name}`);
  };
}

const cat = new Cat("고영희");
const dog = new Dog("강하지");
cat.printName();
dog.printName();

dog.printName = cat.printName;
dog.printName();
cat.printName();

function printOnMonitor(printName) {
  console.log("모니터를 준비하고, 전달된 콜백을 실행");
  printName();
}

printOnMonitor(cat.printName); // undefined 출력. JAVA와 달리 JS에서는 동적으로 바인딩되어 값이 고정적이지 않아서 그렇다.

Arrow Function

특징
1. 문법이 깔끔하다
2. 생성자 함수로 사용이 불가능. (== 무거운 프로토타입을 만들지 않음)
3. 함수 자체가 arguments
4. this에 대한 바인딩이 정적으로 결정된다.
(함수에서 제일 근접한 상위 스코프의 this에 정적으로 바인딩된다.)

// 자바스크립트의 함수는 만능이다.
// 함수처럼 사용, 생성자 함수로 사용 (Class)
// 하지만, 이걸 위해서 불필요한 무거운 프로토타입(많은 데이터를 담고 있는) 객체가 생성됨
const dog = {
  name: "dog",
  play: function () {
    // 안 좋음. key다음 value 식으로 작성.
    // 생성자 함수처럼 되어버림 무거워진다.
    console.log("와롱왈");
  },
  // 개선하기 위해선 화살표함수로 개선 가능.
};
dog.play();
const obj = new dog.play();
console.log(" obj : ", obj);

//ES6
const cat = {
  name: "cat",
  // 위와 달리 바로 함수를 선언하는 것 처럼 가능
  // 객체의 메서드 (오브젝트에 속한 함수)
  play() {
    console.log("냐옹");
  },
};
cat.play();
// const obj1 = new cat.play(); // 생성자 함수로 사용할 수 없음.

Today CS

1. 웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요.

참고 블로그 링크

크게 두 번의 과정을 거칩니다.

1. 원시 코드에서 DOM 및 CSSOM 구성

2. Render Tree를 사용하여 최종 웹 페이지 생성

• 원시 코드에서 DOM 및 CSSOM 구성
  1. 웹페이지를 로딩하는동안, 웹 서버는 유저의 웹 브라우저에 JS 코드와 CSS, HTML 파일을 포함한 폴더를 전송.
  2. 브라우저 엔진은 data를 characters HTML 코드로 변환한다.
  3. chracters를 토큰으로 구문 분석하고, 노드로 추가 구문 분석을 진행한다.
  4. 브라우저 엔진은 노드를 DOM이라고 하는 트리와 같은 구조로 연결한다.
  5. DOM은 HTML의 JS 표현.
  6. 동시에 브라우저는 유사한 프로세스를 통해 CSS 코드를 CSS 개체 모델인 CSSOM으로 변환한다.
     
     
• Render Tree를 사용하여 최종 사용자 웹 페이지를 생성
  1. 브라우저 엔진은 DOM과 CSSOM을 결합하여 Render Tree라고 하는 트리구조를 만든다.
  2. 렌더 트리에는 브라우저가 뷰어가 볼 수 있도록 웹 페이지를 채운다.
  웹 페이지에서 볼 수 있는 각 요소의 레이아웃을 계산하고, 최종 사용자가 볼 수 있도록 화면에 그리는 데 필요한 스타일 및 콘텐츠 정보를 포함한다.
  3. 렌더 트리를 사용하여 브라우저 엔진은 웹 페이지에서 보이는 각 요소의 위치를 계산.
  4. 브라우저 엔진은 최종 사용자가 볼 수 있도록 화면에 레이아웃 요소를 추가하거나 그린다.


---

2. Restful API에 대해 설명해주세요. GET,POST 외에 알고있는 메소드와 그 기준을 설명해주세요.
그리고 RESTful API 가 아닌 것들은 어떤게 있나요?

참고 블로그 링크
참고 블로그 링크_그런 REST API로 괜찮은가?

1. Restful API란?

• REST의 원리를 따르는 API 시스템을 의미. REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다 말할 수 있다.

  1-1. REST란?

  • Representational Sate Transfer의 약자. 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미.
    (1) HTTP URI(Uniform Resource Identifier)를 통해 자원을 명시
    (2) HTTP Method(Post, Get, Put, Delete, Patch 등)를 통해 해당 자원(URI)에 대한 CRUD Corperation을 적용하는 것.

  1-2. REST API가 아닌 경우는?

  • “Client-server / stateless / cacheable / ⭐️ uniform interface ⭐️/ layered system / code-on-demand” 가 지켜지지 않으면 RESTful API가 아니다.
    HTTP API라고 말할 수 있겠다.