자바스크립트 핵심 컨셉 33개

 https://www.youtube.com/playlist?list=PLOdNCETDjj4ZuRtVajPDAIXINc0rLjCiP 

javascript

 

1. Call Stack

 

자바스크립트를 스택에 쌓는다.

다 실행하면 제거한다.

 

개발자 모드에 call stack 부분이 있는지 처음 알았음.

Call Stack

콜 스택은 한계가 있다.(스택에도 공간이 정해져 있다.) : Maximum call stack size exceeded

 

2. Primitive Types : 원시적인

undefinde

null

NaN

의 차이점

 

3. Value types and Reference types

값을 저장 하는 것과

값을 참조 하는 것의 차이 구분

 

[10] === [10]

false : 다른 메모리에 위치한 다른 오브젝트

 

Value : String, number, boolean, NaN, undefined, null

Reference: array, object, function 

 

 

4. Type Coercion

 

false == 0

true == 1

type coercion 문자를 숫자로 변환

 

type coercion 문자를 숫자로 변환

=== 을 사용하면 type coercion은 일어나지 않는다.

 

 

 

5. type of , instance of

Value : String, number, boolean, NaN, undefined, null

Reference: array, object, function 

 

 

type of 적용 시: Object, array, null  작동 안함

작동O

오류 WTF

null [] {}   --> Object 라고 뜨는 오류.

 

instance of 적용 시: Object, array 작동함

string, boolean, number등에서 작동하지 않음

작동X

 

작동X

 

 

작동O

 

작동O

 

type of

type of 으로 검사할 적합한 대상

 

6. Scope

너의 variable이 존재하는가? 존재하지 않는가?

variable이 정의되었는가? 정의되지 않았는가?

1) Global

var

2) Block

const, let

 

부모는 자식꺼 사용X, 자식은 자기 위로 접근 O

 

7.  Expression , Statement

 

expression : value를 리턴하는 무언가

 

statement : 그냥 명령. 

if, else, else if, for, while 이런 지시어

호출과 선언. 선언은 상단으로 가져온다 : 호이스팅

express 는 상단으로 옮겨지지 않는다.

 

8.  IIFE 그리고 모듈

 

즉시함수호출 immediately-invoke Function Expressions

 

: 함수이다. 자기 자신을 일으키는 함수

 

공개 Array

  

 

비밀 Array

이렇게 작성해도 됨

console 에서 sercretUsers 를 호출하지 못함. 비밀 Array임

Module

app.js

app2.js

index.html

따라하기:

 

시도했으나

Access to script at 'file:///C:/경로/src/export.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. 오류 발생

 

오류 발생: Access to script at '파일경로/src/export.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. 

해결 참고: https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu

 

npm install http-server -g

npx http-server

http://127.0.0.1:8080

 

 

오류 발생: Uncaught TypeError: Failed to resolve module specifier "

해결 참고: https://www.python2.net/questions-813840.htm

 

경로 수정

성공

9. Message Queue, Event Loop

 

blocking : 파이썬

None blocking: 자바스크립트

 

 

 

blocking function : alert()

 

이 과정을 설명

 

과정1

message Queue : Web api에서 온 메세지

 

과정2 message queue에서 stack으로 이동

 

 

10. setTimeout, setInterval, requestAnimationFrame

 

setTimeout: 몇 초 기다린 후 함수 실행

자바스크립트 개념이 아님. 브라우저, nodeJS 개념에서 왔음

clearTimeout();

 

setInterval : 정해진 매시간마다 함수를 실행시킨다.

clearInterval(아이디); : 정지 

setInterval(함수, 밀리세컨드, 함수에 들어갈 값);

requestAnimationFrame : 뭔가를 최대한 빠르게 실행하고 싶다면 사용해라.

브라우저가 업데이트 할때마다 animation frame을 요청한다. 그래서 애니메이션을 수정할 수 있다.