개발환경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: [ ..
문제 발생리액트 쿼리(React Query, TanStack Query)를 사용해서 데이터를 받아오는 API 중 브라우저 탭 외의 영역을 클릭 후 다시 크롬 브라우저 내부를 클릭 했을 때 API가 다시 요청되는 현상이 발생했다. Background Refetching 사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터가 최신 상태인지 보장하기 위해서 브라우저가 암묵적으로 해당 캐시에 대한 데이터를 재요청하는 것을 의미한다.캐시를 사용하면서 매번 Background Refetching을 한뒤, 변경 사항이 있다면 UI를 변경한다. refetchOnWindowFocus 옵션true (기본값)falsealwaystrue사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터를 최신 상태로 동기화하기..
html2pdf.js 설치NPMhttps://www.npmjs.com/package/html2pdf.js html2pdf.jsClient-side HTML-to-PDF rendering using pure JS. Latest version: 0.10.2, last published: 15 days ago. Start using html2pdf.js in your project by running `npm i html2pdf.js`. There are 136 other projects in the npm registry using html2pdf.js.www.npmjs.com 2024.07.16 기준 NPM 사이트에 아래와 같은 문구가 있어 0.9.3 버전을 설치했다. 설치한 라이브러리는 그냥 html2p..
