전체 글 (104) 썸네일형 리스트형 [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.. [번역] Why Not To Modify React State Directly 왜 state를 직접 수정하지 않는 이유 모든 사람들이 `state`를 절대로 직접 바꾸지 말고 언제나 `setState`를 호출하라고 합니다. 하지만 왜 그렇게 말하는 것일까요? 벌써 시도해보셨다면 아마 아무런 나쁜일이 생기지 않는다는 것을 눈치채셨을겁니다. 만약 `state`를 직접 수정하고 `this.setState({})` 혹은 `this.forceUpdate()`를 호출한다면 모든것이 괜찮아 보일겁니다. this.state.cart.push(item.id); this.setState({ cart: this.state.cart }); // renders like normal! maybe? 두가지 이유에 있어서 이것은 나쁜 생각입니다. (이것이 실제로 해당 예시에서 그리고 다른 상황에서 작동이 하더라도 말입니다.) (`this.state... [번역] 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 상태로 변화하며 비동기 처.. [번역] prototypes in JavaScript 자바스크립트에서의 프로토타입 소개 자바스크립트는 프로토타입 기반 언어이며, 상속을 통한 프로퍼티, 메서드 조회 및 코드 재사용성을 위해 프로토타입을 사용합니다. 이번 글에서는 프로토타입과 프로토타입 체인, 프로토타입의(을 통한) 상속에 대해 알아보겠습니다. 프로토타입과 프로토타입 체인 자바스크립트에서는 원시타입(numbers, strings, boolean 등)과 참조타입(arrays, object, function) 두가지의 데이터 타입이 있습니다. 원시타입과 참조타입 둘 다 각각 object로 감싸여져있습니다. (Both the primitive and the object types are wrapped by their respective objects.) 숫자는 `Number`로, 문자열은 `String`로, 부울은 `Bool.. 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점과 그 해결([번역]How to load JavaScript properly) 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점이라는 질문에 대한 답을 찾기 전에 한 번에 로딩할 때라는 것은 스크립트 파일을 동기적으로 로드 할 때라는 것을 의미한다고 정하겠습니다. DOM이 구성 되어있지 않은 상태에서 DOM에 접근하는 script를 실행한다면 script는 해당 DOM 요소에 접근 할 수 없습니다. (아래의 코드를 보면 스크립트를 읽는 시점에서는 h1은 아직 존재하지 않기 떄문에 console.log는 null을 출력합니다.) 제목 이를 해결하기 위해서 쉽게 body 태그의 맨 끝에서 script를 불러오면 문제가 없지 않을까라고 생각할 수 있지만 이것이 완전한 해결책이 될수는 없습니다. DOM이 준비가 되어 화면은 사용자에게 이미 보여지고 있는 상황이지만 scr.. 기존 자바스크립트와 ES6의 차이점 및 특징 우선 ECMAScript6 공식 홈페이지는 아래와 같다. ECMAScript 6: New Features: Overview and Comparison Constants Constants Support for constants (also known as "immutable variables"), i.e., variables which cannot be re-assigned new content. Notice: this only makes the variable itself immutable, not its assigned content (for instance, in case the content is es6-features.org 위 페이지를 보면 알겠지만 지금은 우리에게 익숙하고 당연한 것들이 상당히 .. 이전 1 2 3 4 5 6 7 ··· 13 다음
