[vanilla project] NIKE 클론 코딩하기 3일차

하루하루에 많은 코드들이 수정이 되고, 구현이 되어간다.

3일차 혹은 4일차이다. 이제 CSS가 대략적으로 완성이 되어가서 대략적인 CSS를 보여주겠다.

원래 hover를 했을 때, 저렇게 생각이 변하지 않았는데, 공홈을 들어가보니 색상이 변하는 거였다. 그래서 코드퍼펙션을 위해 저렇게 스타일을 주었고, tabindex를 주어 웹접근성을 향상시켜주었다.

 

tabindex란 

• tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다.

tabindex를 넣게되면 Tab키를 이용하여 움직일 수 있다. 근데 이것말고도 방향키로도 움직일 수 있는 것이 있다고 하는데, 그것은 다음에 기능 구현이 다 끝나면 그때 추가를 시켜야겠다.

 

그리고

이렇게 체크를 하게되면 저런식으로 이미지가 나오게 수정을 해주었다. 이는 가상요소를 이용하여 label의 가상요소로 호버를 하면 저런식으로 이미지와 애니메이션을 주었다. 이는 전에 했던 프로젝트와 챗지피티를 활용해서 완성을 시켰다. 이것은 해두면 나중에도 써먹을 수 있을 거 같다.

 

다음은 기능 구현인데, 

처음에 내 페이지는 로그인 페이지로 시작을 한다.

이렇게 로그인 페이지로 시작을 하는데, 로그인을 했을 당시에 이메일이 있으면, 패스워드 페이지, 없으면 회원가입 페이지로 이동하게 구현을 해두었다. 근데 이때는 api 연결은 안하고 그저 페이지 이동으로만 했었는데, 이번 api 요청을 하면서 리퀘스트를 확인해보니 로그인은 패스워드와 이메일을 필수로 요청을 했었다. 그래서 여기서 나는 패스워드는 이 페이지에 뒤에 입력하는 거라, 계속 422번 오류가 떴다. 이는 빈 칸이 있다며, 패스워드를 입력해야한다는 에러가 계속 났었다. 그래서 방법을 찾지못해 친구들한테 조언을 구해보다가, 여기서 로그인을 바로 하는것이 아닌 단순하게 이메일만 비교를 하라는 조언을 받았다. 

이 조언을 받고 머리가 띵했다. 왜냐하면 api 엔드포인트를 찾아보니, 이메일 중복확인이라는 것이 있었던 것이다....(자세하게 보지 않은 죄...) 

원래 로그인 회원가입은 post로 요청을 했었는데, 이것은 get으로 하는 것였다 .그래서 바로 get로 바꿔주고 엔드포인트 변경해주었다. 

그리고 현재 주말이라... 빠르게 대답을 받을 수 없었는데, 하마터면 주말을 날릴 뻔했다... api 엔드포인트를 수정해달라는 요청을 할 뻔했다. 그리고 토큰을 받는 형식을 여기서 토큰을 요청하여 localstorage에 저장을 하려고 했으나... 굳이 이메일만 비교하고 어차피 비밀번호 페이지가 있는데 받을 필요가 없을 것 같아, 여기서 토큰을 저장하는 로직을 삭제하였다. 

 

그래서 저기 계속을 누르면 아래 비밀번호 페이지로 이동하게 된다.

이 비밀번호 페이지에서 이제 이메일과 비밀번호를 서버에 보내어 확인을 한 후, 토큰을 발급 받는 형식으로 로직을 구현하게 되었다. 사실 예전에 로그인 회원가입을 구현한 적이 있었지만, 그때는 진짜 아무것도 모르는 상황에서 챗지피티를 의존한 상태에서 구현을 한 거 같다. 그래서 아무것도 몰랐다. 근데 이번에 공부를 하고 해보니 어느정도 이해가 되는 것 같다. 하지만 아직은 배움이 부족하여 열심히 배워야 한다....

하여튼 그래서 비밀번호를 입력하여 완료가 되면 토큰을 발급 받는건데, 로직이 잘못된건지 서버 연결이 잘못되었는데 알맞은 비밀번호를 입력했음에도 불구하고 토큰을 받지 못했다고 한다.. 이거는 나중에 한번 질문을 해봐야겠다. 

그리고 저기 편집이라는 버튼을 누르면 토큰 및 세션에 저장된 모든 것이 삭제되면서 로그인으로 화면이 전환된다. 

여기서 clear()라는 메서드를 처음 사용해보았다. 다시 로그인하는 거니 삭제하는게 맞겠지?????

하여튼 이러하고 이전 버튼도 마찬가지로 삭제를 하여 로그인으로 넘어간다.

비밀번호 찾기는 아직 구현하지 못하여, 그냥 alert을 이용하여 클릭하면 아직 구현하지 못한 페이지라고 사용자가 알수 있도록 했다. 

오늘은 여기까지 한 것 같다. 내일 다시 전체적으로 보면서 글을 다시 올려보겠다....