[TDL] 05/12 Today's-Done-List

- Hello Coding 알고리즘

4장 퀵 정렬 파트 TIL

---

- JS 기본 문법

실행 콘텍스트

• JS가 실행되는 방식을 담고 있는 핵심 원리
• JS엔진이 코드를 읽고 실행에 필요한 정보를 모아놓는 것

 

• 실행 콘텍스트의 종류
  • 전역(GEC)
    • this, object선언
  • 함수(FEC)
    • 상위 스코프, this, 매개변수, arg
  • Eval 메서드
    • 최근에는 사용하지 않음.
• 실행 콘텍스트의 단계
  • 생성 단계(Creation Phase)
    • JS엔진이 함수를 호출했지만 실행이 시작되지 않은 단계
  • 실행 단계(Execution Phase)
    • 전역 변수의 값 할당이 발생하며 코드를 실행하는 단계

 

생성 단계

/*
 * # 생성 단계
 * 1. 전역 객체 생성
 * 2. 변수 생성
 * 3. 변수는 undefined로 초기화
 * 4. hello 함수는 메모리에 위치
 */

var name = "zero";

function hello() {
	console.log(this.name);
	console.log(name);
}

• 3번 : 호이스팅 발생.
• 4번 : hello함수는 실행하지 않고 선언만 하였기 때문에, 전역 공간 어디엔가 배치가 되어 있다.
• 생성 단계는 전역 공간에 필요한 것들과 this, window객체, 변수 호이스팅 되는 단계가 일어남.

 

실행 단계

/*
 * # 실행 단계
 * 1. 함수 호출시 함수 실행 컨텍스트 생성
 * 2. arguments 접근 가능
 * 3. GEC에서 생성된 환경에 접근 가능
 * 4. 만약 함수가 다른 함수 호출시 새로운 함수의 실행 컨텍스트 생성되며 반복
 */

var name = "zero";
function second() {
	console.log("두번째"); // 두번째
}

function first() {
	second();
	console.log(this.name); // undefined
	console.log(name); // zero
}

first();

• 4번 : 콜 스택으로 반복됨.
  • 동작 순서: 맨 아래의 first( ) -> first 함수 -> second( ) -> second 함수

• 함수는 콜 스택으로 호출되고 실행되며 종료된다.
  전역 콘텍스트에서 함수 콘텍스트(FEC)가 실행이 되고, 함수 콘텍스트는 콜 스택과 스코프 체인이 일어날 수 있다.
• 함수에 필요한 parameters와 arguments들도 함수가 생성되고 실행될 때 환경에 대한 초기화가 일어나고 실행됨.

---

 

https://www.youtube.com/watch?v=QtOF0uMBy7k

---

17:50 오후 회고 스터디 (만족도 : 5) 

---

- JS 기본 문법 강의

모듈

• 독립적인 특성을 가진 기능 단위의 부품
• 프로그램의 기능을 독립적인 부품으로 분리한 것.
• 동시에 여러 다른 모듈과 함께 조합하여 재사용될 수 있다.

 

Export

/*
 *  CommonJS (Export)
 */

function Person(name, age, location) {
	this.name = name;
	this.age = age;
	this.location = location;

	this.getName = function () {
		return this.name + "입니다";
	};
}

module.exports = Person;

 

Import

/*
 *  CommonJS (Import)
 */
const Person = require("./module");

const me = new Person("park", 10, "Korea");
const you = new Person("kim", 20, "Japan");

console.log(me.getName()); // park입니다
console.log(you.getName()); // kim입니다

 

위처럼 하나의 파일에서 코드를 모두 작성하는 것이 아니라,
여러 개의 파일로 코드를 분리 후 export, import 하여 재사용성, 가독성 좋게 구현.

/* CommonJS */

const module = require('module')

module.exports = module

---

AMD (Asynchronous Module Definition)

• 모듈을 선언하면서 의존하고 있는 모듈을 함께 명시
• 비동기적으로 의존 모듈을 불러온다
• AMD는 최근에 많이 사용하지 않음.
• JS는 서버에서 동작하고 동기적인 특성을 가진다.
  AMD는 브라우저에서 동작하고 비동기적인 특성을 가진다.

/* AMD */

define(['module'], function(module)
  return function() {
  
  }
})

---

UMD (Universal Module Definition)

• AMD와 CommonJS 두 방식 모두 지원
• 클라이언트, 서버 어디에서나 작동

/* UMD */

(function (root, factory) {
  if (typeof exports === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('module'))
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(['module'], function (module) { })
  } else {
    // 전역 공간
    root.global = factory(root.module)
  }
}(this, function (module) {
    // 실제 모듈
}))

---

22:50 저녁 회고 스터디 (만족도 : 6)

[○]  1. Hello Coding 알고리즘 + 칸 아카데미 영상
[○]  2. 이벤트 루프 유튜브 + 실행 콘텍스트 정리
[○]  3. JS문법 강의 끝내기
[ X ] 4. 알고리즘 스터디 커리큘럼 및 테스트
[ X ] 5. 큐 학습

---

집중 안 하고 계속 이것저것 알아보고, 다른 거 해서 오늘 목표했던 것들 많이 못 했다. 반성하고 발전하자!

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]