Slowly, Steadily, Surely 👩‍💻

https://www.daleseo.com/js-package-manager/ 자바스크립트 패키지 매니저: npm vs. Yarn Engineering Blog by Dale Seo www.daleseo.com https://joshua1988.github.io/vue-camp/package-manager/npm-vs-yarn.html#yarn NPM vs Yarn | Cracking Vue.js npm과 yarn npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자입니다. 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스 (opens new window)에 올 joshua1988.github.io 패키지 매니저(package manager..

https://www.daleseo.com/js-substr-substring/ 자바스크립트 문자열 자르기: substr()과 substring() 함수 Engineering Blog by Dale Seo www.daleseo.com 맨날 둘이 헷갈리는 나.. 제대로 익혀보고자 위 블로그를 보고 내가 계속 보고 참고할 내용들을 옮겨보았다. substr() 함수 먼저 살펴볼 substr() 함수는 문자열의 일부를 일정 길이만큼 추출하고 싶을 때 사용합니다. 다음과 같은 형태로 첫 번째 인자로 시작 인덱스를 두 번째 인자로 잘라낼 길이를 넘기면 됩니다. "문자열".substr(startIndex, length); "ABCDEFG".substr(2, 3); // "CDE" "ABCDEFG".substr(2);..

횟수가 1~100 범위에 들어가지 않으면 빈값으로 초기화하려고 한다. if (!new RegExp(/^(?:[1-9]|[1-9][0-9]|100)$/).test(params.newValue)) { dispatch({ type: SNACKBAR_OPEN, message: '1~100 사이 숫자만 입력가능합니다.', alertSeverity: 'warning' }); return params.oldValue; } return params.newValue; 그리드에서는 valueParser을 이용해서 이렇게 코딩하면 전값으로 돌아간다. edit box는 그런 기능이 없는 것 같으므로.. 그냥 빈 값으로 초기화해주려고 한다. if (!new RegExp(/^(?:[1-9]|[1-9][0-9]|100)$/).te..

const checkedList = {0: true, 1: true, 2: true}; console.log(checkedList.find((e)=>e===true)); // => 해당 에러 발생 typeof checkedList를 찍어보니 object. Object.values(checkedList).find((el) => el === true) 그래서 Object.values로 value를 꺼내주고, find했더니 해결 되었다.

정규식 테스트 사이트 : https://regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test RegExp.prototype.test() - JavaScript | MDN test() 메서드는 주어진 문자열이 정규 표현식을 만족하는지 판별하고, 그 여부를 true 또는 false로 반환합니다. developer.mozilla.org 내가 사용할 ..

우리나라 축제에 대한 데이터가 들어있는 그리드가 있다고 해보자. 현재 진행중인 축제 행을 노란색으로 표시해주고자 한다. getRowStyle : rowStyles 추가하고, rowStyles에 구현해준다. activeParadeList에 진행중인 축제 리스트가 들어있고, 조건에 만족하는 행에 대해서 background : 'yellow' 해준다. const rowStyles = (params: any) => { if (activeParadeList.find((el) => el.paradeName === params.data.cdNm)) { return { background: 'yellow' }; } return { background: '' }; }; const gridCodeTypeProps = { ..

const arrList2: any[] = []; for (let i = 0; i < arrList?.length; i += 1) { for (let j = 0; j < list.length; j += 1) { if (arrList[i].cdNm === list[j].cdNm) { const temp = list[j]; temp.type = arrList[i].type; arrList2.push(temp); } } } 작업중인 코드를 조금 변환해왔다. arrList와 list의 cdNm을 비교하며 같은 cdNm일때의 list 값을 뽑고, arrList의 type을 추가해준다. 기존에 list object에는 type이라는 속성이 없는데, 저렇게 temp.type = arrList[i].type 해주면 알..

https://mui.com/store/items/minimal-dashboard-free/ Minimal Free – Client & Admin Dashboard - MUI Store Free React Admin Dashboard made with MUI Core components and React. Minimal Free Minimal 6 Demo pages 50+ demo pages - ✓ Multi-language - ✓ Dark/Light Mode ? mui.com 이 샘플의 chart 처럼 column, area chart가 섞여 있는 경우, area chart gradient 설정하는 방법..! fill: { type: ['gradient', 'solid'], gradient: { sha..

https://velog.io/@miyoni/TIL11 TIL11 | JavaScript | 객체(object)의 속성 추가, 삭제 객체의 속성 추가, 삭제(delete)와 "배열" value의 접근법. velog.io

오른쪽에 있는 콤보박스를 강조하기 위해 색을 넣고자 합니다. 콤보박스를 클릭하여 Properties를 열어줍니다. 스크롤을 내리다보면 Style이라는 카테고리가 있습니다. 거기서도 background를 봐줍니다. color을 바꿔줍니다. aqua색을 해보았습니다. 촌스럽습니다.. 근데 자세히 보면 왼쪽의 에디트박스랑 테두리가 좀 다릅니다. 실제로 화면 띄워보면 더 이질감이 듭니다. border에서 width를 1로 설정해주면 미묘하게 테두리가 생겼습니다 !