mmalmmizal

TypeScript의 런타임에 대한 이해  No, TypeScript Types Don't Exist At RuntimeLearn why TypeScript's types don't exist at runtime. Discover how TypeScript compiles down to JavaScript and how it differs from other strongly-typed languages.www.totaltypescript.comTypeScript의 타입은 runtime에 존재하지 않으며 컴파일 단계에서 사용되며 이후 JavaScript로 컴파일 되도록 설계 되었다. 코드가 JavaScript로 컴파일되면 type이 사라지는 셈이다.   런타임시 타입스크립트 인터페이스가 존재하지 않는 이유..

worker  웹 워커(Web worker) API는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술 단일 스레드 기반의 자바스크립트도 이 웹 워커 API 를 사용하면 브라우저에서 멀티스레드 수행이 가능main thread 에서는 window 가 GlobalScope이다. worker thread 는 main thread 의 window 와는 별도의 WorkerGlobalScope 를 가진다. 그래서 Window의 메서드나 DOM 조작은 불가능하다. worker_threadsThe node:worker_threads module enables the use of threads that execute JavaScript in parallelcon..

컴파일러의 역할 컴파일러는 소스코드를 기계어로 바꾸어주는 역할을 하며, 이 때 구문분석 -> 최적화 -> 코드생성 -> 링킹 과정이 진행된다. 구문분석 과정에서 소스코드는 어휘 분석 프로그램을 차례로 지나가며 구문분석을 진행한다.어휘 분석 프로그램tokenizer : 문자 스트림을 토큰 단위로 분해, 입력을 기본 어휘 요소 (단어, 단어구, 문자열 등 의미 있는 단위)로 분해일반적인 Token 종류identifier : 식별하기 위한 이름keyword : 미리 지정한 예약어separator : 글자를 구분하는 문자operator : 연산을 위한 심볼literal : 숫자, 논리, 문자comment : 줄 또는 블록 코멘터리 lexer : 토큰 스트림을 통해 쪼개진 토큰들의 추가 분석 수행, 문법 규칙에 ..

객체 배열 자료구조   JavaScript Array of Objects객체가 들어있는 배열과일의 이름(name)과 개수(num) 속성을 가진 객체를 저장하는 fruitarray 배열을 생성한다.let fruitarray = [ { name: "apple", num: 3, }, { name: "banana", num: 0, }, { name: "grape", num: 1, },];  Methods - 인스턴스 메서드Array.prototype.unshift()배열의 앞쪽에 추가하기 Adds one or more elements to the front of an array, and returns the new length of the array. let fruit..

CommonJS 문법 :  require() 함수, module.exports 객체 사용 로딩 방식 : 동기적 로딩스코프 : 모듈은 전역 스코프에서 실행 단일 인스턴스 : 모듈은 기본적으로 한 번만 로드되며, 같은 모듈을 여러 곳에서 require() 해도 동일한 인스턴스 사용.ES모듈 (ECMAScript)문법 : import 문, export 키워드 사용 로딩 방식 : 비동기적 로딩, 모듈이 로드되기를 기다리지 않고도 다음 코드 실행 가능 스코프 : 기본적으로 모듈 스코프 각기 다른 인스턴스 : 같은 모듈을 다시 import 하면 새로운 인스턴스 생성   CommonJS 모듈 사용 예시 //find.jsfunction find(param0, param1) {}module.exports = { find..

https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/ https://velog.io/@1nthek/JavaScript-%EB%B3%80%EC%88%98%EC%99%80-%ED%95%A8%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 Var, Let, Const의 차이점은?ES2015(ES6)에서 반짝이는 새로운 기능들이 많이 등장했습니다. 2020년이 된 지금, 많은 JavaScript 개발자들이 그 기능들을 사용하기 시작했을 것이며 또 익숙해졌을텐데요. 여전히 그 중 몇..

1. readline 모듈 가져오기 Node.js에서 입력 스트림과 출력 스트림 사용하는 인터페이스 제공 콘솔 사용자 입력 받기 const readline = require('readline'); 2. readline 인터페이스 생성readline.createInterface 메소드로 인터페이스 객체 rl을 생성 input : process.stdin표준 입력(키보드 입력) 지정 output : process.stdout표준 출력(콘솔 출력) 지정const rl = readline.createInterface({ input : process.stdin, output: process.stdout}); 3. 입력 데이터 저장let input = []; 4. 입력 이벤트 처리 rl.on('line', ..

Context context는  React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법으로, 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.   React Context API 리액트에서 상태를 전역적으로 관리하고 컴포넌트 간에 데이터를 공유하기 위한 기능을 제공하는 매커니즘 React.createContextconst MyContext = React.createContext(defaultValue);Context 객체를 만든다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽는다.defaultValue 매..