[JavaScript] javascript 주요 개념 간단 정리

Introduction

javascript 복습 겸 주요 개념을 아주 간단히 정리해보았다.

1. 브라우저 렌더링 과정
   • HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다.
   • 두 Tree를 결합하여 Rendering Tree를 만든다.
   • Rendering Tree에서 각 노드의 위치와 트리를 계산한다.
   • 계산된 값을 이용해 각 노드를 화면 상의 실제 픽셀로 변환하고, 레이어를 만든다.
   • 레이어를 합성하여 실제 화면에 나타낸다.
2. 브라우저 동작 원리
   • 클라이언트가 참조하고자 하는 웹페이지를 서버에 요청하고 서버의 응답을 받아 브라우저에 표시한다.
3. 데이터 타입
   • 원시 타입: number, string, boolean, null, undefined, symbol
   • 객체 타입: object
4. 연산자
   • 산술 연산자, 문자열 연결 연산자, 할당 연산자, 비교 연산자, 논리 연산자, 타입 연산자, 인스턴스 생성 연산자
5. 함수 선언식 vs 함수 표현식
   • 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
   • //함수 선언식 function app(){} //함수 표현식 const app = function() {}
   • 즉, 함수 표현식은 함수가 할당되기 전에 호출이 먼저 진행되면 변수로 인식하고, 에러가 난다.
6. 호이스팅
   • 코드가 실행하기 전 변수/함수 선언문이 모두 해당 스코프의 최상단으로 끌어 올려지는 현상
7. 객체
   • 자바스크립트 객체는 키와 값으로 구성된 프로퍼티의 집합
   • 자바스크립트 함수는 일급 객체이므로 값으로 취급 가능
8. 일급 객체
   • 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
   • 특성
     • 변수에 할당 가능(함수 표현식)
     • 다른 함수를 인자로 받는 것이 가능(콜백 함수, 고차 함수)
     • 다른 함수의 결과로서 리턴 가능(고차 함수)
9. 함수 레벨 스코프 vs 블록 레벨 스코프
   • 함수 레벨 스코프: 함수 내에 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. (var 사용 시)
   • 블록 레벨 스코프: 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. (let 사용 시)
10. == vs ===
    • == : 두 값이 같음
    • === : 두 값과 타입이 같음
11. 데이터 형 변환
    • 암묵적 형 변환: 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것
      • + (더하기 연산자) : 숫자형이 문자형을 만나면 문자형으로 변환되어 연산
    • 명시적 형 변환: 의도를 가지고 데이터 타입을 변환 시키는 것
      • Object()
      • Number()
      • toString()
      • Boolean()
      • 산술연산자 (-, *, /)
12. 단축 평가
    • 논리 평가를 결정한 피연산자의 평가 결과를 그대로 반환
    • &&, ||
13. 불변성 유지 방법
    • 객체는 불변 가능하기 때문에 불변 객체로 만들어주어야 한다.
      • 스프레드 문법 사용
      • immer 라이브러리 사용
      • Object.assign, Object.assign
14. 프로토타입
    • 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데, 이것이 프로토타입이다.
    • 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용하며, 자신이 다른 객체의 원형이 된다.
15. 스코프
    • 참조 대상 식별자를 찾아내기 위한 규칙
      • 전역 스코프 - 전역 변수
      • 지역 스코프 - 지역 변수
    • 8번 참고
16. 렉시컬 환경
    • 코드를 실행하기에 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체
    • 변수와 해당 변수에 대입된 값이 매핑되는 곳
    • 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디서 선언하였는지에 따라 결정
17. 실행 컨텍스트
    • 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
    • 자바스크립트 코드가 실행되는 환경
18. strict mode
    • 엄격하게 문법을 검사하는 모드
      • 선언하지 않은 변수 참조 금지
      • delete 사용 금지
      • 매개변수 이름 중복 금지
      • with 문 사용 금지
      • this 사용 시 undefined 바인
19. this
    • 함수를 호출할 때, 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정
      • 함수 호출 시 : window
      • 메소드 호출 시 : 해당 메소드를 호출한 객체
20. 클로저
    • 자신을 포함하고 있는 외부 함수보다 내부 함수가 더 오래 유지되는 경우, 외부 함수 밖에 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있는 함수
    • 반환된 내부 함수가 자신이 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수
