프론트엔드 정복하기

react-fade-in (fade in 효과) -설치 : npm install react-fade-in -사용 import FadeIn from 'react-fade-in'; // ... Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 -props : delay, transitionDuration, className 등.. https://www.npmjs.com/package/react-fade-in react-fade (fade in & out 효과) Fade 사용 시 Can't resolve 'inline-style-prefixer' in ... 라는 에러가 발생함. -> inline-style-prefixer 라이브러리를 다운하는 시도를 ..

useReducer를 사용하여 여러 개의 인풋 상태를 관리할 수 있다. 기존에는 인풋이 여러 개여서 useState 를 여러번 사용했다. useReducer를 사용한다면 우리가 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name 을 참조하여 setState 를 해준 것과 유사한 방식으로 작업을 처리 할 수 있다. //info.js import React, { useReducer } from 'react'; function reducer(state, action) { return { ...state, [action.name]: action.value }; } const Info = () => { const [state, dispatch] = useReducer(r..

https://velog.io/@velopert/react-hooks

1. 숫자, 영어 등을 구분하는 javascript 정규식 https://ryukato.github.io/javascript/2016/01/27/replace-some-text-with-regex.html -숫자 : /[0-9]/gi -숫자가 아닌 모든 문자 : /[^0-9]/g -대, 소문자 영문 : /[a-z]/gi -특수문자 : /[~!@#$%";'^,&*()_+|=>`?:{[\}]/g -공백 : /^\s+|\s+$/g -동일한 문자 연속 3자 이상 : /(\w)\1\1/g 2. 정규식 존재여부 체크 방법 1) replace 함수 이용 replace 함수 예시) text . replace( '기존문자', '바꿀 문자' ) 아래 예제처럼 영어가 아닌 것(^ 표기)이나 영어인 것을 공백('')으로 대체..

*REDUX FLOW : dispatch -> ACTION(type, action 기입) -> REDUCER((previousState, action)=>nextState) -> STORE [[ ex. 로그인 기능 구현 ]] 1. // src/components/LoginPage.js 파일 : dispatch ( action명 ( variable명 ) ) 를 한다. ex ) dispatch(loginUser(body)) : "body" variable을 가지고 "loginUser"라는 action을 할거다. (loginUser는 _actions 폴더에서 불러온 것) import {useDispatch} from 'react-redux' import {loginUser} from '...../_action..

1. state을 선언한다. const [accessAllCheckBox, setaccessAllCheckBox] = useState(false) 2. input의 checked 속성에 state을 부여한다. 3. input에 onClick or onChange 이벤트로 체크 이벤트를 실행한다. onClick={agreeCheckedHandle1} const agreeCheckedHandle1=()=>{ setaccessCheckBox1(!accessCheckBox1) }