[팀프로젝트] Lush clone-로그인페이지

▶︎ 로그인페이지

구현기능

• onChange, onClick 이벤트를 통한 로그인 기능 구현

▪︎ onChange Event

SignIn.js

---

  constructor() {
    super();
    this.state = {
      inputIdValue: '',
      inputPwValue: '',
    };
  }

  handleInput = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  };

---

1. 로그인페이지에서 아이디,비밀번호 인풋창에서 입력될 값은 바뀌기 때문에 state,setState 설정

---

  <SignInBox onChange={this.handleInput} />

---

2. 아이디,비밀번호 인풋창은 회원가입페이지에서도 재사용이 가능할 수가 있어서 컴포넌트로 관리.
   이벤트가 실행될 인풋창에 onChange 이벤트 설정

SignInBox.js

---

          <input
            name="inputIdValue"
            className="idInput"
            type="text"
            placeholder="아이디"
            onChange={onChange}
            value={inputIdValue}
          />

---

3. 인풋창에 onChange 이벤트 설정

▪︎ onClick Event

SignIn.js

---

  goToMain = e => {
    e.preventDefault(); // 새로고침 방지
    fetch('http://10.58.7.20:8000/users/signin', { // 백엔드에서 주는 주소
      method: 'POST', // 백엔드와 HTTP 통신
      body: JSON.stringify({ // 백엔드에 전달할 데이터
        email: this.state.inputIdValue,
        password: this.state.inputPwValue,
      }),
    })
      .then(response => response.json())
    // ↑ 응답받는 then() 메소드 (백엔드에서 보낸 json 파일을 javascript 형식으로 전환한다고 생각하면 된다)
      .then(data => { // 데이터를 받아서 실행할 로직
        if (data.token) { // 사용자가 입력한 값이 데이터에 있는 토큰값이라면~
          localStorage.setItem('token', data.token); // 토큰 저장. ('토큰키값', '키의 벨류값')
          this.props.history.push('/main'); // 토큰 저장 후, 메인페이지로 이동
        } else {
          alert('회원정보를 찾을 수 없습니다'); // 아이디,비밀번호가 안맞으면 경고창
        }
      });

---

1. onClick 시, 실행될 함수 사용. (유효성검사)
   백엔드에서 설정한 유저 아이디,비밀번호를 입력했을 때, 메인페이지로 이동
   아이디, 비밀번호가 다를 경우에 경고창발사!

여기서 잠깐!
e.preventDefault() 함수를 넣은 이유
<form> 태그에서는 버튼을 클릭하면 화면이 새로고침이 되어버린다.
다시 창이 실행되기 때문에 초기화면으로 돌아오게 된다.
그렇기 때문에 꼭 넣어주어야 한다.

---

<form onClick={this.goToMain}>
  <SignInBox onChange={this.handleInput} />
    <div>
      <button
       type="submit"
       className={isBtnOn ? 'changeBtnColor' : 'siginBtn'}
       >로그인
      </button>
     </div>
</form>

---

2. <form> 태그에 onClick 이벤트를 설정한 이유는 <form> 태그에서submit 버튼을 인식하기 때문이다.

---

---

---

🙋🏻‍♀️ Today,

10/4 프로젝트 시작 -> 10/8 백엔드와 통신
백엔드에서 설정한 아이디,비밀번호를 받아서 구현한 로그인 페이지에 값을 각각 입력하고 엔터를 쳤다.
개발자도구에서 status가 304 Not Modified가 뜨는 것이다.
코드가 이상한 것도 없었는데 왜 200이 안뜨는지 백에서도 프론드에서도 같이 찾아보기 시작했다.
ClickEvent 함수에 e.preventDefault 가 없었던 이유도 있었고, 처음에 통신 method를 GET으로 설정했었던 이유가 있었다.
제대로 해보니 무탈하게 로그인에 성공했다.

너무 짜릿했던 순간!
백엔드에서도 프론드에서도 서로의 합작품이 성공된 순간이었다.
노력한 결과가 눈에 보였기때문에 팀원들 모두 너무나도 기뻐하고 행복해 했었다!
다음주에는 회원가입, 로그인 상태에서 로그아웃, 장바구니, 상품리스트, 상세페이지...
백엔드와 맞출 것이 많은데 아직 모든 페이지 레이아웃이 끝나지 않았다.
백엔드가 기다리지 않도록 얼른 레이아웃과 기능구현을 끝내야겠다.

---

---

---