프로그래밍 잡동사니

이터러블 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 자료구조를 위해 미리 정의한 규칙이다. ES6 이전의 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 다양한 방법으로 순회할 수 있는데, ES6에서는 순회 가능한 자료구조를 이터러블로 통일해 for…of문, 스프레드 문법, 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. isIterable([]); // -> true isIterable(''); // -> true isIterable(new Map()); // ->..

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다 노드 HTML 문서를 구성하는 개별적인 요소인 HTML 요소(element)는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 노드 객체로 변환된다. 이 때 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다 노드들은 계층 구조로, 비선형 자료구조인 트리 자료구조를 이룬다 DOM을 구성하는 노드 객체는 표준 빌트인 객체가 아닌 브라우저 환경에서 추가적으로 제공되는 호스트 객체이며, 프로토타입에 의해 다음과 같은 상속 구조를 갖는다 DOM API는 이러한 노드 타입에 따라 필요한 기능을 DOM API로 제공하고, 이를 통해 HTML의 구조나 내용, 스타일 ..

구글의 V8 엔진으로 빌드된 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 브라우저를 벗어나 서버 사이드에서도 사용될 수 있는 범용 개발 언어가 되었으며, 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행되어 파싱 및 렌더링 된다 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 토큰으로 분해하고 문법적 의미와 구조를 반영해 트리 자료구조 형태를 생성하는 일련의 과정을 말한다 렌더링: HTML / CSS / JS로 작성된 문서를 파싱해 브라우저에 시각적으로 출력하는 것을 말한다 브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, JS, 이미지, 폰트 등의 정적 파일, 서버에서 동적 생성한..

2주차 미션은 숫자 야구 게임을 구현하는 것으로, 함수를 분리하고 각 함수별로 테스트를 작성하는 것이 목표이다. 숫자 야구 자체가 생소했기 때문에 먼저 어떤 게임인지 알아보기로 했다 Wordle과 비슷한 느낌인데 숫자의 위치와 값을 맞추는 CLI 형태의 게임인 것 같다. 특이한 점은, 우아한테크코스에서 자체 제작한 MissionUtils 라이브러리를 사용해 구현해야 한다는 점이다 MissionUtils 라이브러리🔽 GitHub - woowacourse-projects/javascript-mission-utils: Utility library for mission Utility library for mission. Contribute to woowacourse-projects/javascript-missi..

String 표준 빌트인 객체인 String 객체는 생성자 함수 객체로, 형변환으로도 사용될 수 있다 // 숫자 타입 => 문자열 타입 String(1); // -> "1" String(NaN); // -> "NaN" String(Infinity); // -> "Infinity" // 불리언 타입 => 문자열 타입 String(true); // -> "true" String(false); // -> "false" // 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다. strObj[0] = 'S'; console.log(strObj); // 'Lee' 유사 배열 객체이므로 인덱스로 접근할 수 있지만 원시 값이라서 변경할 수 없다 String 프로퍼티: length String 메서드: ..

Number // 문자열 타입 => 숫자 타입 Number('0'); // -> 0 Number('-1'); // -> -1 Number('10.53'); // -> 10.53 // 불리언 타입 => 숫자 타입 Number(true); // -> 1 Number(false); // -> 0 표준 빌트인 객체인 Number 객체는 숫자를 생성하는 생성자 함수로, 형변환으로도 사용된다 Number 프로퍼티: EPSILON / MAX_VALUE / MIN_VALUE / MAX_SAFE_INTEGER / MIN_SAFE_INTEGER / POSITIVE_INFINITY / NEGATIVE_INFINITY / NaN Number 메서드: isFinite / isInteger / isNaN / isSafeInteg..

배열 배열(Array)이란 여러 개의 값을 순차적으로 나열한 자료구조로, 배열이 가지고 있는 값을 요소(Element)라고 부른다. 각 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index)를 가지며 같은 타입의 요소가 연속적으로 위치하는 것이 일반적이다 const arr = [1, 2, 3, 4, 5]; const arr2 = new Array(3).fill(1); // -> [1, 1, 1] const arr3 Array.of(1, 2, 3); // -> [1, 2, 3] const arr4 = Array.from({ length: 3 }, (_, i) => i); // -> [0, 1, 2] typeof arr // -> object 배열은 객체 타입이며 리터럴, Array 생성자 함수..

중간고사가 끝나고, 대망의 우테코 웹 프론트엔드 프리코스 과정이 시작됐다 지원만 하면 프리코스를 참여할 수 있기에 정말 많은 사람들이 참여했고, 생각보다 지인들도 많아서 반가웠다😊 프리코스만으로도 혼란한 프론트엔드 생태계에서 기본기를 닦을 수 있는 좋은 경험이 되지 않을까 싶다. 열심히 해보자! 진행 방식은 다음과 같다 매주 수요일에 메일로 미션이 보내지고, 다음 주 화요일까지 구현을 완료해 제출해야 한다 미션은 '기능 요구 사항 / 프로그래밍 요구 사항 / 과제 진행 요구 사항'으로 구성된다 기능 요구 사항을 구현할 때는 기능 목록을 만들고, 기능 단위로 커밋해야 한다 미션 구현을 완료한 후에는 GitHub과 우아한테크코스 지원 플랫폼 양쪽에 모두 제출해야 한다 지원 플랫폼에 과제를 제출할 때는 경험한..

ES6 함수의 추가 기능 const obj = { x: 1, // foo는 메서드이다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다. bar: function() { return this.x; } }; console.log(obj.foo()); // 1 console.log(obj.bar()); // 1 ES6 이후 메서드는 객체 내에서 축약 표현으로 정의된 함수만을 의미한다 const multiply = (x, y) => x * y; multiply(2, 3); // -> 6 화살표 함수는 선언문이 아닌 표현식으로 정의해야 하며 호출 방식은 동일하다 * prototype 프로퍼티가 없어 인스턴스/프로토타입 생성 불가 class Prefixer..

클래스 자바스크립트는 프로토타입 기반 객체지향 언어로, 인스턴스 생성에 생성자 함수가 있어 클래스가 굳이 필요 없었지만 ES6에 추가된 클래스 문법은 다음과 같은 몇 가지 차별점이 있다 생성자 함수와 달리 new 없이 호출하면 에러가 발생한다 상속을 지원하는 extends와 super 키워드를 제공한다 함수/변수 호이스팅이 발생하지 않는 것처럼 동작한다 (TDZ) 클래스 내의 모든 코드에 암묵적으로 strict mode가 지정된다 constructor 및 메서드들의 [[Enumerable]] 값이 false로, 열거되지 않는다 // 클래스 선언문 class Person { // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; // name 프로퍼티..