FrontEnd/React9 ag-grid field 이름에 점(.)이 들어간 경우, valueFormatter의 params.value가 undefined가 되는 현상 배경 회사에서 ag-grid로 데이터표를 만드는 작업을 하고 있었다. 그런데 분명히 db에도 값이 있고, column과 rowdata가 제대로 매핑되고 있고, api 응답을 제대로 받고 있음에도 불구하고 화면에 값이 표시되지 않는 현상을 겪었다. 분석 ag-grid를 사용함에 있어서 data의 값을 정제하기 위해 valueFormatter 코드를 썼었는데, 여기서 params를 콘솔로 찍어보니 params.value의 값이 undefined가 되는 것을 확인할 수 있었다. valueFormatter: (params) => { if (params.value === null || params.value === undefined) return params.value; return FormatStringPoin.. 2023. 11. 21. useRef 정리 useRef 사용 동기 최근 회사에서 jsmpeg 라이브러리를 사용하여 소켓 연결을 통해 IP 카메라를 재생하는 기능을 개발하였다. jsmpeg을 static으로 import 하여 개발하던 중, 프론트 단에서 window.location.hostname:{포트번호} 주소로 소켓을 연결하는 로직에서 "ReferenceError: window is not defined" 에러가 발생하였다. 이 오류는 Next.js의 서버 사이드 렌더링(SSR) 환경에서 window 객체에 접근하려고 시도하면 발생하는 것이다. Next.js는 초기 렌더링 시에 서버에서 컴포넌트를 생성하기 때문에, 서버에서는 window 객체와 같은 브라우저 전용 객체에 접근할 수 없다. 따라서 useEffect, useState를 사용하여 .. 2023. 8. 25. React 애플리케이션에서 모달(Dialog)이 매핑된 배열의 마지막 요소만 표시되는 문제 문제인식 & 원인 분석 reportList 배열의 길이에 따라 Card 컴포넌트를 만든 후, 각 컴포넌트에 csv 파일을 다운로드 하는 기능(버튼)(redux, dispatch를 이용하여 요청) + 다운로드를 하겠냐고 물어보는 모달창을 개발하고 있었다. 다운로드 요청을 하기 위해서는 아래 코드에서처럼 다운로드 하려는 컴포넌트의 id 값을 이용하여 dispatch 요청을 해야한다. 따라서 동적으로 생성된 배열의 각 요소에 모달이 잘 매핑되어야 한다. dispatch({ type: LOAD_FILE_DATA_REQUEST, data: { id: report.id - 1, // 다운 받으려 하는 report의 id 값을 담아 보낸다. fileList: [lastFile.fileName], // 마지막 파일을 .. 2023. 7. 24. useEffect 정리 오늘은 함수형 컴포넌트를 사용할 때, 알아야 할 필수 개념인 useEffect 훅에 대해 정리를 해보고자 한다. useEffect에 대해 알기 전에 우리는 우선 컴포넌트의 생명주기에 대해 알아야 한다. 컴포넌트의 생명주기 우리들도 인생에서 탄생, 성장, 죽음이 있듯이, 컴포넌트에게도 생명주기라는 것이 존재한다. 컴포넌트의 생명주기는 다음과 같이 크게 3가지로 구분된다. 탄생에 해당하는 mount (페이지에 장착되는 행위) 성장(재렌더링)에 해당하는 update (컴포넌트 내용이 업데이트 되는 행위) 죽음에 해당하는 unmount (컴포넌트가 제거되는 행위) 그렇다면 컴포넌트의 생명주기를 왜 알아야 할까? 그 이유는 바로 컴포넌트의 생명주기를 알아야 컴포넌트의 인생 중간중간에 내가 원하는 효과(기능)을 집.. 2023. 6. 6. 이전 1 2 3 다음 728x90
