Dev Diary 💻

Intro 안녕하세요. 앵귤러에서 SVG path element에 click 이벤트 함수 실행하는 방법에 대해 알아보도록 하겠습니다. My Case 제 케이스의 경우 특정 SVG 요소를 클릭했을 때 함수를 호출하도록 하고 싶었습니다. 따라서 아래와 같이 구현하였습니다. svg 파일은 다음과 같습니다. ts 파일은 다음과 같습니다. @ViewChild('myPath') myPath: ElementRef; handleClick() { console.log("handleClick!!"); } 하지만, svg 파일의 path 요소를 클릭해도 handleClick 함수가 동작하지 않았습니다. Why? 클릭 이벤트가 발생하지 않는 문제는 조건이 충족하지 않았기 때문입니다. 클릭 이벤트를 처리하기 위해서는 해당 요소..

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..

Intro 안녕하세요. 이번 시간에는 react 리액트에서 토글 버튼을 구현하는 방법에 대해 알아보겠습니다. How to solve the problem 저는 토글 버튼을 구현하기 위해서 useState hook을 사용하였습니다. useState hook is used to initialize with initial value and function which changes its value on click event handler. 우선 처음 토글버튼의 on/off 상태를 나타내는 state를 만들어줍니다. const [isOff, setIsOff] = useState(true); 이후 버튼을 클릭할 때마다, 해당 state를 사용해줍니다. on/off 상태에 따라 css class도 다르게 적용해줄 ..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 legend(범례) padding을 조절하는 방법에 대해 알아보겠습니다. 제 경우 아래의 차트 legend 범례가 기준 좌표에 비해 너무 왼쪽으로 치우쳐져 있어서 left-padding으로 해결하고 싶었습니다. First try 우선 저는apexchart lengend 의 속성에 padding 속성 유무가 있는지 검색해봤습니다. apexChart 내 legend 속성은 아래와 같습니다. padding 관련 속성이 없는 것 같았습니다. legend: { show: true, showForSingleSeries: false, showForNullSeries: true, showForZeroSeries: true, position: 'bottom'..