Mong dev blog

개발 기술/사소하지만 놓치기 쉬운 개발 지식87

[JS/Eslint] 레이스컨디션을 유발하는 await는 쓰지말자(require-atomic-updates)

이번 시간에는 eslint 룰 중 하나인, require-atomic-updates에 대해 알아보았다! 1. eslint룰, require-atomic-updates 1) 이 규칙은? await가 레이스 컨디션을 유발할 경우, await 사용을 금지하는 규칙이다. 2) await가 레이스 컨디션을 유발하는 경우 아래 예시는 person의 age 데이터를 가져와, age의 총합을 구하는 로직이다. const PEOPLE = [{ id: 1, age: 12 }, { id: 2, age: 22 }]; let totalAge = 0; // await를 사용해 age의 총합을 구하는 함수 async function addAge(id) { totalAge += await getAge(id); // 주요하게 볼 부분..

[JS/Eslint] 반복문에서 await를 쓰지말자(no-await-in-loop)

이번 시간에는 eslint 룰 중 하나인, no-await-in-loop에 대해 알아보았다! 1. eslint룰, no-await-in-loop 1) 이 규칙은? 반복문에서 await 사용을 막는 규칙이다. 만약, 프로미스 간에 정해진 순서가 있는 경우 반복문에서 await를 쓸 수 있으나 프로미스 간에 정해진 순서가 없는 경우 반복문에서 await를 쓰는 건 성능상 좋지 않다. for (const person of people) { const response = await getPersonId(person); // ❌ } 🤔 그럼 성능을 향상시키면서, (정해진 순서가 없는)여러 프로미스을 처리하고 싶다면 어떻게 해야할까? Promise.all을 쓰자! 2) Promise.all로 처리하자! (1) Pr..

[JS] 객체의 얕은 복사, 깊은 복사(feat. StructuredClone)

🙂 이번 시간에는 객체(참조값)의 얕은 복사, 깊은 복사을 알아보고, 깊은 복사를 하는 StructuredClone도 알아보았다. 1. 값을 복사하는 법 JS에서 원시값, 참조값의 개념과 복사 방식의 차이 를 대해 알고 있다면 “2. 객체의 얕은 복사, 깊은 복사”로 바로 넘어가자 1) 원시값을 복사하는 경우 JS에서는 원시값(Number, String, Boolean, Null, Undefined), 참조값(Object, Array)이 존재한다. 원시값을 저장한 변수는 실제 데이터값이 저장되는데, 변수(cloneValue)의 값을 변경해도 originalValue의 값이 변경되지 않는다. let originalValue = 12; let cloneValue = originalValue; // 12 cl..

[SASS/SCSS] hex, rgb 컬러에 투명도 주는 방법

💡 이번 시간에는 SCSS 함수를 이용해 컬러에 투명도를 조절하는 방법을 알아보았다! 1. transparentize transparentize()는 주어진 색상($color)에 대해 $amount만큼 투명도를 빼는 함수이다. transparentize($color, $amount) 주어진 색상에 $amount를 0.2로 주면, 투명도는 0.3(0.5 - 0.2)이 된다. transparentize(rgba(107, 113, 127, 0.5), 0.2) /* rgba(107, 113, 127, 0.3) */ transparentize(rgba(#6b717f, 0.5), 0.2) /* rgba(107, 113, 127, 0.3) */ 만약 투명도가 1인 색상에 $amount를 주면 투명도는 1 - $amo..

[CSS/JS] vh 버그 해결방법(dvh 사용법, js 계산법)

🙂 CSS에서는 뷰포트를 기준으로 하는 vh, vw 단위가 존재하는데, 이 단위들은 일부 환경(ex. 모바일 safari)에서 문제가 있다. 이번 시간에는 해당 문제는 무엇이며, 해결방안으로 JS를 이용한 방법과 새로운 단위인 dvh를 이용하는 방법에 대해 알아보았다 1. vh, vw? 1) vh, vw는 무엇인가요? vh, vw는 viewport(화면 크기)를 기준으로 하는 단위로, viewport크기에 따라 변경된다. vh : viewport height, 1vh는 뷰포트의 높이의 1%이다. vw : viewport width, 1vw는 뷰포트의 너비의 1%이다. 🙂 그런데, 이 vh, vw는 어떤 경우에 사용하면 좋나요? 모바일 브라우저의 경우, 사용자 스크롤에 따라 일부 UI(ex. 검색, 주소창..

[CSS] Container 쿼리(특정 요소 크기에 따라 스타일링하기)

⭐ 이번 시간에는 viewport가 아닌 특정 요소의 크기에 따라 스타일링을 할 수 있는 container 쿼리에 대해 알아보았다! 포스팅 시점에는 호환 가능한 브라우저가 제한적이며 완성된 것이 아니므로 사용시에는 caniuse와 MDN 문서, CSS 초안을 체크하자 🙂 (만약 쿼리를 사용하고 싶다면, polyfill을 사용하자) 1. container query? 1) container 쿼리란? container 쿼리는 viewport기준이 아닌, 특정 요소의 크기에 따라 반응적으로 스타일링이 가능하다. container 쿼리를 사용하기 위해선 container-name, container-type 지정이 필요하다. 2) container 쿼리 사용하기 (1) container-type containe..

array object를 그룹화하는 방법(reduce(), groupBy())

💡 이번 시간에는 array object를 특정 키값을 기준으로 그룹화하는 방법에 대해 알아보았다! 1. reduce() 이용하기 (1) array.reduce() 란? array.reduce()는 배열 요소에 주어진 콜백 함수를 실행한 값을 누적하여 하나의 결과값으로 리턴한다. initialValue은 누적 초기값으로 필수값은 아니다. array.reduce(callback, initialValue); 콜백함수에는 acc, currentValue, currentIdx, array 총 4개의 파라미터가 주어진다. function callback(acc, currentValue, currentIdx, array) { // ... } parameter 설명 acc 누적값 currentValue 현재 원소값 ..

[CSS] PC와 Mobile을 구분하는 2가지 방법

😊 이번 시간에는 css를 사용해 pc와 mobile을 구분하는 방법에 대해 알아보았다! 1. ontouchstart로 구분하기 1) touchstart 이벤트? touchstart 이벤트는 터치가 가능한 디바이스에서만 발생한다. 만약 터치가 불가한 환경(ex. pc)인 경우 ontouchstart값은 undefined가 된다. window.ontouchstart; 2) 사용법 💡 CSS에서 PC, Mobile별로 다른 스타일을 주고 싶다면, 아래 방법을 써보자! (1) ontouchstart여부를 dataset에 저장해준다. // js function checkTouchable() { document.body.dataset.touchable = !!window.ontouchstart; } checkTo..

[JS] array, object에 조건부로 값을 추가하는 간단한 방법(with. &&, spread 연산자)

🙂 이번 시간에는 array, object에 조건부로 특정 값을 추가하는 간단한 방법에 대해 알아보았다! 1. array에 조건부로 값을 추가하는 간단한 방법 만약 arr에서 hasLeg가 true일 때 cat을 원소로 추가한다고 하자. 먼저, if를 사용해 값을 추가하는 방법이 있다. const hasLeg = true; const arr = ['dog', 'horse']; if (hasLeg) arr.push('cat'); console.log(arr); // ['dog', 'horse', 'cat'] 🤔 하지만 좀 더 간단한 방법으로 원소를 추가하고 싶은데 방법이 없을까? spread 연산자(…)와 &&연산자를 사..

이전 1 2 3 4 5 6 7 ··· 10 다음

티스토리툴바