주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

react(nextjs), tailwind를 통해 별점 컴포넌트를 만들어보자.  준비물로는 5점짜리 별 5개가 이어진 이미지 2장이 필요한데, 별이 채워진 이미지와 별이 채워지지않은 이미지가 필요하다. (하나의 별만 있다면 크기를 지정하고 반복해서 배경이미지를 repeat 시키면 될 듯하다.) 그 이유는 마우스가 호버될때, 아래 영상과 같이 마우스 커서에 따라 채워진 이미지를 보여주기 위함이다. 컴포넌트 코드'use client';import clsx from 'clsx';import React, { useState } from 'react';interface Props { value?: number; onChange?: (radio: number) => void; width?: num..

React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..

타이머, 숫자 가변폭 폰트를 고정폭 폰트로 font-variant-numeric CSS 타이머 UI에서 숫자 값을 감싼 wrapper이 움직이는 문제가 있었다.이유는 날짜와 시간이 동적으로 들어가기때문에 고정폭을 적용하지 않은 UI였고, 이 때문에 발생했다.동영상을 잘보면 미세하게 끝이 움직인다. 적용 전 왜 이런 이슈가 생기는 걸까?고정폭 폰트, 가변폭 폰트가 각각 존재하기 때문이다.말 그대로 고정폭 폰트는 각 글자가 동일한 폭을 차지하며 가변폭은 글자의 폭이 동일하지 않는 폰트를 말한다. 이때는 어떻게 고정폭으로 적용할까?아래 CSS만 적용하면 바로 해결된다. *물론 사용하는 폰트가 OpenType 포맷이어야함font-variant-numeric: tabular-nums; 적용하고나니 숫자모두 동일한..

원링크 (One Link), 딥 링크(Deep Link), 디퍼드 딥 링크 (Deferred Deep Link) - 웹뷰와의 통신초반에 잘못 이해해서 꽤나 개념을 이해하는데 쉽지 않았다.회사, 사람마다 같은 개념을 다른형식으로 말하기도 해서 헷갈리기도 했고, 마케팅하시는 분들의 블로그에서 잘못된 정보들이 있어 이해하는데 시간이 걸렸다.다시 정리해보자. 원링크 (One Link)하나의 링크를 통해 여러 플랫폼 또는 목적지로 사용자들을 유도하는 기술이나 개념.단일 URL로 여러 목적지를 처리하는 마케팅 기술 플랫폼.(AppsFlyer의 통합 딥링킹 플랫폼으로 하나의 단일 링크만으로도 딥링킹 제공)즉, 사용자가 원링크를 클릭하면, 링크는 사용자의 디바이스나 운영체제(OS)등의 정보를 분석하여 가장 적합한 목적..