Dev Diary 💻

Intro 안녕하세요. 저는 recharts chart 차트 라이브러리를 사용하여 차트의 넓이를 화면 100%에 맞춰서 뿌려주고 싶었는데요. width 값을 100%로 설정하자 다음의 에러가 발생했습니다. TS2322: Type 'string' is not assignable to type 'number'. import {NextPage} from "next"; import React from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; const data = [ { name: 'Jan', uv: 4000, pv: 2400, amt: 2400, }, { name: 'Feb'..

Intro 안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) How to install Zustand Zustand 설치방법은 아래와 같습니다. 각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 1. npm npm install zustand 2. yarn yarn add zustand Zustand Simple Example 간단한 예제로 카운터를 만들어 보겠습니다. zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다. import create fro..

Intro 안녕하세요. 이번 시간에는 React Zustand 라이브러리에 대해 알아보도록 하겠습니다. Zustand 리액트를 공부하신 분이라면, 상태 (State)라는 개념에 대해 들어보셨을 겁니다. 간단히 말하자면 React Zustand는 리액트에서 사용가능한 상태 관리 라이브러리입니다. 리액트 상태 관리 라이브러리는 Redux, MobX 등이 존재하지만 Zustand는 위 라이브러에 비해 더 가볍고 간단하게 활용할 수 있습니다. Zustand Features Zustand는 State를 전역으로 관리하며 컴포넌트 간에 공유되는 State Container를 제공합니다. 이 Container 는 리액트 컴포넌트에서 직접 사용할 수 있으며 useStore()을 통해 상태를 가져오고 (get), 업데이..

Intro 안녕하세요. 리액트에서 innerHtml을 표시하는 방법에 대해 알아보겠습니다. 최근에 스마트에디터 관련한 작업을 진행하고 있었습니다. 에디터에 저장된 내용이 그대로 html tag로 저장되고, 저장된 html tag를 그대로 화면에 표시해야 했죠. 저장된 이 innerHtml를 어떻게 표시해야 할까요? 함께 알아봅시다 :) How to solve the problem React에서 innerHtml를 표시하는 위해서는 아래 코드와 같이 dangerouslySetInnerHTML를 활용할 수 있습니다. import React from 'react'; function MyComponent() { const sampleHtml = 'Hello world! '; return ( ); } 여기서 da..

Intro 안녕하세요. 이번 시간에는 리액트에서 로딩바 표시 및 로딩 속도를 조절하는 방법에 대해 알아보겠습니다. How to solve the problem 다음의 List 컴포넌트가 있다고 가정해봅시다. handleFilterClick함수를 클릭 할때마다 필터기능이 작동되는 로직입니다. 필터를 누를 때마다 필터가 된듯한 동작을 표현하기 위해 로딩바를 추가보도록 하겠습니다. const List: NextPage = () => { const {dataList, setDataList} = useLoginStore(); const [totalCtn, setTotalCtn] = useState(); const [filterStatus, setFilterStatus] = useState("ALL"); const..

Intro 안녕하세요. 이번 시간에는 리액트에서 array 데이터의 마지막 자식 요소에 border bottom line 추가하는 방법에 대해 알아보겠습니다. How to solve the problem 1. map 함수를 사용하여 데이터 배열의 길이를 구해줍니다. const arrayLength = array.length; 2. map 함수에서 현재 데이터 요소의 인덱스 값을 받아 옵니다. array.map((item, index) => { //... }) 3. 인덱스 값이 배열 길이보다 1 작은 경우에는 border bottom을 추가합니다 array.map((item, index) => { const isLastItem = index === arrayLength - 1; return ( {item}..

Intro 안녕하세요. 이번 시간에는 react 에서 useRef 사용시 undefined / null 오류 발생 원인과 해결 방법에 대해 알아보도록 하겠습니다. 우선 제가 useRef를 사용한 코드 예제는 아래와 같습니다. clientHeight를 조절하기 위해 useRef를 사용하여 div tag에 적용했습니다. const divRef = useRef(null); const [handlePosition, setHandlePosition] = useState('300vh'); useEffect(() => { setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`); }, []); return ( {/* some content */} ); 하지..

Intro 안녕하세요. 이번 시간에는 리액트 apexcharts x축 값을 특정 값으로 시작하도록 설정하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem 제 경우에는 새벽 5시라는 특정 값으로 x축을 시작하고 싶었습니다. 따라서 저는 apxechart xaxis의 min 속성을 사용해 제가 원하는 시간을 아래와 같이 설정해주었습니다. x축 값은 상황에 따라 다를테니 년도/달/일 등이 필요하다면 커스텀하여 사용하면 됩니다. xaxis: { min: new Date(new Date().setHours(5, 0, 0, 0)).getTime(), } 아래는 전체 코드입니다. var options = { chart: { type: 'line' }, series: [{ name: ..

Intro 안녕하세요. 이번시간에는 리액트에서 툴팁을 구현하는 방법, 툴팁 외부 영역 클릭 시 툴팁을 숨기는 방법에 대해 알아보겠습니다. Let's look at detail 아래와 같은 부모 컴포넌트가 있다고 가정해봅시다. 3개의 툴팁 컴포넌트가 있고, 툴팁 컴포넌트에는 각기 다른 툴팁 설명을 props로 전달하고 있습니다. const SomeComponent: NextPage = props => { return ( 뉴스 쇼핑 지도 ); } export default SomeComponent; 툴팁 컴포넌트는 아래와 같습니다. 하지만 현재 구현되어 있는 툴팁 컴포넌트는 문제가 있었습니다, 선택된 툴팁이 있을 때 다른 툴팁이 선택되어도, 동시에 툴팁 desc가 표출됩니다. 또한 외부 영역을 클릭 할때 여..

Intro 안녕하세요. 이번시간에는 리액트에서 apexcharts 를 이용하여 커스텀 툴팁을 만드는 방법에 대해 알아보도록 하겠습니다. How to solve the problem apexcharts 를 사용한다는 가정하에, 아래의 series 데이터와 chart option이 있다고 생각해봅시다. const series: any = [ { name: 'EBAY', data: [ ['2023-03-20T07:00:22.625Z', '123124.82'], ['2023-03-20T06:00:20.103Z', '52353.83'], ['2023-03-20T05:00:16.960Z', '98943.91'], ['2023-03-20T04:00:15.051Z', '796756.65'], ['2023-03-20T0..