본문 바로가기

전체 글109

모던 자바스크립트 Deep Dive - 스프레드 문법 35장 스프레드 문법 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for .. of 문으로 순회할 수 있는 이터러블에 한정. 35-01 // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o // Map과 Set은 이터러블이다. console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ] console.log(...new Set([1, 2, 3])); // 1 2 3 // 이터러블이 아닌 .. 2024. 2. 3.
모던 자바스크립트 Deep Dive - 이터러블 34장 이터러블 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 자료구조를 만들기 위해 약속한 규칙. ES6 이전의 순회 가능한 자료구조, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for문, for … in 문, forEach 메서드 등 다양한 방법으로 순회 가능했음. ES6에서는 순회 가능한 자료구조를 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화함. 이터레이션 프로토콜에는 이터러블 프로토콜, 이터레이터 프로토콜이 있음. 1) 이터러블 프로토콜 Well-known Symbol인 Symbol.iterator를 프로퍼티 키로 .. 2024. 2. 2.
모던 자바스크립트 Deep Dive - 7번째 데이터 타입 Symbol 33장. 7번째 데이터 타입 Symbol 심벌이란? 6개의 타입: 문자열, 숫자, 불리언, undefined, null, 객체 +심벌 심벌 변경 불가능한 원시 타입의 값, 다른 값과 중복되지 않는 유일무이한 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용함. 심벌 값의 생성 1) Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성해야 함. 이렇게 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없음 다른 값과 절대 중복되지 않는 유일무이한 값이다. 33-01 // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 노.. 2024. 2. 2.
모던 자바스크립트 Deep Dive - 27장 배열 ~ 32장 String 27장 배열 희소배열: length와 배열 요소의 개수가 일치x. new Array(1, 2, 3); // → [1, 2, 3] Array.of(1, 2, 3); // → [1, 2, 3] isArray 인수가 배열이면 true, 아니면 false 반환. 27-43 // true Array.isArray([]); Array.isArray([1, 2]); Array.isArray(new Array()); // false Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(1); Array.isArray('Array'); Array.isArray(true); Array.isArray(fa.. 2024. 1. 27.
팀원들을 위한 styled-components 가이드 본 글은 Styled-components를 처음 접하는 팀원들을 위해 작성한 글입니다. 휘발하기에 아까워서 처음 접하는 분들을 위해 블로그 글을 남깁니다. 노션 링크에서 보면 더 보기 쉽습니다! https://vigorous-grenadilla-5b8.notion.site/styled-components-9293e6cef2344bea830e620ce68ec163?pvs=4 0. 맛보기 기존의 css 코딩 방식 index.html파일 Box1 style.css파일 .box1 { width: 300px; height: 300px; border: 1px solid red; background-color: red; } 기존의 css스타일링은 태그에 클래스명(또는 id)을 지정해서 선택자 . # 을 통해서 스타일.. 2024. 1. 22.
모던 자바스크립트 Deep Dive - 클로저 24장 클로저 렉시컬 스코프 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다. 함수 객체의 내부 슬롯 [[Environment]] 함수는 자신이 정의된 환경, 즉 상위 스코프를 기억해야함. 이를 위해 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장함. 클로저와 렉시컬 환경 24-05 const x = 1; // ① function outer() { const x = 10; const inner = function () { console.log(x); }; // ② return inner; } // outer 함수를 호출하면 중첩 함수 inner를 반환한다. // 그리고 outer 함수의 실행 컨텍.. 2024. 1. 19.