Sign in

it

it dev shadcnui dialog

[shadcn/ui] Dialog, Alert Dialog Component 구현기

🍀 목차Shadcn/ui Dialog(+Alert Dialog) 뜯어보기 & 속성 설명UI 커스텀과 작성한 스토리회고  개요  Modal Component는 현재 제품에서 가장 많이 쓰이는 컴포넌트 중 하나다. Avatar Component처럼 처음부터 인터페이스 제작 -> UI 구현까지 하기에는 시간이 부족하여 shadcn/ui의 Dialog, Alert Dialog를 제품에 맞게 커스텀하기로 결정하였다.시작하기에 앞서 Modal, Confirm, Alert의 차이를 알아봤다.Modal : 주의가 필요하거나 추가 정보를 제공하는 팝업 콘텐츠. 텍스트, 양식 입력 같은 다른 대화형 요소를 포함할 수 있고 사용자가 Modal 외부를 클릭하거나 특정 버튼(닫기, 취소, 저장)을 클릭할 때까지 다른 인터페이..
wono | discuss |
it dev typescript

useRef, useImperativeHandle, forwardRef

useRef와 useImperativeHandle은 ref라는 속성에 적용하는 값을 만들어 주는 훅이다. 리액트와 리액트 네이티브가 제공하는 컴포넌트는 모두 ref라는 이름의 속성을 가지고 있다.ref 속성이란?Ref는 참조를 의미한다.ref 속성값은 사용자 코드에서 설정하는 것이 아니라, 특정 시점에 React 프레임워크 내부에서 설정해 준다. ref 속성은 초기에는 null이지만, 컴포넌트가 마운트 되는 시점에서 실제 DOM 객체의 값이 된다.HTML 요소들은 자바스크립트에서 DOM 타입 객체이다. 모든 요소는 HTMLElement 타입이며, click(), blur(), focus() 메서드를 제공한다. 이 메서드들은 가상 DOM 상태에서는 호출할 수 없고, 실제 DOM 상태에서만 호출할 수 있다...
wono | discuss |
it dev typescript unknown

[101] 타입스크립트의 unknown 타입

TypeScript에서 unknown 타입은 any와 혼동될 수 있지만, 코드 안전성에 있어 결정적인 차이를 만듭니다. unknown을 효과적으로 사용하면 React 애플리케이션의 안정성과 오류 방지를 크게 향상시킬 수 있습니다. 이 글에서는 unknown 타입을 활용한 안전한 타입 검사 기법을 React 애플리케이션을 중심으로 자세히 살펴봅니다.1. unknown 타입의 기본 개념unknown 타입은 말 그대로 "알 수 없는" 타입을 나타냅니다. 어떤 값이 올지 확실하지 않을 때 unknown을 사용할 수 있으며, 이는 값을 사용하기 전에 반드시 그 타입을 확인해야 한다는 특징이 있습니다.let unknownValue: unknown;unknownValue = 100; // 숫자 할당 가능unknow..
wono | discuss |
it dev nextjs redis

[REDIS] 📚 Node.js 에서 redis 모듈 사용법 (캐싱 & 세션 스토어)

Node 프로젝트에서 pm2로 다중 클러스터 인프라를 구축했다면 세션 불일치 문제가 생기게 마련이다. 만일 서버가 종료되어 메모리가 날라가면 접속자들의 로그인이 모두 풀려버리게 된다. 따라서 이를 방지하기 위해 세션 아이디와 실제 사용자 정보를 외부 데이터베이스에 저장하는 편이다. 이때 개발자들이 많이 사용하는 것이 Redis db이다. 다른 데이터베이스를 사용해도 되지만, 세션은 빠릿빠릿하게 응답을 해야되기 떄문에 메모리 기반의 데이터베이스인 레디스를 사용한다. 지금부터 Node 프로젝트에서 Redis와 연결하고 사용하는 법을 알아보자. Redis Database 설치 레디스를 로컬에 설치해도 되고, 클라우드로도 사용할 수가 있다. 마음에 드는 것을 골라 설치하자. 개인적으로 로컬 보다는 클라우드로 하..
wono | discuss |
it dev nextjs

React에서 중복호출(aka. 따닥)을 막는 완벽한 방법

서언 안녕하세요. 최근에 퀄리티 높은 프론트엔드 제품을 만드는 것에 관심이 많은데요. 사소해보이는 디테일을 얼마나 능숙히 처리하느냐가 프론트엔드 개발자의 실력 척도 중 하나라고 생각했어요. 저는 여러 원칙들을 세우고 있지만, 오늘은 중복호출 (aka 따닥)을 방지하는 완벽한 방법을 탐구해볼 것입니다. 문제인식 서비스를 개발하다가, 중복호출이 발생해서 여러 문제가 발생하는 경우가 있습니다. 결제 요청이 2번 들어갈 수도 있고, 게시물 작성이 2번 될 수도 있고, 댓글이 2번 써질 수도 있습니다. 이로 인해 비즈니스적으로도 영향을 미칠 수도 있습니다. 작게는 서버 에러 수가 많아져서, noisy 해질 수 있죠. 이만큼 중요도가 높고, 프론트엔드 퀄리티에 큰 역할을 한다고 생각했는데요. 실제로 저도 명확한 해..
wono | discuss |
it dev nextjs

[react 리액트] 초간단 중복 클릭 못하게 하기 (feat. 로딩화면)

1. 어떻게?state를 통해 버튼을 누르면 완료될때까지 버튼의 클릭 기능을 없애서 중복 클릭을 못하게 함. 2. 적용1) 불리언 타입의 State 를 만들어 준다. const [isBtnDisable, setIsBtnDisable] = useState(false); 2) 버튼의 state (true, false) 두가지 상태를 정의해준다.*여기선 버튼 대신 이미지를 사용하였다. *클릭 후 처리 중엔 아예 클릭이 불가능하게 하였다. - 클릭 전 (onClick 프로퍼티가 있음)isBtnDisable === false 일 때 버튼은 이렇고 // isBtnDisable === false && - 클릭 후 (onClick 프로퍼티가 없음)isBtnDisable === true 일 때 (클릭 후) 버튼은 이렇다..
wono | discuss |
it dev nextjs script

[NEXT JS] 외부 JS파일 사용하기

이번에 네이버에서 제공하는 맵 API를 이용해보려 하는데, 예제가 기본적으로 HTML로 되어있고, 외부 JS파일을 script태그로 불러오는 형식으로 예문이 짜여져 있었습니다. 아래는 네이버 Dynamic Map API를 사용한 HTML 예제입니다. 위 코드의 script를 보면 다음과 같습니다. 이 코드와 같이 외부 JS파일을 불러오는 것을 알 수 있었습니다. 그렇다면 React환경인 NextJS에서는 이 파일을 어떻게 불러올 수 있을까요? 😎NextJS에서 제공하는 Script를 이용한다 import Script from 'next/script' export default function Dashboard() { return ( ) } Nextjs 제공하는 Script컴포넌트를 이용하여 위와 같이 J..
wono | discuss |