#TIL 항해 13일차 (3일차 10일차 복습)

오늘 목표: 패캠 노드 강의듣기

스파르타 1,2 주강의 듣기

블로그 다시 한번 만들어 보기!

 

V8: 자바스크립트 엔진 

환경에 관계 없이 작동하는 자바 스크립트 엔진 

 

자바스크립트 식 비동기 처리 방식

콜백 방식

요청을 한꺼번에 보내고, 응답이 올때 하나씩 처리하는 방식

 

오프로딩

저수준의 오래 걸리는 일은 노드에게

고수준의 로직은 메인 스레드에서 

빠른 속도와 매우 높은 확장성을 가짐 

방대한 오픈 소스 생태계 (npm /node package manage)

*스레드란? 어떠한 프로그램 내에서 특히 프로세스 내에서 실행되는 흐름의 단위

일반적으로 한 프로그램은 하나의 스레드를 가지고 있지만 프로그램 환경에 따라 둘 이상의 스레드를 동시에 실행 할수 있음.

단점

자바스크립트의 한계 

저수준 단계의 처리는 느림 -> 노드는 C와 webAssembly 모듈을 바인딩해 사용하는 방법을 제공

ex) 이미지파일을 돌면서 특정한 픽셀을 찾아내기

 

노드 쉽게 실행 할수 있는 사이트(연습하기 좋은 곳)->glitch 

타입스크립트 공부 할 것

- 자바스크립트에 타입을 부여한 언어

타입스크립트 자체만으로는 실행 되지 않음 하지만 자바스크립트에는 없는 타입 시스템을 도입 

견고하고 스케일업 한 코드를 짤수 있음

 

비쥬얼 스튜디오 유용한 단축기

커맨드 쉬프트 P -> 커맨드 팔렛 뜸 -> 사용할 명령어 검색 가능

*비쥬얼 스튜디오 코드 서버 -> 초기화 되어 있어서, 연습 하기 좋음  

 

자바스크립트 

 

자바스크립트의 실행 모델은 event loop, call stack, callback queue 개념으로 이뤄진다.

 이벤트 루프 모델은 여러 스레드를 사용한다

우리가 작성한 자바스크립트 코드가 실행되는 스레드는 메인 스레드

한 노드 프로세스에서 메인스레드는 하나이며, 한순간 한줄만 실행한다 -> 프로그래밍 예측하기에 유용함.

그러나 그 외의 일을 하는 워커 스레드는 여럿이 있을 수 있다.

 

Call stack 

지금 시점까지 불린 함수들의 스택 

스택은 아래에서 위로 쌓인거서 -> 위에서 부터 빼내는 것

함수가 호출될 때 쌓이고, 리턴할 때 빠짐 

 

Run to completion

이벤트 루프가 다음 콜백을 처리하려면, 지금 처리하고 있는 콜백의 실행이 완전히 끝나야 한다.

 

Callback Queue

콜백들이 쌓이는 큐(스택과 달리 맨처음에 들어온게 맨 처음 나가는 구조)

콜백 큐(메세지 큐)는 앞으로 실행할 콜백(함수와 그 인자) 들을 쌓아두는 큐입니다.

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

이벤트는 파일 처리의 완료, 네트워크 작업의 완료, 타이머 호출 등이 있다

 

offloading 

브라우저나 노드에서나 웹 api 혹은 노도 api 의 동작이 끝나면 콜백 큐에 등록한다.

브라우저나 노드가 요청 받은 일을 하고 있는 동안 메인 스레드와 이벤트 루프는 영향을 받지 않고 계속 실행

: 노드 서버의 메인 스레드가 하나 임에도 불구하고 빠르게 동작 할수 있는 이유, 메인 스레드가 오래 걸리는 일을 기다리지 않기 때문.

 

Event Loop

1. 콜백 큐에서 콜백을 꺼내고 (없다면 생길 때까지 기다리고)

2. 그 콜백의 처리가 끝날 때까지 실행하고

3. 이를 반복.

 

Hositing 

변수의 선언(만)을 해당 스코프의 맨 위로 끌어 올리는 것을 뜻함

(선언을 한다는 것이지, 할당문을 먼저 실행 하는 것은 아님)

*var 키워드로 선언한 변수는 변수 호이스팅을 하지만 let/const 는 변수 호이스팅을 하지 않음.

function도 hoisting의 대상이다

함수의 선언과 값의 초기화는 서로 다름; 함수는 선언하는 자체가 하나의 덩어리(함수는 선언 밖에 없음)

 

Binding 

코드의 어떤 식별자가 실제로 어떤 값이 가리키는지를 결정 하는 것 binding 이라고 한다.

자바 스크립트에서의 bindingdms Lexical Scope을 통해 이뤄진다.

 

Lexical Scope

안쪽에서 바깥쪽 변수에 접근 할수 있다는 뜻 : 드림코딩에서 말한 유리창! 안쪽에서는 바깥을 볼수 있는 유리창 하지만 밖에서는 안을 볼수 없음

