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..

목록에서 중복된 값 제거하기 객체로 이루어진 배열을 다루는 경우가 많다. 특정 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..

LocalStorage 브라우저에 자료를 저장할 수 있는 저장소이다. cookie와의 차이점 Cookie LocalStorage 공통점 브라우저에 자료를 저장하는 저장소 키-값 형태의 자료를 저장한다 차이점 만료 기한이 있다(휘발성) 만료 기한이 없다 (영구성, 브라우저를 닫았다가 다시 열어도 자료가 남아있다) 4kb의 용량 제한이 있다 용량제한이 있지만 쿠키보다 크다 모바일은 2.5mb, 데스크탑은 5mb~10mb (브라우저마다 다르다) 서버 요청시 쿠키가 전송된다 서버로 자동 전송되지 않는다 SessionStorage LocalStorage와 같이 브라우저에 데이터를 저장할 수 있는 저장소이다. 데이터가 영구적으로 저장되지 않는다는 점이 다르며, LocalStorage와 사용법은 같다. 로컬 스토리지..

desktop site를 기준으로 버튼을 만들었더니 mobile 에서는 버튼이 두 줄이 넘어갔다. 문구를 수정할까 하다가 버튼 안에 글을 두 줄로 작성하려 방법을 찾아보았다. HTML에서 사용할 수 있는 방법 button 태그를 활용할 때 1 2 3 4 5 행복 작성하기 cs button 태그를 사용하면 버튼 안의 내용이 안에 작성된다. input type="button"과 다르게 여러 가지 방법을 사용해봤지만 두줄로 나오지 않았다. 을 사용하니 원하는 대로 버튼 안의 글이 두 줄로 나왔다. (strong태그를 사용하지 않아도 줄바꿈 가능하다) input type="button" 태그를 사용할 때 1 2 cs value를 작성할 때 줄바꿈을 해준다. 들여쓰기가 되어있다면 들여쓴 공백도 입력되므로 두번째줄..

인터넷에서 '해피 저금'이라는 것을 발견했다. 행복한 순간들을 적어서 병에 넣어두고 연말에 열어보는 거라고 한다. 개인적으로 해보고 싶었는데 아예 홈페이지로 만들어보면 어떨까 했다. 화면 설계 필요한 기능 로그인 입력받은 글을 저장 해가 바뀌면 이전 글을 확인할 수 있도록 설정한다. 글을 얼마나 저장했는지 그림으로 보여줌 1. 로그인기능 firebase사용 친구 태그가 가능하면 프로필 있으면 좋을듯 2. 입력받은 글을 저장한다 날짜 입력받음 텍스트 입력받음(짧은글) 3. 해가 바뀌면 이전 글을 확인할 수 있도록 설정 계정과 날짜가 확인되어야 글 열람 가능 보여주는 순서 - 무작위? 날짜순?? 날짜 역순?? 볼 수 있는 글은 따로 모아두기? 4. 글을 얼마나 저장했는지 그림으로 보여줌 병 안에 사탕이나 작..

타이머를 터치해서 시간을 설정할 수 있도록 만들려고 한다. Progress.Pie는 1과 0 사이의 수를 입력받아 색칠해준다. 0이면 비어있고, 1이면 모두 차 있는 파이를 나타낸다. 1 cs 화면 터치로 파이를 채우려면 알아야 될 것이 있다. 1. 파이 내에서 터치 이벤트가 발생한 위치 2. 각도 위치는 각도를알기 위해서 알아야하는 정보이고, 각도를 알아야 (각도 / 360)으로 progress값을 전달해 파이를 채울 수 있다. 한 점만 움직이고, 그 점과 y축과의 각도만 구하면 된다. 1. 터치 이벤트가 발생한 위치 알아내기 터치를 인식하기 위해 TouchableOpacity로 Progress.Pie를 감싸주었다. onPress로 setTime이라는 함수를 넘겨주었다. 1 2 3 4 5 6 7 8 9..