Slowly, Steadily, Surely 👩‍💻

https://kth990303.tistory.com/254 [typescript] JS에서 length가 undefined로 뜨는 현상 고치기 객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도. kth990303.tistory.com any[]로 선언된 배열의 length를 찍어보니 undefined가 나왔다. 도대체 왜일까 찾아보니 배열이 key, value로 짝지어지는 Object화가 되어서 그렇다고 했다..! 그래서 Object.keys(배열명).length 이런식으로 찍어주면 나온다!

[0,1] [0,1,2,3,4,5] 이런식으로 되어있는 요일 배열 format을 바꿔주려고 한다. 문자열 치환할 때는 replace 함수를 사용한다. const daysFormatter = (params: any) => { const days = params.value .replace('0', '일') .replace('1', '월') .replace('2', '화') .replace('3', '수') .replace('4', '목') .replace('5', '금') .replace('6', '토'); return days; }; 여러 개 치환하고 싶을 경우, .replace를 붙여나가면 된다. 참고로 요일 배열 특성상 안에 [0,0] 이렇게 중복될 일이 없기 때문에 replace 함수로도 충분히 커버..

리액트에서 그리드의 데이터셋에서 특정 칼럼의 특정 값을 찾아야하는 상황이 있었다. 이런 상황에서 xplatform에서는 lookup함수를 사용했었다. var name = studentList.lookup("studentId",1,"studentNm"); studentId(학생번호)가 1인 학생명을 찾은 소스이다. 리액트에서는 이런 함수가 뭐가 있을까, 하다가 find함수를 find했다. const list = studentList?.find((element) => element.studentId === 1); const name = list.studentNm; lookup과 다르게 find는 해당 row를 반환해준다. 그렇기 때문에 그 row에서 studentNm을 다시 찾아줘야 한다.

AG-GRID를 이용해서 그리드 행추가, 행삭제, 행수정 기능을 구현하려고 했다. 검색을 해보니까 생각보다 잘 나와있지 않아서 포스팅해본다. import { GridApi } from 'ag-grid-community' 일단 GridApi를 import 해주었다. 원하는 applyTransaction 이 없다.. 도대체 이건 어떻게 쓰는 건가 하고 소스를 뒤져보았다. const [gridApi, setGridApi] = useState(); useState로 사용을 하더라.. ➕행 추가 (add) const newRow = { JobNm: '', FromTm: '', ToTm: '', Use_YN: 'Y', Remark: '' }; gridApi?.applyTransaction({ add: [newRow..

https://www.ag-grid.com/javascript-data-grid/value-formatters/ JavaScript Data Grid: Value Formatters Value formatters allow you to format values for display. Download v28 of the best JavaScript Data Grid in the world now. www.ag-grid.com 시작시간 종료시간 0800 1700 이런 그리드가 있다. 둘다 시간이기 때문에 데이터를 넘길 때는 08:00, 17:00 으로 넘기고 싶다. 하지만 입력할 때는 ':' 콜론을 굳이 입력하고 싶진 않다. => 값의 포맷 지정해주기 AG GRID에는 valueFormatter 라는 포맷지..

Node.js 설치 Node.js (nodejs.org) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Yarn 설치 Installation | Yarn (yarnpkg.com) Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com Visual Studio Code 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined..

Xplatform에는 filter 함수는 정말 말 그대로 필터를 걸고, 해제하는 역할을 했었다. React에서 같은 역할을 하는 게 있을까, 하며 검색을 해봤지만 아무리 찾아봐도 조금 다른 filter 함수밖에 나오지 않았다.... 뭐 어쩌겠어 써야지. 내가 필요했던 기능을 다른 것에 비유해서 적어 보자면 학생별 성적관리 화면의 조회조건에 학교 / 학년 / 반 / 학생 콤보박스가 있다. 학교, 학년, 반 콤보박스를 클릭할 때 마다 학생 콤보박스 값이 달라져야 한다. 학교 / 학년 / 반 으로 학생을 조회하는 기능이 아니기 때문에 submit을 계속 날리는 건 좋지 않다고 느꼈다. 그래서 학생 리스트를 화면 켜질 때 가져온 후에 필터를 계속 걸어서 보여지는 로직을 생각했다. 그리고 filter은 해제할 수..

useEffect(() => { getCodeList(); }, []); React Hook useEffect has a missing dependency: 'getCodeList'. Either include it or remove the dependency array react-hooks/exhaustive-deps 이런 warning이 뜬다. useEffect(() => { getCodeList(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); 이렇게 주석 달아주면 warning이 뜨지 않는다.

https://boxfoxs.tistory.com/427 typescript 3.7 소개 최근 이직을 한 후 개인적으로 '공부' 라는 것과 거리가 멀어져서 포스팅을 쓰면서 다시 시작해보고자 합니다. 마침 최근에 typescript 3.7이 새롭게 공개돼서 해당 문서를 번역해서 간단히 소개해 boxfoxs.tistory.com userId ?? '' userId가 null이나 undefined라면 ?? 오른쪽 값이 반환된다고 한다. null이나 undefined가 아니라면 그대로 userId값이 반환되는 것.

출처 : https://react.vlpt.us/basic/07-useState.html https://react.vlpt.us/basic/09-multiple-inputs.html 9. 여러개의 input 상태 관리하기 · GitBook 9. 여러개의 input 상태 관리하기 지난 튜토리얼에서 우리는 input 상태를 관리하는 방법에 대하여 알아보았는데요, 이번에는 input 이 여러개일때는 어떻게 관리해야 하는지 알아보겠습니다. 우선 react.vlpt.us import React, { useState } from 'react'; 이 코드는 리액트 패키지에서 useState를 사용할 수 있도록 해준다. const [number, setNumber] = useState(0); const [상태 값 저장..