Mong dev blog

개발 기술199

특정 길이의 배열 가져오기, 가변인자 받기, console.table 등
이번 시간에는 - 1. 원하는 길이의 배열만 가져오기 - 2. js에서 가변 인자를 받는 법 - 3. console값을 테이블 형태로 받기 - 4. 빈값을 가지는 배열 만들기 1. 원하는 길이의 배열만 가져오기 : 만약 아래와 같은 배열이 있다고 해보자. : 이때 여러분이 안, 녕, 하 만 담은 배열을 원한다면 어떻게 할 수 있을까 : 첫번째 방법으로 array.slice(start [,end])가 있다. const array2 = ['안', '녕', '하', '세', '요', '!']; const slicedArr = array2.slice(0, 3); console.log(slicedArr); //['안&#3..
2021. 9. 12.
gif hover 재생 이벤트 만들기
1. gif에 재생 이벤트를...? 얼마전? 아니 얼마전도 아니고 바로 어제, gif 재생 이벤트가 필요했다. 하지만 gif가 계속 재생되는 게 아니라, 마우스가 hover했을 때만 재생되어야 했다! 물론 mp4를 넣어서 hover할 때 재생시간을 조절하면 되지만, gif가 더 가벼우니까 🙂 아니 그런데 gif에서 재생(?)이라는 개념이 있나..? 엥!?!??? 🤔🤔🤔 아무튼, gif의 재생시간을 조절할 수는 없지만 여러가지 꼼수(?)는 있다고 한다. 검색을 해보니, 공통적으로 정적 이미지와 gif가 필요했고, 정적이미지와 gif를 겹쳐야 했다. (1) 방법1, class 추가하기 첫 번째 방법은 mouseenter 했을 때, class를 추가하는 방식이 있었고, (2) 방법2, 투명도 변경하기 또 다른..
2021. 9. 12.
배열판별법, JSON.parse, padStart, querySelector 성능
이번 시간에는 - 1. 배열 판별법 - 2. JSON.parse를 하지 않아도 되는 경우 - 3. padStart로 특정 문자열 붙이기 - 4. 객체에 바로 키 값 객체 넣기 - 5. querySelector와 getElementById의 성능에 대해 알아보자! 1. array(배열) 판별하기 : 작업을 하다보면, 이 데이터가 배열인지 확인해야할 때가 있다. : 한 예로 slice()함수는 배열에서만 실행되는 함수이므로,배열이 아니면 실행시키면 안된다. const variable = 어떤 형태의 값; // 배열에서만 실행되는 함수 if(배열이라면) return variable.slice(1, 2); 그렇다면 typeof를 이용해 배열인지 판별하면 되지 않을까? : 안타깝게도 js에서는 array, obj..
2021. 9. 12.
객체 배열를 다루는 방법
객체를 담은 배열에 요소 추가하기 이번 시간에는 [{}, {}, {}]에 객체요소를 추가하는 법을 알아보자 1. 배열, 객체에 요소 추가하는 법 배열에 요소 추가하기 : 배열에서는 push 혹은 인덱스에 접근해 요소를 추가할 수 있다. let array = []; array.push(1); //push하는 경우 array.push(2); array[2] = 4; //인덱스로 접근해 추가하는 경우 console.log(array) 객체에 요소 추가하기 : 객체에 요소를 추가할 때 obj.key, obj['key']를 사용해 추가할 수 있다. let obj = {}; obj['hello'] = {id:1, name: 'hoho'}; obj.bye = {id:2, n..
2021. 9. 12.
밀리초를 날짜로 바꾸는 법
밀리초를 날짜로 바꾸는 법 오늘은 밀리초를 받아서 년.월.일.요일을 출력하는 함수를 만들어보자! 1. Date 객체 생성하기 new Date() : new Date()를 사용하면 Date객체를 만들 수 있다. : 이 Date 객체에 인자를 넘기지 않으면 현재 날짜, 시간이 출력된다. let nowDate = new Date(); console.log(nowDate); //Thu Apr 29 2021 19:58:14 GMT+0900 (대한민국 표준시) new Date(밀리초) : 밀리초는 1970년 1월 1일 0시 0분 0초 후의 시점이다. : new Date에 밀리초를 넘기면, 밀리초를 시간으로 변환해준다. let milliseconds = 203010231540; let date = new Date(m..
2021. 9. 12.
arrow, normal function의 차이
arrow, normal function의 차이 기존에 js에서 사용하던 함수구문을 arrow function 방식을 이용해 더 간결하게 작성할 수 있게 되었다. 하지만 이 arrow function! 사용하다보면, 이게 안된다고? 하는 순간이 있다. 오늘은 이 arrow function과 normal function의 차이점을 알아보자! 1. arrow function 선언 방식 arrow function의 큰 장점이자, 선호이유는 간단한 구문 때문일 것이다. 아래 코드는 arrow function 구문을 작성하였다. (1). 매개변수 여부 : 매개변수 개수에 따라 표현 구문이 달라질 수 있다. //매개변수 0개 (소괄호 필요) () => {...} //매개변수 1개 (소괄호 생략가능) (x) => {..
2021. 9. 12.
여러 인자 넘기기, NaN 체크, 값 서로 교체, 글 작성 가능한 div
1. 여러 인자 넘기기 : 코드를 짜다보면 여러 인자들을 함수에 넘겨야할 때가 있다. : 어쩌면 아래와 같이 넘길지도 모른다. function A() { let a = [1,2,3,4]; let b = {a: 1, b:2}; let c = 'hello'; let d = 21; B(a,b,c,d); } function B(a, b, c, d) { console.log(a, b, c, d); } 인자를 넘기는 또 다른 방법은 뭐가 있을까? : 아래와 같이 쓰는 방법도 있을 것이다. : 변수를 객체에 담아 보내는 방식으로, 인자가 일일이 쓰지 않아도 된다. : 또한, 인자가 더 늘어날 시 함수내부 코드만 수정하면 된다. function A() { let a = [1,2,3,4]; let b = ..
2021. 9. 12.
이중부정, 조건문 대신, or연산자와 조건문
1. or연산자와 조건문 : 어느날, 조건문을 만들고 있었다. : 그런데, 오잉? 조건에 만족하는데 작동이 안되는 것이 아닌가..! world가 B일 때, 왜 success가 출력이 안되지? function hello(world) { if (world === 'A' || 'B') { console.log('success') } } : 문제는 바로 or연산자를 제대로 이해하지 못했던 것! : JS에서 or연산자를 사용해 여러 조건을 체크하려면 아래와 같이 써야 한다. function hello(world) { if (world === 'A' || world === 'B'){ console.log('success'); } ..
2021. 9. 12.
ES21 논리연산자, Lazy loading, picture 태그, base_url
1. ES21, 논리연산자 (1) &&= : 첫 번째 변수가 true이면, 두 번째 변수를 할당한다. //before let one = true; let two = 13; if (one) { one = two; } console.log(one); //13 //after let one = true; let two = 13; one &&= two; console.log(one); //13 (2) ||= : 첫 번째 변수가 false이면, 두 번째 변수를 할당한다. //before let one = null; let two = 13; if (one) { one = two; } console.log(one); //13 //after let one = null; let two = 13; one &&= two; c..
2021. 9. 12.

티스토리툴바