라쿤의 끄적끄적

JavaScript Deep Dive 16 📄 용어 및 중요사항 정리 타이머 호출 스케줄링(scheduling a call) : 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것 타이머 함수 : 스케줄링을 구현하게 도와주는 함수로 전역 객체의 메서드인 호스트 객체 임 setTimeout, setInterval 비동기 처리 방식으로 동작 함 싱글 스레드(single thread) : JS 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 두 가지 이상의 태스크를 동시에 실행 불가함 타이머 함수 setTimeout(callback[, delay, param1, param2, ...]) 두번째 인수로 전달받은 시간(delay)으로 단 한번 첫번째 인수로 전달 받은..

JavaScript Deep Dive 15 📄 용어 및 중요사항 정리 이벤트 브라우저는 특정 상황이 발생시 이를 감지하여 특정한 타입의 이벤트를 발생 시킴 이벤트 핸들러 : 이벤트 발생시 호출될 함수를 말함 이벤트 핸들러 등록 : 이벤트 발생시 브라우저에게 이벤트 핸들러(함수)의 호출을 위임하는 것 이벤트 핸들러 프로퍼티에 함수 할당하여 가능함 이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 이벤트 타입 : 이벤트의 종류를 나타내는 문자열 이벤트 타입 이벤트 타입 이벤트 발생 시점 마우스 이벤트 click 마우스 버튼을 클릭했을 때 dblclick 마우스 버튼을 더블 클릭했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 누르고 있던 마우스 버튼을 놓..

JavaScript Deep Dive 14 📄 용어 및 중요사항 정리 DOM DOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현 HTML 요소를 제어할 수 있는 API로 프로퍼티와 메서드를 제공하는 노드 객체들로 구성된 트리 자료 구조 HTML 요소: HTML 문서를 구성하는 개별적인 요소 HTML 요소 -(JS엔진에 의한 파싱)-> 요소 노드 객체 HTML 어트리뷰트 -(파싱)-> 어트리뷰트 노드 HTML 요소의 콘텐츠 -(파싱)-> 텍스트 노드 시작태그 어트리뷰트 이름 어트리뷰트 값 콘텐츠 종료태그 HTML 요소의 중첩 관계 특성으로 다른 요소로 포함 가능함 -> 모든 노드들이 트리 자료 구조로 구성 트리 자료구조: 부모노드, 자식노드로 구성되어 노드들의 계층..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit05 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit05 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

JavaScript Deep Dive 12 📄 용어 및 중요사항 정리 Symbol 심벌 변경 불가능한 원시 타입의 값 다른 값과 중복되지 않는 유일무이한 값 이름 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용함 심벌 값의 생성 Symbol 함수 : Symbol 함수를 호출하여 심벌을 생성함 (다른 원시값의 경우 리터럴 표기법을 통해 값 생성) new 연산자와 함께 호출하지 않음 (인스턴스가 아니라 원시값을 생성하는 것임) 생성된 심벌 값은 외부로 노출되지 않아 확인 불가함 Symbol(description) : Symbol 함수의 인수로는 생성된 심벌값에 대한 설명인 문자열을 전달 가능함 설명 문자열이 같더라도 언제나 Symbol은 변경 불가한 유일무이한 값을 줌으로서 다름 생성된 심벌 값에 ..

JavaScript Deep Dive 11 📄 용어 및 중요사항 정리 Number Number 생성자 함수 new Number(인수) : [[NumberData]] 내부 슬롯에 숫자인 인수를 할당한 Number 래퍼 객체 생성 숫자 인수 없이 호출시, 기본으로 내부 슬롯에는 0을 할당 [[PrimitiveValue]]와 [[NumberData]]는 같음 인수가 숫자가 아닌 값 전달시, 숫자로 강제 변환후 내부슬롯에 할당 문자열 숫자 -> 숫자로 변환되어 할당 문자열 문자 -> NaN으로 변환되어 할당 Number(인수) : 인스턴스가 아닌, 숫자를 반환(명시적 타입변환) 문자열 숫자 -> 숫자 불리언 -> 숫자 Number 프로퍼티 Number.EPSILON : 1과 1보다 큰 숫자 중에서 가장 작은 숫..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit04 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 기능적으로 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Soc..

