FrontEnd/JavaScript

Modern JavaScript 기본개념

is..cy 2023. 1. 1. 15:29

1. 프로그래밍 기본개념 및 동작 원리

  • 프로그래밍 : Computer 실행을 위한 Communication으로  문제에 대한 정의를 마련하고 결과를 도출하는 일련의 과정
  • 0, 1 로 이루어진 이진법으로 기계가 이해할 수 있도록 요구사항을 설명하는 작업이다.

 

사람      ———————— compiler ——————    computer Programming Language

(Syntax & Semantics)                      (Machine Language)

 

(문제인식 - 프로그램설계 - 프로그램구현 - 테스트 및 디버깅 - 유지보수)

여기서 개발자로서 필요한 역량이 Computational thinking을 통한 문제해결능력이다.

  • 문제해결능력 : 요구사항의 집합을 분석하여 적절한 자료구조와 함수의 집합으로 변환 후, 흐름을 제어 하는 과정 (문제 - 해결방안 - 코드)

 


2. JavaScript

- 정적인 HTML을 동적으로 표현하기 위한 경량의 프로그래밍 언어로 도입

- 크로스 플랫폼으로 모바일 하이브리드앱, 서버사이드, 데스크톱, 머신러닝, 로보틱스에서 사용됨

- 웹브라우저에서 동작하는 유일한 프로그래밍 언어- Interpreter Language : 개발자의 별도 컴파일 작업을 필요로 하지 않는다.

- Multiparadigm Language : 명령형 (imperative), 함수형 (functional), 프로토타입 기반 (prototype-based) 객체지향 프로그래밍

 

  • Ajax(Asynchronous JavaScript and XML)(1999) : 비동기적(Asynchronous)로 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능
  • jQuery (2006): DOM(Document Object Model)을 보다 쉽게 제어하며 크로스 브라우징 이슈 해결.
  • V8 JS Engine (2008): 웹애플리케이션 사용자 경험을 제공하는 프로그래밍언어로 정착
  • Node.js (2009): 브라우저 이외의 환경에서도 동작시킬 수 있는 자바스크립트 실행환경 (백엔드 영역까지 웹프로그래밍 언어의 표준으로 자리잡음)
  • SPA의 대중화 (Single Page Application) : Angular, React, Vue
  • JavaScript & ECMAScript • ECMAScript : JS 표준 명세로 타입/ 객체/ 프로퍼티/ 함수/ 빌트인 객체 등 핵심문법(core syntax) 을 규정함, 클라이언트 사이드 Web API (DOM)을 포괄하는 개념

 


3. Node.js & npm

  • Crome V8 자바스크립트 엔진으로 빌트된 런타임 환경
  • 빌트인 API를 제공
  • 데이터를 실시간 처리하여 빈번한 I/O가 발생하는 SPA에 적합
  • Npm (node package manager) : 자바스크립트 패키지 매니저로 node.js에서 사용 가능한 모듈들을 패키지화하여 모아둠 (저장소역할)
  • CLI (common line interface) : 패키지설치 및 관리

 


4. 브라우저 동작 원리 및 핵심기능

  • 요청 & 응답을 통해 브라우저에 데이터를 표시
  • Redering engine 으로 html/ css parsing
  • 동기적으로 html/ css/ javascript 처리
  • 페이지 로딩 단축 (렌더링 지장받는일 적음)
  • 자바스크립트엔진 (렌더링엔진과 다름) : HTML파서에서 Script를 만날시 자바스크립트 엔진으로 제어 권한을 넘김 - 자바스크립트 실행 종료후 제어권한을 다시 넘기며 DOM생성을 재게