Phot_o_matic Programming

Feature Flag의 정의 Feature Flag(이하 피처 플래그)는 흔히 Feature Toggle이라고도 표현합니다. 표현 그대로 특정 기능에 대해 on/off와 같은 상태를 외부에서 제어할 수 있도록 하는 시스템입니다. if (useFeatureIsOn('unhide-hidden-posts')) { // 게시글 숨김 목록 UI 노출 및 숨김 해제 기능 제공 } else { // 게시글 숨김 목록 UI 미노출 및 페이지 라우팅 제어 } useFeatureIsOn 함수가 반환하는 값은 외부에서 해당 인자를 key로 갖는 설정값을 통해 결정됩니다. 피처 플래그를 조작할 권한이 있는 자가 unhide-hidden-posts 기능을 활성화하면 if문 으로 분기될 것이고, 비활성화하는 경우는 else문으..

Programming/Concept 2024. 3. 1. 22:08

우리는 종종 새로운 서비스를 처음 접하거나 기존 서비스에 신규 기능이 추가되는 경우에 튜토리얼을 진행해본 경험이 있을 것이다. 사용자는 튜토리얼을 통하여 특정 위치의, 특정 요소가 가지는 역할에 대해서 차례대로 하나씩 인지하게 된다. 위의 gif는 React의 Portal 기능을 이용하여 만든 튜토리얼 컴포넌트의 진행 과정이다. Portal은 특정 DOM 엘리먼트의 자식으로써 엘리먼트, 문자열 또는 fragment 등 종류에 상관없이 React 자식이기만 하면 렌더링 할 수 있게 해준다. 때문에 Dialog나 Tooltip과 같이 시각적으로 자식 엘리먼트를 "튀어보이게" 하려는 경우에 많이 사용한다. 실제로 예시 이미지에서도 현재 설명중인 엘리먼트는 시각적으로 "튀어"보이고 있다. Portals – Re..

Programming/React 2022. 10. 26. 18:02

Form attributes in depth Ensure users enter data 가상 키보드와 관련된 고려사항 포함 inputmode 속성은 안드로이드와 iOS에서 지원된다. type 속성과 대비되는 점은, inputmode 속성은 가상키보드만 변경시키고 요소 그 자체의 행동은 변화시키지 않는다는 것이다. input의 기본 사용자 인터페이스와 유효성 검사 규칙을 유지하면서 가상키보드를 최적화하고 싶다면 inputmode가 좋은 선택지가 될 수 있다. type="number"는 제품의 수량과 같은 증분 필드에만 사용하는 것이 좋다. 브라우저에서 type="number"에 대한 위쪽/아래쪽 화살표를 표시하며, 이는 전화번호, 지불 카드 또는 계좌 번호에 대해 의미가 없기 때문이다. 전화번호는 type..

Programming/TIL 2022. 10. 26. 18:01

⏰Effective Component 제품의 성장 과정에 있어서 잦은 변경이라는 것은, 더 나아지기 위한 성장통과 마찬가지이다. 놓치고 있었던 고객의 니즈를 발견한 것이라고도 할 수 있다. 그렇다면 이런 변경에 대해서 유연하고 효율적으로 대응하려면 어떻게 컴포넌트를 설계해야할까? 목차 Headless 기반의 추상화 변하는 것 vs 상대적으로 변하지 않는 것 [한 가지 역할만 하기] 또는 한 가지 역할만 하는 컴포넌트의 조합으로 구성하기 도메인 분리하기 도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리하기 1. 💀Headless UI 기반의 추상화하기 컴포넌트는 크게 세 가지 영역으로 구분된다. 데이터 UI : 어떻게 데이터를 보여줄지? 사용자 상호작용 : 어떻게 상호작용할지? 예를 들어 달력 기능을..

Programming/React 2022. 6. 16. 10:43

Selectors Learn Forms Capturing user input What is your favorite color id 속성은 을 과 연결지어준다. 그럼 name이나 type 속성은 무슨 역할을 하는가? The name attribute 사용자가 컨트롤로 입력하는 데이터를 식별하려면 name 속성을 사용한다. form을 제출할 때, 이 name이 요청에 포함된다. 예를 들어, fruit라는 이름의 input에 사용자가 strawberry라고 입력을 한 경우라면 요청에 이 정보가 fruit=strawberry로 포함될 것이다. Input types fieldset Choose your favorite monster Kraken Sasquatch Mothman autofill Address li..

Programming/TIL 2022. 6. 14. 17:07

Pointer three possible values with the pointer none keyboard coarse touch screen fine mouse or stylus Do button { padding: 0.5em 1em; } @media (pointer: coarse) { button { padding: 1em 2em; } } Don't @media (pointer: fine) { button { padding: 0.25em 0.5em; } } 아무리 마우스나 스타일러스를 사용한다 하더라도, 무작정 크기를 줄이는 것은 좋지 않다. Fitts's law에 따르면 그렇다고 한다. Any pointer 여러 pointer를 지니는 기기가 얼마든지 존재할 수 있다. ex) 트랙패드와 터치스크린..

Programming/TIL 2022. 6. 13. 17:03

Typography Scaling text Don't html { font-size: 2.5vw /*the user won't be able to resize the text. */ } Do html { font-size: calc(0.75rem + 1.5vw); /*the text will be resizable if you mix in a relative unit like em, rem, or ch. */ } But, there's a possibility that the text will get too small on narrow screens and too big on wide screens. Clamping text The clamp() function is like the..

Programming/TIL 2022. 6. 3. 12:21

Layouts for Responsive Design macro with grid or flex properties usually means page layout micro with grid, flex (or container queries) properties usually means contents in container (component) layout container queries will allow contents to be notified of parent's, same as container, current size. container queries main, aside { container-type: inline-size; } .media-illustration { max-widt..

Programming/TIL 2022. 6. 3. 12:20