폰트 파일의 형식에 따라 같은 이름의 폰트라도 굵기와 같은 세부적인 특성이 다르게 보일 수 있습니다. 특히 WOFF(웹폰트)와 OTF/TTF(데스크탑 폰트) 간의 차이에서 이런 현상이 발생할 수 있습니다. 이유는 다음과 같습니다:  1. 렌더링 엔진의 차이WOFF는 웹 브라우저에서 사용되며, 브라우저마다 텍스트 렌더링 방식이 다릅니다.Subpixel Rendering 또는 안티앨리어싱 처리가 브라우저 및 운영 체제에 따라 달라지기 때문에 같은 글자라도 굵기 차이가 발생할 수 있습니다.예: Chrome, Safari, Firefox 등의 브라우저에서 동일한 WOFF 폰트도 다르게 보일 수 있음.OTF/TTF는 주로 OS 또는 디자인 툴에서 사용되며, 더 정밀한 렌더링이 가능합니다.이러한 툴들은 폰트의 힌팅..

type: String as PropType와 validator를 사용하는 방식은 타입 정의와 값 검증의 차이에 따라 적합한 상황이 다릅니다. 아래는 두 방법의 차이를 정리한 내용입니다.1. type: String as PropType의 특징주로 TypeScript를 사용하는 경우:PropType을 사용하면, TypeScript가 제공하는 정적 타입 검사 기능을 통해 컴파일 타임에 허용되는 값의 범위를 명확히 정의할 수 있습니다.IDE에서 자동 완성 및 타입 오류를 바로 확인할 수 있습니다.사용 예시:size: { type: String as PropType, default: 'medium',}장점:타입 안전성을 제공하며, 런타임에 추가 검증 코드가 필요 없습니다.TypeScript의 타입 추론과 완..

Vuex와 Pinia는 Vue.js 애플리케이션에서 상태 관리를 제공하는 라이브러리입니다. Vuex는 Vue의 공식 상태 관리 라이브러리이고, Pinia는 Vue 3와 함께 등장한 경량 상태 관리 솔루션으로, Vuex의 복잡성을 줄이고 더 직관적인 사용법을 제공합니다.  Vuex가 무엇인가요? | VuexVuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를v3.vuex.vuejs.org  Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepini..

지난 10년간 여러 CSS 방법론들이 있었지만 2024년인 지금 가장 대중적인 방법은 아마 tailwind CSS 일 것이다. 하지만 나에겐 테일윈드마저 약간 오버스펙으로 다가와서 직접 필요한 스타일만 추가해서 유틸리티 CSS를 만들게 되었다. 결과적으로 핀크 내 서비스를 개발할 때 아주 편리하고 유용하게 사용하고 있어서 공유해본다. 사실 특별할 건 정말 하나도 없다. Tailwind CSS란?Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utili..

핀또 개발하면서 구현하게 된 스크래치 효과토스에서 만보기 복권이나 고양이 그림 맞추기 등에 사용되는 효과와 비슷하다

https://13322566869.com/ Digital Producer - Specialised in DesignNavigating your digital transformation through bespoke creative solutions, providing a personal touch.13322566869.com   #1- 스크롤 타이밍 맞춰서 배경 캔버스가 좌->우로 채우짐- 글자색이 배경색과 반전됨   #2스크롤 타이밍 맞춰서 라벨 하나씩 fadeIn 됨   #3조각난 이미지들이 스크롤 타이밍에 맞춰 원상태로 맞춰짐  조각난 이미지 8장을 비틀어놨다가 맞춰놓는 개념임 (너무 궁금해서 찾아냄) 그런데 이렇게 이미지를 개별적으로 다 만들지 않고, `background-clip`을 이용한다던가..

이번주 노마드코더 웹진을 읽다가 발견한 사이트에서 폰트가 너무 눈에 들어오길래 찾아봤다. 약간 히라가나 같기도 한 모양이 특이하고 게다가 절대 무료폰트로 풀릴 만한 퀄리티가 아니어서 너무 탐이 났다. HS산토끼체 2.0 | 산돌구름무료폰트 사용 산돌구름 PC가 설치되어 있는지 확인해주세요. 산돌구름이 실행중인 상태에서 폰트를 사용할 수 있습니다. 확인 취소www.sandollcloud.com:443   HS산토끼체 2.0 해당 폰트의 지적 재산권은 토끼네활자공장에 있습니다. 사용 가능 라이선스를 확인하지 않아서 발생하는 손해에 관한 책임은 사용자에게 있습니다.[무료 한글폰트] HS산토끼체 2.0(2024) : 네이버 블로그 (naver.com) [무료 한글폰트] HS산토끼체 2.0(2024)HS산토끼체 ..

Warning: Received `true` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="true" or className={value.toString()}.  리액트에서 이런 에러가 콘솔에 찍히고 있었다.검색해보면 스타일드 컴포넌트를 사용할 때 뜨는 에러라고만 나오는데내 경우에는 간단하게 그냥 클래스네임을 attribute값만 적어놔서 생기는 오류였다. className을 지워주고 나니 에러가 사라졌다!

keyup 이벤트와 input 이벤트는 HTML 폼 요소(특히  및  요소)와 상호작용할 때 발생하는 두 가지 주요 이벤트로, 각기 다른 시점과 용도를 가지고 있습니다. 이들 이벤트의 차이점을 이해하는 것은 사용자 입력을 다룰 때 중요합니다.  keyup 이벤트발생 시점: 사용자가 키보드 키를 눌렀다가 뗄 때 발생대상: 주로 , , 및 기타 키보드 이벤트를 수신할 수 있는 요소포함 정보: 어떤 키가 눌렸는지에 대한 정보 (event.key, event.code 등)사용 사례: 특정 키 입력을 감지하거나 키보드 단축키를 처리할 때 유용 input 이벤트발생 시점: 사용자가 입력 필드의 내용을 변경할 때마다 발생이는 키보드 입력, 마우스 붙여넣기, 드래그 앤 드롭 등 모든 입력 방식에 대해 작동대상: 주로 ..