본문 바로가기

Web Programming/Javascript

(9)
ES6로 문자열의 바이트(Byte) 구하기 Share Links는 반응형 바둑판 레이아웃(항목의 가로길이는 고정, 세로길이는 유동적)를 사용합니다. 한마디로 말해서 핀터레스트(Pinterest)의 레이아웃입니다. `flex`나 `grid`로 하려했으나 실패해 결국에는 자바스크립트의 힘을 빌렸습니다. 처음에 핀터레스트는 어떻게 구현한건지 살펴보니 일일이 `top`과 `left`를 때려박아서(...) 만들어져있었습니다. 여하튼 한번 만들어놓고 잘 썼었습니다만, 태그 목록이 길어지면 `overflow:auto` 시켜서 가로스크롤로 표현하는 대신, 세로를 `height:auto`로 설정해 스크롤 없이 표현하는 것으로 레이아웃을 변경하려고 했습니다. 또한 제목이 길어지면 역시 태그처럼 스크롤을 생성하지 않게 레이아웃을 변경하려했습니다. 이제 auto로 늘..
JavaScript array delete item(Array에서 특정 인덱스의 아이템 제거) 자바스크립트에서 특정 Index에 위치하고 있는 Item을 제거하는 함수function deleteItem(array,deleteIndex) { return array.reduce((prev, now, index) => index !== deleteIndex ? [...prev, now] : prev, []); },특정 inedx의 경우에는 now를 추가해 반환하지 않고, 그대로 prev를 반환한다.
자바스크립트에서 Python range을 비슷하게 사용하는 방법 단순히 for(let i =0;iconsole.log(index)); //0 1 2 3 40 ~ n-1 까지의 수가 필요한 경우(map등을 사용해야 하는 경우)Array.from(Array(n).keys()).map(v=>v) // 0 1 2 3 4m ~ n -1 까지의 배열(m=5, n=10)Array.from(Array(n - m).keys()).map(v=>v+m).map(v=>v); // 5 6 7 8 9 물론 더 좋은 방법이 있을 수도 있다.
빈 배열 여부를 체크하는 함수 아래의 isEmptyArray 함수는 빈 배열이거나, Array가 아니면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.JavaScriptTypeScript
자바스크립트 배열 중복 제거 (JavaScript duplicate array) Jquery를 사용하지 않는 순수한 자바스크립트 코드입니다.원리array.reduce에서 기본 인자 값을 빈 배열을 넣어줍니다.그 다음 누적 배열에 현재 값이 있으면 누적 배열을 반환하고, 없으면 합쳐서 반환합니다.이때, 거꾸로 출력 됩니다. (예: [deduplicate([1, 2, 3, 1, 2, 3]) // [3, 2, 1])원래대로 출력하려면 .reverse()함수를 사용하세요.또한 ES6 이상에서만 사용 가능한 함수입니다.TypeScriptfunction deduplicate(array: Array): Array { return array.reduce((temp, now) => temp.includes(now) ? temp : [now, ...temp], []); }
자바스크립트 날짜 한글로 표시 const zero = num => num < 10 && num >= 0 ? "0" + num : num; const dateKo = date => `${date.getFullYear()}년 ${zero(date.getMonth() + 1)}월 ${zero(date.getDate())}일 ${zero(date.getHours())}시 ${zero(date.getMinutes())}분 ${zero(date.getSeconds())}초`;자바스크립트 날짜(Date)를 한글로 표시하는 함수입니다.xxxx년 xx월 xx일 xx시 xx분 xx초로 나오게 합니다. 인자값의 타입은 Date입니다.
자바스크립트에서 0 이상 10 미만이면 0붙이기 const zero = num => num < 10 && num >= 0 ? "0" + num : num;0 이상 10 미만이면 숫자의 앞에다가 0을 붙여주는 함수 입니다.
Vue.js의 객체 감시는 만악의 근원 Vue.js에서 배열이나 오브젝트의 v-for은 정말 짜증나는 관계가 아닐 수가 없습니다. Vue.js 2를 기준으로, 배열이나 오브젝트는 감시가 불가능합니다.그리고 이는 매우 더러운 코드를 양산하게 되는 이유가 됩니다. 배열이나 오브젝트의 감시를 위해서는 Vue.set(vm.$set) 또는 array.splice를 반드시 써야합니다.안 쓰면 감시가 안됩니다. 한마디로, v-for을 사용할 때, v-for의 데이터를 바꾸는 일이 생긴다면, 반드시 주의해야할 부분입니다. 단순히 this.oldValue = newValue;로는 절대로 리 랜더링이 되지 않습니다. 다행이도 Vue.js 3.0에는 객체 감시 시스템을 바꿔서 된다고는 하니, Vue.js 3.0을 기다리는 수 밖에 없습니다.