분류 전체보기70 Vue ) 이벤트 수식어 v-on 디렉티브가 제공하는 이벤트 수식어 이벤트 수식어 설명 .stop 이벤트 전파를 방지합니다. stopPropagation() 과 동일 .prevent 브라우저의 기본 동작을 금지합니다. preventDDefault() 와 동일 .capture 이벤트리스너의 capture 옵션을 활성화시킵니다. .self 이벤트가 자식 엘리먼트가 아닌 현재 엘리먼트에서 발생했을 때만 핸들러를 호출합니다. .once 최대 한번의 클릭만 허용합니다..once.prevent 와 같이 사용하면 처음 클릭 시 태그의 본연 기능을 방지하고 원하는 기능을 실행시킬 수 있습니다. .passive 이벤트리스너의 passive 옵션을 활성화시킵니다. .exact 정확히 해당 키만 눌렀을 때 핸들러를 호출합니다. "@click.ctr.. 2022. 1. 8. JavaScript ) 버그 잡아내기 버그의 원인 프로그램에서 발생하는 버그의 원인은 크게 3 가지로 나눌 수 있습니다. 1. 논리적인 버그 프로그램은 문제 해결을 위한 알고리즘을 구현한 것입니다. 논리적인 버그는 프로그램을 구성하는 알고리즘 자체에 오류가 있거나 해당 알고리즘을 구현하는 방법이 잘못되었을 때에 발생합니다. 프로그래밍 언어의 문법을 충분히 이해하지 못한 경우도 포함됩니다. 2. 오타 개발자가 의도하지 않은 동작을 의미합니다. 작은 오타도 프로그램에 치명적인 오류를 발생시킬 수 있습니다. if(a==b) 를 if(a=b) 로 작성했을 경우 오류는 발생하진 않지만 전혀 다른 목적의 동작을 하게 됩니다.. 3. 실행 환경의 변화 컴퓨터, OS, 프로그래밍 언어 자체의 사양이 바뀌어 프로그램이 동작하지 않는 경우도 있습니다. 이러한.. 2022. 1. 7. JavaScript ) 자주 사용되는 정규식 내가 편하려고 쓰는 글 특정 단어로 시작하는지 검사 ex) 'https://' 로 시작하는지 검사 const url = 'https://example.com'; /^https?:///.test(url); // ->true 특정 단어로 끝나는지 검사 ex) 'js'로 끝나는지 검사 const fileName = 'index.js' /js$/.test(fileName) // ->true 숫자로만 이루어진 문자열 여부 정규식 const targetNumber = '12345' /^\d+$/.test(targetNumber) // -> true 이메일 주소 정규식 const email = 'pji3504@naver.com' /.. 2022. 1. 7. JavaScript) 예외처리란? 예외처리란? 예외는 간단하게 말해 오류가 난 상황을 얘기합니다. 일반적으로 프로그램에 오류가 발생하면 해당 프로그램은 강제적으로 종료됩니다. 하지만 자바스크립트 프로그램에서 발생한 오류는 굳이 프로그램을 종료하지 않더라도 오류만 적절하게 처리해준다면 프로그램을 계속 실행시킬 수 있습니다. 더 자세히 프로그램을 실행하면서 예상치 못한 오류가 발생할 수도 있고, 오류는 아니지만 특별한 대처가 필요한 예외적인 상황이 생길 수 도 있습니다. 예를 들어 파일이 존재하지 않거나 함수에 주어진 인수가 그 함수가 사용하려는 데이터 타입이 아닌 경우 등이 있습니다. 이 때 함수는 일반적으로 null 값을 반환해 오류를 알리는 방법을 사용하지만, 또 다른 방법으로 예외(Excepttion)를 던지는(Catch) 방법이 있.. 2022. 1. 7. Vue) Vite?, 왜 사용할까? Vite란? Vue3버전으로 개발을 함에 있어 별다른 번들 생성 없이 ES 모듈을 바로 웹 브라우저에 렌더링 할 수 있도록 만든 개발 툴입니다. 왜 Vite 를 사용하나요? Vite 의 등장배경 👓 현재 Webpack, Rollup, Parcel 과 같은 도구들 덕분에 프론트엔드 개발자들의 개발 경험이 크게 향상 되었습니다. 그러나 점점 높은 수준의 앱을 개발하기 시작하면서 처리하는 JavaScript의 양도 기하급수적으로 증가했습니다. 대규모 프로젝트에서 수 천 개의 모듈을 담게 되면서 JavaScript 기반 도구에 대한 성능 병목 현상이 일어나기 시작했습니다. 개발 서버를 시작하는데 많은 시간이 소요되며, HMR을 사용하더라도 수정이 반영되는데에 몇 초의 시간이 걸릴 수 있습니다. 이러한 사항들은 .. 2022. 1. 7. JavaScript) 단축평가 (1) 논리 연산자를 사용한 단축평가 📌 true || anything // true true && anything // anything false || anything // anything false && anything // false 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 boolean값이 아닐 수도 있습니다. 논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됩니다. 'Cat' && 'Dog' // 'Dog' 첫번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가됩니다. 하지만 이 시점까지는 위 표현식을 평가할 수 없습니다. 두번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있.. 2022. 1. 6. Vue3를 준비하는 자세 (1) Vue2에서 Vue3 버전으로 넘어가면서 변경된 사항 중 하나인 템플릿 디렉티브의 변화에 관한 정리글입니다. Vue3에서의 변경사항 (1) v-model 사용법의 변화 변경사항 커스텀 컴포넌트를 사용할 때, v-model prop와 event의 기본 명칭이 변경되었습니다. prop : value -> modelValue event : input -> update:modelValue v-bind 의 .sync 수식어와 컴포넌트의 model 옵션이 제거되고 v-model 인자로 대체 되었습니다. 새로운 기능 동일 컴포넌트에서 다중의 v-model 바인딩이 가능하게 되었습니다. 사용자 지정 v-model 수식어를 생성하는 기능이 추가되었습니다. (2) v-for 문법의 변화 1. 조건부 분기에서의 key Vu.. 2022. 1. 2. 이전 1 ··· 5 6 7 8 다음 반응형
