내가 원하는 정상작동Sonner(Toast) 팝업 시 닫기 버튼을 누르면 닫힌다. Dialog와 함께 사용하는 Sonnerhadcn의 Dialog컴포넌트 위에서 Sonner를 호출하여 오류를 안내하려고 했다.원래는 Sonner 닫기 버튼에 hover시 cusor pointer 옵션을 추가해 놓았었기 때문에 마우스 모양이 바뀌어야 하는데 pointer로 변경되지 않았고 닫기 버튼 클릭시 동작하지 않는 오류가 확인 되었다. 오류 해결 시도 (pointer-events-auto)Sonner 컴포넌트의 className에 pointer-events-auto을 추가 해보았다.// src/components/ui/sonner.tsximport { CircleCheckIcon, InfoIcon, Loader..
- props로 받는 onClose는 useSate의 setState이다.- useEffect 안의 로직이 핵심이며 useRef로 감지한다. 기본 코드import { Dispatch, SetStateAction, useEffect, useRef } from 'react';import styled from 'styled-components';interface LoginDropdownProps { onClose: Dispatch>;}const LoginDropdown = ({ onClose }: LoginDropdownProps) => { const selectRef = useRef(null); /** * Dropdwon 박스 바깥쪽 클릭시 닫힘 */ useEffect(() => { co..
개발환경react : v19vitetypescriptstyled-components : v6 폰트 다운로드 - Pretendard GOV woff 형식🔗 Pretendard GOV - woff 형식https://github.com/orioncactus/pretendard/tree/main/packages/pretendard-gov/dist/web/static/woff 폰트 경로사용할 폰트를 다운로드 후 public/fonts 폴더에 이동 시킨다.📂 public/ ├── 📂 fonts/ │ ├── PretendardGOV-Regular.woff2 │ ├── PretendardGOV-Bold.woff2src/assets/fonts/에 폰트 파일을 두면 vite build 실행 시 dist/ ..
✨ 클로저 트랩이란(Closure Trap)?"stale closure" (오래된 클로저) 문제라고도 하며, 함수형 컴포넌트에서 useEffect, useCallback, useMemo 등의 훅을 사용할 때, 이전의 상태(state)나 props가 의도치 않게 캡처되는 문제를 의미한다. 특히 useEffect 내부에서 이벤트 리스너를 추가할 때, 오래된 상태를 참조하는 경우가 많다. ✨ 클로저 트랩이 발생하는 이유자바스크립트의 클로저(Closure)는 외부 변수의 상태를 기억하는 함수이다. React에서는 렌더링될 때마다 함수형 컴포넌트가 다시 실행되는데, 이 과정에서 클로저가 이전의 상태(state)나 props를 캡처하면 예상과 다른 동작이 발생할 수 있다. ⚠️ 문제 발생 예제 1 - useEff..
Home 컴포넌트를 import할 때 "@/pages/Home" 형식이 아닌 src경로 하위의 폴더에 바로 접근하고 싶었다. 내가 원하는 경로 형식import Home from "pages/Home"; 하지만 아래와 같이 `pages/Home' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.' 라는 오류가 뜨면서 경로를 찾을 수 없었다.import { Routes, Route } from "react-router-dom";import Home from "pages/Home";const routes = [{ path: "/", component: , name: "Home" }];const AppRoutes = () => { return ( {routes.map((route) => ( ..
Intro모바일 환경에서 구동하는 웹뷰 형식의 프로젝트 구성을 위한 자료 수집을 하던 중 “2024 당근 테크 밋업”을 통해 모바일 환경에 적합한 Routing 라이브러리를 발견했다.🕑 10:20 참고🔗 프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼 | 2024 당근 테크 밋업 StackflowStackflow는 모바일 디바이스(iOS/Android 등)에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현하고, 이를 통해 하이브리드 앱과 웹뷰 개발을 쉽게 할 수 있도록 돕는 🥕 당근에서 만든 프로젝트이다.화면을 쌓고 스크롤을 유지화면이 쌓이는 전환 효과와 뒤로가기 시 화면이 사라지는 전환 효과를 지원iOS 스타일의 스와이프백을 통한 뒤로가기 동작 지원전환되는..
Introinput 태그에 양수만 입력을 받으려고 한다. 그런데 백스페이스로 입력값을 지운 후 키패드로 숫자 입력시 가장 왼쪽에 최소값인 0이 그대로 존재하는 현상을 해결하려고 한다. 기존 코드import { ChangeEvent, useState } from "react";import styled from "styled-components";const InputTest = () => { const [inputValue, setInputValue] = useState(0); const handleInputChange = (e: ChangeEvent) => { const value = e.target.value; // string 형태 console.log("value : ", value..
모바일에서 주로 사용되는 형태의 날짜 선택 컴포넌트를 만드려고 한다. 미리보기 환경react : v18.3.1styled-components: v6.1.13react-mobile-picker : v1.0.1 React Mobile Picker 설치npm install react-mobile-pickerNPM : https://www.npmjs.com/package/react-mobile-picker 코드import { useEffect, useState } from "react";import styled from "styled-components";import Picker from "react-mobile-picker";interface ISelections { year: number[]; month..
완성 화면 미리보기프로젝트 생성vite로 프로젝트를 생성했다.react : v18.13.1styled-components : v6.1.13npm create vite@latestcd calendarnpm install npm i styled-components date-fns 라이브러리 설치date-fns는 JavaScript에서 날짜와 시간 변환등을 다루는데 매우 유용한 도구이다.date-fns : v4.1.0npm i date-fns Calendar 컴포넌트 만들기 generateCalendar.ts 특정 월의 달력을 생성하는 함수// src/generateCalendar.tsimport { startOfMonth, endOfMonth, startOfWeek, endOfWeek, addD..
Intro환경 : React + Webpackfavicon 파일 경로 : src/assets/favicon/favicon.ico HtmlWebpackPlugin을 사용하는 경우HtmlWebpackPlugin 플러그인을 사용한다면 favicon 경로를 설정하는 것 만으로 간단하게 적용할 수 있다. 다만, 단일 favicon만 처리 가능하다.장점: 설정이 간단함장점: 자동으로 favicon을 처리함단점: 단일 favicon만 처리 가능// webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = { // ... 다른 설정들 plugins: [ ..
