JS) NODE 공부전 알아두면 좋은 자바스크립트

자바스크립트 실행 순서

1. JS파일을 읽을 때 함수문은 메모리에 쌓기
2. 실행문이 실행되면 호출스택에 쌓고 실행한다
3. 실행문 중 setTimeout, Promise 중 than/catch 등을 만나면 백그라운드(Web API)로 넘긴다.
4. 다음 호출스택에 쌓고 실행이 모두 최종적으로 완료되고 어나니머스(전역 객체)도 호출 스택 종료
   백그라운드에 있는 실행문이 태스큐에서 대기상태에 있다가 위 상황 뒤에 호출스택으로 이동 후 해당 실행문을 실행한다.

WHY? 그럼 백그라운드는 멀티쓰레드인거 같은데 자바스크립트는 싱글쓰레드 아닌가요?

 -> 멀티쓰레드로 동작이 가능하다 하지만 백그라운드와 태스크큐는 자바스크립트 언어가 
 아닌 C++환경에서 작동한다. 
 백그라운드는 브라우저 혹은 운영체제에서 처리해주기 때문,
 자바스크립트에서 멀티쓰레드 환경을 구현하려면 node 14버전 이후 웹워커(워커쓰레드)를 활용하면 된다.

WHY? 태스크큐에서도 우선순위가 있나요?

--> 있다. 
태스크큐에 같이 대기하고 있을 때seTimeout 보다 약속이 있는 promise가 우선 순위가 높아 먼저 실행된다.

자바문법 this, that

화살표 함수를 사용하게 되면 자기만의 this를 안가지기 때문에 상위스코프의 this를 가지게 된다.
일반 함수는 자기만의 this를 가져서 부모의 this가 가지기 위해선 that에 부모를 넣어서 사용
function(), ()=> 의 차이를 잘 구분해서 this를 사용하는 여부를 결정하자
기본적으로 화살표 함수를 쓰되, this를 사용해야하는 경우에는 둘 중에 하나 골라서

구조분해 할당

주의점: this가 포함되어 있으면 오류가 날 수 있어 주의

객체나 배열의 자리 수를 맞춰주면 변수에 대입할 수 있다.
ex) const {getCandy, status: { count }} = candyMachine; const [node, obj, , bool] = array
배열은 자리수를 맞추고 필요없는 자리는 콤마(,)로 빈칸처리하면 된다

프로미스

내용은 실행은 되었지만 결과를 아직 반환하지 않은 객체

코드를 분리할 수 있느냐 없느냐의 중요한 차이가 존재
즉, 실행을 해놓고 나중에 필요할 때 꺼내 쓸 수 있다

AJAX요청시 Axios 라이브러리를 사용하는게 편함.
HTML에 아래스크립트를 추가하면 사용할 수 있음
프로미스 기반 코드라 async/await 사용 가능
axios.get(‘url’)
    .then((result) => {
        console.log(result);
        console.log(result.data);
    })
    .catch((error) => {
        console.error(error);
    })
혹은
(async () => {
    try {
        const result = await axios.get(‘URL’)
        console.log(result);
        console.log(result.date);
    }catch(error){}

POST 전송시에는 axios.post( URL, {}) {}안에 키와 값을 담아서 보내면 됨
formData 객체 이용가능

tip. 가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우 발생

=> encodeURIComponent로 한글 감싸줘서 처리
ex) const result = await axios.get(`URL${encodeURIComponent(‘한글’)}`);
서버에서는 decodeURIComponent로 서버에서 받을 때 한글 해석

HTML자체에 데이터를 저장하는 방법(dataset)

자바스크립트에서 태그.dataset.속성명으로 접근 가능 = data-user-id => dataset.userJob
자바스크립트 dataset에 값을 넣으면 data-속성이 생긴다. = dataset.userJob => data-user-id

REPL(read, eval, print, loop) 읽고, 실행, 출력, 반복