이번 1차 팀프로젝트에서 로그인,회원 유저에 관련된 것을 내가 분담했다.
코드는 쓰는 것보다 읽히는 것이 더 많기에 가독성 좋은 코드가 좋다고 볼 수 있다.

로그인

• 먼저 조건을 성립하게 한 다음, 백엔드에서 전달받은 것을 통해
  fetch함수로 그 다음 조건을 부여하기로 했다.
• 정규식표현으로만 조건을 걸지 않기 때문에 조건문을 잘 활용했다.

• state값으로 아이디를 false를 선언하고 조건부 렌더링으로 조건에 맞게 값을 변경 할 수 있다.

 <div className="userBox">
            <div className="IdBox">
              <input
                className="idInput"
                type="text"
                placeholder="아이디"
                name="loginId"
                onChange={this.handleLoginInfo}
                onKeyUp={this.mainVaild}
              />
            </div>
            <span className="userAvail">
              {idCheck
                ? ""
                : valueCheck
                ? "아이디는 8~16자 영문 대 소문자, 숫자를 사용하세요."
                : ""}
            </span>
            <div className="pwBox">
              <input
                className="pwInput"
                type="password"
                placeholder="비밀번호"
                name="password"
                onChange={this.handleLoginInfo}
                onKeyUp={this.mainVaild}
              />
            </div>
            <span className="pwAvail">
              {pwCheck ? "" : pwVaild ? "비밀번호는 8글자 이상 입니다." : ""}
            </span>
            <div className="loginBox">
              <button className="loginBtn" onClick={this.mainVaild}>
                로그인
              </button>
            </div>
            <div className="labelBox">
              <input type="checkBox" id="checkIcon" />
              <label for="checkIcon">
                <AiFillCheckCircle />
              </label>
              <span>로그인 유지</span>
            </div>
            <div className="joinContents">
              <a href="/signup">회원가입</a>
            </div>
          </div>

1. 백엔드와 정규식표현을 서로 맞췄다.
2. key 값도 공유해서 조건에 맞게 사용했다.
3. fetch 를 통해 서버와 통신을 할때 어떤 조건을 넣을지 에러 메세지가 어떤것인지 소통을 많이 했다.

ID정규식 : const IS_ID_NUM_ENG = /^[a-z]+[a-z0-9]{5,19}$/g;
정규식 상수는 풀네임 대문자 알아볼 수 있게 지정해주는게 좋다.

아이디가 공백일 경우 조건 :
먼저 비구조 할당으로 const 함수로 선언해주었고,
setState 값으로 조건에 맞았을 경우 true 로 리턴으로 막아주었고,
그게 아니라면 정규식 상수 즉, IS_ID_ENG 에다가 test 메소드를 사용해서
setState 로 각각 업데이트 시켰다.
valueCheck 는 정규식일 경우에 초기 state 를 false 로 주었기에,
정규식을 확인하려고 조건문 setState 로 업데이트 시킨것 !

비밀번호 :

• 이벤트 타겟으로 조건에 className이 pwInput중
  빈 문자열 pw가 공백이면 또 다시 true로 리턴해준다.

• 비밀번호 8글자 이상일 경우 아무 문구도 안나는 조건
  각각 setState값으로 업데이트 해줬다!

---

스타일을 주기 위해 span 태그로 input 태그 밑에다가 주었고,
state 값에 따라 삼항연산자를 사용했다.

위와 같다.

---

fetch함수로 백엔드와 통신

• istAllInputValid 라는 변수를 지정했고,
  클릭, 엔터 이벤트로 &&연산자로 아닐 경우에 할당했다.

• 백엔드 규동님이 fetch에서 경로를 지정해주었고,
  Post방식으로 넣었다.

• body값은 아이디와 비밀번호만 있으면 된다.
  백엔드에서 전달된 키값과 내가 state로 선언한 값에 할당해줘야한다.

• 이제 에러메시지의 값에 따라 유저의 로그인이 성공 실패 여부를 묻는다.
  우리는 토큰값을 가지고 유저에게 제공해줄 수 있다.

• localStorage에 토큰 key value를 맞추었고,
  그에 따른 성공여부를 알려주어 props로 메인화면에 가게 전달 했다

서버와 통신이 이런것인가?? 너무 신기하구 재밌다..

---

팀프로젝트인 만큼 소통도 많이 중요하고 스크럼방식도 얼마나 중요 한지 알 수 있었다.