Login.js 만들기
디자인은 끝!
KeyUp 이벤트
글자를 적을 때마다 상태로 저장하는 방법을 배워야 한다.
store에 useState 정의
onChange 함수
리액트에서는 onChange 함수를 많이 사용한다.
입력된 값은 e로 들어온다.
inputField에 입력하는 테스트를 해보면,
개발자 도구를 열어서 보면 type이 :change로 들어와 있고
값은 e.target.value로 들어온걸 확인할 수 있다.
e.target.value 로 입력값을 찾을 수 있다. 꺼내쓸 수 있다는 말이지
그럼 입력하면 들어오긴 하는데, 받을 때 이게 username인지 password인지 어떻게 구분 하지??
e.target.value가 들어가지만 아직 이게 구분은 되지 않는 상황일 것이다.
login.js 전체코드
리액트는 상태값을 가지고 있으니까, DOM을 알아서 찾는다.
computed property name ⇒ 변수를 키값으로 바인딩 할 수 있다.
마지막 글자가 안날라오는 이유
버튼에 onClick 함수를 loginProcess를 달면 되는데,
중요한 것은 폼태그 안에 버튼이 달리면 자동 f5가된다.
그래서 이렇게 적어줘야 원하지 않는 동작을 하지 않는다.
전체 코드
위 문법으로 객체를 JSON으로 변환할 수 있다.
fetch 생략
localStore는 하드에 저장되어있는 정보이므로, jwt꺼내면 IO가 일어나게 된다.
그래서 꺼냈다면 메모리에도 저장 해야 된다.
그래서 통신을 해야되는 경우에는,
jwt를 메로리에 공백으로 만들어 놓고 상태변경을 해주게 되면,
나중에는 그냥 jwt를 요청할 때 같이 전송하면된다. 메모리에 있는 것을 바로 꺼내서
꼭 Redux에다가 jwt 공백 만들어 주는게 좋을거 같다
자바스크립트로 쿠키를 접근하지 못하게한다. 왜냐하면 보안에 엄청 취약해지기 때문
서버에서 셋쿠키라는 키값에 쿠키를 넣어서 보낸다.
클라이언트는 쿠키에 저장한다.
근데 자바스크립트로 쿠키에 접근이 안됨
그래서 서버에서 설정을 해줘야한다. Http only 등등
ajax로 fetch 요청은 클라이언트가 직접 저장 해야된다! (막기 때문에)
그래서 네이버 접속해서 개발자 도구를 켜보면
쿠키에 HttpOnly 속성이 보이는데, 여기서 체크가 되어있는 것들은
자바스크립트로 접근이 안되는 것들이다.
BUC는 접근이 안되니까 못 꺼낸다.
스토어 저장은 useSelector! 만약에 다른 페이지에도 저장을 하고 싶다면
useEffect 페이지가 열릴 떄 최초로딩 되는 것