개발쬬

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 이..

input checkbox 스타일을 쉽게 지정할 방법은 어떤것이 있을까? 기존에 작성된 더러운 코드들을 다 뜯어고치고 공통으로 스타일을 찾아보는데 확실시 html구조에서는 label 안에 넣어서 input을 적용해주는게 한눈에 보기에도 직관적이고 좋아보였다.(기존에 내가 짯던 코드들은 요소들이 분리되어있어 한눈에 보기 너무 불편했었다) 문제는 input 에 들어갈 체크박스 스타일을 박아찾아보다가 input type값을 활용해 css에서 부모요소를 찾아 고정 스타일을 주는 방법을 생각해냈다. 👉 main.js const TermsWrap = () => { return ( 약관동의 개인정보 수집동의 ); }; input 요소를 체크해 부모 라벨에 스타일을 입혀주었다. input는 타입에따라 스타일을 고정해서..

xml코드 기반의 확장 가능한 벡터 그래픽 (점과 점 사이를 연결해서 라인의 길이를 계산해서 자동으로 연결시켜줌) 아이콘, 로고, 그래프, 사용자 인터페이스에 자주 사용된다. dom의 일부로써 각 객체별로 html 에서 엘리먼트로 추가됨 특징 벡터기반이기 때문에 이미지의 크기에 상관없이 선명하게 유지됨 모양이 복잡하지 않은 경우에는 용량도 작다. css나 스크립트도 다양하게 조작이 가능하다. 아이콘, 로고, 그래프, 사용자 인터페이스 등에서 사용 단점 선 하나하나가 데이터로 표현되기 때문에 복잡하고 개체수가 많을수록 용량이 증가하여 효율성이 떨어진다. (아이템이나 로고정도에만 사용하는 이유다) 그래픽요소이기때문에 fill 색이 그라데이션이 들어간 svg는 이미지가 깨진다 사용방법 태그상에 백그라운드 이미..

if 문 / switch 문 지정한 조건이 참인 경우 명령문을 실행한다. 조건이 거짓인 경우 또다른 else if 문이나 else 를 사용해 다른 명령문을 실행할 수 있다. 👉 test 값에 따른 명령문 실행 let test = 1; if(test === 1){ alert("1이 맞습니다") } else if(test === 2){ alert("2가 맞습니다") } else { alert("1도 2도 아닙니다.") } 👉 test 값에 따른 함수실행 let test = 1; if(test === 1){ test01(); //조건에 맞는 함수 실행 } else if(test === 2){ test02(); //조건에 맞는 함수 실행 } else { another(); //조건에 맞는 함수 실행 } // 함..

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

우선 resize 이벤트를 실행하려면 nextTick을 알아야한다 VueJs - $nextTick() 이란? doozi316.github.io $NextTick으로 갱신형 이벤트를 사용할때 사용합니다. 자바스크립트는 비동기로 처리되는 특성을 가지기 때문에 vue 내부에서 data가 업데이트 되고 난 직후 Vue 가 DOM을 찾지 못하는 경우가 종종 발생하며 이와같은 문제를 해결해주는 vue에서 제공해주는 콜백함수입니다 data() { return { windowWidth:0 } } 우선 window width 데이터를 담을 변수를 선언해줍니다. 👀 mounted this.$nextTick(() => { window.addEventListener("resize", this.onResize); }); 👀 m..

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

# Spread 연산자 const newArray = [..oldArray,1,2] const newObject = [...oldObject, newProp:5] 더 많은 원소도 추가가 가능하지만 대괄호와 ... 구문만 있으면 새로운 object 할당이 가능하다. spread 연산자는 객체배열이나 배열에 어떤 요소를 합칠때 매우매우 많이 사용한다. 실무를 하면서 매우 많이 사용하는 연산자이기 때문에 필수로 알고있는것이 좋다. 👉 예시 const numbers = [1,2,3]; const newNumbers = [...numbers, 4]; console.log(newNumbers) //[1,2,3,4] 출력 👉 예시2 const Person = { name: 'Max' } const newPerson ..