자바스크립트 주요 개념

 

자바스크립트 주요 개념

 

자바스크립트는 웹 개발에서 필수적인 언어다

HTML, CSS와 함께 사용되며, 웹 사이트의 대부분이 자바스크립트를 사용하여 웹 페이지의 동작을 제어한다

 

React와 같은 라이브러리, Vue와 같은 프레임워크는 자바스크립트 코드를 래핑하고 확장하여 그 기능을 극대화한다

이러한 도구들은 근본적으로 자바스크립트를 기반으로 하며,

상태 관리와 이벤트 처리 역시 자바스크립트의 원리에 기초한다

 

이러한 라이브러리나 프레임워크는 자바스크립트의 기본 개념을 확장하여,

웹 애플리케이션을 더 효율적으로 개발할 수 있도록 돕는다

 

 

자바스크립트에서 Deep 하게 공부할 주제들은 다음과 같다

 

자바스크립트 주요 개념

1. 변수 (Variables) - var, let, const
   •    자바스크립트에서 변수를 선언하는 방법은 var, let, const이다
     •    var : 함수 스코프를 가지며, 호이스팅 됨
     •    let : 블록 스코프를 가지며, 재할당 가능
     •    const : 블록 스코프를 가지며, 재할당 불가
2. 데이터 타입 (Data Types)
   •    undefined
   •    null
   •    boolean
   •    number
   •    string
   •    symbol
   •    bigint
   •    object
3. 함수 (Functions)
   •    함수는 재사용 가능한 코드 블록으로, 선언 방식에는 함수 선언문, 함수 표현식, 화살표 함수 등이 있다
     •    함수 선언문 : 함수 이름과 함께 선언되며, 호이스팅되어 함수 호출이 선언문 앞에 있어도 실행된다
     •    함수 표현식 : 변수에 함수를 할당하는 방식으로 선언되며, 호이스팅 되지 않으므로 함수 호출이 선언문 뒤에 있어야 한다
     •    화살표 함수 : 간결한 문법으로 함수 표현식을 대체하며, this 바인딩이 다르다
4. 객체 (Objects)
   •    객체는 키-값 쌍으로 이루어진 데이터 구조로, 자바스크립트의 거의 모든 것이 객체다
5. 배열 (Arrays)
   •    여러 개의 값을 순서대로 저장할 수 있는 데이터 구조로, 다양한 메서드들이 있다
     •    push() : 배열의 끝에 새로운 요소 추가
     •    pop() : 배열의 마지막 요소를 제거하고 반환
     •    map() : 배열의 각 요소에 대해 주어진 함수를 호출한 결과로 새로운 배열을 만든다
     •    filter() : 주어진 함수의 조건을 만족하는 요소들로 새로운 배열을 만든다
     •    forEach() : 배열의 각 요소에 대해 주어진 함수를 호출하며 반환값이 없다
     •    reduce() : 배열의 각 요소를 주어진 함수에 따라 누적하여 단일 값을 반환한다
6. 프로토타입 (Prototype)
   •    프로토타입은 객체의 상속을 구현하는 메커니즘으로, 자바스크립트는 프로토타입 체인을 통해 객체 간 상속을 구현한다
7. 클로저 (Closures)
   •    클로저는 함수와 함수가 선언된 어휘적 환경의 조합으로, 내부 함수가 외부 함수의 변수에 접근할 수 있게 한다
8. 비동기 프로그래밍 (Asynchronous Programming)
   •    자바스크립트는 비동기적으로 작업을 처리할 수 있으며, 주요 개념으로는 콜백, 프로미스, async/await 이 있다
     •    콜백 (Callback)

       function designWork(callback) {
         console.log('피그마로 디자인 작업을 한다');
         setTimeout(() => {
           console.log('디자인 완료!');
           callback(); // 디자인 완료 후 개발 시작
         }, 2000);
       }
       
       function developWork() {
         console.log('개발 시작');
         setTimeout(() => {
           console.log('개발 완료!');
         }, 3000);
       }
       
       console.log('I am seolyu(a world-class designer and developer)');
       designWork(developWork);

        
     •  프로미스 (Promise)   

       function designWork() {
         return new Promise((resolve, reject) => {
           console.log('피그마로 디자인 작업을 한다');
           setTimeout(() => {
             console.log('디자인 완료!');
             resolve();
           }, 2000);
         });
       }
       
       function developWork() {
         return new Promise((resolve, reject) => {
           console.log('개발 시작');
           setTimeout(() => {
             console.log('개발 완료!');
             resolve();
           }, 3000);
         });
       }
       
       console.log('I am seolyu(a world-class designer and developer)');
       designWork()
         .then(developWork)
         .then(() => {
           console.log('디자인과 개발 모두 완료!');
         })
         .catch(error => {
           console.error('에러', error);
         });

       
       
     • async/await 

       function designWork() {
         return new Promise((resolve, reject) => {
           console.log('피그마로 디자인 작업을 한다');
           setTimeout(() => {
             console.log('디자인 완료!');
             resolve();
           }, 2000);
         });
       }
       
       function developWork() {
         return new Promise((resolve, reject) => {
           console.log('개발 시작');
           setTimeout(() => {
             console.log('개발 완료!');
             resolve();
           }, 3000);
         });
       }
       
       async function mainWork() {
         console.log('I am seolyu(a world-class designer and developer)');
         await designWork();
         await developWork();
         console.log('디자인과 개발 모두 완료!');
       }
       
       mainWork().catch(error => {
         console.error('에러', error);
       });

        
