TIL

기본 개념 및 동작 원리 이해가 중요하다.용어, 개념, 문법, 컴퓨팅 사고을자바스크립트의 기본 개념을 자세히 공부한 적이 없다는 것을 깨달음.책을 읽으며 기본기를 다지자는 목표를 세움.프로그래밍은 문제 해결의 도구.(프로그래밍을 통한) 문제 해결을 위해 필요한 것들문제

브라우저와 Node.js크롬 브라우저Source 탭에서, Break Point 이용한 디버깅 가능https://developer.chrome.com/docs/devtools/ 의 Console & JS 챕터 참조Node.jsLive Server 플러그인 : 변

변수: 메모리에 저장된 데이터의 주소를 참조하기 위한 식별자키워드: JS 엔진이 수행할 동작을 규정한 명령 (var, const, let 등)JS는 변수 선언시 암묵적으로 undefined를 할당하므로 Garbage value가 들어가지 않음JS엔진은 소스코드의 평가과

명시적 타입변환 (Explicit coercion)변환의 의지가 명백함암묵적 타입변환 (Implicit coercion)의지가 명백 X암묵적 타입변환이 일어나는 지, 일어날 때 어떻게 변하는 지 예측하기 위해서라도 알아야 함문자열로의 변환String(var);var.t

함수는 인수(Argument)를 매개변수(Parameter)로 입력받아 반환값(Return value)를 출력한다.함수 리터럴: var fun = function func(arg1,arg2) { ... }함수 이름 생략이 가능하다.평가되어 값을 생성한다. (변수에 할당

식별자 결정: 변수명을 호출했을 때, 어떠한 변수를 줄지 결정하는 것스코프: 식별자를 결정할 때, 근거가 되는 범위이다.var의 문제점: 같은 스코프 내에서 중복으로 선언이 가능하다.에러 처리가 안된다.변수 값이 변경될 수 있다.스코프 체인: 스코프가 함수 중첩으로 인

내부 슬롯과 내부 메서드JS 엔진의 구현 알고리즘을 설명하기 위해 사용된 의사 프로퍼티와 의사 메소드\[\[]]로 감싸져 있는 것들 ex) \[\[Prototype]]프로퍼티 어트리뷰트프로퍼티가 생성될 때 어트리뷰트도 자동 정의된다.Object.getOwnPropert

일급 객체조건런타임에 생성이 가능변수나 자료구조에 저장이 가능함수의 매개변수로 전달이 가능함수의 반환값으로 사용이 가능의미일반적인 변수들은 일급 객체의 조건을 만족한다. 즉 일급 객체라는 건 값과 동일한 취급을 받는다. 함수가 일급객체라는 말은 즉, 함수는 값과 동일한

암묵적 전역: x = 10 을 선언하면 암묵적으로 전역 변수로써 사용할 수 있다.strict mode를 적용하면 선언 시 에러로 표현된다.전역에 적용 Xuse strict는 스크립트 단위로 적용된다.스크립트 마다 strict 여부를 혼용하면 혼란이 생긴다.라이브러리와

표준 빌트인 객체: ES에 정의된 객체이며, 모든 JS 런타임에서 전역 변수처럼 사용 가능.호스트 객체: 브라우저 환경 혹은 Node.js 환경 등에서 제공하는 객체. Ex) DOM, XMLHttpRequest사용자 정의 객체: 사용자가 직접 정의한 객체.원시값은 객체

전역 코드: 전역 스코프를 생성하여 전역 실행 컨텍스트에서 관리함수 코드: 지역 스코프를 생성하여 함수 실행 컨텍스트에서 관리eval 코드: 독자적인 스코프를 생성 (strict mode)모듈 코드: 모듈별로 독립적인 스코프를 생성컨텍스트 생성선언문 실행 후 실행 컨텍

클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.중요 키워드: 함수가 선언된 렉시컬 환경어디서 정의했는지에 따라 상위 스코프를 결정하는 것.어디서 호출했는지가 X정적 스코프라고도 함.(낳은사람이 부모 O / 키운사람이 부모 X) 같은 느낌상위 스코프는 외부

생성자 함수와의 차이점new 연산자 없이 호출시 에러 발생상속을 위한 extend, super 키워드 지원호이스팅가 없는 것처럼 동작 (TDZ가 존재)클래스 내에 strict mode 암묵적 지정 (해제 불가)모든 메서드가 열거 불가클래스 정의Ex) class Pers

ES6 이전 모든 함수는 동일하였다.일반함수 역시 생성자 함수로 호출이 가능했다.callable, constructor이었다.불필요한 프로토타입 객체를 생성하는 문제가 있었다.ES6 이후 목적에 따라 3가지로 구분하였다.| | constructor | prototype

array\[index] = element;객체와 차이배열은 객체의 일종이지만, 차이점이 있다.값의 순서가 존재length 프로퍼티가 존재일반적인 배열이 아니다.밀집배열 (일반 배열)하나의 데이터 타입으로 이루어짐메모리공간에 연속적으로 인접함빠른 접근 가능삭제, 추가

