본문 바로가기

전체 글

 (19)
Javascript 비교연산자 자바스크립트에는 두 개의 비교 방법이 있다. 동등 비교(loose equality, ==)와 일치 비교(strict equality, ===)다. 동등 비교 == 동등 비교는 피연산자들이 서로 다른 타입일 경우, 자바스크립트가 암묵적으로 타입을 변환한 후에 비교한다. '10' == 10 // true 0 == false // true 자바스크립트의 암묵적 타입 변환 자바스크립트는 문맥에 따라 값의 타입을 바꾼다. '10' + 2 // (1) 5 * '10' // (2) !0 // (3) if (1) { } // (4) (1) 2를 문자열로 변환하고, 연산의 결과는 '102'다. (2) *의 피연산자가 숫자여야 하므로, '10'을 숫자 10으로 변환하며, 연산의 결과는 50이다. (3) !의 피연산자는 b..
Redux 기본 용어 Redux Essentials, Part 1: Redux Overview and Concepts | Redux The official Essentials tutorial for Redux: learn how to use Redux, the right way redux.js.org 오류가 있을 수 있습니다. 공식문서와 비교하며 읽어주세요. Actions Action은 type field를 가지고 있는 자바스크립트 object이다. Action은 어플리케이션에서 일어나는 일을 설명하는 event라 생각하면 된다. Type field는 "todos/todoAdded"와 같이, action을 설명가능한 스트링이어야 한다. Type 스트링은 주로 "domain/eventName"과 같은 형태로 사용하는데, dom..
Javascript Objects vs. Maps Map - JavaScript | MDN The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value. developer.mozilla.org 22.01.30 기준 작성 아직 완벽히 이해하지 못해 정확하지 않을 수 있습니다. 공식문서와 비교하며 읽어주세요. Key equality Key의 동일성은 sameValueZero 알고리즘에 기반한다. NaN !== NaN임에도 NaN은 NaN과 같다고 간주된다. 다른 값들도 === 연산에 기반하여 같은지 결정..
언박싱 몬스터 개선하기(1) - 테스트 환경 만들기 MirageJS 서버 설정 서버 없이도 테스트를 진행할 수 있도록 MirageJS를 활용하기로 했다. tsconfig.json 설정 compilerOptions → lib에 "DOM"을 추가해준다. 이걸 추가하지 않으면 window를 찾을 수 없다는 에러가 발생한다. { "compilerOptions": { "lib": ["es2017", "DOM"], ... } }​ server type 만들기 window 안에 server에 대한 타입을 만들어두지 않으면 server를 찾을 수 없다는 에러가 발생한다. declare global { interface Window { server: any; } }​ MirageJS 서버를 만드는 함수 export const setupServer = () => { if ..
DOM과 Virtual DOM DOM이란? HTML 문서의 엘리먼트들의 트리 구조다. HTML 문서를 수정할 수 있는 DOM API를 제공한다. 최상위 노드인 document부터 시작해서, html, body, ul 등 노드들을 갖는다. 모든 노드 객체는 Object, EventTarget, Node를 상속하고, 노드의 종류에 따라 Document, Elemet 등을 상속한다. 이를 통해 addEventListener, getElementById 등의 프로토타입 메소드, 프로퍼티를 사용할 수 있게 된다. 아래는 HTML 문서와 DOM 예시이다. 안녕 헬로월드 문서 노드(Document Node)는 루트 노드로, 자바스크립트에서 window.document나 document로 참조한다. 요소 노드(Element Node)는 HTML 요..
자바스크립트 Promise 프로미스란? 비동기 처리 상태와 처리 결과를 관리하는 객체 const promiseFunc = new Promise((resolve, reject) => { 비동기 처리 수행 if (처리 결과 성공) { resolve(결과 값) } else { reject(new Error(에러)) } }) 프로미스 생성자는 콜백 함수를 인자로 받는다. 콜백함수 내부에서는 비동기 처리를 수행하고, 성공 여부에 따라 resolve 또는 reject 함수를 호출한다. resolve나 reject가 호출되면 프로미스의 상태가 변한다. 비동기 처리가 진행 중일 때 프로미스의 상태 pending에서, resolve가 호출되면 fulfilled, reject가 호출되면 rejected 상태로 변한다. Fulfilled, rejec..
자바스크립트 가비지 콜렉션과 순환참조 가비지 콜렉션이란? 가비지 콜렉터가 더이상 사용되지 않는 메모리를 해제하는 것이다. 가비지 콜렉션 예시 아래 글에서의 예시인데, 이 글만으로는 이해하기 힘든 부분이 있어 설명을 추가해보았다. 자바스크립트의 메모리관리 - JavaScript | MDN C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트는 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해제한 developer.mozilla.org var x = { a: { b: 2 } }; // 1 { b: 2 } 오브젝트는 b 오브젝트, { a: {b: 2} } 오브젝트는 a 오브젝트라 하겠다. 메모리에 b 오브젝트를 참조하는 a 오브젝트가 생긴다. x 변수는 a ..
자바스크립트 Execution Context Execution Context 란? 스코프와 코드 실행 순서를 관리하는 자바스크립트 내부 수행 매커니즘이다. var a = 3; function f() { var b = 7; console.log(a + b);// 10 } f(); console.log(a);// 3 코드에서 변수 b는 f함수 내에서 유효하며, a는 f함수를 포함한 코드 전체에서 유효하다. 이처럼 어떤 식별자가 유효한 범위를 스코프라 한다. 스코프는 lexical environment을 통해 관리한다. 코드 실행 순서는 아래와 같다. 1. a에 3을 대입한다. 2. f 함수로 실행 흐름이 넘어간다. 3. b에 7을 대입한다. 4. a + b를 출력한다. 5. 전역 코드로 다시 실행 흐름이 넘어온다. 6. a를 출력한다. 이와 같은 코드..

티스토리툴바