리액트7 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 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. 리액트에서 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. 리액트에서 .env 사용하기 리액트에서 .env 사용하기 DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 환경 변수 파일을 외부에 만들어 소스코드 내에 하드코딩 하지 않고 사용하는 방법으로 .env 파일을 생성하는 것이다. ( 터미널로 직접 환경변수를 설정해줘도 된다. ) 리액트에서는 특이하게도 REACT_APP 으로 시작되어야 인식을 한다. # .env REACT_APP_FIREBASE_API_KEY = key REACT_APP_FIREBASE_AUTH_DOMAIN = auth_domain해당 환경변수를 사용하는 방법은 아래와 같다. console.log(process.env.REACT_APP_FIREBASE_API_KEY) 2021. 8. 20. React 특정 DOM으로 스크롤 이동시키기 ref 리액트에서 ref는 DOM에 직접 접근할 때 사용합니다. 저는 특정 div태그들에 직접 접근해서 해당 위치로 스크롤을 이동시키기 위해, 이 ref를 사용했습니다. import React, { useRef } from 'react'; function HomePage() { ... const homeRef = useRef(null); ... return ( ... ) } 이 처럼 div태그에 homeRef를 지정해주었습니다. 이제 클릭 이벤트를 생성해서, 해당 ref 위치로 가게 설정해보겠습니다. function HomePage() { ... const homeRef = useRef(null); const onHomeClick = () => { homeRef.current?.scrollIntoView.. 2021. 8. 19. 이전 1 다음
