차근차근 생활 & 코딩

안녕하세요, 여러분! 오늘은 React와 React Native에 대해 알아볼게요. 둘 다 페이스북에서 만든 자바스크립트 라이브러리로, 각각 웹과 모바일 애플리케이션 개발에 사용됩니다. 둘의 차이점과 각각의 장점을 쉽게 설명해드릴게요.React: 웹 애플리케이션React는 웹사이트를 만들 때 사용하는 라이브러리입니다. 주요 특징은 다음과 같습니다:컴포넌트 기반: UI를 작고 재사용 가능한 컴포넌트로 나누어 관리하기 쉬워요.가상 DOM: 변경된 부분만 업데이트해 웹사이트가 빨라집니다.단방향 데이터 흐름: 데이터가 한 방향으로만 흐르기 때문에 추적이 쉽습니다.풍부한 생태계: 다양한 플러그인과 라이브러리가 있어 쉽게 기능을 추가할 수 있습니다.React Native: 모바일 애플리케이션React Native는..

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