모던자바스크립트 스터디 16일차이다. 37장 set 38장 브라우저의 렌더링 과정 오늘은 위 단원들을 공부하고 모르는것을 정리했다. # 문제 expressjs 프레임워크를 이용해서 코딩을 하다가 위 에러를 만났다. # 상황 rest api 중 post method를 사용해서 api call을 하려고 했다. body에 데이터를 담고 전송을 했는데, 위처럼 parse 에러가 났다. # 이유 자바스크립트 파싱과 실행은 위와 같은 과정을 거친다. 소스코드에서 문법적 의미를 가지는 최소 단위인 token으로 분해한다. 이 과정을 tokenizor 라고 한다. 그래서 token으로 만들었다면, 파싱을 해서 추상적 구문 트리(토큰의 문법적 구조를 반영한 트리구조)로 만든다. 마지막으로 구문 트리를 컴퓨터가 이해할 수..
JaveScript
모던자바스크립트 스터디 15일차이다. 33장 Symbol 34장 Iterable 오늘은 위 단원들을 공부하고 모르는것을 정리했다. # 궁금증 symbol을 왜 도입한걸까? # 이유 처음 ES6에 symbol type 도입 배경은 private 속성을 활성화하기 위함이었다고 한다. 근데, Object.getOwnPropertySymbols 으로 proxy를 사용해서 reflection을 통해 private 속성을 찾을 수 있게 되어서 더이상 비공개(private)가 아니게 되었다. 어떤 사람들은 리플렉션을 통해 개인 상태가 누출되는 것은 기능이 아니라 버그로 간주되어야 한다고도 하니, symbol을 사용할 이유가 있을까 한다. 따라서 symbol의 유일한 용도는 속성 간의 이름 충돌을 방지하는 unique..
모던자바스크립트 스터디 14일차이다. 29장 Math 30장 Date 오늘은 위 단원들을 공부하고 모르는것을 정리했다. # 궁금증 1 왜 Math.abs([])는 0이고 Math.abs({})는 NaN을 반환하는가? # 이유 Math.abs([]) (빈 배열) console.log(Math.abs([])); // 0 빈 배열을 Math.abs() 함수에 전달할 때 JavaScript는 배열을 암시적으로 숫자로 변환한다. 빈 배열에 대한 이 변환은 0으로 이루어지며, 따라서 Math.abs(0)은 단순히 0이 된다. 이 동작은 JavaScript가 값들을 숫자로 강제 변환하는 방식에 기인한다. Math.abs({}) (빈 객체) console.log(Math.abs({})); // NaN 빈 객체를 Mat..
expressjs 프로젝트를 만드는데, 로그가 안남아서 무슨 에러인지 확인이 어려웠다. 그래서 서칭을 하던중 morgan이라는 것을 알게되었다. # 패키지 설치 $ npm install morgan # typescript 사용시 아래 패키지도 설치 $ npm install @types/morgan # app.ts에 세팅 나는 ECMAScript 모듈 스펙을 이용해서 패키지를 불러오겠다. import morgan from 'morgan'; // log setting // 로그 형식 정의 morgan.format('detailed', ':method :url :status :res[content-length] - :response-time ms :remote-addr - :remote-user :referr..
# 변수는 힙에 저장한다. 자바스크립트의 원시값, 객체는 힙에 할당되어 있다.(일정 용량이 넘으면 스택이 아니라 힙에 저장) $ node --v8-options --stack-size --stack-size (default size of stack region v8 is allowed to use (in kBytes)) type: int default: --stack-size=864 위처럼 기본은 864kb라고한다. function memoryUsed() { const mbUsed = process.memoryUsage().heapUsed / 1024 / 1024 console.log(`Memory used: ${mbUsed} MB`) } console.log('before') memoryUsed() /..
알다시피 파이썬이나 자바스크립트는 동적할당을 따로 하지않는다. 그래서 배열을 바로 사용하기만 하고 따로 생각해보지는 않았다. 그래서 정리하고자 한다. 궁금증 1 자바스크립트 동적할당을 어떻게 할까? 정적 메모리할당 스택은 JavaScript가 정적 데이터를 저장하는 데 사용하는 데이터 구조입니다 . 정적 데이터는 엔진이 컴파일 타임에 크기를 아는 데이터입니다. 엔진은 크기가 변경되지 않는다는 것을 알고 있으므로 각 값에 대해 고정된 양의 메모리를 할당합니다 . 실행 직전에 메모리를 할당하는 과정을 정적 메모리 할당 이라고 합니다 . 엔진은 이러한 값에 대해 고정된 양의 메모리를 할당하기 때문에 기본 값의 크기에 제한이 있습니다 . 동적 메모리할당 힙은 JavaScript가 객체 와 함수를 저장하는 데이터..
모던자바스크립트 스터디 13일차이다. 27장 배열 28장 Number 오늘은 위 단원들을 공부하고 모르는것을 정리했다. # 궁금증 희소배열이 연속적인 같은 타입의 요소보다 느리지만 메모리 효율적인 이유가 뭘까? # 이유 js array(배열)은 인덱스 키와 모든 인덱스 속성보다 크다는 불변성을 충족하는 'length'가 있다. # 문제점 희소 배열을 정의하는 것이 허용되지 않더라도 정의되지 않은 요소를 배열에 넣을 수 있으므로 기본적으로 희소 배열에서 볼 수 있는 것과 동일한 사용성 문제가 발생하게 된다. # 예시 [0,undefined,...,undefined,1,undefined] 처럼 데이터를 넣으면 # 결과 [0,...,1,] 하면 더 많은 메모리를 소비하는 배열과 느린 반복을 얻을 수 있다. 희..
모던자바스크립트 스터디 12일차이다. 26장 ES6 함수의 추가기능 오늘은 위 단원을 공부하고 모르는것을 정리했다. # 궁금증 일반함수, 메서드, 화살표함수의 차이 정리 # 일반 함수 constructor: 주로 생성자 함수에서 객체를 초기화하는 데 사용 prototype: 객체 생성 시 메서드나 속성을 공유하기 위한 프로토타입 객체를 정의하는데 사용 super: 일반 함수는 사용 못함 arguments: 함수에 전달된 인자들의 리스트를 나타내는 객체 this: 함수가 호출될 때, 호출한 객체를 나타내는 키워드 # constructor function Person(name, age) { this.name = name; // constructor this.age = age; } const john = ne..
