본문 바로가기
반응형

JavaScript

 (12)
[JavaScript] Webpack 🍀 Webpack이란 여러가지 의존성 모듈을 하나로 번들링해주는 것을 말합니다. 여기서 (모듈)번들링은 웹앱을 구성하는 몇십 몇백개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 의미합니다. 🌱 근데 Webpack을 왜 쓰는 걸까? 여러개의 파일을 하나로 번들링하므로 여러개의 자바스크립트 파일을 로드해야하는 번거로움이 사라진다고 합니다. 하지만 이것을 충분한 답이 되지 못한다고 생각을 하였고 아래와 같은 이유들을 찾을 수 있었습니다. 여러개의 자바스크립트를 로드할 시 생기는 변수의 유효범위 문제를 해결할 수 있습니다. 이는 파일 단위로 자바스크립트 모듈을 관리하기 때문입니다. 변수의 이름이 중복 선언될 때 의도치 않은 값을 할당, 출력할 수 있다. 웹 개발 작업의 자동화 도구로 사용됩니다. 특히 f..
[JavaScript] 함수와 일급 객체 🍀 일급 객체 무명의 리터럴로 생성할 수 있다.(런타임에 생성이 가능) 변수나 자료구조(객체, 배열)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환 값으로 사용할 수 있다. 자바스크립트에서 함수는 위와 같은 조건을 모두 만족하는 일급 객체이다. 이는 함수를 객체와 같이 사용할 수 있다는 것을 의미하는데,객체는 값이이므로 함수도 값과 동일하게 취급할 수 있다. 그래서 값을 사용할 수 있는 곳이라면 어디서든지 리터럴로 정의할 수 있고, 런타임에 함수 객체로 평가된다. 아래는 값이 사용되는 곳이다. 변수 할당문 객체의 프로퍼티 값 배열의 요소 함수 호출의 인수 함수 반환문 일급 객체로서 함수가 가지는 가장 큰 특징은 함수의 매개변수에 전달할 수 있고, 함수의 반환값으로 사용할 수 있다는 ..
[JavaScript] 생성자 함수 🍀 Object 생성자 함수 new 연산자로 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환하고, 생성된 빈 객체에 프로퍼티 또는 메서드를 추가하여 객체를 완성시킬 수 있다. //빈 객체의 생성 const person = new Object(); //프로퍼티 추가 person.name = 'daniel'; person.age = 29; person.introduce = function(){ console.log(`저는 ${person.name}이고, 제 나이는 ${person.age}살 입니다.`) } console.log(person); // {name: 'daniel', age: 29, introduce: ƒ} person.introduce(); // 저는 daniel이고, 제 나이는 2..
[JavaScript] 빌트인 객체 🍀 자바스크립트 객체의 분류 표준 빌트인 객체 : ECMAScript 사양에 정의된 객체로 자바스크립트 실행환경과 관계없이 사용할 수 있는, 전역 객체의 프로퍼티로서 제공되는 것. 호스트 객체 : 자바스크립트 실행 환경에서 추가로 제공하는 객체로 Web API(DOM, BOM, Canvas, fetch ,requestAnimationFrame, SVG, Web Storage 등), Node.js 고유의 API. 사용자 정의 객체 : 사용자가 직접 정의한 객체를 의미. 🍀 표준 빌트인 객체 자바스크립트는 Object, String, Number, Boolean, Symbol, Date, Math, RefExp, Array, Map/Set, Function, Promise, Reflect, Proxy, JS..
[JavaScript] Symbol 🚨 아래 더보기는 개인적 공부를 위해 기록한 흔적입니다. 더보기 책을 읽기 전 예상되는 Symbol Symbol은 새로운 type으로 객체 속성의 식별자로 사용될 수 있는 고유하고 변경할 수 없는 데이터 형식. Symbol은 디버깅 목적으로만 사용됨. Symbol()로 호출 할때마다 다른 모든 기호와 완전히 다른 새로운 고유한 기호를 얻게 됨. Symbol()에 매개변수를 전달할 수 있고 Symbol()의 기호 설명으로 사용할 수 있다고 함. Symbol은 객체의 key로 사용될 수 있으나, getOwnPropertynames, for in 같은 메서드로는 접근할 수 없고, getOwnPropertySymbols()를 통해서만 Symbol로 된 key에 접근할 수 있음. 🍀 심벌이란? 심벌은 es6에서 ..
[JavaScript]전역 변수의 문제점 🚨 아래 더보기는 개인적 공부를 위해 기록한 흔적입니다. 더보기 책을 읽기 전 예상되는 전역 변수의 문제점 네임스페이스 폴루션 서로다른 사람이 선언한 변수가 scope를 통해 전역변수에 접근할 수도 있기에 전역변수의 경우 협업 시 문제를 초래할 가능성이 있습니다. 현재로서는 이것이 전부 책을 읽은 후 머릿속에서의 첫 인출 intro 변수와 변수의 생명주기 변수는 메모리에 할당되는 값을 찾아가는 식별자의 역할을 합니다. 전역변수의 경우 생명주기가 전역 객체의 생명주기와 동일합니다. 이 말은 브라우저를 닫을 때 전역변수가 소멸한다는 의미입니다. 메모리를 오랜기간동안 차지하기 때문에 전역변수가 많아지면 메모리 활용도가 떨어질 수 있는것입니다. 함수 속 지역변수의 경우 함수 스코프안에 등록되며 생명주기의 경우 ..
Detail of prototype in Javascript 자바스크립트는 객체지향언어이고 상속은 객체지향 프로그래밍의 핵심 개념입니다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거할 수 있습니다. 즉 class기반 언어의 상속을 흉내 낼 수 있는 것입니다. (ES6에서 class 문법이 추가되었습니다만 자바스크립트가 클래스 기반 언어로 바뀐 것은 아닙니다.) function Person(name, age){ this.name = name; this.age = age; this.speak = function(){ return `Hi, ${name} I'm ${age} years old` }; } const person1 = new Person('justin', 12); const person2 = new Person('dave', 14..
[번역] Introduction to Promises in JavaScript 자바스크립트에서의 promise 소개 What is a Promise 프로미스란 무엇인가? 자바스크립트에서의 promise는 우리의 삶에서 하는 약속과 같이 미래에 일어날 일을 참조합니다. promise는 비동기 작업들을 처리하는데 사용되어지며, 다음과 같은 세가지 가능한 상태가 있습니다. Pending(Initial State) 대기 : 이행하거나 거부되지 않은 초기 상태 Fulfilled(Successful) 이행 : 연산이 성공적으로 완료 Rejected(Failed) 거부 : 연산이 실패 promise 객체를 만들 때 상태는 fulfilled(이행)나 rejected(거부)가 되기 전까지 pending(대기)입니다. 만약 비동기 처리가 성공적으로 완료된다면 프로미스는 pending 상태에서 fulfilled 상태로 변화하며 비동기 처..
반응형

티스토리툴바