본문 바로가기

JavaScript

(19)
[ JavaScript ] Date 객체에서 년,월,일 따로 출력하기 회사에서 엑셀 파일 다운로드 구현해뒀는데, 해당 파일 다운로드시 오늘날짜를 ( YYYY.MM.DD ) 형태로 파일명에 추가해달라는 요청이 와서 년, 월, 일을 가져오는 방법에 대해서 정리한다. 처음엔 그냥 Date 객체에서 getFullYear, getMonth, getDate등을 사용했는데 코드가 너무 지저분해서 다른 방법을 사용하면서 관련된 코드들을 정리해보았다! 1. getFullYear, getMonth, getDate등을 사용 getMonth에 1을 더해주고 한자리수 일 경우에 0을 추가 해주는등 너무 지저분해보여서 다른 방법을 찾아보았음! const date = new Date() const year = date.getFullYear() let month = date.getMonth() + 1..
[ JavaScript ] 논리 연산자 정리 &&, ||, <<, >>, !, !!, ?, ?? & : 비트 연산자 비트의 논리 합을 하는 연산자 && : 논리곱 연산자 &&는 모든 조건이 참이여야 true || : 논리합 연산자 ||는 둘중 하나가 참이면 true > : 비트 이동 연산자 왼쪽, 오른쪽으로 비트를 밀어내는 연산자 ! , !! : 부정 연산자 ! : 입력값을 boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다. !! : boolean타입으로 명시적으로 형 변환 ?. : 옵셔널 체이닝 객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨 ?? : Null 병합 연산자 앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 null 또는 undefined을 반환 ✔️참고 https..
[Javascript] Set객체 정렬하기 Set으로 중복 제거를 한 객체를 정렬하는 경우를 정리해봅니다. 아래처럼 중복 제거 후 sort메서드를 사용하는 경우, 아래와 같이 오류를 만납니다. 위와 같은 경우는 아래처럼 사용합니다. 1. 배열 set 사용 후 정렬 set객체를 array로 만들어서 사용하는 첫번째 방법과, sort로 먼저 정렬 후 set에 사용하는 두번째 방법이 있습니다. 아래의 예시는 배열의 경우에 중복제거 후 정렬하는 방법입니다. const arr = [55,33,22,77,88,11,22,55,33,11,44,33,22,77] // 1 let setArr = new Set(arr) const uniqueArr = Array.from(setArr) uniqueArr.sort() // [ 11, 22, 33, 44, 55, 77..
promise를 이용한 api 순차 반복 요청 보내기 (with - vue ,axios) for문으로 api를 호출 하는 경우 순차적으로 반복 호출하는 경우를 적용해야하는 경우가 생겼다. api호출이 잦아 트래픽이 높아지면 서버가 뻗어버리는 상황… 😅..? 1초 간격으로 api 반복 요청 처음에는 setTimeout으로 1초 간격을 두고 요청을 보냈다. timeRequest(){ const arr = ['첫번째','두번째','세번째','네번째'] arr.forEach((titem, index) => { setTimeout(function() { this.getRes(titem) }, 1000 * (index + 1)) }) } getRes(){ // api 호출 함수 this.axios.post("api주소",{ num }) . . } arr를 순회하면서 그 값을 순차적으로 api의 body..
[ JavaScript ] 숫자를 배열로 만드는 두가지 방법 숫자를 배열로 만드는 방법에는 두가지가 있다. 1. 숫자를 문자로 변환 후 배열로 만들기 ( split이용 ) 2. 숫자를 do..while문을 이용하여 배열로 만들기 1번의 방법이 편하고 간단해서 보통 저렇게 사용하지만 속도 부분에서는 2번 방법이 훨씬 빠르다고 한다. 코드의 효율을 생각한다면 2번 방법을 사용하는게 좋을듯 하므로 두가지 방법을 아래에 정리해 보겠다.🥸 1. 숫자를 문자로 변환 후 배열로 만들기 ( split이용 ) 타입이 숫자(number)인 경우 split을 사용할 수 없기 때문에 숫자에 ''을 더해 문자로 만들어주고, split('')을 사용하여 배열로 만들어 주는 방법이다. function numberToString1(n) { return (n + '').split('') } n..
[ JS | VUE ] element 중간에 새로운 element 삽입하기 ul태그 안에 v-for로 data들이 뿌려진 li element들이 있는데, 이 li 사이에 일정 간격을 두고 배너가 들어가야 하는 상황이었다. 적용 전 방법 1 첫번째로 든 생각은 데이터들이 다 뿌려진 후인 mounted에서 li를 querySelectorAll로 가지고와서 원하는 사이에 배너 html을 끼워넣는 방법이였다. → Element.insertAdjacentHTML() 이용 element의 2번째 4번째에 나와야 하는데 idx값은 element의 순서보다 -1된 값이니 idx값이 2의 배수인지 확인할땐 -1된 값을 index에 할당해 비교하고 적용할땐 원래 idx값을 사용했다 방법 2 두번째 방법은 v-for로 불러올때 v-if로 index값을 활용해 배너를 원하는 위치에 넣어주는 방법이였..
[ JS ] window.location VS reload 페이지 이동시키기 글을 시작 하기 전 아래에서 계속 window.location.◦◦ location.◦◦ 이라고 두가지 같은 메소드를 window를 붙이고 사용하거나 안붙이고 사용하는 두가지로 적을텐데 둘 다 같은 역할을 한다는 점을 짚고 시작하도록 하겠다 🥸 ! ) window 모든 객체의 조상인 전역객체로 생략이 가능하므로 안쓰고 사용해도 된다 새로고침 reload window.location.reload(); location.reload(); location.href = location.href; history.go(0) 페이지 이동 assign , href → 뒤로가기 가능 이전 방문 기록이 남아서 뒤로가기로 이동 가능 window.location.assign('/경로') location.assign('/경로')..
[ JS ] HTML 요소 margin값 가져오기 = style값 가져오기 Window.getComputedStyle() 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 반환한다. Window.getPropertyValue() 선택한 CSS 속성의 값을 문자열로 반환한다. 사용예시 - 1 window.getComputedStyle(header) 일때 반환값 반환값 중에 원하는 style값을 가져오고 싶을때 style 선택시 카멜케이스 사용하지않고 케밥케이스 사용 window.getComputedStyle(header).getPropertyValue('가져오고싶은 css값') 사용예시 - 2 // in vuejs // 화면 사이즈 조절시마다 실행되는 listWraps 메서드 mounted() { this.listWraps() window.addEventListener('..
[JavaScript] Map이란? Map 간단한 키와 값을 서로 연결(매핑)시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 한다. 일반 객체와 다른점 일반 object도 키-값 쌍을 저장하지만 순서를 기억하지는 않는다 하지만 Map의 키-값은 정렬되고,삽입순으로 순회가 이뤄진다. 그리고 object와는 달리 Map의 키는 함수, 객체 등을 포함한 모든 값이 가능 하다. map 사용하기 set(key,value) -> 저장 get(key) -> key에 해당하는 값을 가져온다 has(key) -> key에 해당하는 값이 있는지 확인 ( 있을경우 ture, 없는경우 false 반환 ) delete(key) -> ket에 해당하는 값을 삭제 ( 삭제시 ture , 없는값이거나 삭제되지않는경우 false반환 ) size ..
[JavaScript] 프로토타입 자바스크립트와 프로토타입 자바스크립트는 프로토 타입 기반 언어이다 클래스가 없었기 때문에 객체를 복제하고 참조함으로서 새로운 객체를 생성하는 방식이였는데, ES6에서 클래스가 추가 되었다. 하지만 면접 질문에도 많이 나온다고하고 클래스에서도 프로토타입을 활용 한다고 하니 꼭 알아두어야 할 내용임은 틀림없어보인다. 1 . 생성자 함수를 참조하기 prototype, __proto__ new 연산자를 사용해 생성자 함수를 새로운 변수에 할당할 경우 그로부터 생성된 인스턴스에는 숨겨진 프로퍼티인 __proto__가 자동으로 생성되어 생성자 함수의 porototype에 어떤 메서드나 프로퍼티가 있다면 new로 생성된 인스턴스에서도 마치 자신의 것처럼 접근 할 수 있다 1 __proto__와 __proto__의 생..