본문 바로가기
반응형

전체 글126

Vue watch의 속성 immediate watch는 속성의 값이 변할때마다 실행되지만, 변경과 관계없이 처음 실행해야 하는 경우가 있다. watch: { myData(value) { } }, 페이지가 처음 로드될때 watch로 바라보는 값이 기본값으로 설정된다. 이때는 속성이 변경이 되지 않아 watch는 실행이 되지않는다. immediate: true로 설정하고 핸들러 함수를 아래처럼 옮긴다. watch: { myData: { immediate: true, handler(value) { // ... } } }, deep const array = [1, 2, 3, 4]; array.push(5); array.push(6); array.push(7); // array = [1, 2, 3, 4, 5, 6, 7] 위와 같이 배열을.. 2022. 11. 7.
Prettier 설치와 기존 파일 포맷팅 설치 npm i --save-dev -g --save-excat prettier 현재 프로젝트에서만 사용한다면 -g는 생략해도 된다. --save-exact로 정확한 버전을 설치한다. 설정 루트경로에 .prettierrc.js 혹은 .prettierrc.json 파일을 만들어준다. { "singleQuote": true, // single 쿼테이션 사용 여부 "semi": true, // 끝에 세미콜론 사용 여부 "tabWidth": 4, // 탭 너비 "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 "printWidth": 120, // 줄 바꿈 할 폭 길이 "arrowParens": "avoid" // 화살표 함수 괄호 사용.. 2022. 9. 6.
JSDoc JSDoc을 사용하면 자바스크립트 소스코드에 타입 힌트를 제공할 수 있다. JSDoc 주석은 /** ... */ 사이에 기술한다. 일반적인 자바스크립트 주석 /* ... */은 무시된다. TypeScript를 사용하는 것처럼 타입을 추론하고 디버깅을 쉽게 할 수 있다는 장점이 있다. 코드에 맞는 JSDoc 태그의 사용법은 https://jsdoc.app/ 에서 볼 수 있다. 변수 /** @type {string} */ let str; /** @type {number} */ let num; /** @type {boolean} */ let bool; /** @type {*} */ let any; /** @type {?} */ let unknown; /** @type { {id: number, content:.. 2022. 8. 30.
setTimeout + async/await로 sleep 자바나 파이썬에는 실행을 입력한 시간만큼 멈추는 sleep이나 wait가 있지만 자바스크립트에서는 사용자가 직접 구현해야합니다. setTimeout이 비슷하지만 아래와 같이 사용하면 예상이랑 다른 결과가 나옵니다. function test(){ console.log('a'); setTimeout(() => console.log('time'), 3000); console.log('b'); } // a // b // time setTimeout은 비동기로 동작하기 때문에 먼저 실행이 가능한 a, b가 먼저 콘솔에 찍히고 3초후에 time이 찍힙니다. async/await 사용하면 동기적으로 실행을 하게 할 수 있지만 setTimeout은 Promise를 반환하지 않기 때문에 async/await를 적용해도 .. 2022. 6. 28.
for loop 에서 우선순위 찾기 배열에서 우선순위에 있는 요소를 찾아 리턴해주는 방법입니다. const arr1 = ["blue sea", "banana yellow", "red apple", "green wood", "white egg"]; const arr2 = ["banana yellow", "green wood", "blue sea"]; const priorityArray = ["red", "blue", "green", "yellow"]; function findPriorityElement(arr) { for (p of priorityArray) { const match = arr.find(v => v.includes(p)); if (match) { return match; } } } console.log(findPriority.. 2022. 6. 9.
더 깔끔한 조건문 사용하기 function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry') { console.log('red'); } } 이러한 조건문이 있는데 여기에 조건을 더 추가를 한다면 || 를 확장하게 될겁니다. function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry' || fruit === 'cherry' || fruit === 'cranberries' ) { console.log('red'); } } 이것을 Array.includes 를 사용하여 간결하게 쓸 수 있습니다. function test(fruit) { const fruitsList = ['apple', 'strawberry'.. 2022. 5. 12.
반응형

티스토리툴바