패스트캠퍼스 챌린지 2일차 - 자바스크립트 기초 이론

0. 이틀차이며, 오늘은 자바스크립트 기초이지만 심화 내용같은 것을 공부(복습)할 예정이다.

 

1. 자바스크립트와 EVENT Loop

자바스크립트에 대한 정확한 원리를 이해하는 것이 중요하다.

동시성 모델에 대해 알아봐야하는데, event loop, call stack, callback queue 가 있다.

event loop

은 여러 스레드를 사용합니다.

그 중 우리가 작성한 자바스크립트가 실행되는 스레드를 메인 스레드라고 한다.

-> Node JS 프로세스에서 메인 스레드는 하나이며, 한 순간에 한 줄씩만 실행됨!
    (적어도 한 프로세스에서는 하나씩 그래서 프로그램 예측이 쉬움)

하지만, 그 외의 일(네트워크, 파일 입출력 등)을 하는 워크 스레드는 여러개가 있다.

 

call stack

실행함수가 하나씩 쌓이고, 리턴할 때마다 스택에서 빠지게 된다.

또한 다음 콜백을 처리하기 위해서는 현재 실행되고 있는 콜백이 완전히 끝이나야 함.

 

callback queue(메시지 큐)

앞으로 실행할 콜백들을 쌓아두는 큐.

콜백은 브라우저나 노드가 어떤 일이 발생하면 메인 스레드에 이를 알려주기 위해 CallBack이 사용된다.

예를들어, 파일 처리 네트워크 타이머 처리 완료 등이 있다.

 

Q1풀이 :

순서대로 실행.
setTimeout을 실행하지만 해당 함수 안에 있는 콜백함수는 메인 스레드에서 처리하지 않음.

콜백함수는 콜백 큐에 쌓여 있음.

 

Q2풀이 :

 

콜백 큐 에서 콜백을 꺼낼 수가 없기 때문에, setInterval 이 아무리 콜백을 쌓아도 메인 스레드에서는 실행될 수 없음.

 

논블락킹 및 작동 관련 사진 겸 인증샷

2. Scope, hoisting 개념 정리

var

변수의 선언만 제일 위에서 하고, 초기화는 코드 위치에서 함. -> hoisting이라고 함.

 

함수도 마찬가지로 호이스팅의 대상.
?? : 그러면 왜 함수는 실행이 됨 (함수의 선언과 값의 초기화는 다른 것, 함수는 선언만...)

 

스코프(자바스크립트에서는 lexical 스코프를 따름 -> 밖에서 안을 참조할 수는 없음)

하지만 var은 block scoping의 대상이 아님. 

 

3. Closure 이론

closure = function + environment 라고 표현 가능

closure는 function이 하나 생길 때마다 하나씩 생김.

environment는 함수 자신을 둘러싼 접근할 수 있는 모든 스코프를 뜻함.

 

 

*high-order 함수는 함수를 리턴하는 함수.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정리하자면, closure는 함수가 실행될 때마다 생성이 됨.

 

 

4. prototype

function Person(name){
	// this는 새로 만들어지는 오브젝트에 생성
	// student를 여러개 생성하면 각각의 object를 가르킴 
	this.name = name
}

Person.prototype.greet = function greet() {
	// 여기서 가르키는 this 또한 하나의 오브젝트를 가르킴.
	return `Hi, ${this.name}`
}


function Student(name){
	this.__proto__.constructor(name)
}

Student.prototype.study = function study() {
	return `Hi, ${this.name}는 공부 중`
}


//학생이 퍼슨을 상속받음
Object.setPrototypeOf(Student.prototype, Person.prototype)


// new라고 하는 생성자를 사용
const me = new Student("안녕")

console.log(me)
//생성자를 통해서 호출을 하면,
// Student { name : "안녕" }
// 이라고 출력이 됨.

console.log(me.greet())
// 위 함수를 실행하게 되면, 
// 프로토타입에 있는 greet를 실행하게 됨.

 

프로토타입 체인에 따라서,
상위에 있는 것들을 조회를 해나가고,
해당 메소드가 있으면 거기서 실행.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

상속을 해준 부모 객체는 __proto__ 에 위치하게 됨.

프로토 체인에 따라서 순차적으로 내려오면서 어떤 메소드나 값을 찾게 됨.

 

 

 

 

 

 

 

 

 

 

 

 

 

위의 내용을 비교적 최신 문법으로 작성하자면,

class Person{
	constructor(name){
		this.name = name
    }
    
    greet() {
    	return `Hi, ${this.name}`
    }
}

class Student extends Person {
	constructor(name){
    	super(name)
    }
    
    study() {
    	return `${this.name} is studying`
    }
}

const me = new Student("hello")

 

 

참고 : 디버거 활용하기

->.vscode 파일 아래에 launch.json 을 생성해주어야 함. 

->Add configuration -> "launch Via Npm"

이후, package.json 에서 "debug" : node ~~.js

 

 

 

 

 

환급 챌린지 (2/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지