로그인 3

로그인, 회원가입, 비밀번호 찾기(초기화), 비밀번호 수정

빽엔드분들과 협업을 통해서 현재까지 제가 구현을 맡은 파트는 로그인, 회원가입, 비밀번호 찾기(초기화), 비밀번호 수정이었습니다. 먼저 현재까지 진행된 부분까지 파트별로 적어보겠습니다. # 회원 가입 회원 가입을 진행할 때 회원가입 input 데이터를 원래 JSON형태로 변환하지않고 string 통해서 바로 api에 전달했었는데 같이 협업하시는 빽엔드 개발자 분께서 blob형식으로 보내주시면 좋겠다라고 하셔서 변경이 있었습니다. 또한 회원가입 예외처리도 진행하였습니다. # 로그인 로그인은 이전과 동일하나 각각 상황에 맞게 예외처리를 해주었습니다. 또한 로그인을 하게 되면 Redux-Toolkit을 통해서 유저 정보를 전역적으로 이용할 수 있게 해두었고 토큰 값은 React-cookie를 이용해서 관리하기..

로그인 구현

local 서버를 돌려야 하기 때문에 빽엔드 분들이 주신 파일을 자체적으로 가동하고 있습니다. 로그인 form에서 UseRef를 통해서 email과 password를 입력받습니다. 입력받은 데이터를 fetchLoginApi 비동기 함수를 통해서 POST를 통해서 이메일과 비밀번호를 서버에 전달합니다. 만약 정상적으로 진행된다면 React-cookie를 통해서 state에 SetCookie를 통해서 토큰 값을 쿠키에 저장합니다. 그 후 useDisptch를 통해서 setUser()를 통해서 action.payload의 담긴 유저의 정보를 구조 분해 할당을 해준 뒤 현재 initialstat에 저장된 값에 업데이트해줍니다. const userDispatch = useDispatch() 위의 부분만 진행 했을..

회원 가입, 로그인 UseRef VS UseState 어떤게 더 효율적일까?

오늘은 login과 join을 할 때 데이터를 빽엔드로 보내줄 form 데이터를 로그인 버튼이나 회원 가입 버튼을 눌렀을 때 정보가 잘 뜨는지 테스트를 해보고 구축해보았습니다. export default function Login({show, setShowLoginModal}: PaymentModalProps) { const [joinForm, setJoinForm] = useState(false) const [joinWelcomeText, setJoinWelcomeText] = useState('Compass에 오신 것을 환영합니다.') const loginEmailRef = useRef(null) const loginPasswordRef = useRef(null) const joinWelcomeTex..