React

아래는 간단하게 react-query를 사용할려고 만든것이다.react-query 사용해보기npx create-react-app my-app cd my-app npm install react-query 위의 코드를 따라 쳐서 react를 셋팅해준다. 해당 폴더의 이름은 본인이 마음에 드는 이름으로 바꿔주면 된다.오류없이 실행되는 코드src/index.jssrc폴더에 index.js에 아래와 같이 코드를 넣어준다. 주석으로 devtools로 되어 있는 것은 devtools로 react-query가 어떻게 돌아가는지 볼 수 있다. 나는 react-query를 맛보기 위해 간단히 만들 것이므로, devtools는 주석처리해준다.import React from "react"; import ReactDOM fro..

velog에서 글을 보다가, until이라는 블로그를 보았다. 훑어보는데, 해당 블로그의 검색 기능에 ctrl + k를 누르면 검색 기능이 모달처럼 펼쳐지는 것을 보고 해당 기능을 검색하게 되었다. 그러다가 알게 된 사실을 글로 작성하고자 한다.단축키 라이브러리 사용하기react에서 키 이벤트를 사용해서 구현해도 되는데, 일반적으로 단축키 라이브러리가 잘 구현되어 있기 때문에 그것을 많이 활용한다. 그래서 찾아보니 일반적으로 두 개의 라이브러리가 활성화가 많이 되어 있었다. 위의 사진은 npm trends에 들어가서 두 라이브러리를 비교한 사진이다. 첫 번째로 version과 updated를 비교해보았다. 이슈가 적음에도 react-hotkeys-hook이 버전이 높고 업데이트를 자주 한 흔적이 보였다...

하나의 스크립트로 두 개의 프로세스를 돌릴 수 있는 방법은 여러가지 있는데, 그 중 두 가지를 소개하고자 한다.1. concurrently 사용하기npm install concurrently --save위의 명령어를 쳐서 concurrently가 package.json에 설치되었는지 확인해준다. 그리고 나서 package.json에 아래와 같이 수정해준다."start": "concurrently \\"supervisor app.js\\" \\"supervisor mqtt/mqttClient.js\\""여기서 스크립트에 지정한 이름과 겹친다면 수정해주고, 위에 넣은 내용은 내 기준으로 넣은 것이기에 수정해준다. 본인이 돌리고 싶은 파일로 수정해준다.npm run start위의 명령어를 돌렸을 때 잘 돌아가..

우연히 글을 보다가 트리 구조의 메뉴를 만드는 것을 보고 나중에 참고할 수 있을 것 같아서 글을 쓴다.1. react-arborist 맛보기1) 설치하기npm install react-arborist2) 데이터 셋팅export const data = [ { id: "1", name: "public", children: [{ id: "c1-1", name: "index.html" }] }, { id: "2", name: "src", children: [ { id: "c2-1", name: "App.js" }, { id: "c2-2", name: "index.js" }, { id: "c2-3", name: "styles.css" } ] ..

react로 이미지 슬라이드를 쉽게 구현하고자 한다.✍🏻 기술스택 : React, tailwind.css나의 경우 두가지 경우로 구현하였다.1. animation을 이용하여 구현하기작동 방식보여주고 싶은 카드들의 배열을 만들고, 이를 복제하여 나타낸 뒤 번갈아 가며 보여주는 방식이다. 내가 만들고자 하는 컴포넌트들의 컨테이너를 배너라고 칭한다.[원본 배너]- 원본 배너와 복제 배너를 한 방향으로 이동시켜주는 애니메이션을 실행시킨다-  원본 배너가 배너 너비만큼 이동하면, 복제 배너의 뒤로 이동시킨다.-  원본 배너는 다시 배너 너비만큼 이동한다.[복제 배너]-  복제배너는 일정 방향으로 배너크기의 2배만큼 이동시켜주면 된다.-  사용자는 마치 하나의 배너가 무한으로 렌더링되는 것처럼 보인다..-  사실..

Toast토스트 메시지란 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소이다. 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 사라진다.→ 이를 사용하게 된 계기는 alert창을 쓰다가 단조로워서 바꿀까하다가 우연히 보게 참고 사이트 글을 보게 되어 사용하게 되면서 글을 쓰게 되었다.react-hot-toast 사용하기1) 패키지 설치하기npm i react-hot-toast2) 앱에 toaster 넣기import toast, { Toaster } from 'react-hot-toast';해당 패키지를 설치했으니, 이를 가져온다.const App = () => { return ( Make me a toast );};toast를 쓰기 위해서 Toaster를 앱에 맨 위..

사람은 역시 공부해야 하는 동물이구나 느끼면서 글을 작성하고자 한다.styled-resetstyled-reset은 브라우저의 기본 스타일을 리셋시켜주는 node.js 패키지이다. 내가 css를 적용할려고 했는데 브라우저에 기본적으로 적용되어 있는 스타일 때문에 적용이 안 된 경우를 많이 보았을 것이다. 그 때 reset을 시켜줘야 하는데, 구글에 쳐봤을 때 리셋시켜주는 코드를 쉽게 구할 수 있다.그러나, react에서 reset시켜주는 라이브러리가 존재한다. 이를 쓰면 원하는 스타일링을 하기 앞서 기본 세팅을 리셋해주는 것이 좋다. 또한 styled-reset을 시켜주는 가장 큰 이유는 크로스 브라우징 때문이다. ✅ 브라우저마다 HTML 시맨틱 태그에 대한 기본값의 차이를 없애주기 위함이다.styled-..

설치하기npm install react-modal위와 같이 설치했는데 오류가 걸리는 경우가 존재한다. 내가 그랬기 때문이다.npm i --save-dev @types/react-modal타입 정의 라이브러리를 사용하면 오류가 나지 않는다.import하기import Modal from 'react-modal';import를 해주고 modal을 사용해주면 된다.useState 셋팅해주기나의 경우에 button을 클릭했을 때 modal을 보여주게 하고 싶기에 변수를 button과 modal을 연결해놓으면 된다.import React, { useState } from 'react';import Modal from 'react-modal';function App() { const [modalIsOpen, set..