Slowly, Steadily, Surely 👩‍💻

https://youtu.be/T4QSK3Un4rU?si=mbvxspFCiOsg3VFW  State management전역적인 상태를 만드는 도구 const [count, setCount] = useState(10);이 상태는 컴포넌트 내부에서만 사용이 가능하다.  리액트에서 다른 컴포넌트로 데이터를 전달하는 과정은 소문이 퍼져 나가는 것과 비슷하다. 모든 컴포넌트가 props로 연결되어 있어야 한다. 하지만, 그렇게 되면 관련 없는 컴포넌트도 전달자가 되어야 하고 불필요한 렌더링이 발생한다.  State management는 방송국이다. 관련된 컴포넌트들이 management를 구독한다. 컴포넌트가 상태를 변경하면 구독 중인 컴포넌트들이 통보를 받게 되고, 각자 렌더링이 시작된다.     import ..

'-' 버튼을 누르면 해당 행이 삭제 되고,'+' 버튼을 누르면 해당 행 밑에 행이 추가 되는 로직을 만들었다.  그런데, 버튼을 눌러서 데이터셋에 변화가 생기면 스크롤이 계속 위로가는 현상이 있었다.     저 행들은 그리드의 아래쪽에 포지션되어 있는데, 추가되면 스크롤이 그리드 맨위로 이동해서 추가된 데이터가 보이지 않고 위쪽 데이터만 보이는 것이다.   suppressScrollOnNewData: true 그리드 Props에 이 코드를 추가해주니, 해결 되었다 ! https://www.ag-grid.com/javascript-data-grid/grid-options/#reference-scrolling-suppressScrollOnNewData JavaScript Grid: Grid Options ..

eslint.config.js 파일 rules에 "@typescript-eslint/no-explicit-any": "off",추가rules: { ...reactHooks.configs.recommended.rules, "react-refresh/only-export-components": [ "warn", { allowConstantExport: true }, ], "@typescript-eslint/no-explicit-any": "off", },

import axiosServices from "utils/axios";  page가 들어가는 폴더에 한 파일에서 axios를 만져준 axiosServices를 가져오는데,분명 VS Code에서는 잘 가져와진 걸로 보인다.      오후 1:45:40 [vite] Internal server error: Failed to resolve import "utils/axios" from "src/pages/SM/SM001/pageHooks/usePageFetch.ts". Does the file exist? 근데 계속 이런 에러가 뜬다. CRA에서는 본적 없는 오류라서 약간 답답했다.  import { defineConfig } from 'vite';import path from 'path';export de..

npx create-react-app [프로젝트 명] --template typescript 기존에는 react 설치할 때, CRA(Create React App)을 사용했었다.  CRA란, 리액트로 앱을 만드는 방법 중 하나이다.  위의 명령어를 치면 아래처럼 디렉토리가 완성된다.  webpack, babel, 타입스크립트 설정까지 제공해주지만 사용자가 원하는 방식대로 설정을 바꾸기 어려운 단점이 있다. 그리고 프로젝트 크기가 커질수록 속도가 더 느려진다.  webpack이란, 프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구이다. (자바스크립트 번들러)프레임워크가 .js,.css,.jpg와 같은 기존 웹문서 파일을 사용하지 않고 .sass 같은 파일로 작성하기도 하는데, 웹브라우저..

1. 로그인 할 때 토큰을 로컬스토리지에 저장 const onClickLogin = (event) => { event.preventDefault(); axios .post(`/api/comm/user/signin`, { id: id, password: pw, }) .then((response) => { console.log(response); localStorage.clear(); localStorage.setItem("token", response.data.token); navigate("/"); }) .catch((error) => { console.log(e..

const onClickLogin = () => { axios .post(`/api/comm/user/signin`, { id: id, password: pw, }) .then((response) => { console.log(response.data); }) .catch((error) => { console.log(error); }); };로그인 기능을 수행하는 함수를 작성했는데, 계속 get이 찍힌다. 물음표가 붙는 이유는,HTML 폼이 GET 메소드로 제출되면, 폼 필드 값이 자동으로 쿼리 스트링으로 추가되기 때문이다. const onClickLogin = (event) => { ev..

- 요구사항창이 최소화되어도 뜨는 알림이 있으면 좋겠다.  -> 기존에 snackbar나 useDialog로 띄웠던 팝업 알림은 창이 최소화가 되면 당연히 보이지 않음. -> 다른 메소드가 필요 그래서 찾아보다가 Notification API를 알게되었다.  https://mingule.tistory.com/68 React에서 Browser Notification (푸시 알림) 구현하기들어가기 Babble 프로젝트에서 WebSocket을 활용해 채팅 기능을 구현한 바 있다. 그런데, 유저 입장에서는 내가 들어간 방에 채팅이 새로 올라온지, 올라오지 않은지 확인할 길이 없었다. 무조건 다mingule.tistory.com  https://developer.mozilla.org/ko/docs/Web/API/..

0. 첫 렌더링. 코드북 조회. /** 코드 초기값 조회 */ useEffect(() => { getCodeList(); // 코드북 조회 // eslint-disable-next-line react-hooks/exhaustive-deps }, []); 1. 코드북에서 상태에 대한 코드를 가져와서 setJobStausCd 해준다. const [jobStatusCd, setJobStatusCd] = useState([]); 2. 이 화면은 자동조회가 되어서, 코드북 조회 후에는 메인 데이터를 가져온다. 그 데이터는 dsRowData에 넣어준다. const [dsRowData, setDsRowData] = useState([]); 3. 해당 데이터에서 상태id 칼럼이 있는데, id가 아니라 name을 보여주..

applyTransaction을 사용하면 된다. const onCellValueChanged = (params: any) => { // 상태가 '추가'가 아니면 상태를 '수정'으로 변경 if (params.data.rowType !== '추가' && params.data.rowType !== '삭제') { params.data.rowType = '수정'; const updatedData = [params.data]; params.api.applyTransaction({ update: updatedData }); } };