ApexCharts에 기본적으로 차트 이미지 다운로드 버튼이 있는데 별도 버튼으로 분리하려고 한다. ApexChart 설치하기공식 홈페이지 : https://apexcharts.com/docs/installation/ Installation & Getting Started – ApexCharts.jsIntegrating ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready to be used. Check out all the options of ApexChartswww.apexcharts.com apexcharts와 react-apexcharts를 설치해준다.npm install apexcharts reac..
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..
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..
개발환경React 18Typescript 4Webpack 5styled-componentsSVGR 원래는 React에서는 SVG를 사용할 때 아래와 같은 방법을 주로 사용했다.import { ReactComponent as Logo } from "assets/images/logo.svg"; 그러나 Webpack5, Typescript 등 새로운 환경에서는 기존 방법이 잘 작동하지 않아 SVGR 라이브러리를 설치하여 사용하고 있다. 그러면서 아래와 같은 문법을 주로 사용하여 SVG를 호출하고 있었다.import CancelSvg from "assets/images/cancel.svg"; 위와 같은 방법으로 잘 사용하고 있었으나 체트박스 컴포넌트를 만들면서 background-image에 url을 넣는 ..
assets 폴더에서 svg 파일들을 한번에 import 하고 싶어서 index.ts 파일을 생성하여 export를 하려고 한다.현재 svgr 라이브러리를 시용중인데 라이브러리를 사용할때와 아닐때의 방법에 차이가 있다. 일반적인 방법// src/assets/images/index.tsexport { ReactComponent as Area } from "./area.svg";export { ReactComponent as Circle } from "./circle.svg";export { ReactComponent as Draw } from "./draw.svg";export { ReactComponent as Line } from "./line.svg";export { ReactComponent as ..
package.json 수정하기 1. Window set 명령어를 사용한다. // package.json ... "scripts": { "start": "set PORT=3001 && react-scripts start", } ... 2. Mac, Linux export 명령어를 사용한다. // package.json ... "scripts": { "start": "export PORT=3001 && react-scripts start", } ...
