전체 글 53

dev) 2/7 로그인/로그아웃 최종 완성, 관리자 계정

1. 로그인 로그아웃 관리자 계정 로그인 ! 현재 로직은 보안상 아주 위험한 로직이지만 우선적으로 기능 구현 후 리팩토링 할 예정입니다. 로그인 시 ID가 관리자의 ID인 경우 localstorage에 key와 value를 role과 admin으로 값을 저장 아닐 경우 (일반 유저) 백엔드로 부터 JWT 토큰을 발급 받아 localstorage에 저장 해당 로직 완성 전 마주친 에러와 해결한 방법 1. 로그인 완료후 navigate로 메인페이지로 이동하자 새로고침이 생기지 않아서 localstorage에 token을 가지고 있는 status가 인식되지 않음 2. 따라서 window.location.href로 전체 페이지 새로고침으로 유저의 token status를 인식시킴 (로그아웃도 마찬가지로 wind..

Web Project/dev 2023.02.08

dev) 2.5 ~ 2.6 로그인/로그아웃 구현

이틀에 걸쳐 로그인 구현을 마쳤다. 내가 구상한 로그인 로직은 이러하다. 1. 회원가입과 동일하게 form을 통하여 input값을 받는다. 2. axios의 post를 통하여 id , password를 보낸다. 3. JWT 토큰을 백으로부터 발급 받는다. 4. JWT 토큰을 프론트단에서 보관한다. 5. 토큰이 있으면 로그인 상태, 토큰이 없다면 비로그인 상태 이 중 3번까지는 쉽게 완료가 되었으나 4번이 어려웠다... JWT 토큰을 보관하기 위하여 local storage / session / cookie 3가지의 방법이 있었으나, 이미 팀원분이 local storage에 상품을 담는 방법을 어느 정도 구현을 하시고 계셔서 같이 local storage에 jwt토큰을 저장하기로 하였다. 이에 따라 두가지..

Web Project/dev 2023.02.07

dev) 2/4 회원 정보 수정

오늘은 하루종일 정보수정 로직을 수정하고 테스트 해보았다. 해당 로직에서 특이점이 있었는데 1. 정보가 수정되긴 하지만 userId 21가 아닌 userId 14 (리스트의 최상단 ID) 의 값이 수정된다. 2. 백으로부터 res프론트에서의 then문이 실행 되지 않는다. 따라서 오늘은 하루 종일 해당 로직을 프론트 , 백 두가지에서 수정을 진행하였다. 1. 정보가 수정되긴 하지만 userId 21가 아닌 userId 14 (리스트의 최상단 ID) 의 값이 수정된다. -> User.findOne이 name인데 name을 전송하고 있지 않아서 온갖 방법을 다해봤는데 아직은 방법을 못찾았다... 혹시나 해서 email을 일치하게 해서 post보냈는데도 변경 되지 않는다. 추후 백엔드와 같이 얘기해서 해결해 ..

Web Project/dev 2023.02.05

dev) 2/3 Get, Post 완료

get 하는 중 생긴 여러 error에 대한 회고 1. Page에서 get요청을 여러번 보냄 2. 정상적으로 요청이 완료 되었음에도 catch alert 출력 3. backend에서 받은 데이터 출력 1. Page에서 get요청을 여러번 보냄 useEffect, reactstrictmode 제거해서 해결 get요청을 Page내에서 3번씩 보내서 해당 방법으로 해결 하였으나, reactstricmode를 제거 함으로 어떤 문제가 생기는지는 추후 개발하면서 더 공부해봐야 할 예정 2. 정상적으로 요청이 완료 되었음에도 catch alert 출력 catch 안에서 error를 변수로 받지 않고 바로 alert을 출력하여 발생 .catch도 일종의 .then으로 작동하는것으로 추측 만약 error를 받도록 설정..

Web Project/dev 2023.02.04

dev) 2/2 회원가입 POST 테스트

Submit 후 백엔드 서버에 전달하는 로직 작성 후 지속적으로 post요청을 보냈으나 post는 되지만 막상 백엔드 db에는 등록이 되지 않는 문제 발생 여러 에러 파악 후 백엔드와 프론트엔드간 주고 받는 인터페이스가 일치 하지 않았음을 알게 되었고 프론트에서는 formdata로 묶어서 보냈지만 백엔드에서는 formdata로 받기로 되어 있지 않다는 것을 알고 formdata를 구조분해해서 전달 후 통신 성공. 그러나 백엔드 db문제로 db에 작성되는 것에는 실패 하였다. 추가로 test용 console.log와 alert을 작성하여 어디까지 성공하였는지 체크하는 메커니즘 작성 백엔드와 상의 후 주고 받는 인터페이스 정의해서 명세 받기로 결정 하였다.

Web Project/dev 2023.02.03