[4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 #5

jungwoo3490 · 2023-11-17T09:33:19Z

✨ 구현 기능 명세

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

로그인
- 아이디와 비밀번호 입력후 로그인 버튼을 눌렀을시 성공하면 /mypage/:userId 로 넘어갑니다. (여기서 userId는 로그인 성공시 반환 받은 사용자의 id)
회원가입 이동
- 회원가입을 누르면 /signup으로 이동합니다.

[ 회원가입 페이지 ]

중복체크 버튼
- ID 중복체크를 하지 않은 경우 검정색입니다.
- ID 중복체크 결과 중복인 경우 빨간색입니다.
- ID 중복체크 결과 중복이 아닌 경우 초록색입니다.
회원가입 버튼
- 다음의 경우에 비활성화 됩니다.
- ID, 비밀번호, 닉네임 중 비어있는 input이 있는 경우
- 중복체크를 하지 않은 경우
- 중복체크의 결과가 중복인 경우
- 회원가입 성공시 /login 으로 이동합니다.

[ 마이 페이지 ]

마이 페이지
- /mypage/:userId 의 userId를 이용해 회원 정보를 조회합니다.
- 로그아웃 버튼을 누르면 /login으로 이동합니다.

🌠 심화 과제

[ 로그인 페이지 ]

토스트
- createPortal을 이용합니다.
- 로그인 실패시 response의 message를 동적으로 받아 토스트를 띄웁니다.

[ 회원가입 페이지 ]

비밀번호 확인
- 회원가입 버튼 활성화를 위해서는 비밀번호와 비밀번호 확인 일치 조건까지 만족해야 합니다.
중복체크
- 중복체크 후 ID 값을 변경하면 중복체크가 되지 않은 상태(색은 검정색)로 돌아갑니다.

생각과제

API 통신에 대하여

로딩 / 에러 처리를 하는 방법에는 어떤 것들이 있을까?

패칭 라이브러리란 무엇이고 어떤 것들이 있을까?

패칭 라이브러리를 쓰는 이유는 무엇일까?

💎 PR Point

MyPage 이동 부분
useParams 훅으로 url에서 파라미터 userid값을 받아온 다음에 이 값을 이용해 유저 정보 api를 호출해 정보를 얻어와서 렌더시켰다.

let { userId } = useParams();

useEffect(() => {
    axios({
      method: "get",
      url: `${import.meta.env.VITE_BASE_URL}/api/v1/members/${userId}`,
    }).then((response) => {
      setUsername(response.data.username);
      setNickname(response.data.nickname);
    });
  }, []);

중복체크 후 ID 값을 변경하면 중복체크가 되지 않은 상태(색은 검정색)로 돌아가는 부분
기본과제인 줄 알고 했는데 심화과제였다. 중복체크 state인 isExist로 0, 1, 2를 줬는데 0은 중복체크를 아직 안 한 상태, 1은 중복체크 실패, 2는 중복체크 성공 상태이다. ID 입력 input에 onChange되면 발생하는 이벤트 핸들러인 handleChangeIdInput에 setIsExist(0);을 해줘서 중복체크가 완료되었더라도 추가적으로 ID 값 변경이 있으면 다시 중복체크 안 한 상태로 돌아가도록 해주었다.
❓ 궁금한 점: 0, 1, 2로만 하면 사실 다른 사람이 눈으로 보기엔 어떤 게 어떤 상태인지 모르기 때문에 가독성이 떨어지는 코드가 되어서 별로라는 생각이 드는데... 이렇게 해도 괜찮은지, 안 괜찮다면 어떻게 하는 게 좋은지 궁금해요!!!!!

const handleChangeIdInput = (e) => {
    setId(e.target.value);
    setIsExist(0);
  };

🥺 소요 시간, 어려웠던 점

6h
구현 중에는 크게 어려운 점은 없었다!! 이번에 심화 꼭 해야지 생각했는데 이번주에 하필 코테 스터디랑 심심스 발표 두 개가 겹쳐버린 탓에 바빠서 기본 과제밖에 못 했다...🥺 그런데 푸시했는데 .gitignore에 .env 추가 안 해서 추가하고 다시 푸시했는데 그래도 사라지지가 않아서 막 .env 커밋내역 지우고 여러 작업을 했는데, 이걸 main에서 pull을 안 받고 하는 바람에 아예 다르게 분기가 되어버려서 week4 브랜치와 main 브랜치에 공통 커밋이 없어 비교가 불가능해 PR을 못 날리는 상황이 되었다..... 여기서 이것저것 해보다가 시간을 엄청 썼는데, 결국 잘 안 돼서 과제 코드 백업하고 브랜치 날린 다음 다시 브랜치 파서 푸시해서 해결했는데 상당히 당황스럽고 성가신 작업이었다... 다시금 main에서 pull을 잘하자고 다짐했던 경험이었다.... (톡방에 질문했는데 해결해주려고 도와준 울 금잔디조 감동 🥹)

🌈 구현 결과물

2023-11-17.6.29.00.mov

⭐️ 심화과제 적용 영상

2023-12-15.5.43.23.mov

aazkgh

과제 하느라 넘넘 수고했어용요오요옹❤
이번에도 정우의 지독한 짱구 사랑이 보이는,,,
앞으로 2주동안 합세 화이팅하구 우리의 코리는 이어진다,,👊 화이팅!!!

aazkgh · 2023-11-19T17:33:05Z

week4/Login-System/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">


우리 요거요거 팟짱님이 한글을 사랑하시는 만큼! 바꿔줍시다!!

aazkgh · 2023-11-19T17:33:30Z

week4/Login-System/index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


요 친구도!! 저희가 지금 진행하는 프로젝트의 title 인데 수정 한 번씩 부탁해요!!

aazkgh · 2023-11-19T17:33:46Z

week4/Login-System/src/assets/images/짱구.jpg

지독한 짱구 사랑,,,,

aazkgh · 2023-11-19T17:34:16Z

week4/Login-System/src/assets/react.svg

혹시 이거 사용하지 않는다면 삭제 부탁해요 (소곤소곤)

aazkgh · 2023-11-19T17:38:01Z

week4/Login-System/src/pages/LoginPage.jsx

+
+  const navigate = useNavigate();
+
+  const handleChangeIdInput = (e) => {


요렇게 함수 내용이 1줄일 때, 밖으로 빼주는 게 좋을까요 인라인에 적는 게 좋을까요,,,,
저는 코드가 길어지는 게 싫어서 인라인으로 작성했는데 여러분들의 의견이 궁금합니다,,,

aazkgh · 2023-11-19T17:44:16Z

week4/Login-System/src/pages/LoginPage.jsx

+          <InputOptionText>ID</InputOptionText>
+          <InputBox
+            type="text"
+            name=""


요오기를,,,왜,,빈값으로 줬을까요,,??

aazkgh · 2023-11-19T17:45:00Z

week4/Login-System/src/pages/MyPage.jsx

+      <ModalContainer>
+        <ModalTitle>MY PAGE</ModalTitle>
+        <UserInfoContainer>
+          <ProfileImage src={profileImage} alt="프로필 이미지" />


앗 나 alt 안 썼다 ㅋㅎㅋㅋ

aazkgh · 2023-11-19T17:46:36Z

week4/Login-System/src/pages/SignUpPage.jsx

+  const [isComplete, setIsComplete] = useState(false);
+
+  useEffect(() => {
+    setIsComplete(


useEffect 안에 바로 setter 함수를 넣어줬군뇨,, 생각치 못했던 방향인데 좋은 것 같아요 굳굳구욷

aazkgh · 2023-11-19T17:46:43Z

week4/Login-System/src/pages/SignUpPage.jsx

+    }
+  };
+
+  console.log(isExist);


요거 이제 필요 없으니까 삭제해줍시다!!

aazkgh · 2023-11-19T17:48:24Z

week4/Login-System/src/pages/SignUpPage.jsx

+          <InputOptionText>ID</InputOptionText>
+          <UserIdInputBox
+            type="text"
+            name=""


요 친구들 전부 채워줍시다!!

SynthiaLee

스터디 발표에 치이는 와중에도 너무 깔-끔하게 과제했당
완전완전 수고많았구 합세두 화이팅-!!

짱구 프사 아주 인상적.

SynthiaLee · 2023-11-19T14:20:06Z

week4/Login-System/.gitignore

+*.sw?
+
+#env 파일
+.env


별 다섯개,,⭐️⭐️⭐️⭐️⭐️

SynthiaLee · 2023-11-19T14:20:28Z

week4/Login-System/README.md

요 파일은 지워줘도 될거 같으용~

SynthiaLee · 2023-11-19T14:20:56Z

week4/Login-System/index.html

+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


우리 요거 title도 바꿔줍시댱~

SynthiaLee · 2023-11-19T14:45:49Z

week4/Login-System/index.html

+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />


요것두 기존으로 들어가있는 svg파일이라 빼줘도 됩니당~

SynthiaLee · 2023-11-19T14:46:20Z

week4/Login-System/public/vite.svg

이것두 삭제해주세용~

SynthiaLee · 2023-11-19T18:37:35Z

week4/Login-System/src/pages/SignUpPage.jsx

+  const [id, setId] = useState("");
+  const [passwd, setPasswd] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [isExist, setIsExist] = useState(0);


pr에 요기 적어놨던데 나두 그냥 Boolean 값으로 해서 할라했더니 경우의 수가 3가지더라구,,
가형한테도 물어보고 해서 결국엔 디폴트 값을 안 넣어주고 중복되지 않을 때가 true, 중복될 때가 false, 그리도 아직 체크 하지 않았을 때가 setState() 상태로 해줬는데 사실 아직까지 이래도 되는건지 확실하진 않움,,

SynthiaLee · 2023-11-19T18:45:20Z

week4/Login-System/src/pages/MyPage.jsx

+  const handleClickLogoutButton = () => {
+    navigate("/login");
+  };


요기 함수가 하는 일이 navigate 뿐이고 어디 다른데서 재사용이 되지 않는데
따로 함수로 빼줘야할까???하는 생각~~

SynthiaLee · 2023-11-19T18:46:36Z

week4/Login-System/src/pages/LoginPage.jsx

+    if (id === "") {
+      alert("아이디를 입력해 주세요!!");
+    } else if (passwd === "") {
+      alert("비밀번호를 입력해 주세요!!");


허걱 이거 좋은 생각이당,,,!!
친절해~

SynthiaLee · 2023-11-19T18:50:30Z

week4/Login-System/src/pages/LoginPage.jsx

+  const handleChangeIdInput = (e) => {
+    setId(e.target.value);
+  };
+
+  const handleChangePasswdInput = (e) => {
+    setPasswd(e.target.value);
+  };


이 두 함수들도 기능이 한개고 재사용이 안되는데
따로 함수로 빼지않고 이 함수가 사용되는데서 바로

onChange={(e) => {setPasswd(e.target.value)}};

이러케 해줘도 되지 않을까용??

SynthiaLee · 2023-11-19T18:59:03Z

week4/Login-System/src/pages/SignUpPage.jsx

+        <Button
+          color="white"
+          onClick={handleClickCompleteSignUpButton}
+          disabled={!isComplete}


👍🏼👍🏼👍🏼

jungwoo3490 added 2 commits November 17, 2023 15:25

4주차 기본과제 - 구현 완료

95eaeeb

4주차 생각 과제

856f3a6

jungwoo3490 added the 4주차 label Nov 17, 2023

jungwoo3490 self-assigned this Nov 17, 2023

jungwoo3490 requested review from aazkgh and SynthiaLee November 17, 2023 09:34

aazkgh reviewed Nov 19, 2023

View reviewed changes

SynthiaLee approved these changes Nov 19, 2023

View reviewed changes

4주차 심화과제 - 구현 완료

05532d5

jungwoo3490 changed the title ~~[4주차 기본/생각 과제] 🍁 로그인/회원가입~~ [4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 Dec 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 #5

[4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 #5

jungwoo3490 commented Nov 17, 2023 •

edited

Loading

aazkgh left a comment

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

aazkgh Nov 19, 2023

SynthiaLee left a comment

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023 •

edited

Loading

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023

SynthiaLee Nov 19, 2023


		const navigate = useNavigate();

		const handleChangeIdInput = (e) => {

[4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 #5

Are you sure you want to change the base?

[4주차 기본/심화/생각 과제] 🍁 로그인/회원가입 #5

Conversation

jungwoo3490 commented Nov 17, 2023 • edited Loading

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

aazkgh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SynthiaLee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SynthiaLee Nov 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jungwoo3490 commented Nov 17, 2023 •

edited

Loading

SynthiaLee Nov 19, 2023 •

edited

Loading