프론트엔드 정복하기

useState의 활용 1) 변화를 관리할 때 ex. email, password 입력창 관리 const [ state, setState ] = useState( initialState ) const onStateHandler = function(event){ setState(event.currentTarget.value) } ***initialState : 초기값 -string 값이고, 빈값일 경우 : useState( " " ) -array 이고, 빈 값일 경우 : useState( [ ] ) useEffect의 활용 어떤 상태가 변경될 때마다 rendering 시키는 것. : 끝에 [ ] 값이 변할 때마다 렌더링함 : 끝에 [ ] 값이 비어있을 경우, 페이지 첫렌더링 시 한번만 렌더링됨. 더보기 h..

1. auth function 만들기 function (SpecificComponent, option, adminRoute = null) { 더보기 -SpecificComponent : 컴포넌트명 -option : null(아무나 출입 가능), true(로그인 유저 출입), false(로그인 유저 출입 X) -adminRoute : true(admin 계정만), null(x, =null ; 기본값이 null임) function AuthenticationCheck(props){ const dispatch=useDispatch(); useEffect(() => { dispatch(auth()).then(response=>{ //로그인하지 않은 상태 if(!response.payload.isAuth){ if(..

[ Role에 따라 진입 가능한 페이지가 다름 ] -아무나 진입 가능한 페이지 : Landing Page, About Page -로그인한 회원만 진입 : Detail Page -로그인한 회원은 진입x : Register Page, Login Page -관리자만 진입 : Adimin Page **로그인 한 유저만 댓글, 글 작성 등이 가능함 [ HOC ] : Higher Order Component : 다른 compo를 받아서 새로운 compo를 리턴함. const EnhancedComponent = higherOrderComponent( WrappedComponent ) Auth (HOC) 안에 >> Landing Page, Login Page 등을 포함시킴 back end에 > auth 정보를 보내고 ..

1. 로그아웃 button 'click' event 만들기 2. onClickHandler function 선언 const onClickHandler = () => { axios.get('/api/users/logout') .then(reponse=>{ if(reponse.data.success){ props.history.push("/login") }else{ alert('로그아웃 하는 데 실패했습니다.') } }) }

[ usestate 불러오기 > state 만들기(state, setState) > state 함수 선언하기 ] 까지 동일 [ submit(회원가입) 버튼 click 했을 때 ] [ 비밀번호 - 비밀번호 확인 일치하는지 확인하기 ] function onSubmitHandler { if (Password !== ConfirmPassword){ return alert ('비밀번호와 비밀번화 확인이 일치하지 않습니다.') }

switch문 : if문처럼 부등식 사용 x / 오직 ==만 사용하는 셈 [ 문법 ] switch(변수) { case 값1 : 실행문; break; case 값2 : 실행문; break; default : 실행문; } [ 예제 ] int main(){ int score = 80; switch(score/10){ case 9 : printf("A등급입니다."); break; case 8 : printf("B등급입니다."); break; case 7 : printf("C등급입니다."); break; case 6 : printf("D등급입니다."); break; default : printf("F등급입니다."); } }