FrontEnd
-
Modern JavaScript npm & ModuleFrontEnd/Node.js 2023. 3. 16. 02:06
1. npm (node package manager) 모듈 : Application을 구성하는 개별적 요소 (일반적으로 파일단위로 분리, 필요에 따라 로드) 모듈별(기능별)로 분리되어 있을시 개발효율성과 유지보수성 향상 (javascript은 부재) RequireJs : AMD 방식으로 비동기적으로 동작하는 모듈로더 Node.js는 CommonJS 방식을 따름 CLI (Command line interface) : Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할, 패키지설치 및 관리 역할 package.json : 프로젝트 정보와 패키지의 의존성을 관리, 해당파일로 팀내에 동일한 배포환경을 빠르게 구축할 수 있음 //macOS의 경우 전역에 설치된 패키지 경로 : /usr/lo..
-
Modern JavaScript Node.jsFrontEnd/Node.js 2023. 3. 14. 23:31
1. Node.js 개요 Chrom V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임환경(Runtime Environment)로 주로 Server Side에서 사용되는 Software Platform 외부 환경에서 자바스크립트 애플리케이션 개발에 사용되며 모듈, 파일시스템, HTTP 등 Built-in API 제공 Non-blocking (웹동작 대기시간이 적음) I/O와 단일 스레드 이벤트 루프를 통해 높은 Request 처리 성능을 가짐 실시간 처리가 빈번한 I/O가 발생하는 SPA에 적합하지만, CPU 사용률이 높은 Application에는 권장하지 않음 Socket.io를 통해 실시간 통신을 실행하는 라이브러리 사용 (대량의 데이터처리, 실시간통신) 2. 설치 Node.js 웹사이트(http:..
-
Modern JavaScript TypeScriptFrontEnd/TypeScript 2023. 3. 11. 17:46
Typescript superset 1. TypeScript 배경 JavaScript 태생적 한계 : Prototype-based Object Oriented Language, Scope/This, 동적타입언어 TypeScript는 Transpiler를 사용하지 않아도(Babel) ES6기능을 자바스크립트 엔진(브라우저/Node.js)에서 사용 가능 2. TypeScript 장점 정적타입 : 명시적인 설정은 코드 가독성을 높여 디버깅이 쉬워짐 //Parameter에 타입을 정의 function sum(a: number, b: number) { return a + b; } sum('x', 'y'); // error TS2345: Argument of type '"x"' is not assignable to..
-
Modern JavaScript REST API / SPAFrontEnd/JavaScript 2023. 3. 4. 15:49
1. REST (Representational State Transfer) URI에 정보의 자원 표시 (동사보다 명사 사용), ex. GET /todos/1 자원에 대한 행위는 HTTP Method로 표현 (GET, POST, PUT, DELETE 등) ex. DELETE / todos/1 Method Action Role PayLoad GET index/retrieve 모든/특정 리소스를 조회 x POST create 리소스를 생성 ○ PUT replace 리소스의 전체를 교체 ○ PATCH modify 리소스의 일부를 수정 ○ DELETE delete 모든/특정 리소스를 삭제 x 2. REST 구성 자체 표현 구조 구성요소 내용 표현방법 Resource 자원 HTTP URI Verb 자원에 대한 행위..
-
Modern JavaScript EventFrontEnd/JavaScript 2023. 3. 4. 14:56
1. Event Loop DOM Object Elements 와 관련, 웹페이지 이벤트 발생시 작업 로드 Event Handler : 이벤트에 맞는 반응 처리 JavaScript engine은 요청된 작업을 순차적으로 실행하며 동시성을 지원, 브라우저나 Node.js은 비동기 요청 처리 환경 구성 Event Loop : Queue, Stack, Heap, Web API • Call Stack : 작업 요청시 순차적으로 Stack 쌓임 (단 하나의 Stack사용으로 task 종료 전까지 다른 task 수행 불가) • Heap : 동적으로 생성된 객체 인스턴스가 할당된 영역 • Event Queue : 이벤트 루프에 의해 Call Stack이 비어지는 시점에 순차적으로 Call Stack영역으로 이동되어 처..
-
Modern JavaScript Asynchronous processing modelFrontEnd/JavaScript 2023. 3. 3. 14:37
1. 비동기식 처리모델 Task가 종료되지 않은 상태여도 대기하지 않고 다음 Task 실행 (Non-Blocking) 서버 응답에 따라 이벤트 핸들러가 Task 수행 (순차적이지 않음) JavaScript 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 가 해당 func1 호출시 Call Stack이 쌓이고 func2를 호출하여 차례로 Stack이 쌓이며 setTimeout이 호출됨 setTimeout 콜백함수는 즉시 실행되지 않고 지정되 대기 시간만큼 기다리다가 tick 이벤트 발생시 Task Queue로 이동 Call Stack이 비어졌을시 Call Stack으로 이동 2. Ajax (Asynchronous JavaScript ans XML) R..
-
Modern JavaScript Document Object ModelFrontEnd/JavaScript 2023. 3. 1. 18:37
1. DOM (Document Object Model) 텍스트 형식 웹문서를 브라우저에서 랜더링하기 위해 필요 모든 Element, Attribute, Text를 각 객체로 만들고 트리구조로 구성 JavaScript를 통해 동적으로 변경 2. DOM API (Document Object Model Application Programming Interface) DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합 HTML 문서에 대한 모델 구성 : 브라우저는 Html 문서를 로드하고 문서 모델을 메모리에 DOM Tree 형태로 생성 HTML 문서 내의 각 요소에 접근/수정 3. DOM Tree 문서 노드 (Document Node) : 트리 최상위에 존재하며 Element, Attribute, Text No..
-
Modern JavaScript ArrayFrontEnd/JavaScript 2023. 2. 25. 11:36
1. 배열의 형태 const arrLiteral = ['a','b','c']; const objLiteral = { 'A' : 'a' , 'B' : 'b' , 'C' : 'c' } 배열리터럴 (Array.prototype) : 프로퍼티명 없이 요소만 존재, 인덱스 0 부터 시작 객체리터럴 (Object.prototype) : 중괄호로 'key : value' 형태로 구성 다양한 타입의 데이터가 배열의 요소로 들어갈 수 있다. const misc = [ 'string', 10, true, null, undefined, NaN, Infinity, ['nested array'], { object: true }, function () {} ]; 2. 배열 생성자와 연산자 // 배열 생성자 const arr = ..