로그인5 [React] 회원가입, 로그인 구현하기 (Form Help Text) 리액트 팀 프로젝트에서 axios와 json-server를 이용해서 로그인, 회원가입 기능을 구현했다. 부족한 부분이 많겠지만 로그인, 회원가입을 이렇게도 구현할 수 있다는 것을 기록으로 남기려 한다. 회원가입 SignUpPage.jsx 전체 코드 더보기 import React, { useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { __getUsers, __signUp } from "../../redux/modules/usersSlice"; import { v4 as uuidv.. 2023. 1. 2. [TIL] 내일배움캠프 React 과정 2022.12.26 Today I Learned 팀 프로젝트 진행 팀 프로젝트 진행 기록 form help text 수정 원래 CheckMsg라는 스타일 컴포넌트 기본값을 display: none;을 주고 "아이디를 입력해 주세요"등의 메시지가 뜰 때마다 display: block;으로 변경되도록 구현했었는데 생각해보니 CheckMsg의 기본값을 display: block;으로 설정해 놓고 태그 안에 텍스트를 입력하지 않은 상태에서 innerText만 넣어줘도 동일한 효과가 발생한다. if (!idRegExp.test(userDi)) { userDi_msg.current.innerText = "4~12자의 영문 소문자, 숫자로 작성 가능합니다."; userDi_msg.current.style = "display:block".. 2022. 12. 27. [TIL] 내일배움캠프 React 과정 2022.12.25 Today I Leraned 팀 프로젝트 진행 input 입력 문제 해결 useEffect(() => { // 첫 렌더링 시 form help text 띄우지 않도록 if (!userId) return ; onChangeUserIdHandler() }, [userId]); input에 '12345'를 입력하면 '1234'로 인식하던 문제를 해결했다. useEffect를 사용해서 userId(=input value)가 변할 때마다 유효성 검사를 하는 onChangeIdHandler 함수를 실행해주라고 코드를 작성했다. 그런데 이렇게 했더니 로그인 페이지 들어가자마자 아이디 input 밑에 "아이디를 입력하세요"라는 메시지가 뜨는 게 보기 싫어서 userId에 입력된 값이 없다면 아무것도 실행하지 말아라!라.. 2022. 12. 26. [TIL] 내일배움캠프 React 과정 2022.12.24 Today I Learned 팀 프로젝트 진행 팀 프로젝트 진행 기록 로그인한 유저가 누구인지 어떻게 알 수 있지? 머리 감다가 갑자기 누가 로그인했는지 어떻게 특정할 수 있는지 궁금해졌다. 로그인 페이지에서는 input에 입력한 값으로 아이디와 비밀번호를 DB에서 조회해서 find()로 찾아낸다. 그런데 로그인 페이지를 벗어났을 때는 지금 로그인한 게 누구인지 어떻게 알 수 있을까? 만약에 마이페이지에 현재 로그인한 유저의 아이디를 보여준다고 할 때 find()를 어떤 값과 대조해서 가져와야 하는 걸까? 검색하다 보니 로그인한 유저의 정보를 로컬스토리지 혹은 세션스토리지에 저장해야 하는 거 같다. 나는 로컬스토리지를 사용하기로 했기 때문에 로컬스토리지에 대해서 더 알아보기로 했다. localStorag.. 2022. 12. 25. [TIL] 내일배움캠프 React 과정 2022.12.23 Today I Learned 회원가입 유효성 검사 추가 로그인 기능 구현 팀 프로젝트 진행 기록 회원가입 시 DB 구조 수정하기 "users": [ { "id": "93e88455-88ac-4aa1-92f8-d02e06748d3a", "userId": "eeee", "userPw": "12345678", "userName": "f", "isLogin": true }, ] 회원가입할 때 서버에 이런 구조로 데이터가 저장되는데 기본적으로 userId와 userPw, userName을 저장했다. 그리고 애초에 가입할 때 userId가 중복되지 않게 할 거라 id가 필요할까 생각하고 넣지 않았었는데 json-server가 자동으로 생성해주길래 얘를 아예 uuid로 설정하고 마이페이지의 param.id로 쓰기로 .. 2022. 12. 24. 이전 1 다음