9. 이벤트 루프 (Event Loop)
   •    이벤트 루프는 자바스크립트의 동시성 모델을 설명하는 개념으로, 콜 스택과 태스크 큐를 관리하여 비동기 작업을 처리한다
10. 호이스팅 (Hoisting)
    •    호이스팅은 변수와 함수 선언이 그 범위의 최상단으로 끌어올려지는 자바스크립트의 기본 동작인데, 초기화는 호이스팅되지 않는다
11. 스코프 (Scope)
    •    스코프는 변수, 함수, 객체에 접근할 수 있는 범위를 의미하며, 주요 스코프로는 전역 스코프와 지역 스코프가 있다
12. this
    •     this는 함수 호출 방식에 따라 달라지는 특별한 키워드로, 일반 함수, 메서드, 생성자 함수, 화살표 함수 등에서 다르게 동작한다
13. 모듈 (Modules)
    •    모듈은 코드를 재사용 가능한 블록으로 나누는 방법으로, 자바스크립트에서는 import, export 키워드를 사용하여 모듈을 정의하고 사용한다
14. 자바스크립트 동작 방식
    •    자바스크립트는 싱글 스레드 언어로, 한 번에 한 가지 작업만 수행할 수 있다
    •    그러나 비동기 작업을 처리하기 위해 이벤트 루프와 콜백 큐를 사용한다
      •    콜 스택 (Call Stack)
        •    함수 호출이 쌓이는 곳으로, 자바스크립트 엔진이 함수 실행 순서를 관리한다
        •    함수가 호출될 때마다 콜 스택의 맨 위에 추가되고, 함수가 반환되면 콜 스택에서 제거된다
      •    태스크 큐 (Task Queue)
        •    비동기 작업(ex. 타이머, 이벤트 핸들러, 비동기 API 호출 등)의 콜백 함수들이 대기하는 곳이다
        •    콜 스택이 비워지면, 이벤트 루프가 태스크 큐에서 대기 중인 콜백 함수를 콜 스택으로 옮겨 실행한다
      •    콜백 큐 (Callback Queue)
        •    콜백 큐는 일반적으로 태스크 큐와 같은 의미로 사용
        •    마이크로태스크 큐와 같은 특별한 대기열을 언급할 때 사용되기도 한다
      •    마이크로태스크 큐 (Microtask Queue)
        •    프로미스의 후속 처리(then, catch, finally)나 MutationObserver와 같은 작업들이 대기하는 곳이다
        •    마이크로태스크는 태스크 큐보다 높은 우선순위를 가지며, 콜 스택이 비워지면 이벤트 루프는 태스크 큐보다 먼저 마이크로태스크 큐의 작업들을 처리한다 
      •    이벤트 루프 (Event Loop)
        •    콜 스택과 태스크 큐를 모니터링하여 비동기 작업을 처리하는 메커니즘
    •    위 동작 방식을 통해 비동기 작업을 효율적으로 처리하며, 웹 브라우저와 서버 환경에서 높은 응답성과 성능을 유지한다
15. 자바스크립트 엔진 (JavaScript Engine)
    •    자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 소프트웨어다
    •    웹 브라우저와 서버에서 자바스크립트를 실행할 때마다 사용된다
    •    대표적인 엔진으로는,
      •    구글의 V8 엔진: 크롬과 Node.js에서 사용되며 고성능 최적화와 빠른 실행 속도가 장점이다
      •    모질라의 SpiderMonkey: 파이어폭스 브라우저에서 사용된다
      •    마이크로소프트의 Chakra: 이전에는 인터넷 익스플로러와 Edge에서 사용되었으며, 현재는 Edge가 Chromium 기반으로 바뀌면서 V8 엔진을 사용한다
16. 인터프리터 (Interpreter)
    •    자바스크립트는 인터프리터 언어로, 코드를 한 줄씩 실행한다
    •    엔진이 자바스크립트 코드를 해석하고 실행하는 과정에서 인터프리터가 중요한 역할을 한다
      •    실시간 실행 : 자바스크립트 코드를 작성한 즉시 실행할 수 있어 빠른 피드백을 제공한다
      •    유연성 : 코드 실행 중에 오류가 발생하면, 해당 줄에서 실행을 멈추고 오류를 처리할 수 있다
      •    동적 실행 : 코드를 컴파일하지 않고도 바로 실행할 수 있어 개발과 디버깅이 용이하다
17. ECMAScript (ES)
    •    ECMAScript는 자바스크립트의 표준 사양을 정의한 것으로, 자바스크립트의 버전과 기능을 규정한다
    •    최신 버전으로는 ES6(ECMAScript 2015) 이후의 버전들이 있으며, 새로운 기능들이 지속적으로 추가되고 있다
      •    ES5 (ECMAScript 2009) : JSON 지원, 스트릭트 모드, 배열 메서드(Array.forEach, Array.map 등) 도입
      •    ES6 (ECMAScript 2015) : 화살표 함수, 클래스, 모듈(import/export), let과 const, 템플릿 리터럴, 디스트럭처링 할당, 프로미스, symbol 타입, Set 과 Map 데이터 구조 도입
      •    ES7 (ECMAScript 2016) : 지수 연산자(**), Array.prototype.includes 메서드 추가
      •    ES8 (ECMAScript 2017) : async/await, 객체의 값을 병합하는 Object.entries 와 Object.values 도입
      •    ES9 ( ECMAScript 2018) : Rest/Spread 속성, 비동기 이터레이터
      •    ES10 (ECMAScript 2019) : flat(), flatMap(), optional catch binding, Object.fromEntries()
      •    ES11 (ECMAScript 2020) : BigInt 타입, Nullish Coalescing 연산자(??), Optional Chaining 연산자 (?.)