KEEP CODING

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

동기식과 비동기식 동기식(Synchronous) 하나의 작업이 시작하면, 마칠 때 까지 기다렸다가 다음 작업을 수행하는 방식 작업의 순서가 정해져있다 비동기식(Asynchronous) 하나의 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식 보통 위에서 아래로 코드를 읽어나가지만 늦게 시작한 작업이 먼저 마칠 수 있다 우리는 코드를 작성하고, 읽어나갈 때 작업이 당연히 동기식으로 이루어질 것이라고 생각한다. 하지만 프로그램은 이전 작업이 오래 걸린다고 기다려주지 않고, 다음 작업을 시작한다. 이런 방식때문에 시간이 오래 걸리는 작업을 프로그램 중간에 수행할 경우, 오류가 생기기 쉽다. 시간이 오래 걸리는 작업의 경우 주로 온라인상으로 통신해 작업을 수행하거나, 자료를 가져오는 경우이다. 가져온 ..

공부하는데 아래와 같이 작성된 코드가 있었다. const { user } = await signInWithEmailAndPassword(auth, email, password); 뒤의 signIn...을 통해 반환되는 것은 userCredential이라는 객체였다. 그 중에서 다른 정보는 필요없고 user만 필요했다. 이런 경우, { user } 에 userCredential을 할당하면 userCredential 내의 user항목만 user에 저장된다. 분해할당 이와 같이 객체나 배열의 값을 추출할 때 쉽게 사용할 수 있는 것이 분해할당이다. 객체의 분해할당 const { 프로퍼티명 } = 전체객체 여기에서 주의할 점은 좌항의 변수 이름은 우항의 전체 객체 내에 존재하는 프로퍼티명을 사용해야 한다는 것이..

Javascript에서 물음표를 사용하는데 왜 사용하는지 몰라서 전체적인 사용법에 대해 찾아봤다. Javascript에서의 ?(물음표) 1. 삼항 연산자 (Ternary Operator) 2. 선택적 연결 (Optional Chaining) 3. 무효화 합체 (Nullish Coalescing) 1. 삼항 연산자 (Ternary Operator / ? : ) 삼항 연산자는 if ... else를 대체하는 연산자이다. 첫 번째 항의 Condition이 True이면 두 번째 항을 실행하고, False이면 세 번째 항을 실행한다. if ... else로 작성한다면 아래와 같다. 1 2 3 4 5 if(Condition) { // True일 경우 실행 } else { // False일 경우 실행 } cs 삼항연..

Todo app을 만드는데 자료를 삭제하는 방법을 새롭게 알게되어 정리해봤다. 1. Array에 자료를 관리하는 방법 기존에 목록을 추가/삭제하는 방법은 아래와 같았다. 주로 Array형태로 자료를 저장/삭제했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Array 형태의 자료관리 // selectedKeywords = ['A', 'B', 'C'] // 체크박스에 체크한 항목 추가/해제한 항목 삭제 function handleClick(e) { const value = e.target.value; const checked = e.target.checked; if(checked) { // 키워드를 추가한 경우 props.onChange([...selectedKeywords, valu..