2.자바스크립트

12 Dec 2022 • Node • Javascript

2.1 호출스택, 이벤트 루프

  • Anonymous은 가상의 전역 컴텍스트(항상 있다고 생각)
  • stack 에 Anonymous은 파일이 시작되서 최초 스택에 push되면 마지막에 pop 된다.

호출 스택

  • 동기로 수행되며 함수들의 실행 순서에 따라 pop/push 된다
  • 비동기 코드는 호출 스택만으로는 설명이 안되어 호출 스택 + 이벤트 루프로 설명

이벤트 루프

  • 이벤트 루프를 설명하기 위한 것들
    • 호출스택
    • 백그라운드
      • 다른 스레드가 실행한다.
      • 호출 스택과 동시에 실행 된다.
      • 백그라운드가 먼저 끝나 더라고 호출 스택이 먼저 처리 되어야 한다.
      • 백그라운드로 보낼 수 있는 함수는 제한적으로 사용 할 수 있다.(setTimeout, setInteval 등)
      • 자바스크립트가 아니고 C++이거나 운영체제에서 관리되는 것이다.
    • 태스크 큐
      • 자바스크립트가 아니고 C++이거나 운영체제에서 관리되는 것이다.
      • 백그라운드에서 처리되어야 할 task가 태스크 큐로 보내 지며
      • 태스크 큐는 호출 스택이 비어 있을 경우에 호출 스택에 보내 진다.
  • 동작 방식
    • setTimeout같은 함수는 백그라운드에 타이머(run, 3초)와 같은것을 보내 준다.
    • 호출 스택에 모든 함수가 사라진후 백그라운드에 서 run 함수가 태스크 큐로 보내 진다.
    • 이때 백그라운드는 비워 진다.
    • 이벤트 루프는 호출 스택이 비워 졌을 때 태스크 큐의 함수를 하나씩 가져와 호출 스택에 넣어 실행한다
    • (궁금) 태스크 큐에서 호출 스택을 갈 경우 Anonymous은 생성되지 않는가?
  • setTimeout이 0초 라도 백그라운드와 태스크 큐를 거치는 이벤트 루프로 실행되어야 한다.
  • promise는 then을 만나는 순간 비동기가 되어 백들라운드로 간다
  • promise.then/catch, process.nextTick이 setTimeout보다 태스크 큐에서 우선한다.

2.2 ES2015+ 문법

  • ES2015이전에는 var로 변수를 선언
  • EX2015부터는 const와 let이 대체
  • 가장 큰차이점은 블록 스코프 (var은 함수 스코프)
  • var는 기본 ‘{}’안에서 선언하여도 밖에서 사용 할 수 있다.
  • 하지만 function내부에서 선언 할경우에는 block scope가 지켜 진다.
  • const와 let의 차이
    • const는 한번 할당을(=) 1회만 할 수 있다.
    • let은 할당을 여러번 할 수 있다.
  • 템플릿 문자열 
    let word = 'javascript';
const result = `This is ${javascript}`;
  • 객체 리터럴
    • 속성 표현 방식들이 변경됨
    • Key/Value가 같은 경우 하나만 사용하여도 된다.
    • [변수 + 값]으로 동적 속성도 선언시에 바로 넣을 수 있다.
    • 객체 내 함수 선언 시 function 안 써도 됨
  • 화살표 함수
    • 함수가 결과값을 바로 retrun 할 때 구문을 생략하여 생산성을 높일 수 있다.
      • 단점: 헷갈릴 수 있다.
    • function을 완벽하게 대체할 수 없다.
    • 화살표 함수에서 this는 항상 부모의 this를 가진다.
    • 부모의 this가 아니라 자신의 this가 필요 할 경우 function을 사용해야 한다.
    • this를 쓸거면 function 아니면 모두 arrow로 처리
  • 구조분해 할당
    • 구조 분해 할당 시 this가 있는 경우에는 안하는게 좋다. ```javascript const { a, b: { d }, } = { a: 123, b: { c: 135, d: 146 } };

const [x1, , , y1, z1] = [1, 2, 3, 4, 5]; ```

  • 클래스
    • 프로토타입 문법을 깔끔하게 작성할 수 있는 Class 문법 도입
    • 생성자, 상속등을 깔끔하게 처리 가능
    • 코드 그룹화
    • 하지만 프로토타입도 쓸줄 알아야 한다.
  • 프로미스 (Promise)
    • 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체
    • then을 붙이면 결과를 반환함
    • resolve를 호출하면 성공(then), reject는 실패(catch), Finally는 무조건 실행
    • 콜백 지옥을 어느정도 예방 할 수 있다.
    • promise를 미리 실행하고 결과값을 들고 있다가 이후 필요 할 때 promise에 then을 붙여 결과를 가져 올 수 있다.
    • setTimeout의 콜백과 다른점은 결과값을 사용하는 시점을 달리 할 수 있다.
      • 코드를 분리 할 수 있다.
    • Promise.all(배열): 여러개의 프로미스를 동시에 실행
    • allSettled로 실패한것만 추려 낼 수 있다
  • Async/Await으로 한번 더 축약이 가능
    • await이 then역할을 한다.
    • await을 쓸 경우 try/catch로 사용해야 한다.
    • await을 쓸 때 항상 Async function이 필요 하다
    • 하지만 현재는 Async function없이 탑 레벨 await으로 인해 const result = await promise같은 문법이 가능하다
    • Async에서 return 되는 값도 await(then)으로 받아야 한다.
  • 다른개발자의 코드를 분석하기위하여 프로토타입/클래스 둘다 알아야 한다.

2.3 프런트엔드 자바스크립트

  • AJAX
    • AJAX 요청시 Axios라이브러리를 사용
  • FormData
    • HTML form 태그에 담긴 데이터를 AJAX요청으로 보내고 싶은 경우 사용
    • 주소에 한글이 있을 경우 encodeURIComonent() 를 한번 감싸주는게 좋다
    • 서버에서는 decodeURIComponent로 한글 해석
  • data attribute와 dataset
  • HTML 태그에 데이터를 저장하는 방법
  • 서버에서 데이터를 프런트로 내려줄 때 사용
  • 태그 속성으로 data-속성명
  • 자바스크립트에서 태그.dataset.속석명으로 접근 가능
    • data-user-job -> dataset.userJob
    • data-id -> dataset.id
  • 반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생김
  • dataset.monthSalary = 10000 -> data-month-salary=”10000”

출처

 Node  Javascript

Comments

Other Posts