react12 drag & drop 파일 커스텀 훅 제작 블로그를 시작하고 2번째로 올렸던 react-dropzone 라이브러리의 useDropzone hook을 입맛에 맞게 직접 구현해봤다. https://zih0.tistory.com/2 React-dropzone react-dropzone은 input을 감싼 태그(div)에 getRootProps()를 지정해준다. div를 클릭했는데 어떻게 파일을 업로드하지? 라는 의문에 깃헙 코드를 찾아봤고 window.showOpenFilePicker() 라는 함수를 이용하여 구현하고 있었다. 감싼 태그(div)에 click, keydown 이벤트 발생 시 해당 함수를 실행시켜 파일 업로드를 받는다. 해당코드 Difference 나는 위의 과정을 기존 html의 input 태그와 label 태그의 for-id 속성을 .. 2022. 5. 22. React Debounce 검색 기능 요즘 검색 기능을 보면 대부분의 사이트에서 글자 입력마다 결과가 바로바로 보이는 것을 확인할 수 있습니다. 해당 기능을 단순히 input의 onChange마다 API 콜을 하게된다면 비효율적으로 많은 API 콜이 발생하게 됩니다. 특히 API 요청 수의 제한이 있거나 수에 따라 결제가 이루어진다면 해당 방식은 문제가 발생하게 됩니다. 아래는 코엑스를 입력했을 때, 글자 하나하나 API 요청을 하고 있는 모습입니다. Debounce 이를 해결하기 위해선 debounce라는 개념을 알아야합니다! debounce는 연속해서 함수를 호출 했을 때, 마지막 함수만 호출하도록 하는 방법입니다. // 검색어 입력을 받는 state const [searchAddress, setSearchAddress] = .. 2022. 1. 26. 리액트 차트 그리기 - apexcharts 노마드코더 강의를 보고 ApexCharts.js를 정리하는 글입니다. https://apexcharts.com ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. apexcharts.com import ApexChart from 'react-apexcharts'; 일단 react-apexcharts 라이브러리를 import합니다. 차트의 타입으로는 line, area, colum.. 2021. 12. 20. react-spring 공식문서 겉핥기 react-spring react-spring 은 애니메이션 라이브러리이고, 대부분의 UI 애니메이션을 지원합니다. 해당 라이브러리는 animated 와 react-motion 라이브러리에 영감을 받아 제작되었다고 합니다. animated의 강력한 퍼포먼스라는 장점과 react-motion의 간단한 사용법의 장점이 합쳐져 제작되었습니다. 왜 duration이 아니라 spring인지? 스프링(용수철)은 정의된 곡선이나 지정된 지속시간으로 설정되지 않는다. 우리는 애니메이션이 곡선과 시간으로 이루어진다고 생각하지만, 현실에서 그렇게 움직이는 것은 없다. 화면상의 요소들을 자연스럽게 움직이려고 할 때 우리가 직면하게 되는 대부분을 Struggle 하게 될 것이다. 우리는 시간 기반 애니메이션에 너무 익숙해서,.. 2021. 10. 25. React SSR 저는 React를 입문했을 때부터, Next.js가 존재했고 Next.js가 SSR 방식을 지원한다는 걸 들어서 SSR를 쓰려면 Next.js를 써야겠다고만 생각했습니다. 하지만 얼마 전에 한 블로그에서 직접 express.js를 활용하여 WAS를 만들어 SSR 방식을 적용한 글을 봤습니다. 그 글을 읽고, SSR에 대해 좀 더 자세하게 알아보고 싶었고, Next.js는 어떻게 SSR을 구현했는지 찾아보았습니다. SSR (Server Side Rendering) 먼저 SSR의 개념에 대해 다시 상기시키고 글을 작성하고자 합니다. SSR은 서버에서 페이지를 구성한 다음 사용자에게 보여주는 방식입니다. 서버에서 구성하기 때문에 CSR보다 페이지 전환 시, UX 측면에서 단점이 있지만 콘텐츠 구성이 완료되는 .. 2021. 10. 23. Jotai - 7GUIs 튜토리얼 - 2 Task 4: Timer Atom 정의 //atoms.ts import { atom } from "jotai"; const baseDurationAtom = atom(15); const elapsedTimeAtom = atom(0); const timerAtom = atom(null); // 이전 예제와의 다른 점은 action을 파마리터로 받습니다. // action에 따라 분기처리를 한 모습입니다. const startTimerAtom = atom(null, (get, set, action: "start" | "stop") => { if (action === "start") { if (get(timerAtom) !== null) { // 타이머가 이미 시작 되었을 경우 return return; } .. 2021. 10. 16. Jotai - 7GUIS 튜토리얼 - 1 Jotai를 만든 다이시 카토상의 블로그에서 튜토리얼을 보고, 실습해볼 겸 작성하는 회고입니다. 다이시상은 Xstate(유한상태기계)의 7GUIS Tasks 튜토리얼을 보고 Jotai로도 7GUIS Task 튜토리얼을 만들어야겠다고 생각했다고 합니다. Jotai를 배울 때 좋은 자료가 될 것이며 7가지 튜토리얼을 진행하면 기본은 물론 응용까지 가능 할 것이라고 생각됩니다. 7GUIS Tasks에 대한 설명 : https://eugenkiss.github.io/7guis/tasks 이번 글에선 튜토리얼 1, 2, 3에 대한 글을 작성했습니다. Task1 : Counter 아마 상태관리 라이브러리를 접하신 분이라면 공식문서에서 봤을 카운터 입니다. Atom 정의 count 정보를 담을 baseCountAto.. 2021. 10. 11. Jotai - 리액트 상태 관리 라이브러리 jotai는 re-render를 최소화하기를 원해서 나오게 된 라이브러리고, Recoil의 아토믹 모델에 영감을 받아 나타났습니다. 아톰 의존성에 기반하여 렌더가 최적화 되고 이것은 리렌더 이슈를 해결할 수 있게 도와줍니다. Jotai는 미니멀 API를 지향하고, TypeScript 기반입니다. React의 useState처럼 간편한 Hook으로 사용할 수 있습니다. 모든 상태는 전역적으로 접근가능하고, 쓸모 없는 리렌더는 일어나지 않습니다. 기본 사용 방법 const countAtom = atom(0) const countryAtom = atom('Japan') Recoil에서는 아래와 같이 문자열 key가 존재해야하지만, jotai는 key가 따로 존재하지 않습니다. const countAtom = .. 2021. 10. 11. 리액트에서 tailwindcss 사용하기. 그런데 styled-components를 곁들인. 저는 리액트에서 주로 styled-components를 이용해서 스타일링을 하고 있습니다. 스타일링에 항상 자신이 없어서 이번에 tailwindcss를 써봤는데, 반응형도 처리하기 쉽고 생각보다 편리하더군요. 그래서 styled-components + tailwindcss 를 사용한 세팅 방법을 기록하기 위해 작성합니다. 저 두가지에 추가적으로 twin.macro 라는 라이브러리를 사용했는데요. 이 라이브러리는 styled-components 안에서 tailwindcss를 작성할 수 있게 도와줍니다. 짱짱 설치 tailwindcss 설치 yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 craco 설치 y.. 2021. 8. 20. 이전 1 2 다음