JavaScript Deep Dive 10 용어 및 중요사항 정리 배열 고차 함수 표시 Callback return sort Array.prototype.sort(comparisonCallback) 음수(첫 인수), 양수(두번째 인수), 0(정렬X) 정렬된 배열을 반환 forEach Array.prototype.forEach(Callback, bindThis) Callback(value, index, array) undefined map Array.prototype.map(Callback, bindThis) Callback(value, index, array 새로운 배열을 반환 filter Array.prototype.filter(Callback, bindThis) Callback(value, index..

JavaScript Deep Dive 09 용어 및 중요사항 정리 배열 메서드 내용 return new Array() 배열 생성 (생성자 함수) Instance Array.of(itemValue) 배열 생성 전달된 요소로 구성된 배열 Array.from((유사배열, 이터러블 객체), Callback) 배열 변환 및 가공 객체를 배열로 만들고 callback 반환값으로 구성된 배열을 반환 Array.isArray(인수) 전달된 인수가 배열인지 아닌지 확인 true, false Array.prototype.indexOf(searchValue, startSearchIndex) 요소검색 첫번째로 검색된 요소의 인덱스 Array.prototype.includes(searchValue, searchStartInde..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit03 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit02 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..

리팩토링 Instagram 클론 프로젝트 by Redux-toolkit01 📄 프로젝트 설명 이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.) 해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다. 더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다. 💻 화면 개요 체크는 현재 구현된 상황을 의미합니다. 로딩 화면 또는 Component : 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component 로그인 화면 : 기본 Email 로그인, Social 로그..

JavaScript Deep Dive 08 용어 및 중요사항 정리 ES6 함수의 추가 기능 자바스크립트에서 ES6 이전 함수는 다양한 방식으로 호출이 가능함 -> 함수의 구분이 없음, 대부분이 프로토타입 객체를 생성함 -> 실수 유발, 성능 저하 일반 함수 호출 생성자 함수 호출 메서드로서 호출 callble(호출할 수 있는 함수 객체) 이면서 contructor(인스턴스를 생성할 수 있는 함수 객체) 임 함수 구분 constructor prototype super arguments 일반함수 (함수 선언문, 표현식) O O X O 메서드 X X O O 화살표 함수 X X X X ES6 메서드 (메서드 축약 표현) 메서드 : 과거 : 객체에 바인딩된 함수를 일컫는 의미 ES6 : 메서드 축약 표현으로 정의..

JavaScript Deep Dive 07 용어 및 중요사항 정리 클래스 자바스크립트는 프로토타입 기반의 객체지향 언어지만, 클래스를 제공함 그렇다고 클래스를 제공한다고 해서 새로운 클래스 기반 객체지향 모델을 제공하려는 것은 아님 단지 새로운 객체 생성의 매커니즘일 뿐임 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만, 정확히 동일하게 동작하지는 않고 클래스만 제공하는 기능도 있음 클래스 vs 생성자 함수 클래스 생성자 함수 new 연산자 없이 호출시 에러 발생 new 연산자 없이 호출시 일반 함수로 호출 extends와 super 키워드 제공 O extends와 super 키워드 제공 X 호이스팅 발생하지 않는 것 처럼 동작 함수선언문(함수 호이스팅), 함수표현식(변수 호이스팅) 암..

JavaScript Deep Dive 06 용어 및 중요사항 정리 실행 컨텍스트 실행 컨텍스트의 구조를 이해하려면 해당 책의 그림을 보는게 빠름 소스코드: 실행 가능한 코드로 실행 컨텍스트를 생성하는 역할 소스코드의 타입 전역 코드 : 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않음 전역 코드에서 실행 컨텍스트 역할 전역 스코프 생성 : 전역 변수 관리 전역 객체와 연결 : 전역 변수, 전역 함수를 전역 객체와 연결 함수 코드 : 함수 내부에 존재하는 소스코드, 함수 내부 중첩함수, 클래스 등의 내부 코드는 포함 되지 않음 함수 코드에서 실행 컨텍스트 역할 지역 스코프 생성 : 지역변수, 매개변수, arguments 객체 관리 전역 스코프와 연결 : 스코프 체인을 연..