⭐️ 노션에서 보기웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 → 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능파싱 (parsing; 구문 분석 syntax analysis)프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해텍스트 문서의 문자열을 토큰으로 분해하고 (어휘 분석),토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료 구조인 파스 트리(parse tree/syntax tree)를 생성하는 일련의 과정렌더링 (rendering)HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것브라우저의 렌더링 과정1. 브라우저는 HTML, CSS, 자바..

⭐️ 노션에서 보기SetSet 객체는 중복되지 않는 유일한 값들의 집합배열과 유사하지만, 다음과 같은 차이가 있음| 구분 | 배열 | Set 객체 || --- | --- | --- || 동일한 값을 **중복**하여 포함할 수 있다. | O | X || 요소 **순서**에 의미가 있다. | O | X || **인덱스**로 요소에 접근할 수 있다. | O | X |수학적 집합을 구현하기 위한 자료구조 → 교집합, 합집합, 차집합, 여집합 등 구현 가능Set 객체의 생성Set 생성자 함수로 생성인수를 전달하지 않으면 빈 Set 객체가 생성 const set = new Set(); console.log(set); // Set(0) {}인터러블을 인수로 전달 * 중복된 값은 저장되지 않음 const set..

⭐️ 노션에서 보기디스트럭처링 할당(ES6 도입): 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당필요한 값만 추출하여 변수에 할당할 때 유용배열 디스트럭처링 할당ES5 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3ES6 const arr = [1, 2, 3]; // ES6 배열 디스트럭처링 할당 // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이때 할당 기준은 배열의 인덱스다. const [one, ..

⭐️ 노션에서 보기// ...[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// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.console.log(...{ a: 1, b: 2 });// TypeError: Found non-callable @@ite..

⭐️ 노션에서 보기이터레이션 프로토콜순회 가능한 데이터 컬렉션(자료구조)를 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 (ES6 도입)순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일→ for…of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화이터러블이터러블 프로토콜을 준수한 객체Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입을 통해 상속 받은 객체 const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function'; // 배열, 문자열, Map, Set 등은 이터러블이다. isIterable([]); ..

⭐️ 노션에서 보기심벌(Symbol)이란?변경 불가능한 원시 타입의 값주로 이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용다른 값과 중복되지 않는 유일무이한 값ES6에 도입된 7번째 데이터 타입심벌 값의 생성Symbol 함수를 호출하여 생성 // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); console.log(typeof mySymbol); // symbol // 심벌 값은 외부로 노출되지 않아 확인할 수 없다. console.log(mySymbol); // Symbol()new 연산자와 함꼐 호출하지 않는다.선택적으로 디버깅용 설명 문자열을 인수로 전달 가능 (심벌 값 생성에 어떠한 영향도 주지 않음)..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 투두리스트에 대한 데이터는 로컬 스토리지에 저장해 관리하는 방식으로 만들다가, fetch API를 사용해 http 통신을 구현하고 싶어 직접 서버를 구축하지 않아도 사용할 수 있는 json-server 라이브러리를 사용해 CRUD를 구현했다.  원래는 여기까지만 해볼 생각이었지만, 괜히 욕심이 든다. 어차피 투두리스트 별 것 없는데 간단한 CRUD 백엔드 코드는 나도 만들어볼 수 있지 않을까 싶어 Express를 사용해 간단한 백엔드 서버를 만들어보게 되었다. 데이터베이스는 우선 뒤로 하고 우선은 코드 내에서 배열로 목데이터를 관리하기로.const todos = [ { id: 1, checked: false, todo: '자바스크립트 ..

바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 하나씩 구현을 하다 보니 index.js에 너무 여러 가지의 함수가 혼재하게 되었고, 정리를 해야겠다 싶어 코드를 기능 단위로 파일을 만들어 분리를 해야겠다 싶었다. 그렇게 기존 index.js에 작성되어 있던 이벤트 핸들러 함수들을 handle.js 파일에 하나씩 이동시키기 시작했는데, 그러던 중 마주한 에러 메시지. Uncaught TypeError: Assignment to constant variable 오류가 난 곳을 찾아가보니 함수 기능 분리를 위해 만든 handle.js 파일 내에 필터링한 todos 배열을 기존 todos 배열에 재할당하며 업데이트를 하는 코드에 문제가 있었다. // handle.jstodos = todos.filter((..