WEKEA LOGIN PAGE

이상철·2021년 10월 16일
0

Project

목록 보기
3/7
post-thumbnail

이케아 로그인 페이지 클론코딩

작업한 내용

1. 백엔드와의 데이터 통신

통신을 위해 key값을 맞추는 과정.

로그인 페이지에 필요한 정보는 email과 password 입니다.

내가 작성한 코드
로그인 버튼이 눌렸을 때,
email과 password의 유효성 검사가 통과하면 fetch 함수가 동작하여 백엔드와의 통신을 하게 합니다. 이때 데이터베이스에 내가 회원가입한 아이디와 패스워드가 존재하면,
토큰을 받게 되고 로컬 스토리지에 보관되고, 로그인이 완료되어 메인페이지로 넘어갑니다.

토큰을 받은 모습

컴포넌트의 재사용

  1. 컴포넌트화

  2. 재사용을 할 수 있을 것 같은 부분들을 컴포넌트화하여 재사용성에 초점을 두고 작업을 했습니다.

구현한 기능 들

  1. 텍스트가 입력되지 않고, blur 처리가 될 경우, 경고문구가 나오는 기능
  2. 포커스가 되고, 텍스트가 입력되면 다시 정상적으로 작동하는 부분
  3. 패스워드 입력 창에 눈동자를 클릭하면 타입이 변경되는 기능

기능 작업 초반에 어떤 식으로 접근해야하는 지 이해를 못했다.
처음 랜더링 되었을 때, 기본 화면이 나오고, Id와 Password에 입력창에 value가 없고, 포커스 되었을 때, 파란색으로 밑 줄이 그려지면서 정상적으로 작동되고 있다는 UI적 요소를 줘야했고, 입력값이 없는 채로 blur 처리가 되면 경고문구가 나와야 했기에 고민하다가, 구글링 중 input tag의 속성중 onFocus와 onBlur가 있다는 걸 알게 되었고, 각각의 속성이 동작하면 함수를 동작시켜서 스테이트값을 변경하고, 변경된 스테이트 값으로 조건부랜더링을 걸면 되지 않을까 ? 하는 생각이 순간 스쳤고, 적용해 봤는데 바로 되었다.. 진짜 지금 생각하면 아무것도 아닌데.. 너무 행복했다. 눈앞에 내가 생각한대로 동작한 사실이 .. 이맛에 개발을 하는 걸까 ? 매일 벽에 부딪히지만, 해결했을 때 쾌감이란,,,

아직 리펙토링하는 과정, 상수데이터 작성 후 mapping, 네이밍등 신경써야 하는 부분이 많고 많이 부족하지만, 성장하기 위해 노력할 것이고, 더욱 더 신경 쓰도록 노력하는 내가 되기로 다짐했다!

profile
헤더부터 푸터까지!!!

0개의 댓글