차근차근 생활 & 코딩

[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..

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

이번에 알려드릴 것은 클래스(Class) 타입에서 input을 통해 데이터를 전달하는 것을 한번 해보도록 하겠습니다. 제일 처음으로 우리가 흔히 알고 있는 Form이라는 클래스를 만들어보았습니다. 이건 너무 간단하죠? 이건 누구나 아는 html입니다. 우리가 알고 싶은 건 이런 것이 아니겠죠? 리액트 맞추어 코드를 작성해 보도록 하겠습니다. Step 1. state 추가하기 input에 작성된 값을 넘겨주려면 받을 곳이 필요하여, state 추가가 필요합니다. datavalue라는 state를 추가하도록 하겠습니다. constructor(props) { super(props); this.state = {datavalue: ''}; } Step 2. handleChange 함수 추가하기 input 필드에서..