FE/JavaScript 8

[#1 Node] 알아둘 JavaScript 정리

1. 호출스택- Anonymous는 가상의 전역 컨텍스트- 함수 호출 순서대로 쌓이고 역순으로 실행됨- 함수 실행이 완료되면 스택에서 빠짐- LIFO 구조라서 스택이라고 불림 호출 스택 / 백그라운드 / 테스크 큐 / 이벤트 루프 / 콘솔 / 메모리 구조를 이해 해야함> 예제function oneMore() { console.log('one more');}function run() { console.log('run run'); setTimeout(() => { console.log('wow'); }, 0) new Promise((resolve) => { resolve('hi'); }) .then(console.log); oneMore();}setTimeout(run, 5000);..

FE/JavaScript 2025.07.27

[#0 Node] 기초개념

1. 노드의 정의Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다.(런타임이란? > 특정 언어로 만든 프로그램들을 실행할 수 있게 해주는 가상 머신의 상태)노드는 서버의 역할도 수행할 수 있는 자바스크립트 런타임으로 자바스크립트로 작성된 서버를 실행할 수 있도 http/https/http2 모듈을 제공 > 노드 외의 다른 자바스크립트 런타임으로는 크롬, 파이어폭스 같은 브라우저가 있음> 노드는 V8과 libuv를 내부적으로 포함한다.- V8 엔진: 오픈소스 자바스킄립트 엔진 -> 속도문제 개선- libuv: 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현한 라이브러리 2. 이벤트 기반> 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식. 대부분의 프로그램은 이벤..

FE/JavaScript 2025.07.26

[26장] 모던 자바스크립트 Deep Dive - ES6 함수의 추가 기능

26.1 함수의 구분ES6 이전까지 자바스크립트의 함수는 다양한 목적으로 사용되었으며, 크게 구분되지 않았다. 자바스크립트의 함수는 호출할 때 일반 함수로 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성하는 생성자 함수로도 사용될 수 있으며, 객체에 메서드로 바인딩되어 호출될 수도 있다. 그러나 이러한 함수의 구분이 명확하지 않아 실수나 성능 저하를 유발할 수 있다.예시: var foo = function () { return 1;}// 일반적인 함수로서 호출foo(); // 1// 생성자 함수로서 호출new foo(); // foo {}// 메서드로서 호출var obj = { foo: foo };obj.foo(); // 1함수의 종류:Callable: 호출할 수 있는 함수 객체C..

FE/JavaScript 2025.01.12

[24장] 모던 자바스크립트 Deep Dive - 클로저

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미하는 중요한 자바스크립트 개념이다. 핵심 특징클로저는 자바스크립트 고유의 개념이 아니며, 하스켈, 파스칼, 얼랭, 스칼라 등 다양한 프로그래밍 언어에서 사용되는 특성ECMAScript 사양에는 클로저에 대한 정의가 명시되어 있지 않으나, MDN에서 상세히 다룸렉시컬 스코프 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 정의했는지에 따라 상위 스코프가 결정되는 개념이다. 예제를 통해 살펴보자const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); } innerFunc();}outerFunc();이 예제에서..

FE/JavaScript 2024.12.27

[21장] 모던 자바스크립트 Deep Dive - 빌트인 객체

21.1 자바스크립트 객체의 분류자바스크립트 객체는 크게 3개의 객체로 분류표준 빌트인 객체: ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공. 자바스크립트 실행환경(브라우저 또는 Node.js환경)과 관계없이 언제나 사용. 전역객체의 프로퍼티로서 제공되며 별도의 선언 없이 참조가능.호스트 객체: ECMAScript 사양에 정의되어있지 않고 자바스크립트 실행환경(브라우저 또는 Node.js환경)에서 추가로 제공하는 객체. 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web A..

FE/JavaScript 2024.12.11

[17장] 모던 자바스크립트 Deep Dive - 생성자 함수에 의한 객체 생성

17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있음 // 빈 객체의 생성const person = new Object()// 프로퍼티 추가person.name = 'Lee'person.sayHello = function () { console.log('Hi My name is ' + this.name)}console.log(person) // {name: "Lee", sayHello: f}person.sayHello() // Hi My name is Lee생성자 함수는 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수생성자 함수에 의해 생성된 객체를..

FE/JavaScript 2024.12.02

[11장] 모던 자바스크립트 Deep Dive - 원시 값과 객체의 비교

JS의 데이터타입은 크게 원시타입과 객체타입으로 구분할 수 있다.원시 값은 변경 불가능한 값, 객체(참조) 값은 변경 가능한 값이다.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다.객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다 => 값에 의한 전달객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다. => 참조에 의한 전달 11.1 원시 값11.1.1 변경 불가능한 값원시 타입의 값, 즉 원시값은 변경 불가능한 값임. 즉 읽기전용 값으로서 변경할 수 없다.변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 ..

FE/JavaScript 2024.11.11

[09장] 모던 자바스크립트 Deep Dive - 타입 변환과 단축평가

9.1 타입 변환이란?JS의 모든 값은 타입이 있다. 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.var x = 10// 명시적 타입 변환// 숫자를 문자열로 타입 캐스팅한다.var str = x.toString()console.log(typeof str, str) // String 10// x변수의 값이 변경된 것은 아니다.console.log(typeof x, x) // number 10 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 JS엔진에 의해 암묵적으로 타입이 자동 변환되기도하는데,이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다.var = 10// 암묵적 타입 변환// 문자열 연결 연..

FE/JavaScript 2024.11.03
반응형