반응형

Javascript 110

[NEXTJS] ANTD SyntaxError: Unexpected token 'export'

📱테스트 환경"next": "15.1.3","react": "^19.0.0","react-dom": "^19.0.0",해당 에러만 잡고 잔다는게 .. 벌써 새벽 2시 36분 ..ChahGPT 도 자꾸 거짓말만 하고 해결못해서 진짜너무 피곤하고 화나는 상황에 열심히 구글링을 통해역시 공식홈페이지만한게 없다 징짜 .. NextJs 14.0.3 issue · Issue #46053 · ant-design/ant-designReproduction link https://ibb.co/tHKtCc7 Steps to reproduce just update nextjs to latest version and you will see there's an issue with antd config provider What ..

Javascript/Next 2025.01.01

[React] Antd DatePicker 한글 패치 하는 방법

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"Antd DatePicker 를 사용하면 영어로 나온다.이를 위해서 locale 을 한글로 바꿔주는 작업을 해야하는데문서에 나와있는대로 바꾸면 반쪽짜리가 되는 이슈가 있을 것 이다.import {ConfigProvider} from "antd";import ko_KR from "antd/lib/locale/ko_KR"; 이 뿐만 아니라 dayjs locale 도 한글로 바꿔줘야한다.다른 블로그나 다른 곳에서 보면 moment 를 쓰라는 곳도 있지만왠만하면 dayjs 를 사용할 수 있도록 하자.이유는 여기서 보면 된다. [React] Moment 대신 Day.js📱테스트 환경"react": "18.3.0","react-..

Javascript/React 2024.12.20

[React] Drag&Drop 을 위한 React-complex-tree

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"드래그 앤 드랍 기능을 만들기 위해서여러 라이브러리를 살펴봤지만 폴더구조까지 가진 라이브러리가딱히 보이지도않았고 맘에 드는게 없었다.그러다가 react-complex-tree 를 딱 봤는데 react-complex-treeUnopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop. Latest version: 2.4.6, last published: a month ago. Start using react-complex-tree in your project by running `npm i react-complex-tree`. There are 2..

Javascript/React 2024.12.19

[Javascript] 숫자에 쉼표(,) 쉽게 찍는 방법

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"숫자에 쉼표(,) 를 표기하는 방법에 가장 먼저 떠오르는 것은replice 를 이용한 정규식 사용 방법일텐데 ( 내가 그랬다 )찾아보니까 Intl.NumberFormat 이라는 함수를 사용하면 손쉽게표시할 수 있다는 꿀팁을 전달들었다.Intl 은 자바스크립트에서 기본으로 제공하는 함수로 다음과 같이 사용할 수 있다.Intl.NumberFormat('ko-KR').format(Number(text))Number 타입이 와야해서 숫자면 상관없다.나는 string 으로 넘어와서 형변환을 통해 사용했다.'ko-KR' 은 해당 지역 숫자 표기 지원 방식으로 'en-US' 등을 사용할 수 있다.

Javascript 2024.12.11

[React] xlsx-js-style

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"React 에서 엑셀을 다운받는 기능을 추가하려고 한다.처음에는 xlsx 를 이용했는데 넘 못생겨서 스타일을 추가하려고 하니xlsx-js-style 라이브러리를 이용하면 된다고 해서 사용했다.예제만 따라해도 쉽게 사용할 수 있어서 금방 적용할 수 있었다.내 코드는 다음과 같다.import * as XLSX from "xlsx-js-style";export const excelDownLoad = (data: any) => { const worksheet = XLSX.utils.json_to_sheet(data); const headerStyle = { font: {bold: true, color: {..

Javascript/React 2024.11.26

[React] Styled-Compoent

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"나는 React 에서 Styled-Components 를 사용하는데전부 커스텀가능하게 만들고 사용한다.예를 들어서export const Flex = styled.div.` display: flex; align-items: ${(props) => props.alignItems || "center"}; justify-content: ${(props) => props.justifyContent || "center"}; gap: ${(props) => (props.gap ? `${pixelToRem(props.gap)}` : 0)}; flex-direction: ${(props) => props.fle..

Javascript/React 2024.11.15

[React] Moment 대신 Day.js

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"이번에 Antd RangePicker 연결하면서 Dayjs 을 사용하는 것을보고오랜만에 잊고있었던 Day.js 가 생각나면서 흔히 사용하는 Moment 대신 사용하는이유를 다시한번 상기하는 시간을 가지게 되면 좋을 것 같아 기록하게 되었다.Moment.js와 Day.js는 모두 날짜와 시간 작업을 위한 라이브러리이다.두 라이브러리 모두 시간 형식 지정, 날짜 조작, 타임존 지원 등의 기능을 제공한다.MomentDay.js날짜 형식 지정 및 변환Moment.js와 비슷한 API 제공날짜 간 차이 계산불변성 (immutable data structure) 지원날짜 조작 (더하기, 빼기 등)빠르고 가벼운 성능다양한 로케일 지원..

Javascript/React 2024.11.14

[RN] Make sure you are using @react-native/babel-preset when building your JavaScript code.

📱테스트 환경"react": "18.2.0""react-native": "0.74.2"와 해당 경고 때문에 진짜 정신나가는줄 알았다.ChatGPT 도 몰라 .. 스택오버플로우도 없어 ..다른 블로그에서도 찾아볼 방법이 없어 .. (NOBRIDGE) WARN Codegen didn't run for DebuggingOverlay. This will be an error in the future. Make sure you are using @react-native/babel-preset when building your JavaScript code. (NOBRIDGE) WARN Codegen didn't run for SafeAreaView. This will be an error in the futu..

반응형