혼자 적어보는 노트

날짜데이터를 데이터베이스에 넣어야 할 일이 생겨서 데이터를 변환하게 되어서 정리 했다. Sun Feb 27 2022 06:03:11 GMT+0900 (한국 표준시) -> 2022-02-27 06:03:11 const dateForData = (date) => { const getYear = date.getFullYear(); const getMonth = date.getMonth() + 1; const getDate = date.getDate(); const getHour = date.getHours(); const getMinutes = date.getMinutes(); const getSeconds = date.getSeconds(); return `${getYear}-${getMonth < 10 ?..

기본 코테 문제를 풀고 다른 사람들의 코드를 구경하던 중 배열에 관해 새로운 사실을 알게 되었다. const arr = ["A", "B", "C"]; 자주 볼 수 있는 배열인데, 여기에 key-value를 추가할 수 있다는 사실..!! const arr = ["A", "B", "C"]; arr["First"] = "AAA"; arr["Second"] = "BBB"; console.log(arr); // ['A', 'B', 'C', First: 'AAA', Second: 'BBB'] console.log(arr.length); // 3 console.log(arr["First"]); // AAA console.log(arr["Second"]); // BBB 배열 안에 속성을 추가해 줄 수 있는 것이다. c..

기본적인 함수들이지만 문자열을 자를 때 비슷한 결과를 만들어 낼 수 있는 함수들이 여러개 있어서 사용하기에 조금 헷갈릴 때가 있다. 조금씩 다른 substr() / substring() / slice() 와 맨 앞, 맨 뒤 문자열을 추출할 때 편한 charAt()에 대해 정리 해보기로 했다. * 전부 새로운 문자 혹은 문자열을 반환한다. substr() index와 자를 개수를 입력하여 자른 문자열을 반환한다. substr(시작위치, 자를 문자의 개수) * 자를 문자의 개수를 생략하면 문자열의 끝까지 자르게된다. const string = "문자열다루기"; console.log(string.substr(0, 1)); // 문 console.log(string.substr(-1, 1)); // 기 cons..

특정 문자 찾기 예시 문자열들 중 영문소문자, 대문자등 조건에 맞는 문자열을 추출할 때 정규표현식 []와 match()를 사용하여 조건에 맞는의 문자를 추출하는 방법과 정규표현식 [^]와 replace()를 사용하여 해당 조건에 맞지 않는 문자를 제외시키는 방법이 있다. const string = "1a2v3...ABC안녕$%(@#ㅎㅎ."; console.log(string.match(/[a-zA-z]/g).join("")); // asasF console.log(string.replace(/[^a-zA-z]/g, "")); // asasF // 같은 결과 값을 반환한다. 아래의 예시들은 replace로 진행 하겠다. 한글만 추출 const string = "1a2v3...ABC안녕$%하(@세요#ㅎㅎ."..

엔터 버튼을 누르지 않아도 키보드 입력에 이벤트를 걸어 검색결과가 출력되는 기능을 구현할 때가 있다. 하지만 api를 호출하여 검색 결과를 출력해야 할 경우 키보드를 입력 할 때마다 이벤트가 실행되기 때문에 불필요한 api호출을 하게 된다. 즉, "안녕" 입력 시 총 6번의 api호출을 하게 되는 셈이다. (ㅇ, 아, 안, 안ㄴ, 안녀, 안녕) Debounce기법을 사용하여 빠르게 키보드를 입력 할 경우 6번의 호출 대신 마지막으로 입력된 키워드를 사용하여 한번의 api호출을 할 수 있다. Debounce 연속으로 함수가 호출 될 경우 마지막 함수(or 처음 함수)만 호출하도록 하는 것 간단한 코드 예시는 아래와 같다. let timer; $searchInput.addEventListener('keyup..

JSON.parse()는 json이 아닌 데이터를 넣으면 에러를 발생시킨다 const json = JSON.parse('hi'); try catch를 이용하여 불러온 json의 데이터가 올바른 json인지 확인할 수 있다. function IsJsonString(str) { try { const json = JSON.parse(str); return (typeof json === 'object'); } catch (e) { return false; } }

js에서 customEvent로 이벤트를 직접 만들 수 있다는 것을 알게 되었다. 기본적으로 아래와 같이 사용할 수 있다. document.addEventListener("welcome", () => { //이벤트 수신중. 호출되면 아래의 console.log 출력 console.log("Welcome!"); }); const customEvent = new CustomEvent("welcome"); // 이벤트 생성 document.dispatchEvent(customEvent); // 이벤트 요청 document에서 welcome이라는 이벤트를 수신하고있고 document에서 해당 이벤트 호출 시 함수가 실행된다. 커스텀 이벤트 호출의 조건은 new CustomEvent('이벤트이름')으로 이벤트를 ..

프로젝트를 작업하다보니 textarea영역을 다뤄야 하는 일이 생겼다. 이전에는 한번도 사용해보지 않았는데 이번에 사용하면서 몇가지 알게된 부분을 적어보겠다. 1. 스크롤바 안보이게하기 / 모서리 사이즈 조절 막기 textarea { overflow-y: hidden; resize: none; } 세로스크롤을 안보이게 하려고 overflow-y를 했지만 가로까지 포함해서 하려면 overflow: hidden;을 하면 된다. resize:none을 하면 사용자의 사이즈 조절을 막을 수 있다. + 스크롤바를 없애는데에는 아래와 같은 코드도 적용 가능하다. textarea { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firef..