21. DOM
    • 브라우저의 렌더링 엔진이 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는 것
    • DOM tree
      • 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델
      • 구성
        • 문서 노드(트리의 최상위 노드)
        • 요소 노드
        • 어트리뷰트 노드
        • 텍스트 노드
22. 동기 vs 비동기
    • 동기식 처리
      • 순차적으로 일이 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기
    • 비동기식 처리
      • 일이 종료되지 않은 상태라 하더라도 대기하지 않고 다음 일을 실행
23. 이벤트
    • 호출 스택
      • 작업이 요청되면 요청된 작업은 순차적으로 Call Stack 에 쌓이게 되고 순차적으로 실행된다.
    • 이벤트 큐
      • 이벤트 루프에 의해 특정 시점에 순차적으로 Call Stack으로 이동되어 실행
    • Event Loop
      • Call Stack 내에서 현재 실행 중인 task가 있는지, 그리고 Event Queue에 task가 있는지 반복 확인.
24. REST API
    • REST의 규칙
      • URI은 정보의 자원을 표현해야 한다.
      • 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.
    • REST API의 구성
      • HTTP URL
      • HTTP Method
25. HTTP Method
    • GET: 데이터를 조회
    • POST: 데이터를 전송, 생성
    • PUT: 데이터 전체를 교체
    • PATCH: 데이터 일부를 수정
    • DELETE: 데이터를 삭제
26. PUT vs PATCH
    • PUT: 데이터 전체를 교체
    • PATCH: 데이터 일부를 수
27. Ajax
    • 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식
28. JSON
    • 클라이언트와 서버 간의 데이터 교환을 위한 데이터 포
29. var vs let vs const
    • var
      • 함수 레벨 스코프
      • 생략 허용
      • 변수 중복 선언 허용
      • 변수 호이스팅
      • 재할당 가능
    • let
      • 블록 레벨 스코프
      • 변수 중복 선언 금지
      • 변수 호이스팅
      • 재할당 가능
    • const
      • 블록 레벨 스코프
      • 변수 중복 선언 금지
      • 재할당 금지
      • 선언과 동시에 할당이 이루어져야 함
30. Promise
    • 비동기 메소드를 동기 메소드로 처리할 수 있다.
    • 내용은 실행되었지만 결과를 아직 반환하지 않은 객체
    • 상태
      • Pending(대기)
      • Fulfilled(이행)
      • Rejected(실패)
    • .catch() 문으로 에러 핸들링 가능
31. async/await
    • 콜백 지옥 발생 가능성을 없앰
    • await 는 async 함수 안에서만 동작
    • await 를 통해 Promise 반환 값을 받아올 수 있다.
    • try-catch() 문 이용하여 에러 핸들링
32. 콜백 지옥
    • 비동기 처리 로직을 위해 콜백 함수를 연속으로 사용할 때 발생하는 문제
    • 해결법
      • Promise
      • Async/Await
33. Promise vs Callback
    • Callback
      • 비동기 로직의 결과 값을 처리하기 위해서는 callback 안에서만 처리해야 한다.
      • 콜백 밖에서는 비동기에서 온 값을 알 수가 없다.
    • Promise
      • 프로미스 객체에 비동기가 처리된 결과 값이 저장된다.
      • .then() 메소드를 통해서 저장되어 있는 값을 원하는 때에 사용할 수 있다.
34. 이벤트 버블링 & 캡쳐링
    • 버블링
      • 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고, 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상
    • 캡쳐링
      • 버블링과 반대로 최상위 태그에서 해당 태그를 찾아 내려간다.
35. 얕은 복사 vs 깊은 복사
    • 얕은 복사
      • 객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성
      • 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.
    • 깊은 복사
      • 객체를 복사할 때, 해당 객체와 인스턴스 변수까지 복사하는 방식
      • 전부 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다.
36. Babel vs Webpack

• Babel: 최신 사양의 자바스크립트 코드를 구형 브라우저에서도 동작하는 코드로 변환 가능
• //바벨 설치 npm install --save-dev @babel/core @babel/cli @babel/preset-env
• Webpack: 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러
• //웹팩 설치 npm install --save-dev webpack webpack-cli