본문 바로가기
반응형

분류 전체보기127

clamp() clamp() 함수는 지정한 범위 안의 값이 3가지의 값만 가질 수 있는 좁은 선택 범위만 제공하지만, 반응형 레이아웃을 위한 간결한 구현이 가능하고 작은 CSS 코드만으로 구현이 가능하기 때문에, 단순한 반응형 웹을 위해서는 clamp() 함수가 여러가지 면에서 유리합니다. h1 { font-size: clamp(16px, 5vw, 34px); } /* clamp(최소값 16px, 유연한값 5vw, 최대값 34px) */ 5vw의 폰트사이즈를 가질수 있는데 최소 16px, 최대 34px까지 커질 수 있습니다. 패딩, 마진값에서도 사용이 가능합니다. 미디어쿼리를 대신해서 훨씬 간결하고 유지보수가 쉬운 반응형 웹을 제작할 수 있지만 최소, 최대 값을 명확하게 제한할 수 있는 경우에만 사용할 수 있으므로 용.. 2022. 12. 6.
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.
반응형