프론트엔드 정복하기

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

0. input의 label 높이 조정 : position 속성 이용 : 체크박스와 라벨에 각각 position:relative; 값을 부여하고, top값을 조정한다. https://www.codingfactory.net/10715 0. CSS에서 특정 input type을 선택하고 싶을 때 : input[type="text"] // type="text"인 input : input[readonly] // readonly 속성을 가지고 있는 input : input[value~="submit"] // value속성이 submit 문자를 포함하고 있는 input : a[href^="https"] // href 속성이 https 문자로 시작하는 a요소 : a[href$="localhost"] // href 속..

string.length : 문자열의 길이를 반환 https://www.codingfactory.net/10895 string . indexOf ( 찾고싶은 문자열(필수값) , fromIndex(선택값) ) : 문자열 내에서 특정 문자열의 index 값을 리턴한다. : 문자열이 존재하지 않는다면 -1을 반환함. : React에서 사용가능 예제 var stringValue = '생활코딩 - 자바스크립트 레퍼런스'; alert(stringValue.indexOf('자바스크립트',0)); // 7 alert(stringValue.indexOf('자바스크립트',2)); // 7, 두번째 인자로 2가 주어지면 탐색의 대상이 '코딩 - 자바스크립트 레퍼런스'로 줄어든다. index 값은 변하지 않는다 alert(s..

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