체크해야 할 예시

var x =1

if (true) {

var x =2

}

console.log(x) //2

-> var는 block scoping의 대상이 아님! / 하지만 let 과 const 는 block scoping이 된다.

 

 

Closure

= function + environment  (함수와 변수의 합) 

 function이 하나 생길 때마다 하나씩 생김 (클로져는 함수가 선언 될때 마다 매번 새로 생긴다!)

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

 

fuction and (x) {

     return fuction print(y) {

        return x + ' and ' + y

    }

}

 

const saltAnd = and('salt')

cosole.log(saltAnd('pepper')) // salt and pepper

console.log(saltAnd('suger')) // salt and suger'

 

const waterAnd = and('water')

console.log(waterAnd('juice')) // water and juice

 

함수: print

환경: x => "salt"

 

closure는 higher-order function을 만드는데 유용(고차원 함수) 

saltAnd는 x가 salt, waterAnd는 x가 water로 바인딩 되어 있음 -> 즉, 둘은 서로 다른 closuer 형성

 

#출처 패스트캠퍼스 노드 수업

this의 개념은  이 자신의 이름 값을 어떻게 들고 있을 것인지 

 

This 

현재 객체를 참조하려면 this 키워드를 사용 추천

일반적으로 this는 메서드의 호출 객체를 참조!

This를 점이나 대괄호 표기법과 함께 사용!

This[Name] This.Name

 

Super

Super 키워드는 객체의 부모가 가진 함수를 호출할때 사용

클래스에서 부모의 생성자를 호출해야 할때 유용하게 사용할수 있음

super([argument]) 부모의 생성자 호출

super.functionOnParent([argument]);

 

변수 선언에 var만을 사용하면 if 문 밖에서도 접근이 가능해져서 코드를 분석하는데, 어려움이 생김

let : scope 개념이 추가된 let을 사용할 수 있다

scope : 변수의 접근을 결정 하는 것!

 

ES6 새로운 문법 _ 반복문

 for loop : 전통적인 for loop 방법

for of : 배열의 원소를 하나씩 가져 올수 있음

for in : 배열의 순서를 가지고 옴 

forEach: for of 와 비슷하지만 사용방법 ex) students.forEach(v => {

                                                                          console.log(v); }) 

Arrow function

function hello(message){

    console.log(message);}

const arrowFunction = (message) => {

    console.log(message);}

const arrowFunctionWithoutReturn = (message) => console.log(message);

 

기존 함수와 Arrow Function는 완전히 같나?

아니다! 몇가지 차이가 있으나, 대표적으로 this가 가르키는 곳이 다름

 

콜백 함수라는거는 일의 처리사항을 알려주는 어떤 조건문 같은가?(내가 이해 했을때는)

콜백 지옥을 해결하기 위해 나타난 promise는 if 절을 i wish 로 바꿔주는 것인가...ㅎ

 

Async, Await

function 앞에 async를 붙이면, 해당 함수는 항상 프라미스를 반환.

프라미스가 아닌 값을 반환하더라도, 이행 상태는 프라미스(resolved promise)로 값을 감싸, 이행된 프라미스가 반환되도록 함.(무조건 resolvede된 promise를 반환되도록 처리 해줌) 

자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled) 될때까지 기다림.

결과는 그 이후 반환됨. 

await는  promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을수 있도록 해주는 문법!

promise.then보다 가독성 좋고, 쓰기 쉬움.

await 를 걸면 해당 함수 끝을 바로 응답값을 받을 수 있음 그 값을 받고 다음으로 넘어 감 코드를 짤때 순차적으로 읽히는 모양으로 코드를 비동기를 써서 짤수 있음 

 

여기에서 궁금한점 언제 왜 Async, Await를 쓸까??

비동기적 처리를 할때, 콜백 함수보다, promise 가 간결하고, promise 보다 코드를 간결하게 짤수 있는게 Async, Await 이기 때문에!

선생님 께서 말씀 하시길 함수에서 await가 필요한 부분에서 안 걸고 가버리고 함수를 호출 하면, 바로 넘어가 버려서 문제가 생길수 있음!

(그래도 정확히 어디에서 쓰이는지 내가 쓸수 있는지 알고 싶음!!)

 

 

app.set ('view engine', 'ejs'): 화면 엔진을 ejs 로 설정! / 뷰엔진이 ejs코드를 html 로 바꿔준다고 한다!

 

목표: 기본 이론을 꼼꼼히 해서, 왜 이코드가 이렇게 동작하는지 알것!, 코드를 잘 이해하게 됬으면 좋겠다!

함수 부분을 잘 이해 했으면 좋겠다!

그리고 내가 이해한 부분을 잘 설명 하는 정도 까지 만들 것!

 

 

 <다시한번 복습할것>

클로져 다시한번 복습 할것_ 3주차 3강 

프로토타입 다시한번 복습할것_3주차 4강 

스파르타 코딩클럽 1주_ 마지막 강의