Mong dev blog

개발 기술192

[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. 검색, 주소창..
2022. 7. 17.
Stylelint 설정하는 법(feat. node, vue)
이번시간에는 css, scss와 같은 스타일에 규칙을 정의할 수 있는 stylelint를 설정해보았다! 차례로 node환경에서 css, scss를 설정을 하고, 마지막으로 vue에서 scss 설정을 했다. 1. stylelint란? 😉 stylelint는 스타일에 규칙을 적용할 수 있는 lint로, 아래와 같은 장점을 가진다. 스타일 오류를 방지할 수 있기에, 스타일이 적용되지 않는 현상이 발생할 확률이 적다. 스타일에 규칙을 적용할 수 있으므로, 협업시에 스타일 규정을 하기 좋다. 플러그인을 지원하기에, 규칙을 커스터마이징할 수 있다. 스타일 단위 테스트를 지원한다. 예를 들어 잘못된 형식의 색상을 지정한 경우, stylelint 명령어 실행시 터미널에서 오류를 띄워준다. .home { color: #..
2022. 7. 10.
[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..
2022. 7. 3.
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 현재 원소값 ..
2022. 6. 19.
[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..
2022. 6. 15.
[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 연산자(…)와 &&연산자를 사..
2022. 6. 11.
[JS] 원본을 바꾸지 않는 Array 메소드 (feat. TC39 3단계)
🙂 JS의 ECMAScript 표준은 TC39위원회에 의해 결정된다. 이번 시간에는 TC39에서 3단계(ECMA-262 표준에 편입하고자하여 명세가 거의 마무리 된 상태)에 도달한 Array 메소드에 대해 알아보았다! (TC39제안서 보기) 해당 메소드는 포스팅 시점에는 표준화되지 않았지만 이 기술이 추가될 가능성이 높으므로 미리 알아두자! 1. toReversed() reverse()는 배열의 순서를 반대로 뒤집어준다. 단, reverse()를 사용하면 원본 배열도 변경되는 특징이 있다. const arr = [1, 2, 3, 4, 5]; const reversedArr = arr.reverse(); console.log(arr); // [5, 4, 3, 2, 1] console.log(reversed..
2022. 6. 7.
[CSS] 반응형 웹 구현에 좋은 min(), max(), clamp()
💡 이번 시간에는 반응형 웹 구현할 때 사용하기 좋은 min, max, clamp 함수에 대해 알아보았다. 1. min()는 어떻게 쓸까? (1) max-width, width 우리는 max-width, width를 사용해 요소의 너비 범위를 지정할 수 있다. 아래 예시는 target의 기본 너비를 parent의 50%이나, max-width를 사용해 최대 너비를 200px로 지정했다. .target { width: 50%; max-width: 200px; } See the Pen max-width by KumJungMin (@kumjungmin) on CodePen. (2) min() ❓ 그런데, 조금 더 간단하게 그리고 width 말고 padding에도 최솟값을 지정할 수 없을까? 바로 min()함수..
2022. 6. 4.
[JS] event.target, event.currentTarget의 차이(feat. 이벤트 버블링)
이번 시간에는 이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보았다! 1. 이벤트 발생 요소에 접근하는 법 우리는 js에서 dom.addEventListener(이벤트, 핸들러)로 요소에 이벤트를 걸거나 html에서 onEvent(ex. onClick)를 사용해 이벤트를 적용할 수도 있다. 만약 버튼에 클릭이 발생할 때마다 특정 로직을 실행하고 싶다면 두가지 방법을 쓸 수 있다. 나는 버튼이야 const btn = document.querySelector('.btn'); btn.addEventListener('click', (event) => { // click발생시 실행할 로직 } ) 나는 버튼이야 function..
2022. 5. 31.

티스토리툴바