Mong dev blog

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

키 타입을 보장할 수 있는 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: &#3..
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.
[CSS] placeholder-shown vs placeholder
💡 placeholder(자리표시자)는 입력창(input, textarea)에 글을 입력하지 않았을 때, 보이는 글자이다. placeholder 관련 CSS 가상 선택자, 요소에는 여러가지가 있는데, 이번시간에는 그 중 ::placeholder와 :placeholder-shown에 대해 알아보았다! 1. ::placeholder란? 1) ::placeholder은 무엇인가요? ::placeholder는 placeholder 글자의 가상 요소이다. 가상 요소란, HTML에는 존재하지 않지만 스타일링을 위해 만든 요소를 말한다. ::placeholder를 사용하면, placeholder 글자의 스타일을 변경할 수 있다. /* 사용 방법 */ input::placeholder { ... } 2) 사용 예시 (..
2023. 2. 2.
[CSS] font-display, 글꼴 렌더링 방식을 변경하는 방법
🙂 이번 시간에는 글꼴 랜더링 방식을 컨트롤 하는, font-display에 대해 알아보았다! 1. 글꼴 랜더링 방식 우리가 어떤 사이트에 들어갔을 때 글자가 늦게 나타나거나, 혹은 글꼴이 나중에 적용되는 경우를 볼 수 있다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, 설명은 아래와 같다. 방식 설명 Flash of Invisible Text (FOIT) 브라우저가 글꼴을 다운로드하기 전까지 글자를 보여주지 않음 Flash of Unstyled Text (FOUT) 브라우저가 글꼴을 다운로드하기 전까지 글꼴이 적용되지 않음 그런데 서비스 특성에 따라 글꼴 랜더링 방식을 변경할 순 없을까? font-display를 사용하면 가능하다 🙂 2. font-display란? 💡 font-dis..
2022. 12. 22.
[CSS] 애니메이션 동작을 컨트롤하는, prefers-reduced-motion
🏃 이번 시간에는 OS의 애니메이션&모션 동작을 줄이는 prefers-reduced-motion에 대해 알아보았다! 1. prefers-reduced-motion란? 1) 동작을 컨트롤하는 prefers-reduced-motion prefers-reduced-motion는 유저의 OS의 동작 줄이기 설정에 따라, 애니메이션을 컨트롤하는 미디어쿼리이다. 이 미디어쿼리는 no-preference, reduce 총 2가지 값을 제공한다. 속성 설명 no-preference - 사용자가 별도의 설정을 하지 않은 경우 - 동작 줄이기 설정을 하지 않은 상태 reduce - 사용자가 동작 줄이기를 지정한 경우 @media (prefers-reduced-motion: no-preference) { /* 동작 모드에서..
2022. 12. 11.

티스토리툴바