차근차근

개발을 하다 보면 객체나 배열을 전달해야하는 경우가 생긴다. 하지만, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우도 많다. 이럴 때 객체나 배열을 변수로 분해할 수 있게 해주는 문법이 구조 분해 할당(destructuring assignment)이다. 배열 분해하기 기본 문법 let arr = ['Kevin', 'Kim] // 구조 분해 할당 let [firstName, lastName] = arr; console.log(firstName); // 'Kevin' console.log(lastName); // 'Kim' 쉼표로 요소 무시하기 // 두 번째 요소는 필요하지 않음 let [firstName, , title] = ['Jul..

자바스크립트에서 DOM 객체에 접근을 하는 것은 DOM tree 자료구조에서 접근할 엘리먼트의 위치와 좌표의 계산(페이지 reflow)을 유발하기 때문에 퍼포먼스를 저하시키는 주요 요인이다. 이를 해결하기 위해서 createDocumentFragment 메서드를 사용할 수 있다. document.createDocumentFragment() 이 메서드는 새로운 빈 DocumentFragment를 생성한다. docFrag는 메인 DOM 트리의 일부가 되지 않지만 DOM 트리처럼 작동하고 단지 메모리 내에만 따로 존재한다. 이것을 다큐먼트 조각이라 한다. 이것에 자식 요소를 추가하는 것은 DocumentFragment가 DOM tree와 별개로 존재하기 때문에 접근 속도가 빠르다. 따라서, 페이지 reflow..

TIL 일급 객체(first-class citizen)의 세 가지 특징 자바스크립트에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. (자바스크립트가 나온 시점을 고려했을 때,) 자바스크립트에서 함수는 아래와 같이 특별하게 취급됩니다. 변수에 할당할 수 있다. 다른 함수의 인자로 전달될 수 있다. 다른 함수의 결과로서 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다. 고차 함수(higher-order function) 고차 함수(hig..

TIL DOM(Document Object Model) DOM은 프로그래밍 언어가 웹사이트를 조작할 수 있게 만들어주는 인터페이스(HTML을 조작할 수 있도록 마련된 객체 형태의 구조나 모델)이다. HTML과 CSS의 structure와 style을 파싱하기 위해서, 브라우저는 Document Object Model이라 불리는 document의 겉모양(representation)을 만든다. 이 모델(model) 은 자바스크립트가 오브젝트로서의 웹사이트 document의 컨텐츠와 엘리먼트에 접근할 수 있도록 해준다. 문서(document)와 문서의 요소(모든 element - 전체 문서, 헤드, table, text 등)는 문서를 위한 DOM의 한 부분이다. DOM의 구현은 어떠한 언어에서도 가능하지만, ..

TIL 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이를 위해, 자바스크립트는 this라는 특수한 식별자를 제공한다. this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다, 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 단, this 바인딩(this가 가리키는..

TIL 원시 자료형과 참조 자료형 원시 자료형과 참조 자료형의 구분이 필요한 이유 메모리에 데이터를 저장할 때, 크기가 동적인 데이터가 들어오는 경우 데이터가 언제 늘어나고 줄어들지 모르기 때문에 고정된 데이터 공간을 사용하는 것은 비효율적이다. 그렇기 때문에, 크기가 상황에 따라서 커졌다가 작아지는 특별한 데이터 저장소(Heap)를 마련하여 따로 관리한다. 그래서 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 Heap에 저장된 보관함의 주소(reference)가 담긴다. // 원시 자료형일 경우 let a = 2; let b = a; a = 3; console.log(a) // 3; console.log(b) // 2; // 참조 자료형일 경우 let e..

배열 Array.isArray() 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. 자바스크립트 immutability / mutability 원본을 변경하는 메소드는 mutation 변경하지 않는 것이 immutation 참고: https://doesitmutate.xyz/ 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다. 배열은 순서, 객체는 키벨류 값을 가질때(의미를 가질때) 객체 객체 속성 조회 'content' in tweet; // boolean // dot notation tweet.key; // bracket notation let foo = 'key'; tweet['key']; tweet[foo];객체 속성..

오늘 배운 것 자바스크립트로 계산기 구현하기 첫 과제 페어프로그래밍으로 계산기를 구현하였다. 생각보다 계산기 구현하는데 까다로운 점이 많았다. 0 + 0 = 0 0 AC Enter 7 8 9 + 4 5 6 - 1 2 3 * 0 . / 계산기 기능 유의사항 윈도우10의 계산기의 기능을 기본 베이스로 작업했다. 유의사항은 다음과 같다 1. 숫자 버튼을 누르고 화면에 숫자 출력 숫자 버튼을 눌렀을 때, 계산기 화면에 숫자가 이어붙여져야(concatenation) 한다. 2. Comma(.) 버튼 Comma(.) 버튼을 연속적으로 눌러도 처음 단 한 번만 입력 정수 없이 Comma(.) 버튼을 누르면 0.x 로 출력 3. Enter 버튼 Enter 버튼을 여러 번 클릭했을 때, 동일한 연산을 계속 수행 숫자, ..

오늘 배운 것 1. CSS 레아아웃과 스타일링을 위한 도구 idclass#으로 선택.으로 선택한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음특정 요소에 이름을 붙이는 데 사용스타일의 분류(classification)에 사용 CSS 단위 글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다. 일반적 경우 상대 단위인 rem을 사용한다. 브라우저의 기본 글자 크기가 1rem이다. em은 부모 요소에 따라 상대적으로 크기가 계산된다. 절대 단위: px, pt 등 상대 단위: %, em, rem, ch, vw, vh 등 blockinline-blockinline줄바꿈 여부줄바꿈이 일어남줄바꿈이 일어나지 않음줄바꿈이 일어나지 않음기본적으로 갖는 너비(width)100%글자가 차지하는..

오늘 배운 것 1. HTML (HyperText Markup Language) 웹의 가장 기초적인 구성 요소, 웹 콘텐츠의 의미와 구조를 정의하는 마크업 언어 HTML 문서의 구성 1) 페이지 전체를 감싸며, 루트(root) 요소라고 한다. 2) head의 내용는 페이지에 표시되지 않고 페이지에 대한 metadata를 포함한다. 기본 언어 설정, css, javascript, 폰트, 아이콘, 이미지 등을 링크한다. 단, 는 head에 포함될 필요는 없다. 보통 태그 바로 앞에 넣는 것이 에러를 피할 수 있다. 3) 페이지에 방문한 모든 웹 사용자에게 보여주길 모든 컨텐츠를 담고 있다. HTML 요소의 구성 1) 요소(element) 여는 태그에서 닫는 태그까지를 통틀어 요소라고 한다. 요소는 태그, 속성..