내맘대로 개발일지

📱테스트 환경"react": "18.3.0","react-dom": "18.3.0"map 을 사용하다보면Warning: Each child in a list should have a unique "key" prop.이런 경고 에러메시지를 볼 수 있다.해당 코드를 보면 {category && category[2] && category[2].map((v, i) => ( setSelected(prev => (prev === v.no ? null : v.no)) }> {v.name} {i !== category[2].length - 1 && } ..

📱테스트 환경"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' 등을 사용할 수 있다.

나는 지금까지 React 개발을 하면서 스타일은 항상 Styled-components 를 사용해왔다.이유는 딱히 없었다.  React 처음할때 사용한 css 가 저거였을 뿐.그이후로도 쭉 React 관련 프로젝트를 할때마다 사용했고 익숙하니까 속도도 나왔다.근데 타의로 최근 scss 를 사용하게 되었는데 익숙함에 오는 거부감인지 왠지 자꾸 단점만 찾게되고다른사람들이 바보같아보였다. 근데 나는 저게 왜 좋은지도 모르고 쓰는건데이번기회에 어떤점이 좋은건지. 왜 쓰는건지 알고 사용하고더 좋은게 있다면 바꿀 수 있도록 하기위해 Styled-components 의 정리를 하려고 한다.npm install styled-componentsimport styled from 'styled-components'const ..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"데이트피커를 넣으려고하는데 로 넣으니까 너무 몬생겼다 ..몬생겨도 너무 몬생겨서 디자인 프레임워크를 이용하고 싶었는데또 React 를 개발을 주로 하다보니 Antd 가 생각이 났다.하지만 Antd 가 아무래도 React UI 에 맞춰져서 가이드도 그렇게 되어있다보니Nuxt 에서 하려니까 좀 애를 먹고 있었다..https://2x.antdv.com/components/overview/일단 Nuxt 의 Antd 는 여기서 확인할 수 있고 DatePicker 를 사용하는 방법은 다음과 같다.// nuxt.config.tsexport default { ... modules: [ ... ..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"Number 에 콤마(,) 를 찍어서 좀 정갈하고 이쁘게 보이게 처리하고싶은데ㅇㅏ주 간단하게 처리할 수 있는 방법이 있다.바로 parseFloat 를 이용하는건데방법은 다음과 같다.export const formatNumberComma = (numbers: number) => { return parseFloat(String(numbers)).toLocaleString()}여러군데에서 사용해야 할 경우 한번에 수정해서 처리할 수 있도록 함수로 만들었고parseFloat 와 toLocalString 을 이용하여 표시하였다.

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0" {{ index + 1 }} {{ item.title }} {{ item.regDt }} 간략하게 Click 이벤트가 상위에 있고 input checkbox 가 해당 태그 안에 있다.이럴때 checkbox 를 누르면 checkbox 도 되고 상위 detail 함수도 실행된다.ㅇㅣ런걸 이벤트 버블링이 발생했다고 하는데 막는 방법은 아주 간단하다.@click.stop 태그를 사용하는 방법이다. {{ index + 1 }} {{ i..