Dev Diary 💻

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

Intro 안녕하세요. 이번 시간에는 React scroll 스크롤을 컨트롤하는 방법에 대해 알아보겠습니다. My case 저의 경우 컴포넌트 화면이 다음과 같이 구성되어 있었습니다. 게시글 리스트가 있고, 특정 게시글을 클릭하는 순간 특정 게시글에 대한 내용이 보이고, 아래로 다른 게시글로 이동할 수 있는 최신 게시글 목록이 있습니다. 최신 게시글 목록 중 하나를 클릭하면, 본문 내용이 변하는 형식입니다. How to solve the problem 1. 대상 div에 ref를 활용하기 위해 아래의 코드를 추가합니다. const postDetailRef = useRef(null); 2. 정의한 ref 값을 div tag에 할당해줍니다. {postDetail && ( {postDetail.title} {..

Intro 안녕하세요. 리액트에서 DatePicker로 Date 객체를 다루던 도중 해당 오류가 발생했습니다. RangeError: Invalid time value 로컬 PC 크롬 환경에서 테스트 했을 때는 나지 않았던 오류였고, IOS 웹앱 테스트를 하던 도중 발견하게 되었습니다. 바로 구글링을 해봤습니다. 참고로 저는 ex) 2023.03.01 형태의 스트링 문자를 new Date로 변환했습니다. Why? 크롬은 dot(.)형식을 포함하는 문자열을 new Date로 바꿀 수 있지만, 사파리의 경우 date 변환 시 format에 dot(.)를 포함할 경우 에러를 발생시킨다고 합니다. How to solve the problem 해당 에러를 해결할 수 있는 방법은 여러 가지가 있는데요. 저는 아래의 ..

Intro 안녕하세요. 이번 시간에는 리액트에서 종종 나타나는 오류인 Module not found: Can't resolve 에 대해 알아보려고 합니다. Module not found: Can't resolve "라이브러리명" 운영 이슈가 접수되어 해당 이슈를 해결하기 위해 project 를 열었는데요, 갑자기 run 타임에 위와 같은 오류가 발생했습니다. 따로 추가 설치한 라이브러리도 없었는데 왜 오류가 나는지 모르겠더라고요. 터미널에 나타난 해당 라이브러리를 설치해도 똑같은 에러가 발생했습니다. 버전을 바꾸고, 해당 라이브러리를 다시 설치해도 계속 같은 오류가 발생했구요. 그래서 최후의 수단으로 다음의 방법을 사용했습니다! How to solve 1. 아래 파일 및 폴더를 삭제합니다. - yarn-..

Intro 안녕하세요. react 에서 xlsx 라이브러리를 사용하여 엑셀 다운로드 가능을 구현했는데요, 웹앱이여서 PC 브라우저에서만 테스트 해보고, 실제 ios / android 에서는 테스를 해보지 못했습니다. 당연히 PC 브라우저에서 엑셀 파일이 잘 다운받아지고, 잘 열러서 동작이 잘 될거라고 생각했어요. 하지만, 실제 모바일 기기에서 테스트 해보니 엑셀 파일 다운은 되는데, 열리지가 않더라고요. 원인이 무엇일까 고민하며 구글링을 해봤습니다. How to solve the problem 기존에 저는 아래와 같이 확장자를 xlsx을 사용였는데요, XLSX.writeFile (wb,"sample.xlsx "); 이렇게 확장자를 xls로 바꾸고, 모바일에서 테스트 해보니 잘 열리더라고요. XLSX.wr..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 yaxis y축을 0부터 시작하는 방법에 대해 알아보겠습니다. apexcharts를 이용해서 차트를 사용하여 작업하고 있었는데요, 차트의 y축값을 0으로 고정하고 싶은데, 계속 숫자 범위가 달라지면서 값이 변하더라고요. 그래서 구글링을 해봤습니다. How to solve the problem 아래와 같이 yaxis 속성에서 min을 0을 적용하면 y축 값이 0으로 고정되어 세팅됩니다. yaxis: { tickAmount: 3.5, min: 0, forceNiceScale: true, labels: { show: true, rotate: 0, style: { colors: '#828282', fontSize: '11rem', fontFamily..

Intro 안녕하세요. 이번 시간에는 apexcharts 에서 yaxis label 의 소수점 처리방법에 대해 알아보겠습니다. How to solve the problem 아래와 같이 yaxis > labels > formatter 를 적용하고, toFixed() 메소드를 이용하여 값을 처리할 수 있습니다. yaxis: { labels: { formatter(value) { return value.toFixed(0); }, }, },

Intro 안녕하세요. 이번 시간에는 React에서 기존 데이터에서 더보기 버튼 클릭 후 새로 불러온 데이터 합치는 방법에 대해 알아보겠습니다. 공지사항 목록 조회 기능을 구현하던 도중 리스트가 많아질 수 있을 것 같아 더보기 버튼 UI를 추가하기로 결정했습니다. 참고로 API는 스프링부트의 Pageable 를 사용했습니다. 즉 기존 데이터에서 더보기 버튼 UI를 클릭할 때마다 page 가 +1 씩 증가하면서 새로 불러온 데이터를 화면에 보여줘야 했습니다. How to implement 아래와 같이 NoticeList 컴포넌트가 있다고 가정해봅시다. fetchNotice라는 함수를 불러올 때마다, 기존 데이터에 새로 불려진 데이터를 추가해줘야 합니다. 하지만 위 코드에서는 새로 불려진 데이터만을 setN..

Intro 안녕하세요. 이번 시간에는 Moment.js 라이브러리에서 AM/PM가 아닌 오전/오후로 표시하는 방법에 대해 알아보도록 하겠습니다. 참고로, Moment.js는 날짜 및 시간 데이터를 쉽게 다룰 수 있도록 도와주는 라이브러리 중 하나입니다. How to solve the problem 제 경우, 날짜 데이터를 "오후 10:00" 로 표시해야 했습니다. 하지만 "10:00 PM"으로 나오더군요. 구글링을 해본 결과 다음의 해결책을 찾았습니다. 바로 moment/local/ko 를 임포트 해주는 것! import 'moment/locale/ko' 위 코드를 임포트 해준 이후, 화면을 살펴보니 10:00 PM 이 아닌 오후 10:00 로 잘 표시가 되고 있었습니다.