본문 바로가기

React.js21

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.
CRA Vite로 마이그레이션하기 (TS) The State of JS 2021이 공개되고 Vite의 만족도와 관심도가 압도적인 걸 보고 현재 CRA로 진행중인 프로젝트에 적용해보았습니다. https://2021.stateofjs.com/ko-KR/libraries/build-tools Vite Vite는 공식문서에 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구라고 작성되어 있습니다. 네이티브 ESM을 사용하여 빌드 시간을 단축시켰습니다. Vite는 처음에 전체를 번들링한 후 변경된 부분만 묶어 빌드를 빠르게 해줍니다. CRA 프로젝트에 Vite 적용하기 1. vite 설치 & package.json 수정 yarn add -D vite @vitejs/plugin-react vite-plugin-svgr 우선 vite와.. 2022. 3. 5.
n일 동안 보지 않기 팝업(모달) 구현 ( react-cookie ) 쿠키의 만료기간(expires) 옵션을 활용하여 "n일동안 보지 않기" 기능을 구현해봤습니다. 모달용 쿠키를 만들어 해당 쿠키가 존재하면 모달을 띄우지 않는 방식으로 간단하게 구현했습니다. 리액트에서 쿠키를 쉽게 접근하기 위해 react-cookie 라이브러리를 설치합니다. npm install react-cookie yarn add react-cookie 1. 모달 먼저 모달을 만듭니다. import React from "react"; import styled from "styled-components"; const Container = styled.div` width: 100vw; height: 100vh; display: flex; justify-content: center; align-items:.. 2022. 2. 27.
커버 이미지 업로드 구현하기 ( react-dropzone + react-image-crop ) 커버이미지 1. 노션 2. ko-fi 개인 토이프로젝트를 진행하면서 유저 페이지에 커버 이미지를 넣으면 좋겠다고 생각했습니다. 그래서 커버 이미지 업로드하는 걸 구현해봤습니다! ko-fi의 커버 이미지 업로드 창입니다. 이 형태를 보고, 이전에 사용했던 react-dropzone 라이브러리를 쓰면 좋겠다고 생각했습니다. 사진 업로드 저도 ko-fi처럼 모달을 만들어서 이미지를 업로드하도록 했습니다. 1. 모달 만들기 React Portal을 이용해서 모달을 만들었습니다. 해당 내용은 이번 포스팅의 목적이 아니니까 스킵하도록 하겠습니다. 모달에 이미지를 업로드 시킬 Dropzone 컴포넌트와 사용자가 이미지를 크롭할 수 있는 ImageCrop 컴포넌트를 만들어서 import 시켰습니다. import Rea.. 2022. 2. 18.
React Debounce 검색 기능 요즘 검색 기능을 보면 대부분의 사이트에서 글자 입력마다 결과가 바로바로 보이는 것을 확인할 수 있습니다. 해당 기능을 단순히 input의 onChange마다 API 콜을 하게된다면 비효율적으로 많은 API 콜이 발생하게 됩니다. 특히 API 요청 수의 제한이 있거나 수에 따라 결제가 이루어진다면 해당 방식은 문제가 발생하게 됩니다. 아래는 코엑스를 입력했을 때, 글자 하나하나 API 요청을 하고 있는 모습입니다. Debounce 이를 해결하기 위해선 debounce라는 개념을 알아야합니다! debounce는 연속해서 함수를 호출 했을 때, 마지막 함수만 호출하도록 하는 방법입니다. // 검색어 입력을 받는 state const [searchAddress, setSearchAddress] = .. 2022. 1. 26.
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /package.json 새해를 맞아 맥북을 초기화 시키고 개발환경을 다시 맞췄는데, 이전에는 실행됐던게 아래와 같은 에러가 뜨면서 되지 않았습니다. 검색해보니 Node 버전을 v16으로 낮추면 정상작동하는 것을 알 수 있었습니다. 그래서 저는 16.13.0으로 버전을 수정하니 잘 작동하는 것을 확인할 수 있었습니다~ ref : https://stackoverflow.com/questions/69693907/error-err-package-path-not-exported-package-subpath-lib-tokenize-is-not-d Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in the p.. 2022. 1. 9.
리액트 차트 그리기 - 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.
아직 API가 안나왔어? 나는 전혀 신경안써 - 번역 오늘도 어김없이 Zenn을 눈팅하다가 도움이 됐던 글을 번역해봤습니다. 어떤 프론트엔드의 고민 프로젝트 종료 날짜는 정해져 바로 착수하지 않으면 안된다. 하.지.만. API가 아직 나오지 않았다... 얼른 하고 싶은데 후우.... 프론트엔드가 백엔드의 업무를 기다리지 않고, 애자일하게 개발할 수 있도록 도와주는 툴인 msw.js 를 소개하겠습니다. msw ? msw는 mock service worker의 줄임말로, 간단하게 목업 API를 만들 수 있는 라이브러리입니다. 비슷한 라이브러리로는 JSON Server도 있지만 msw에는 아래와 같은 장점이 있습니다. 단순히 JSON을 전달하는 게 아닌, 로직도 작성할 수가 있다. Express처럼 Mock API를 깔끔하게 작성할 수 있습니다. REST API.. 2021. 11. 20.
react-spring 공식문서 겉핥기 react-spring react-spring 은 애니메이션 라이브러리이고, 대부분의 UI 애니메이션을 지원합니다. 해당 라이브러리는 animated 와 react-motion 라이브러리에 영감을 받아 제작되었다고 합니다. animated의 강력한 퍼포먼스라는 장점과 react-motion의 간단한 사용법의 장점이 합쳐져 제작되었습니다. 왜 duration이 아니라 spring인지? 스프링(용수철)은 정의된 곡선이나 지정된 지속시간으로 설정되지 않는다. 우리는 애니메이션이 곡선과 시간으로 이루어진다고 생각하지만, 현실에서 그렇게 움직이는 것은 없다. 화면상의 요소들을 자연스럽게 움직이려고 할 때 우리가 직면하게 되는 대부분을 Struggle 하게 될 것이다. 우리는 시간 기반 애니메이션에 너무 익숙해서,.. 2021. 10. 25.

티스토리툴바