Apache Echarts 라이브러리를 사용해서 3개의 꺾은선 그래프를 만들었다. 라벨을 On/Off 하는 기능을 만들고 있었는데 하단의 가입, 탈퇴 그래프는 symbol 없이 선만을 표출하여 표현하고 싶었지만 라벨을 적용하는 순간 심볼이 없으면 라벨이 표출되지 않았다. 원래는 탈퇴도 심볼이 없어야 하지만 테스트상 추가하니 라벨이 보였다. 실패1) series 속성에 z(z-index), zlevel을 추가해 봤지만 모두 실패했다. // z(z-index), zlevel 모두 실패했다. series: [ { name: "가입", type: "line", smooth: false, showSymbol: false, ..
- 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/ ..
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..
