Mong dev blog

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

콘텐츠 접근이 가능한 아코디언을 만들어보자! (with. until-found, details)
1. 들어가며… 서비스 플랫폼의 경우 FAQ, Q&A에 주로 아코디언을 사용한다. 그리고 FAQ나 Q&A는 유저가 자주 묻는 질문이거나 유저에게 기본으로 전달하고 싶은 내용이다. 그런데 유저가 일일이 항목을 열어 내용을 보기도 하지만, 특정 키워드가 궁금해 검색하는 경우는 없을까? 혹시나 싶어 검색 기능을 사용해봤지만 대부분의 사이트에서 내부 콘텐츠 검색 기능을 제공하지 않고 있었다. ❓ 어떻게 해야 검색이 가능한 아코디언 UI를 만들 수 있을까? 방법은 총 2가지가 있는데, 이번 시간에는 2가지 방법으로 컨텐츠 검색이 가능한 아코디언을 만들어보았다! (만약 UI 라이브러리의 아코디언 구조가 궁금하다면 이 포스팅을 참고하자) 2. 콘텐츠 접근이 가능한 아코디언 만들기 1) details 태그로 구현하는 ..
2024. 2. 13.
input 유효성에 따라 스타일링하는 3가지 방법 (invalid, user-invalid, out-of-range)
1. 입력값이 유효한지 알려줘야지~ 우리는 사이트를 방문할 때 여러가지 입력창을 마주하게 된다. 그리고 특정 입력창은 사용자에게 요구하는 입력 데이터 형식이 있다. 만약 사용자가 입력한 값이 형식에 맞지 않다면, 형식에 맞지 않은 값이라는 걸 알려주는 게 중요하다. 💡 그렇다면, 어떻게 해야 사용자에게 값이 유효하지 않은지 알려줄 수 있을까? 이번 시간에는 사용자가 유효하지 않은 값을 입력했을 때, 그리고 값이 허용 범위를 벗어났을 때, 스타일을 달리 적용하는 방법을 알아보았다. 2. 유효성에 따라 스타일링하는 3가지 방법 (1) :invalid, :valid, 값 유효성에 따라 실시간 스타일링 :invalid는 사용자가 입력한 값이 유효하지 않을 때 스타일이 적용된다. :valid는 사용자가 입력한 값..
2024. 1. 6.
[CSS] 왜 transform 애니메이션 성능이 좋을까? (with. GPU, Reflow)
1. Left 애니메이션은 왜 끊길까? transform, left 속성으로, 대각선 방향으로 움직이는 공 애니메이션을 만들어봤다. See the Pen Animate with Translate and left by KumJungMin (@kumjungmin) on CodePen. 보기에는 둘 다 잘 동작하는 거 같은데, 만약 JS에서 복잡한 연산을 실행하면 어떻게 될까? gif를 보면 알 수 있듯이 JS에서 복잡한 연산을 하자, left 애니메이션이 잠시 끊기는 걸 볼 수 있다. 그럼 두 애니메이션의 성능은 어떨까? [Chrome] > [성능]에서 성능을 측정해보았다. transform 애니메이션의 경우 별다른 성능 이슈가 없는 것으로 보인다. 그에 반해 left 애니메이션은 “누적 레이아웃 변경으로 ..
2023. 11. 28.
키 타입을 보장할 수 있는 Map 객체(주의! array.map 아님)
1. 키 타입이 왜 String이 되지? JS에서 Object.keys()로 객체의 키값을 배열로 반환할 수 있다. const object = { a: '1', b: 2, c: 3, }; console.log(Object.keys(object)); // ['a', 'b', 'c'] 💡 그런데 만약 키 타입이 Number인 객체의 키값을 Object.keys()로 추출하면 어떻게 될까? Number 타입의 배열이 되나? 결과는 String 타입의 배열이 된다! 왜일까? 그 이유는 Object.keys()가 String 타입의 배열을 리턴하는 함수이기 때문이다.(MDN 문서 참고) const object = { 1: '일', 2: ..
2023. 10. 15.
[html] 더 나은 사용자 입력을 위한 inputmode 속성
0. 들어가기에 앞서… 모바일 디바이스 사용자가 늘어나면서, 웹 사이트에서 모바일 입력 폼을 사용하는 경우가 많아졌다. 하지만 용도에 맞지 않는 가상 키보드를 제공하는 경우가 있어, 사용성에 부정적인 영향을 주곤 한다. 예를 들어 전화번호 입력창을 클릭했는데 문자 키보드가 떠서, 사용자가 키보드 탭을 전환해야하는 수고가 발생한다. 이때, inputmode 속성을 사용하면 입력 폼에 적합한 가상 키보드를 사용자에게 제공할 수 있다! 이번시간에는 가상 키보드 모드를 지정할 수 있는 inputmode(공식문서 링크)에 알아보았다. 1. inputmode이란? 1) inputmode는 무엇일까? inputmode는 브라우저가 어떤 키보드를 표시할지 지정할 수 있는 속성이다. 기본값은 inputmode=”text..
2023. 8. 20.
[모노레포] 특정 폴더를 패키지화하는 방법
1. 들어가기에 앞서… 어플리케이션을 개발하다보면 모노레포에 여러 개의 패키지가 만들어지고, 의미 단위로 폴더를 구분하다보면 패키지 내부에도 여러 개의 폴더가 발생할 수 있다. 우리 서비스의 경우, components 패키지 내에 총 2개의 폴더가 존재하는데 서비스와 독립적이면서 재사용 가능한 컴포넌트를 모은 ui 폴더, 그리고 서비스에 종속되면서 재사용가능한 컴포넌트의 모음인 shares가 있다. |- components |-- ui // 서비스와 독립적, 디자인 시스템이 확립됨, 재사용 가능 |-- shares // 서비스에 종속적, 재사용 가능 그리고 우리는 불과 얼마 전까지만 해도 이 두 폴더의 컴포넌트를 접근할 때 아래와 같이 import 했다. import { Checkbox } from @g..
2023. 5. 15.
[CSS] 렌더링 퍼포먼스를 높여주는 content-visibility
모바일 기기의 사용이 증가함에 따라 웹 페이지의 렌더링 속도가 더욱 중요해졌으며, 느린 페이지 로딩 속도는 사용자들의 불만을 유발하고 페이지 이탈률을 높일 수 있다. 이러한 문제를 해결하기 위한 다양한 방법이 있는데 오늘 소개하고자 하는 건 content-visibility 라는 CSS 속성이다. content-visibility란? content-visibility는 페이지 로드 성능을 향상시킬 수 있는 CSS 속성이다. 이 속성은 불필요한 렌더링 작업을 최소화하여 초기 로드 속도를 개선할 수 있는데, 즉, 필요한 시점까지 렌더링 작업(레이아웃 및 페인팅)을 생략할 수 있어 초기 로드가 빨라진다. 이를 통해 사용자들은 빠르게 웹 페이지에 접근할 수 있고, 렌더링 작업이 끝날 때까지 대기할 필요가 없다...
2023. 5. 7.
[CSS] hex 컬러에 투명도를 주는 2가지 방법
들어가기에 앞서… 우리는 요소의 글자색, 배경색 등을 지정할 때 hex(#000000) 혹은 rgba컬러 등을 사용한다. rgba의 경우, 투명도를 조정할 때 rgba(red, green, blue, opactiy) 마지막값인 opactiy를 수정하면 된다. 하지만 hex 컬러는 어떻게 투명도를 조정할 수 있을까? 이번 시간에는 hex 컬러에 투명도를 적용하는 2가지 방법에 대해 알아보았다. 1. hex8 사용하기 hex컬러는 hex6, hex8이 존재하는데 hex6은 6자리를 두자리씩 끊어서 빨강, 초록, 파랑을 표현한다. hex8은 8자리를 두자리씩 끊어서 빨강, 초록, 파랑, 투명도를 나타낸다. 만약 우리가 투명도를 적용할 컬러가 hex8인 경우, hex8의 마지막 2자리만 투명도에 해당하는 hex..
2023. 3. 22.
[CSS] @property로 CSS 변수의 구체적 스펙 정의하기
🔺 우리는 —-variable로 CSS 변수를 만들어 재사용성을 높일 수 있다. 그리고 —-variable에 필요로 따라 다른 값을 할당할 수 있는데, 이때 잘못된 타입의 값을 할당한 경우 예상치 못한 문제가 발생할 수 있다 😟 이번 시간에는 변수의 잘못된 사용을 막을 수 있는 방법 중 하나인, @property에 대해 알아보았다! 1. CSS 변수 사용시 발생하는 실수 💡 우선, CSS 변수를 어떻게 선언하고 재할당하는 지 살펴보자. 우리는 반복 사용되는 CSS 스타일을 :root에 —-variable형태로 선언할 수 있다. 한 예시로, orange를 초기값으로 가지는 색상 변수(—-primary)를 만들어보았다. :root { --primary: orange; } 이렇게 만든 CSS 변수로 글자 색상..
2023. 2. 12.

티스토리툴바