KEEP CODING

Setset은 중복을 허용하지 않은 값의 컬렉션이다. Array 와 비슷한데 중복을 허용하지 않는 것이 가장 큰 특징이다.Array vs Set ArraySet항목의 순서입력한 대로 순서있게 저장순서 없이 저장index 사용 여부index 로 접근 가능index 통해 접근 불가중복중복 허용중복 불가 Set 의 MethodsSet 생성하기 - new Set()값 추가하기- set.add()const nameSet = new Set();nameSet.add('Sophia');nameSet.add('Emma');nameSet.add('Olivia');console.log(nameSet);// {'Sophia', 'Emma', 'Olivia'}nameSet.add('Mia');nameSet.add('Sophia..

이미지를 정상적으로 불러올 수 없는 경우, 보이지 않게 처리해달라는 작업 지시가 있었다.  img태그img 태그에는 이미지를 가져올 수 없을 때 깨진 이미지 아이콘과 alt 값을 함께 표시한다.   이미지를 가져올 수 없는 상황은 아래와 같다src 속성이 “” 이거나 null일 때src 의 url이 현재 사용자가 보는 페이지의 url과 동일할 때지정한 이미지가 손상돼 불러올 수 없을 때이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, img 요소의 속성에도 크기를 지정하지 않은 경우사용자 에이전트가 지원하지 않는 이미지 형식인 경우(출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/img) 이미지를 가져올 수 없는 상황 처리하기img 태그..

es6 에 새롭게 추가된 Map 객체에 대해 알아보자.Mapmap 객체는 키-값 쌍의 집합이다.키는 단 하나만 존재할 수 있다. Object 는 key는 string 또는 symbol 만 사용할 수 있지만 Map 은 모든 값(함수, 객체 또는 원시값 등)을 사용할 수 있다.Object 와 비슷하지만 다른점이 많다. Object vs Map ObjectMap항목의 순서입력한 대로 정렬되는 편이지만 항상 그런 것은 아님. 순서가 없다고 생각하는 편이 안전함.입력한 순서대로 정렬됨키 유형string 혹은 symbol(number 형식으로 key 를 생성하면 자동으로 string으로 변환된다.)모든 값이 가능함(함수, 객체 또는 함수 등)크기수동으로 결정해야함Map.size순회Object.keys, Object..

let, const변수를 선언할 때 let과 const를 사용해 선언할 수 있다.let x = 10;const y = 20;기존에 사용하던 var 는 변수와 상수를 구분하지 않고 선언했으나, 변수에는 let, 상수에는 const 를 사용해 선언한다.ES6 이전 문법 → varvar 는 변수를 선언하는 키워드로, var는 호이스팅되어 함수나 전역 스코프의 최상단으로 끌어올려진다. 안정성과 변수/함수 구분을 위해 let과 const를 사용하는 것이 좋다. 화살표 함수(Arrow Functions)function 키워드 없이, ⇒ 만으로 함수를 선언할 수 있다.// ES5var fn = function(x, y) => { return x + y;}// ES6const newFn = (x, y) => x + y..

Hashurl 에서 hash 란 주소의 # 뒤에 연결된 식별자를 말한다.https://developer.mozilla.org/ko/docs/Web/API/URL/hash#예제위 링크에서 #뒤의 예제가 url 의 hash 값이다.mdn 사이트에서는 목차를 클릭할 경우, hash 라우팅을 통해 해당 #{목차}로 이동할 수 있도록 되어있고, 목차를 id로 사용해 링크로 진입하면 바로 메뉴로 이동할 수 있도록 만들어져있다.123h2 id="예제">    a href="#예제">예제/a>/h2>cs  해시 라우터URL 의 #뒤의 해시를 활용해 페이지를 이동하는 라우터이다.해시를 사용하면 #를 통해 이동한 경로가 아닌 이전 경로를 사용해 웹페이지를 받아온다.별도의 서버 설정이 필요하지 않고, 새로고침시 오류가 발생..

SOLID - 1. SRP 단일 책임의 법칙 SRP(Single Responsibility Principle) 단일 책임의 법칙은 아래의 내용을 이야기하는 것이다. 클래스는 단 한 개의 책임을 가져야 한다. 클래스를 변경하는 이유는 단 하나여야 한다(단 한개의 책임만을 가지기 때문). 한 책임의 변경에 의해 다른 책임과 관련된 코드에 영향을 미치지 않도록 한다(유지보수 용이). react 를 사용하면서 class 를 만드는 것이 아니기 때문에 완벽하게 SRP를 지키는 class를 만들지는 못했다. 하지만 기존의 코드에서 어떻게하면 SRP를 지키도록 만들 수 있을지 고민해보았다. AS-IS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25..

목록에서 중복된 값 제거하기 객체로 이루어진 배열을 다루는 경우가 많다. 특정 key 를 기준으로 중복된 값을 제거하는 방법을 정리한다. 1 2 3 4 5 const userList = [ { age: 25, name: 'alpha', birthday: '01-01' }, { age: 25, name: 'beta', birthday: '02-02' }, { age: 35, name: 'gamma', birthday: '03-03' } ]; Colored by Color Scripter cs filter + findIndex findIndex는 조건에 맞는 첫 번째 index를 return 하는 특성을 이용해 index와 findIndex의 값이 같은 데이터만 걸러내는 방법이다. 1 2 3 4 5 6 7 ..

일하면서 다양한 방법으로 array 에서 원하는 값을 찾게 되어 여러가지 방법에 대해 정리해보았다. 1. 단순한 array 의 경우 number, string 등 단순한 데이터로 이루어진 array를 단순한 array 라고 지칭했다. 원시타입의 데이터를 가진 array 라고 생각하면 된다. 1 2 const oddNumList = [1, 3, 5, 7]; const cityList = ['seoul', 'suwon', 'pusan']; cs 1-1. includes includes() 는 파라미터로 전달한 특정 값이 배열 안에 있는지 boolean 으로 return 한다. 1 2 const specialNumber = 2; console.log(oddNumList.includes(specialNumber..

타입 호환 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다. 내부 구조와 타입을 확인한다. 인터페이스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 타입 호환 - 인터페이스 interface Developer { name: string; skill: string; } interface Person { name: string; } let developer: Developer = { name: "dev", skill: "typescript" } let person: Person = { name: "person" } // developer = person; // 에러 생성 구조적으로 작은 타입을 큰 타입에 할당할 수 없다. pers..

타입 가드 타입 가드는 조건문을 이용해 타입을 좁혀나가는 것을 말한다. 타입 가드를 사용하는 이유는 타입이 좁혀지면, 해당 타입에서 사용가능한 메소드를 사용할 수 있기 때문이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } function introduce(): Developer | Person { return { name: 'Tony', age: 33, skill: 'Iron Making' }; } var tony = introduce(); // console.log(tony.skill); // er..