차근차근 생활 & 코딩

[MUI or MATERIAL UI] / 날짜 표시 - 2023-01-03T10:24:30.129Z 변경하려면 valueFormater에서 옵션을 변경하면 원하는 서식으로 변경됩니다. import dayjs from 'dayjs'; const columns = [ ... { field: 'createdAt', headerName: 'Join Date', width: 100, valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'), }, ... ] [MUI or MATERIAL UI] / 원 단위 콤마 단위 표시 - 100,000 import dayjs from 'dayjs'; const columns = [ ... { field: 'CO..

아래 코드를 추가하면 됩니다. onSelectionModelChange={(itm) => console.log(itm)} console.log(itm)} disableSelectionOnClick experimentalFeatures={{ newEditingApi: true }} onCellDoubleClick={(e) => childFunction(e)} />

이번시간에는 함수타입에 hook으로 onChnage 사용 방법에 대해 알아보도록 하겠습니다. 방법은 총 2가지에 대해 설명 드리도록 하겠습니다. ① Input이 한개의 경우 ② Input이 여러개의 경우 Step. 1 (Input이 한개의 경우) 상태 변수 만들기 const [text, setText] = useState(''); onChange 함수 만들기 const onChange = (event) => { console.log('onChange Event', event); setText(event.target.value); }; 전체 코드 import React, { useState } from 'react'; export default function Index() { const [text, se..

안녕하세요. 이번시간에는 Firebase를 활용한 이메일 로그인을 해보도록 하겠습니다. 인증하기 위해서 회원가입이 우선적으로 되어 있어야 됩니다. 회원가입하기 아래 링크를 통해 회원가입을 선행하시기 바랍니다. https://ssilook.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-Firebase-%EC%9D%B8%EC%A6%9D%EC%9D%B4%EB%A9%94%EC%9D%BC-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85%ED%95%98%EA%B8%B0 [React_리액트] Firebase 인증하기 - 이메일 회원가입 편 이번 시간에는 Firebase를 이용하여 이메일 회원가입을 해보도록 하겠습니다. 리액트 설치하기 아래 참조 하셔서 ..

이번 시간에는 Firebase를 이용하여 이메일 회원가입을 해보도록 하겠습니다. 리액트 설치하기 아래 참조 하셔서 링크접속 후 설치 하시면 됩니다. https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 [REACT] 리액트 시작하기 - 설치하기 편 리액트 설치 및 실행 방법에 대해 간략히 설명드리겠습니다. 리액트를 만들기 위해 개발 환경을 직접 구축해야 한다. 개발 환경을 직적 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해 ssilook.tistory.com Firebase 접속하기 링크를 클릭하여 Firebase를 시작하도록 합니다. https://firebas..

아래와 같은 에러가 콘솔로그에 발생했다. 에러명 Warning: A component is changing an uncontrolled input of type time to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. undefined이 되었을때 발생하는 문제라고 한다. 그래서 input 내에 value 값에 공백이 와도 에러가 뜨지 않도록 변경하면 됩니다. 해결방법 value={value|| ''}

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다. 처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다. 상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요. 하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다. 처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다. 절대 경로를 무조건 설정해야 하는 것은 아닙니다. 상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다. 절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다. } Step 1. NPM 라이브러리 설치하기 절대 경로를 편하게 지정하기 위해 만들어져 있는 라이브러리를 사용하도록 하겠습니다. $ npm install -..

저번 시간에는 클래스(Class) 형으로 input을 통해 데이터를 전달하는 것을 알려드렸는데요. 이번 시간은 함수(Hook) 형으로 input 만드는 법에 대해서 알아보도록 하겠습니다. Step 1. 함수형 템플릿 만들기 우리가 앞으로 작업해야 하는 함수형 템플릿을 만들도록 하겠습니다. import React, { useState } from 'react'; const InputForm = () => { return ( ) } export default InputForm; Step 2. State 정의하기 클래스(Class) 형에서는 this.state={username: '', password: ''} 이런 식으로 정의했었습니다. 하지만 함수(Hook) 형을 사용하시는 분들께서는 클래스(Class) ..