개발쬬

틸트 연산자를 사용해보자우연히 프로그래머스에서 발견한 신박한 연산자 바로 틸트(~) 연산자였다.하나를 사용하면 indexOf 처럼 사용되고, 두개를 사용하면 parseInt 나 Math.floor 처럼 실수에서 소수점을 버리는 연산으로 사용이 가능하다. 틸트 연산자를 사용하게 되면 32비트 정수 변환 후 NOT 연산자를 실행한다. (~) 연산자 사용하여 참,거짓 구분~str.indexOf(`판별값`) - 값이 있는 경우 -1 반환 - 값이 없는 경우 0 반환let str = "1234512345"~str.indexOf(0) // 0~str.indexOf(1) // -1 ~array.findIndex()let array = [1,2,3,4,5]~array.findIndex(item=>item===4) ..

input 에 들어가는 모든 값들은 자동으로 type이 string 으로 바뀌어서 value 값에 찍히게 된다 이런경우 숫자형으로 변환해주는 가장 쉬운 두가지 방법이 있다. 1. Number()로 감싸준다 let stringNum = "12" let number = Number(stringNum) console.log(stringNum) // "12" console.log(number) // 12 2. string 숫자 앞에 + 를 넣어준다 let stringNum = "12" let number2 = +stringNum console.log(stringNum) // "12" console.log(number2) // 12

모바일에서 작동하는 검색창을 구현하려던 도중 터치아웃을 하는 순간 스크롤 감지에 의해 검색바가 깜빡이는 현상에 부딧혔다. 해당 버그를 수정하기 위해서 별의 별 짓을 다햇다.. lodash의 throttle 이나 touchout, touchstart 등등 여러가지 이벤트로 핸들링 하려고 해봤지만 깜빡이는 문제를 잡기 쉽지않았다.(스크롤이 워낙 민감하게 동작하기때문에..) 그러던 도중, 해당 글을 발견했고 jQuery 대신 javascript 로 구현한 로직을 짤 수 있었다. 사실, setInterval을 쓸 생각은 하지도 못했는데 덕분에 좋은 기능 구현을 할 수 있었다. :-) javascript var didScroll; var lastScrollTop = 0; var delta = 5; var navb..

get으로 받은 소스를 화면에 뿌리고> 그 이미지를 다운로드 받으려면 canvas를 활용해 가능하다. 👉 template (표현되어질 부분) 👉 template (다운로드 버튼) 다운받기mdi-arrow-down-bold-circle 👉 methods a 태그를 임의로 생성해 canvas 속성을 대입해 다운로드 기능을 동작하게 해준다 download() { var a = document.createElement("a"); // a.setAttribute("download", "파일이름" + ".png"); a.setAttribute( "href", document .getElementById("canvas") .toDataURL("image/png") .replace("image/png", "image/..

백에서 전달받는 데이터중에는 문단의 특성을 전달받지 못한 경우가 많다 그래서 replace로 /n 를 변환해준다 //cardData /n이 포함된 문자열을 포함한 배열 cardData.forEach((el, index) => { cardData[index].cont = el.contents.replace(/\n/g, " "); }); vue 환경이라 v-html를 활용했지만 p태그 안에 적용해줘도된다

window.addEventListener를 사용하면 매우 많은 이벤트 함수를 실행할 수 있다. 보통은 scroll, mouseWheel 이벤트를 사용해 휠스크린을 내릴시 간단하게 화면을 조작할 수 있다. 👉 mouse wheel 이벤트 보기 Element: wheel event - Web APIs | MDN The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). developer.mozilla.org mouse wheel 이벤트를 사용할 경우의 문제점이 휠을 사용하지 않는 앱웹에선 작동하지 않는다는점이다. 이런경우 scroll 이벤트를 사용해 처리하는것이 좋다 👉 scroll 이..

for 문의 특징 배열과 함께 주로 사용 횟수 제한이 있다. 초기값을 주고 이 값에게 주어진 조건을 만족시킬때까지 사용 while문의 특징 반복횟수를 정하지 않아도 된다. 주로 파일을 읽고 쓸때 많이 사용한다. while문은 작동하는 원리는 true / false로 구분해서 작동한다 👉 원래의 for문 for문의 경우 정확한 갯수가 필요하기 때문에 로직생성에 어려움이 있는경우가 종종있다. for(let i=0; i

이미지를 상태에 따라 이미지와 관련된 작업을 하다보면 [ active | defult | error ] 등 상태값에 따라 다르게 보여줘야 하는 경우가 있다. 최소한의 코드를 작성하고 최대 효율을 내고 싶어하던 와중에 여태까지 경험해본 이미지 리소스에 대한 활용예시를 공유해보려고 한다. (물론 개발자마다 처리하는 방식이 다르기때문에 이 방법은 공유차원에서만 쓰는 글이다) 우선 기본적으로 v-for 문을 통해 아래처럼 배열 형식으로 소스 닉네임을 가져왔다. 보통 value가 아닌 id 값을 사용하긴 하지만 대충 적어봤다. 아래 예시는 참고용으로만 봐주시길 바랍니다. 👉 script data sortItem: [ { value: 1, active: false, }, { value: 2, active: fals..