MUI의 DataGrid에서 선택된 row를 버튼 클릭이나 기타 이벤트 후에 초기화 하려고 사용하는 코드이다. selectionModel을 설정하면 dataGrid에서 선택된 rows의 상태를 변경하고, 값을 가져올 수 있다.참조https://codesandb

| 메소드/연산자 | 설명 | 예시 | | --- | --- | --- | | substring(startIndex, endIndex) | 지정한 시작 인덱스부터 끝 인덱스까지의 부분 문자열을 반환한다. | "Hello, world".substring(0, 5)결과: "Hello" | | slice(startIndex, endIndex) | 지정한 시작 인...

1\. 항목 추가 (Add Item)2\. 항목 수정 (Update Item)3\. 항목 삭제 (Delete Item)

AWS AppSync GraphQL의 Subscription을 사용해서 데이터가 실시간으로 들어오면 기존 배열에 새로운 값을 추가해서 실시간 차트를 구현했다. seriesy 축의 값을 가지고 있는 부분. 객체 배열.\[ { name: “humidity”, data:

MUI의 CircularProgress 안에 loading 글자 넣기참조https://stackoverflow.com/questions/43420540/text-inside-circular-progress-of-material-ui

Yup useForm을 사용할 경우, 입력폼 외에서 값을 변경하고 싶을 때에는 setValue method를 사용하면 된다. 아래처럼 methods로 선언하고, 아래에서 key, value 형태로 변경하면 된다.참조https://react-hook-form.c

문제가 발생한 부분은 AppSync의 GraphQL subscription을 통해서 새로운 값을 받고, 새로운 값을 기존 배열에 추가해서 배열을 변경하는 로직이었다.새로운 값이 들어오면, 기존 배열을 복사한 배열을 생성하고 복사한 배열에 새로운 값을 넣고, setSta

React에서 AWS Cognito를 사용하는 방법은 두 가지이다.첫 번째는 Amplify를 활용해서 backend를 구축하는 것이고, 두 번째는 aws-cognito-identity 라이브러리를 활용하는 것이다.예전에는 Amplify 사용했는데 이번에는 aws-cog

React app에서 미리 생성해둔 AWS AppSync GraphQL을 사용하는 방법에 대해서 포스팅.본인이 만들어둔 AWS AppSync GraphQL에 들어가면, API Key를 확인할 수 있다. 명령어도 그대로 나와 있으니 복사해서 실행한다.amplify add

useEffect는 첫 렌더링 시에 실행되고, 배열 안에 state가 변화할 때마다 실행된다. 첫 렌더링 시에 실행되지 않고, 배열 안에 state가 변화할 때만 로직을 실행하고 싶어서 방법을 찾아 보았다.stackoverflow에서 찾은 해답으로, useRef 함수를

hosting 시에 app에서 현재 환경이 localhost인지 배포 환경인지 구분해서 동작해야 할 때 사용하는 방식.

AppSync의 GraphQL을 리액트 앱에서 직접 생성하지 않고, 콘솔에서 미리 생성해둔 API를 가져다 쓰면서, Amplify로 배포해서 hosting 시에 awsConfig 파일에 AppSync 관련 변수만 생성되지 않았다. (cognito 관련 변수는 생성됨)

gitignore에 .env 파일이 있었는데도 불구하고 .env 파일이 같이 올라가서 이를 삭제하고자 했다.아래의 명령을 사용해서 repository에 있는 .env 파일을 삭제했다.참조https://velog.io/@hoje15v/.gitignore에-.en

React 앱에서 aws-amplify 라이브러리를 사용해서 AWS AppSync GraphQL을 사용할 때 filtering 하는 방법에 대해서 정리하려고 합니다.아래는 필터링 옵션을 정리해둔 것입니다. less, greater, between은 숫자인 경우에만 가능

이 컨텐츠에서는 kaluma 기초 사용법과 wizif360을 활용해서 wifi에 연결하고, AT 커맨드를 보내는 방법에 대해서 설명합니다.This tutorial explains how to use kaluma basics and how to connect to WiF

이전에 lambda에서 runtime을 node.js 16 버전으로 해서 작성했었는데, 업데이트 된지 모르고 node.js 18 버전으로 lambda를 만들었다가 이전 코드가 적용되지 않는다는 걸 알았다.AWS Docs에 가니 SDK가 Node.js 18 버전부터는 3

이 포스팅은 AWS의 API Gateway를 사용해서 REST API 를 개발하는 방법에 대해서 간단히 설명합니다. Lambda를 사용해서 DynamoDB의 변경사항을 처리합니다.Lambda는 AWS에서 로직을 처리하는 함수라고 생각하면 됩니다. 여기에서는 테이블의 항

위젯이 여러 개 들어간 대시보드를 구성하면서, 위젯의 크기를 조절하고 위치를 옮길 수 있는 옵션을 찾다가 react-grid-layout이라는 라이브러리를 발견해서 적용했다.react-grid-layout은 리액트를 위한 그리드 레이아웃 시스템입니다. 반응성이 뛰어나고

앞에서 간단하게 redux를 사용해서 로그인 기능을 구현했는데, 새로고침을 하니 redux 의 state 값이 초기화되는 문제가 발생했다. 검색해보니 redux-persist를 사용하면 새로 고침해도 정보가 남아있도록 할 수 있다고 해서 사용해 보았다.localStor

React의 상태 관리 라이브러리로, state가 컴포넌트에 종속되지 않습니다. 기존에는 state를 다른 컴포넌트로 넘겨주려면 props 형태로 전달해야 하고 직접 부모-자식 컴포넌트가 아니면 값을 넘겨주기 어려웠습니다. 하지만 redux를 사용하면 어느 곳에서도 같