728x90
반응형

React 6

[에러해결] You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)

✔️ 필요성 react-native로 한동안 개발하다가 다시 react 프로젝트를 만들려고 하니 다음과 같은 에러가 발생했다 npx create-react-app project-name --template typescript You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remo..

useState의 초기값을 내가 받아온 props값으로 설정하기

필요성 Alarm이라는 컴포넌트를 만드는데, Alarm의 props 값을 받아서 Alarm 내의 state 초기값으로 설정하고 싶다. 이렇게 하면 될까? // pushAlarmStatus : props const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); const Alarm = ({ pushAlarmStatus }: Props) => { const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); console.log(alarmName, 'status:', alarmStatus); console.log(alarmName, 'status:', pushAlarmStatus); return ..

tailwindCSS 배경이미지(background-image) 없애기

tailwindCSS에서 배경이미지 사용하기 https://tailwindcss.com/docs/background-image#background-images Background Image - Tailwind CSS Utilities for controlling an element's background image. tailwindcss.com div 태그에서 내가 원하는 이미지로 배경을 만들기 위해서는 tailwindCSS 문서를 읽고 진행하면 된다~ group-hover로 배경이미지 없애기 다른 element와 배경을 group으로 묶은 뒤 hover 효과로 배경이미지를 없애고 다른 요소가 나타나게 하고 싶은데, 이 배경이미지가 안 없어진다. CSS를 뜯어보니, 배경이미지가 !important로 박혀..

fusionCharts에서 rounded-bar 구현하기

fusionCharts에는 도데체 왜 rounded-bar 옵션이 없나 https://www.fusioncharts.com/dev/chart-attributes/column2d Chart Attributes | FusionCharts www.fusioncharts.com 옵션이 정말 많은 fusionCharts에 정말 놀랍게도 bar그래프의 모서리를 둥글게 만들어주는 rounded-bar 옵션이 없다. 매우 놀랍고, 매우 스트레스 받는다. 하지만 fusionCharts는 chart-js와 달리 그래프 구성 요소 하나하나가 분리되기 때문에 개발자 모드를 활용해서 개별 CSS를 활용할 수 있다. (chart-js는 차트 element가 통으로 들어간다.) element 찾기 개발자도구에서 select ele..

타이밍 애니메이션 Typewriter-effect 예제

타이핑 애니메이션 화면에서 글자를 보여줘야 하는데 타이핑되는 애니메이션이 필요한 경우가 종종 있다. 이 때 쓰기 좋은 라이브러리가 typewriter-effect이다. 아래 npm에 예제도 굉장히 설명이 잘 되어 있어서 쓰기가 쉽다. https://www.npmjs.com/package/typewriter-effect typewriter-effect [![CircleCI](https://circleci.com/gh/tameemsafi/typewriterjs.svg?style=svg)](https://circleci.com/gh/tameemsafi/typewriterjs) www.npmjs.com 기본 예제 글씨가 적힌 다음에 잠깐 쉬거나, 다시 글자를 지우거나 하는 효과를 chain 형태로 엮어서 사용할..

React fullpage 에러 해결하기

Fullpage 란? 요즈음, 스크롤을 한 번 슥슥 내릴 때마다 화면 전체가 슬라이드처럼 내려가는 효과를 입힌 웹사이트를 여러 곳에서 발견할 수 있다. 최근에 개인적으로 가장 인상깊었던 사이트는 티맵모빌리티 웹사이트인데, 동영상과 fullpage를 적절히 잘 사용했다고 생각했다. 리액트 fullpage 에러 모듈 '@fullpage/react-fullpage'에 대한 선언 파일을 찾을 수 없습니다. '[프로젝트명]/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/fullpage__react-fullpage'을(를) 시도하거나, 'd..

728x90
반응형