new Number()\[NumberData] 값에 0이 할당된다. (ES5에서는 \[PrimitiveValue]라고 부름)숫자가 아닌 값을 숫자로 변경하기도 한다.EPSILON : 표현가능한 가장 작은 수2.2e-16 이다.0.1 + 0.2 ! == 0.3 이다.(부

Math 객체는 수학적인 상수 & 함수를 위한 프로퍼티와 메서드 제공Math.PI : 3.14159... 반환Math.abs(): 절대값 반환Math.round(): 소수점 반올림Math.ceil(): 올림Math.floor(): 내림Math.sqrt(): 제곱근 반환

패턴을 가진 문자열 집합을 표현하기 위한 형식 언어이다.JS는 Perl의 문법을 도입하였다.간단한 체크 가능언어에 상관없는 공유가능가독성 불편/{pattern}/{flag}new RegExp(pattern\[,flag])/{pattern}/{flag} : 리터럴로 생성

Symbol: ES6에서 새로 도입된 원시값 데이터 타입이다.다른 값과 중복되지않는 유일한 값이다.충돌 위험이 없는 유일한 값을 나타내기 위해 사용한다.const symbol = Symbol(description);new 연산자는 사용되지 않는다.타입변환이 일어나지 않

스프레드 문법: 여러 집합을 펼쳐, 개별적인 값들의 목록으로 만든다.값이 아닌 값들의 목록이므로 변수에 할당할 수 없다.사용 용도함수의 인수 목록배열 리터럴의 요소 목록객체 리터럴의 프로퍼티 목록기존에는 apply를 이용하여 배열을 인자 목록으로 바꾸어 전달했다.Fun

렌더링 엔진은 HTML문서를 파싱하여 DOM을 생성한다.<div class="greet">Hi</div>위 태그를 노드로 바꾸면요소 노드: div어트리뷰트 노드: class="greet"텍스트 노드: "Hi"노드 객체들을 부자관계를 반영하여 트리구조로 구성시

브라우저는 특정 사건이 일어나면 를 감지하여 이벤트를 발생시킨다.이벤트 핸들러: 특정 이벤트가 일어났을 때 발생시키고자 하는 함수브라우저에게 위임하며, 브라우저가 이벤트를 감지하여 호출한다.이벤트와 이벤트 핸들러를 이용하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍 이

호출 스케줄링: 타이머 함수를 이용하여 함수 호출을 늦추는 것setTimeout, setInterval 등 타이머 함수는 호스트 객체이다.JS는 하나의 실행 컨테긋트 스택을 갖기에 두 가지 이상의 업무를 동시에 할 수 없다.싱글 스레드 방식이다.따라서 비동기 처리 방식

JS엔진은 하나의 실행 컨텍스트 스택을 가진다.하나의 태스크만 실행 가능하다.싱글 스레드 방식이다.시간이 오래 걸리는 태스크는 blocking 된다.동기 처리: 실행중인 태스크가 종료될 때까지 다음 태스크가 대기하는 방식blocking 발생비동기 처리: 종료되지않더라도

99년 MS에서 개발구글 맵스에서 App과 비견될 성능을 보여 주목받게 됨장점전통적인 방식요청마다 모든 HTML을 서버로부터 전송받아 불필요한 통신 발생모든 부분 렌더링 -> 깜빡임 발생동기 방식으로 동작 -> 서버 응답 전까지 다음의 처리는 BlockingAJAX요청

JSON Server을 이용한 실습을 진행하였다.새로 알게된 내용PATCH를 이용한 내용 일부 수정헤더 지정에 따라 결과값이 바뀜구매했던 네트워크 관련 서적을 꼭 읽어봐야 겠다. 아직 이해하지 못한 것 같다.비동기 처리가 필요한 이유 참고 비동기 함수가 실행된 시점에는

에러 처리가 되지 않은 상태로 에러가 발생한다면 프로그램이 강제 종료된다.에러 처리로 적절히 대응한다면, 계속 코드를 실행시킬 수 있다.예외 사항에 따른 대응을 하여 원익파악을 쉽게 할 수 있다.예외사항에서 발생하는 반환값( null, -1) 을 감지하여 처리에러 발생

모듈은 앱을 구성하는 요소이다.자신만의 파일 스코프를 가져야 한다.다른 모듈에서는 import / export 를 통해서만 접근 가능하다.JS는 모듈이 존재하지 않았다. (독자적인 파일 스코프가 X)이를 해결하기 위해 CommonJS, AMD (Asynchronous

IE를 포함한 구형 브라우저는 최신 ES과 ESM을 반영하지 않는다.트랜스파일러인 Babel과 모듈러인 WebPack을 이용하여 호환성 문제를 해결할 수 있다.트랜스파일러: 소스코드를 다른 언어로 변환하는 것Babel: ES6 문법을 ES5 (IE 이해 가능)으로 바꿔