Frontend
-
React + TypeScript 기반 Router 설정하기Frontend/TypeScript 2021. 12. 30. 00:06
React + TypeScript 기반 프로젝트 생성 npx create-react-app [Project name] --template typescript ※ 아래와 같은 오류 발생 시 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app T..
-
JavaScript - Map, SetFrontend/JavaScript 2021. 7. 8. 00:30
- Map key가 있는 데이터를 저장한다는 점에서 객체와 유사 Map은 key에 다양한 자료형을 허용한다는 점에서 객체와 차이가 있다. - Map 주요 메소드와 프로퍼티 new Map() : Map을 생성한다. map.set(key, value) : key를 이용하여 value를 저장한다. map.get(key) : key에 해당하는 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다. map.has(key) : key가 존재하면 true. 존재하지 않으면 false를 반환한다. map.delete(key) : key에 해당하는 값을 삭제한다. map.clear() : 맵 안의 모든 요소를 제거한다. map.size : 요소의 개수를 반환한다. let map = new Map(); m..
-
JavaScript - iterable, 유사 배열, Array.fromFrontend/JavaScript 2021. 7. 7. 20:52
이터러블(iterable): Symbol.iterator가 구현된 객체 유사 배열(array-like): 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체 - 문자열의 경우 이터러블 객체이면서 유사배열 객체이다. - 이터러블 객체라고 해서 유사 배열 객체는 아니다. - 유사 배열 객체라고 해서 이터러블 객체인 것도 아니다. - 이터러블과 유사 배열은 배열이 아니기 때문에 push, pop 등의 배열 메소드를 지원하지 않는다. - 이터러블과 유사 배열에서 배열 메소드를 사용할 수 있는 방법은? Array.from - Array.from Array.from은 이터러블이나 유사 배열을 받아 Array로 만들어준다. 이 과정을 거치면 이터러블이나 유사 배열에서 배열 메소드를 사용할 수 있다. Arra..
-
JavaScript - iterable 객체Frontend/JavaScript 2021. 7. 7. 20:26
- iterable 객체 반복 가능한(iterable) 객체 for ...of 반복문 적용 가능 이터러블 객체 종류 배열, 다수의 내장 객체, 문자열 등 - Symbol.iterator 배열이 아닌 객체를 이터러블 객체로 변경 아래 range 객체를 이터러블로 만드려면 객체에 Symbol.iterator(특수 내장 심볼) 메소드 추가 1. for ...of 가 시작되자마자 for ...of 는 Symbo.iterator 호출(Symbol.iterator 없으면 에러 발생) Symbol.iterator는 반드시 이터레이터(iterator, 메소드 next가 있는 객체) 를 반환해야 함 2. 이후 for ...of 는 반환된 객체(이터레이터)만을 대상으로 동작 3. for ...of 에 다음 값이 필요하면,..
-
JavaScript - for ...of, for ...in 차이Frontend/JavaScript 2021. 7. 7. 14:56
- for ...of 와 for ...in의 차이 for ...in 루프는 객체의 모든 열거가능한 속성에 대해 반복 for ...of 구문은 컬렉션 전용. 모든 객체보다는 [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 반복 Object.prototype.objCustom = function () {}; Array.prototype.arrCustom = function () {}; let iterable = [3, 5, 7]; iterable.foo = "hello"; for (let i in iterable) { console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom" } for (let i of iterable) { console..
-
JavaScript - isNaN() vs Number.isNaN()Frontend/JavaScript 2021. 7. 7. 13:25
- isNaN 함수의 필요성 NaN이 NaN인지 판별할 때, 두 동일연산자 ==와 === 모두 false로 평가된다. NaN 여부를 알아내기 위해 판별할 수 있는 함수가 필요하다. - NaN ? Not a Number NaN 타입은 ? Number typeof NaN === 'number'; // true NaN 값이 반환되는 경우 산술 연산이 정의되지 않은 결과 또는 표현할 수 없는 결과일 경우 숫자가 아닌 값의 변환을 시도했으나 알맞은 원시 숫자 값이 없는 경우 0을 0으로 나눈 경우 - isNaN() 어떤 값이 NaN인지 판별 몇몇 일반적이지 않은 규칙을 가지고 있으므로, ECMAScript 2015에 추가한 Number.isNaN() 사용 권장 주어진 값이 NaN이면 true, 아니면 false를..
-
JavaScript - new 연산자와 생성자 함수Frontend/JavaScript 2021. 7. 6. 21:59
=> 유사한 객체를 여러개 만들어야 할 때, new 연산자와 생성자 함수를 사용 - 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 다만, 생성자 함수는 아래 두 관례를 따른다. 함수 이름의 첫 글자는 대문자로 시작 반드시 new 연산자를 붙여 실행 function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false new User(...)를 사용하여 함수를 실행하면 아래와 같은 알고리즘이 동작 빈 객체를 만들어 this에 할당 함수 본문을 실행. this에 새로..
-
JavaScript - 객체 메소드와 thisFrontend/JavaScript 2021. 7. 6. 18:52
- 메소드(method) 객체 프로퍼티에 할당된 함수 객체에게 행동할 수 있는 능력 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! - 메소드 단축 구문 function을 생략해도 메소드를 정의할 수 있음 일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하진 않음(객체 상속과 관련된 미묘한 차이가 존재) // 아래 두 객체는 동일하게 동작합니다. user = { sayHi: function() { alert("Hello"); } }; user = { sayHi() { // "sayHi: function()"과 동일합니다. alert("Hello"); } }..