에르노트

ES6 이후로 자바스크립트에 객체 확장 표현식과 구조 분해 할당이 추가되면서 객체를 다루기가 한결 수월해졌다. 객체 확장 표현식(Enhanced Object Property) 기존 let x = 0 let y =0 let obj = {x:x, y:y} //Original let obj2 = {method1: function(){console.log("Method 1")}} //Original let key1 = 'key1' let combined = {}; combined[key1 + 'key2'] = 'abc' //Original console.log(obj) console.log(obj2) console.log(combined) 객체 확장 표현식 let x = 0 let y =0 let obj = {..

자바스크립트는 기본적으로 집합(Set) 클래스를 지원한다. Set The Set object lets you store unique values of any type, whether primitive values or object references. developer.mozilla.org 자바스크립트에서 집합(Set)이란 중학교 때 처음 배우는 바로 그 집합 개념이다. 이를 일반화해서 얘기하면 유한하고 구분되는 항목들의 그룹이라고 표현할 수 있다. 좀 더 엄밀히 얘기하자면 중복을 허용하지 않고 정렬되지 않은 항목들을 그룹이다. 따라서 정의에 맞게 그 용도 역시 항목의 유일성을 확인하는 것이다. 생성 let set1 = new Set([1,2,3]) let set2 = new Set('123') cons..

자바스크립트 배열에는 sort() 함수가 내장되어 있다. 따라서 우리는 별도로 정렬 메소드를 작성하지 않고도 손쉽게 배열의 원소들을 정렬할 수 있다. 이때 정렬 기준을 지정하기 위해 비교 함수(compare function)을 인자로 받는다. 다음은 ECMAScript의 Array.prototype.sort(comparefn) 에 대한 최신 명세이다. The elements of this array are sorted. The sort must be stable (that is, elements that compare equal must remain in their original order). If comparefn is not undefined, it should be a function that a..

브라우저 환경에서는 쓸만한 최소한의 인터페이스로 경고창, 입력창, 확인창이 기본 제공된다. 각각의 대화 상자는 상응하는 자바스크립트 내장 함수를 호출함으로써 만들어낼 수 있다. 경고창(alert) alert("경고!") alert() 함수를 이용하면 모달창을 띄울 수 있다. 여기서 모달창(modal window)란 사용자 입력을 독점하는 창을 의미한다. 즉 경고창이 띄워지면 경고창이 없어질 때까지 주변의 다른 버튼들은 비활성화 된다는 것이다. 입력창과 확인창도 마찬가지로 모달창이다. 입력창(prompt) let age = prompt("나이를 입력하세요", 22) alert(`당신의 나이는 ${age}입니다.`) prompt(메세지, 기본값) 형태로 사용할 수 있다. prompt() 함수는 사용자가 입력..

vue cli에서 yarn serve로 프로젝트를 실행했을 때 위와 같은 에러를 겪었다. 일단 컴파일은 되서 결과 화면은 보이지만 핫 리로딩이 동작하지 않았으며 아예 새로고침으로도 수정 사항을 즉각적으로 반영할 수 없었다. 이는 미세한 부분 하나하나를 수정할 때마다 매번 새롭게 컴파일해야만 결과를 볼 수 있는 치명적인 문제를 야기한다. 그런데 해결법은 매우 매우 간단하다. 프로젝트의 package.json 파일에서 serve 명령에 대해 명시적으로 host 플래그를 붙여주면 된다. 그런고로 로컬 환경에서 빌드한다면 간단히 --host localhost 를 붙여주면 끝이다! 클라우드 환경에서 개발한다면 localhost 자리에 적절한 호스트 ip를 넣어주면 될 것이다.

뷰(Vue)에서는 데이터 바인딩과 각종 디렉티브를 활용하여 CRUD를 간단히 구현할 수 있다. [삽입] addMemo(){ if(this.newMemo.length == 0){ alert("Fill in the blank!") return } this.list.push(this.newMemo) } [삭제] deleteMemo(targetMemo){ let index = this.list.findIndex(memo=>memo==targetMemo) if(index != -1) this.list.splice(index, 1) } [수정] setEditMode(targetMemo, idx){ this.newMemo = targetMemo this.state = EDIT_MODE.UPDATE this.updat..

자바스크립트를 독학할 때 유용한 웹페이지들을 몇 개 정리해본다. 1. MDN web docs JavaScript JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache developer.mozilla.org 가장 기본이 되는 공식 문서다. 영어와 한국어를 비롯한 매우 다양한 언어를 지원한다. 다만 번역 상태..

여타 프로그래밍 언어들처럼 자바스크립트도 배열을 자료형으로 제공하며, 이 배열을 다루기 위한 Array를 내장 객체로 제공한다. Array Array The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects. developer.mozilla.org 자바스크립트 배열은 길이가 가변적이며 요소의 타입에도 제약이 없다는 점에서 기존 언어의 배열보다도 파이썬의 리스트와 유사하다. 그래서 JS 배열에는 [1, 'a', true]와 같이 자료형과 무관하게 아무 요소나 다 들어갈 수 있다. 이게 싫어서 타입을 딱 정해놓고 싶다면 ES6에 새롭게..

React에서와 마찬가지로 구름IDE에서 Vue 프로젝트를 돌리면 원격 서버의 localhost에 대해 자체 웹서버가 돌아간다. 즉 내 컴퓨터의 localhost:8080으로 접속해서는 절대로 구름IDE에서 작업중인 프로젝트를 확인할 수 없다. 다행히 구름 IDE에서는 URL과 실행 포트 매핑 기능을 깔끔하게 제공하고 있으므로 그대로 이용하면 된다. 그래서 예상대로라면 위에처럼 8080포트에 대해 URL을 등록해주기만 하면 끝이어야한다. 실제로 3000포트를 이용하는 React에서는 이걸로 끝이었다. 그런데 Vue에서는 안 된다. 다행히 구글링 결과 모 커뮤니티에 구름IDE 담당자께서 직접 달아주신 해결책을 찾을 수 있었다. localhost 대신 0.0.0.0을 이용하면 된다고 한다. 호스트 설정을 바..

Math 클래스 String 클래스 Date 클래스 Math 클래스 Math Math is a built-in object that has properties and methods for mathematical constants and functions. It’s not a function object. developer.mozilla.org 자바에서처럼 자바스크립트의 Math 라이브러리는 static 클래스(모든 프로퍼티와 메서드가 static)이다. 그래서 객체 생성 과정 없이 바로 Math.func() 형태로 사용할 수 있다. 여타 언어가 제공하는 수학 관련 클래스와 마찬가지로 자연상수 e나 원주율 pi 등의 상수를 제공하며 절대값이나 제곱근 및 랜덤 등의 연산도 제공한다. 또 sin, cos, t..