본문 바로가기

Utility6

텍스트 에디터 Tiptap 커스터마이징 이번 프로젝트 때 텍스트 에디터를 사용해볼 기회가 생겼당!처음엔 quill을 쓰려고 했지만 next.js 15버전과의 호환성 때문인지 내가 못하는 건지 @.@ quill, quill-react, quill-react-new를 다 시도해 보았지만 커스터마이징에 실패 다른 팀에서 TipTap을 사용한다고 해서 나도 Tiptap으로 갈아탔당 🚌🔎 미리보기Tiptap은 next.js 15버전에서 아래와 같이 아주 잘 작동하였당.아이콘은 lucide 라이브러리를 사용했당.컬러팔레트까지 커스터마이징이 가능해서 컬러팔레트까지 이번 프로젝트 주요 색상을 이용해 만들었당.사진도 잘 들어간당.  모바일일 땐 undo와 redo 버튼을 없애고, 헤딩 옵션을 하나의 아이콘으로 합쳐 선택지가 드롭다운처럼 뜨도록 만들었다.?.. 2025. 1. 19.
useWebSocket으로 웹소켓 구현하기 이번 프로젝트에서 웹소켓을 통해 게시물의 좋아요 수 및 댓글의 실시간 업데이트 기능을 구현하였다.프론트엔드에서는 웹소켓을 통해 전송하는 데이터의 형태를 정확히 설정하고,웹소켓을 통해 전송받은 데이터를 필요에 맞게 처리만 해주면 어려운 것은 딱히 없다.조건useWebSocket은 react 16.8 이상에서 사용 가능하고,리액트 훅을 사용할 수 있는 함수형 컴포넌트에서 사용해야 한다. 이번 프로젝트 개발환경 세팅은 아래와 같았당.next: 15.1.0react: 19.0.0useWebSocket 설치하기pnpm add react-use-websocketnpm install react-use-websocketyarn add react-use-websocket프론트엔드에서 필요한 것은 useWebSocket.. 2025. 1. 14.
돌아가는 로딩 스피너 코드 svg 태그의 className 속성 내 tailwind CSS 코드에서 text, fill 부분을 원하는 색상으로 변경해서 사용할 수 있다.import React from 'react';const LoadingSpinner = () => { return ( Loading... );}export default LoadingSpinner; 2024. 12. 23.
cva (Class Variance Authority) cva Class Variance Authority조건부 스타일링을 구조적으로 처리하기 위해 만들어진 CSS 클래스 관리 유틸리티 라이브러리로,Tailwind CSS와 같이 유틸리티 클래스 기반의 스타일링을 사용할 때 유용하다.cva는 컴포넌트의 여러 가지 형태와 상태를 정의하고, 이를 기반으로 동적인 CSS 클래스를 생성한다.설치npm install class-variance-authorityyarn add class-variance-authoritypnpm add class-variance-authorityAPI 설명cva(baseClasses, options)baseClasses: 항상 적용되는 기본 클래스options: variants, compoundedVariants 및 defaultVaria.. 2024. 12. 14.
clsx clsxclsx는 전달된 매개변수 중 truthy한 값을 기준으로 CSS 클래스 문자열을 생성해 반환하는 유틸리티 함수이다.설치npm install clsxyarn add clsxpnpm add clsx동작 방식매개변수 타입문자열, 숫자 등의 원시타입falsy한 값: 0, -0, 0n, false, '', null, undefined, NaNboolean이 단독으로 쓰인 경우 무시됨false는 물론, true여도 반환되지 않음true && 'bar처럼 && 연산자를 사용하여 반환할 문자열을 전달할 수 있음객체value의 값이 truthy한 경우 해당 key를 반환배열중첩 배열을 포함하여 재귀적으로 펼쳐서 처리리턴 타입string (truthy한 값만 포함한 문자열)모든 매개변수가 falsy한 경우, 빈 .. 2024. 12. 13.
Tailwind Merge Tailwind MergeTailwind를 사용할 때 기본적으로 정의된 클래스와 prop으로 전달받은 클래스가 중복될 경우,Tailwind의 CSS 클래스는 후순위에 있는 클래스가 우선 적용된다.하지만 클래스 문자열을 단순히 병합하면, 코드가 복잡해지거나 실수로 인해 의도한 스타일이 제대로 적용되지 않을 수 있다. 이를 해결하기 위해 tailwind-merge와 같은 라이브러리를 사용한다.tailwind-merge는 중복된 Tailwind 클래스 중에서 우선순위에 따라 올바른 클래스를 자동으로 선택해 주며,이를 통해 prop으로 전달된 클래스가 기본 클래스를 override할 수 있도록 보장한다.설치npm install tailwind-mergeyarn add tailwind-mergepnpm add.. 2024. 12. 13.

티스토리툴바