FrontEnd/JavaScript
-
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 = ..
-
Modern JavaScript 정규표현식FrontEnd/JavaScript 2023. 2. 18. 14:36
1. Regular Expression new ReqExp(/ab+c/, i) : 정규식 객체 Flag 종류 Flag Meaning Description i Ignore Case 대소문자를 구별하지 않고 검색 g Global 문자열 내의 모든 패턴을 검색 m Multi Line 문자열의 행이 바뀌더라도 검색을 계속 RegExp.prototype.exec() : ['is', index : index, input : "sentence"] RegExp.prototype.test() : 인수에 정규표현식으로 검증하여 Boolean형태로 반환 String.prototype.replace() / String.prototype.search() / String.prototype.split() String.prototy..
-
Modern JavaScript 다양한 객체FrontEnd/JavaScript 2023. 2. 18. 13:57
JavaScript, 객체의 별도 생성없이 프로퍼티 및 메소드 사용이 가능 1. Number Wrapper Object • new Number() : Number() 생성자 함수 • Number.propertyName() : 정적프로퍼티로 사용 가능 • Number.EPSILON() : JavaScript에서 표현 가능한 가장 작은수, 해당기능을 사용하여 부동소수점 비교 가능 • Number.Max_Value() : JavaScript에서 사용 가능한 가장 큰 숫자 반환 (이보다 큰숫자는 Infinity) • Number.MIN_VALUE() : 가장 작은 수 반환 (이보다 작은 숫자는 0으로 반환) • Number.POSITIVE_INFINITY() : 양의 무한대 Infinity 반환 • Number..
-
Modern JavaScript Built-in ObjectFrontEnd/JavaScript 2023. 2. 11. 18:38
1. Native Object 객체 생성과 관련 : Object, String, Number, Function, Array, RegExp, Date, Math, Boolean, Symbol (변경불가능한 원시타입) [[Prototype]] property에 바인딩된 객체 != Object.prototype (참고 : https://isaac-yoon.tistory.com/7) Function Object : new 연산자를 사용하여 생성가능 (참고 : https://isaac-yoon.tistory.com/6) Error : throw, catch 구문 사용 가능 (EvalError, InternalError, RangeError, ReferenceError, SyntaxError, TypeError, ..