web study

Homebrew는 무엇인지 알아보고, 맥에 설치해보도록 하겠다. 설치하기에 앞서 필자의 macOS 버전은 Catalina 10.15.7이다. 목차 Homebrew란? Homebrew 설치 1. Homebrew란? 패키지를 편리하게 설치/제거할 수 있는 MacOS용 패키지 관리자이다. 터미널을 사용하기 때문에 익숙하지 않을 뿐이지 사용해보면 정말 편리하다. App store를 통해 여러 가지 프로그램을 설치할 경우 삭제하더라도 기존 데이터가 남아있는 경우가 있다. Homebrew를 사용하는 이유는 이러한 잔존 데이터가 남지 않게 설치/삭제/업데이트할 수 있기 때문이다. 2. Homebrew 설치 맥의 터미널을 통해 Homebrew를 설치해보도록 하겠다. 1) Homebrew 사이트에 접속한다. https:..

다양한 메서드를 활용하여, 배열에 담긴 문자열을 길이 순서로 정렬 후 오른쪽 정렬하여 출력해보자. 1 const strings = ['very very long string', 'creative', 'hello world']; cs 길이가 다양한 문자열이 담긴 배열이 있다. sort() 메서드를 사용하여 문자열 길이의 내림차순으로 정렬해준다. (sort()의 자세한 설명은 여기) 1 2 3 const strings = ['very very long string', 'creative', 'hello world']; const sorted = strings.sort((a, b) => b.length - a.length); // 내림차순 정렬 ['very very long string', 'hello worl..

함수의 arguments에 대한 개념과 활용에 대해 알아보도록 하겠다. 목차 arguments 개념 화살표 함수에서의 arguments arguments를 배열로 변형 arguments 활용 1. arguments 개념 자바스크립트에서 전달된 인수와 매개변수의 개수는 서로 같지 않아도 된다. 매개변수의 개수보다 인수가 더 적을 경우 넘어오지 않은 값은 undefined로 표시된다. 매개변수 개수보다 초과된 인수는 무시된다. 1 2 3 4 5 6 7 8 function print(ar1, ar2) { console.log(ar1, ar2); } print(); // undefined undefined print('a'); // a undefined print('a', 'b'); // a b print('a..

기존 프로토타입 방식으로 클래스를 생성하는 방법과 ES6의 class를 비교하며 자세히 알아보도록 하자. 목차 프로토타입 방식으로 클래스 만들기 ES6 class 1. 프로토타입 방식으로 클래스 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // 클래스 생성자 function User(name, age) { // 프로퍼티 정의 this.name = name; this.age = age; } // 메서드 정의 User.prototype.showInfo = function() { console.log("User name: " + this.name); console.log("User age: " + this.age); } // 인스턴스 생성 const use..

자바스크립트에서 객체란, 숫자, 문자열, 불 값, null, undefined를 제외한 모든 값이다. 객체는 실제 값이 아닌 참조하는 값으로 처리된다. 따라서 객체는 참조를 가지고 있다고 말할 수 있다. 목차 Set() WeakSet() 1. Set() Set() 메서드는 주로 배열의 중복 값을 제거하기 위해 사용된다. 예약어 new와 같이 작성한다. 1 2 3 4 5 6 7 8 9 const array = [1, 2, 3, 1]; const set = new Set(array); console.log(set); // {1, 2, 3} console.log(toString.call(set)); // [object Set] const newArray = [...set]; // 스프레드 문법 사용하여 객체로..

배열에 중복된 요소가 있는지 확인 후 제거하여 새 배열로 출력하는 여러 가지 방법에 대해 알아보자. 목차 Set() filter() + indexOf() forEach() + includes() 1. Set() 중복된 값이 있는 배열을 new Set() 메서드를 활용하여 중복 값을 제거한다. 중복은 제거됐지만 배열이 아니기 때문에, 배열 형태로 변형하는 과정이 필요하다. '...' 연산자를 사용하는 스프레드 문법을 통해 객체로 변형해준다. 1 2 3 4 5 6 7 8 9 const array = [1, 2, 3, 1]; const set = new Set(array); console.log(set); // {1, 2, 3} console.log(toString.call(set)); // [object S..

구조분해 할당(Destructuring Assignment)에 대한 자세한 내용은 아래 페이지에서 확인할 수 있다. [Javascript] 구조분해 할당(destructuring assignment) ES6부터 구조분해 할당(destructuring assignment)이라는 문법이 등장했다. 말 그대로 어떤 배열이나 객체를 분해한 후 다시 할당하는 것이다. ES5와 ES6를 비교하며 알아보자. 목차 배열 구조분해 할당 객 fromnowwon.tistory.com 구조분해 할당을 활용하여 클릭한 객체의 정보를 전달받을 수 있다. 그 이벤트 객체 내의 정보만 따로 출력할 수도 있다. 아래에서 살펴보자. 1234567891011121314151617181920212223242526272829303132333..

자바스크립트에는 배열 형태이지만 배열이 아닌 것들이 꽤 있다. 이 경우 배열로 어떻게 변환할 수 있는지 알아보도록 하자. arguments를 사용했을 경우, 배열이 아니지만 형태만 배열인 객체를 출력한다. 배열이 아니기 때문에 map() 배열 메서드를 사용하면 아래처럼 오류가 뜬다. 1 2 3 4 5 6 7 8 9 10 function addTxt () { let newData = arguments.map((value) => { return '#' + value; }); console.log(newData); // Uncaught TypeError: arguments.map is not a function } addTxt(1, 2, 3, 4, 5); Colored by Color Scripter cs 그..

반복적인 동작을 하는 forEach() 메서드, for in 문, for of 문의 특징과 차이점에 대해 알아보도록 하겠다. 목차 forEach() for in 문 for of 문 1. forEach() forEach() 함수는 반복문 기능을 지닌 배열 메서드이다. 배열을 순회하며 모두 순회하면 실행을 멈춘다. 1 2 3 4 5 6 7 8 9 10 11 12 const data = [1, 3, null, undefined, NaN, ""]; data.forEach(item => { console.log(item); }); // 1 // 3 // null // undefined // NaN // Colored by Color Scripter cs [Javascript] 반복문 for, forEach, ma..

클로저(Closure)는 어떤 함수가 함수의 외부에서 선언된 변수에 접근하는 것을 말한다. 아래와 같이 for 문에서 var을 사용해보자. i가 4가 되면 false가 되어 for 문을 나온다. 콜백 함수(클릭 이벤트가 발생한 뒤의 동작을 정한 함수)는 나중에 실행된다. 콜백 함수 영역 밖에 있는 변수 i를 계속 참조하면서 기억해둔다. 그게 4이기 때문에 콜백 함수가 실행될 때 결괏값이 계속 4가 나오는 것이다. 여기에서 i는 클로저 변수라고 할 수 있다. See the Pen Untitled by cw (@fromnowwon) on CodePen. 반면에 for 문에서 let을 사용하면 어떻게 될까? let은 블록 스코프이다. 때문에 for 문 밖으로 나온 변수 i와 상호작용하지 않는다. 따라서 클릭한..