MUI tooltip을 커스텀하여 사용해보자. 보통 에 를 감싸 사용하는데, 나는 Routes에 감쌌다. MUI Tooltip에 arrow 부분이 default값으로 설정되어 있어서 동떨어져 있었다. styleOverrides부분에 arrow &::before를 추가했다. 전체 코드 Routers.tsx import { createTheme, ThemeProvider } from '@mui/material'; const Routers = () => { const theme = createTheme({ components: { MuiTooltip: { styleOverrides: { arrow: { '&::before': { color: 'rgba(0, 0, 0, 0.6)', }, }, tooltip: {..
Nextjs에서 [slug].tsx페이지에서 href 경로가 잘못 나오는 문제가 있었다. 이 경로를 통해서 들어와지는 newsview라는 페이지가 있다. 파일 구조는 이러하다. 근데 [slug]페이지 (newsview페이지)에서 href 경로가 이상하다. 나는 /newsview/페이지를 넣지 않았는데 왠...???? 결론적으로는 `/${ 내용 }` 으로 넣어야 경로가 바르게 나온다. `/${item.link}`
.map 을 사용하여 컴포넌트를 만드는데 마지막 컴포넌트만 다른 속성값을 주고 싶었다. 마지막 요소에만 유일하게 href값이 있었고, 새 창에서 띄워야 했기때문이다.. const MenuContent = [ { menuName: 'Overview', }, { menuName: 'Features', }, { menuName: 'References', }, { menuName: 'Release Note', href: 'DeepCatchReleaseNote', }, ]; Array.length === index + 1 로 배열의 마지막 요소에 접근해서 컴포넌트를 따로 출력했다. {MenuContent?.map((item, index) => { if (MenuContent.length === index + 1)..
핸드폰으로 nextjs localhost 접속 그동안 리액트에서 localhost:3000으로 서버를 띄우고 회사 와이파이를 같은 것으로 둔 후 모바일에서 주소창에 localhost:3000으로 접속해서 테스트 하곤 했다. Next.js로 변경 후 한동안 안되는 문제가 있다가 오늘 해결했다. npx next dev -p 3000 이렇게 터미널에 치고는 같은 와이파이로 연결해서 예전처럼 접속할 수 있었다. 모바일에서 터치 이벤트 wheelEvent를 이용해서 웹에서 delta.Y > 0 혹은 delta< 0 로 이벤트 처리하는게 있었는데 모바일에선 안됬다. 모바일은 touchEvent가 있었다.. touchEvent를 웹에선 하기 어려워서 방법을 찾았다. 아이폰을 맥에 연결하여 사파리에서 ios 테스트를 ..
tailwind nth-child 적용하기. fitst-child 축약어: first:속성 nth-last-child는 xl사이즈일경우 이렇게 쓴다. xl:last:w-[588px] nth-child(4)번째를 선택한다면 [&:nth-child(4)]:md:w-[337px] 반복되는 컴포넌트이지만 태블릿(768px)일때부터 달라질 경우 nth-child 지정을 해서 상황에 맞게 조절할 수 있었다. 모바일일땐 세로, 768부터 nth-child(4), nth-child(5) (last-chlid)일 경 react + tailwind 조합이라 className안에 속성을 썼다. {cardContent?.map((item, index) => { return ( {item.text} ); })} const ca..
antd의 RangePicker 예제를 그대로 썼는데 clone.weekday is not a function 라는 에러가 났다. 깃허브 답변처럼 몇몇개를 더 import하니 에러가 해결됬다. https://github.com/react-component/picker/issues/123 clone.weekday is not a function · Issue #123 · react-component/picker dayjs 1.8.30 点击日期选择器直接报错 TypeError: clone.weekday is not a function in DateBody (created by DatePanel) in div (created by DatePanel) in DatePanel (created by PickerPan..
ANTD 라이브러리로 Table을 만들었다. 테이블의 한 행마다 각각의 요소들이 있고, 그 요소를 클릭하면 그 값을 이용해서 api의 파라미터로 넘겨야 했다. const [dataState, setDataState] = useState(); interface KeyArr { anatdelProductSeq: number; anatdelProductSumUri: string; anatdelProductName: string; anatdelProductCategory1En: string; anatdelProductCategory2Kr: string; anatdelProductUseYn: string; } // 여기서 Data는 api 조회로 가져온 Data이다. useEffect(() => { const k..
해결해야 하는 상황: formdata에 값을 'string'으로 넣어야한다. data의 type은 object이다 (객체) 내가 전달하고자 하는 값은 Formdata.append('cate1', cate1) 인데, 이 cate1은 ['1','3'] 이런 식의 배열이었다 나는 1, 3 ... 이런식으로 string으로 보내야 하는 상황이다. 해결방법 : data를 배열로 만든 후 map 메서드로 원하는대로 데이터를 가공하자. 배열의 map 메서드를 사용하면 데이터를 원하는 대로 가공할 수 있다. const editData = [data].map(i => ({ //data를 [ ]로 감싼다 Category1: i.anatdelProductCategory1.join(','), Category2: i.anatd..
인텔리제이에서 import문이 자동으로 접히는데 그것을 해제하는 방법을 써보려고 한다. Settings -> Editor -> General -> Code Folding -> Imports intellij 메뉴에서 File -> Settings로 들어간다. Settings-> Editor로 들어가서 General항목에 들어가서 여기 체크되어있는 Imports를 해제한다.
배열 안의 객체에서 특정 키를 가진 (혹은 가지지 않은) 객체를 빼내어 보자. const { data: contactusData } = useGetContactus(user?.accessToken); console.log('contact모달 data', contactusData); 배열이 있고 배열 안에 객체가 있다. 객체들이 가진 특정 Key(키)가 있는데, 나는 그 Key 중에 contactCategory 라는 키값을 가진 애들을 제외한 값을 얻고 싶다. 예시에 보면 0번 데이터에 contactCategory 값이 비어있다! 이 아이만 배열로 만들고 싶어서 아래와 같이 시도했다. .filter를 사용한다 const ContactModalList = contactusData?.filter(functio..
