모던자바스크립트 스터디 19일차이다. 45장 프로미스 46장 제너레이터와 async/await 47장 에러처리 48장 모듈 오늘은 위 단원을 공부하고 모르는것을 정리했다. # 궁금증 yield와 return 차이 # 이유 yield는 return의 일종으로 반환하는 것이다. 다만, return은 1번 반환하고 끝나는 것과 다르게, yield는 연속적인 반환값이다. generator는 사라지는 게 아니라 계속 남아서 코드를 돌리기 때문에 일반 함수문과 다르게 메모리 집약적 절차를 가질 수 밖에 없는 것이다. 보통 제너레이터 객체의 next() 메서드를 호출하면 yield 표현식까지 실행되고 일시 중지된다. 함수의 제어권이 호출자에게 양도(yield)되는데, 이 과정의 반복을 돌려야하니 일반 함수의 호출과 ..
분류 전체보기
모던자바스크립트 스터디 18일차이다. 42장 비동기 프로그래밍 43장 Ajax 44장 Rest API 오늘은 위 단원을 공부하고 모르는것을 정리했다. # 궁금증 웹 개발을 하다보면 대다수가 JSON을 이용해서 API 를 만들어 통신하는 것을 알 수 있다. 그럼 웹 통신에서 xml은 별로 안쓰게 된 것일까? # 이유 js 엔진은 JSON 응답을 js object로 쉽게 변환할 수 있기 때문에 Ajax를 수행할 때, XML보다 JSON을 권장한다. Ajax/Javascript/Web이 XML보다 더 잘맞기 때문에 JSON을 자연스럽게 많이 사용하는것으로 이동한 것이다. JSON은 특히 배열 및 키/값 쌍과 관련하여 XML보다 명료한 느낌이 있어서 웹 서비스 개발에 많이 사용되었다. XML을 사용하여 사람들은..
모던자바스크립트 스터디 17일차이다. 41장 타이머 오늘은 위 단원을 공부하고 모르는것을 정리했다. # 쓰로틀링과 디바운싱 1. 디바운싱 용도: 사용자의 반복적인 요청을 제어하고, 일정 시간 동안 특정 동작이 최대 횟수로 제한하는 데 사용 예시 시나리오: 사용자의 스크롤 이벤트에 따라 계속해서 서버에 요청이 가는 것을 방지하기 위해 스크롤 이벤트를 쓰로틀링하거나 자동 완성 기능에서 키 입력에 대한 검색 요청을 일정 시간 간격으로 제한하는 데 사용 2. 쓰로틀링 용도: 연이어 발생하는 이벤트 중 마지막 이벤트를 기준으로 일정 시간이 지난 후에만 동작을 수행하도록 하는 데 사용 예시 시나리오: 검색 입력란에서 키 입력이 발생할 때, 마지막 키 입력 이후 일정 시간 동안 다른 키 입력이 없을 경우에만 검색 요..
모던자바스크립트 스터디 16일차이다. 37장 set 38장 브라우저의 렌더링 과정 오늘은 위 단원들을 공부하고 모르는것을 정리했다. # 문제 expressjs 프레임워크를 이용해서 코딩을 하다가 위 에러를 만났다. # 상황 rest api 중 post method를 사용해서 api call을 하려고 했다. body에 데이터를 담고 전송을 했는데, 위처럼 parse 에러가 났다. # 이유 자바스크립트 파싱과 실행은 위와 같은 과정을 거친다. 소스코드에서 문법적 의미를 가지는 최소 단위인 token으로 분해한다. 이 과정을 tokenizor 라고 한다. 그래서 token으로 만들었다면, 파싱을 해서 추상적 구문 트리(토큰의 문법적 구조를 반영한 트리구조)로 만든다. 마지막으로 구문 트리를 컴퓨터가 이해할 수..
모던자바스크립트 스터디 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() /..
