본문 바로가기

JavaScript/React19

[React] 로딩바 구현 스피너 종류: https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io useState를 이용하여 추가하기 버튼을 누르면 서버에서 응답이 오기까지 로딩바가 돌아간다 2023. 12. 18.
[React] 간단한 알림창 모달 CSS (styled-components 라이브러리 이용) const AlertBox = styled.div` position: absolute; right: 0%; padding: 0.5rem; border-radius: 5px; font-size: 14px; color: #d1d1d1; background-color: #0c0c0c50; // 애니메이션 transition: all 0.2s linear; opacity: 0; &.open { opacity: 1; } `; const AlertBox2 = styled.div` position: absolute; top: 22%; right: 25%; border-radius: 5px; width: 0; height: 0; border-bottom: 0... 2023. 12. 18.
[React] npm xlsx 사용법 공식문서: https://www.npmjs.com/package/xlsx 참고가 된 글: https://voyage-dev.tistory.com/165 const XLSX_down = (data) => { const List_data = data; // [{A:'',B:'',c:'',d:''}] 이렇게 생긴 데이터 // 칼럼 이름 바꾸기 const transformedData = List_data.map((item) => ({ 이름: item.A, 직업: item.B, 나이: item.C, 비고: item.D, })); const excelHandler = { getExcelFileName: () => { return "유저정보.xlsx"; // 파일 이름 }, getSheetName: () => { r.. 2023. 12. 18.
[React] public 폴더 안에 image 안불러지는 현상 src폴더 안에 이미지는 require을 쓰거나 import 해서 불러오는 수 밖에 없다. src폴더 속 이미지를 직접 import 하여 콘솔에 출력해보면, 파일 경로뒤에 숫자+영어가 붙는걸 볼 수 있는데, 이는 프로젝트를 재시작 할 때마다 바뀌기 때문에 require나 import를 쓰는 것이다. 반면, public 폴더는 서버와 통신이 가능하기때문에 public에 image폴더를 만들면 상대경로를 그대로 쓸 수 있는데, 분명 맞는 경로일텐데 image가 안불러지는 현상이 있었다.. 설마설마 하면서 확인해 본 결과 이미지 파일의 이름이 한국어면 안된다 .. // 안됨 // 됨 허무.. 2023. 12. 13.