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

nayujin-dev · 2023-11-17T11:35:51Z

✨ 구현 기능 명세

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

[ 마이 페이지 ]

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

🌠 심화 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

생각과제

API 통신에 대하여

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

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

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

💎 PR Point

로그인 화면 중 회원가입 버튼을 처음에는 usenavigate로 구현했는데, 굳이 함수를 하나 더 만드는건가? 싶어서 로 구현했습니당. 다른분은 어떻게 했을지 궁금해요!

       <St.RegisterButton type="button">회원가입</St.RegisterButton>
     </Link>
     // 초반 구현 방법
     {/* <St.RegisterButton onClick={onRegisterBtnClick}>
       회원가입
     </St.RegisterButton> */}  ```

회원가입 페이지에서 input을 하나의 객체로 관리했습니당. 이러면 state랑 onchange 함수를 여러개 만들 필요가 없어서 편했는데, 생각해보니 onchage 이벤트가 너무 많이 발생할 수 있겠다고 생각했어요. 다른분들 어떻게 구현했을지 궁금!!
- ```
       id: "",
       password: "",
       nickname: "",
     });  ``` 
```
- ```
        setUserInfo({ ...userInfo, [e.target.name]: e.target.value.toString() });
      }; ```
```

회원가입 페이지에서 회원가입 버튼 활성화되게끔 하는 로직 다들 어떻게 하셨나용?? 저는 회원정보를 하나의 객체로 받아서 아래처럼 구현했는데 생각보다 얘가 복잡하게 느껴지더라구요 ,,

       if (
         isExist === false && // 중복 체크 했을 때 중복 아닌경우
         !Object.values(userInfo).some((each) => each === "") // input값 모두 입력된경우
       ) {
         setDisabled(false);
       } else {
         setDisabled(true);
       }
     }, [isExist, userInfo]); ```

🥺 소요 시간, 어려웠던 점

5h
이번주 몸이 안좋아서 ㅜ.ㅜ 심화 얼렁 마저 하겠습니닷!!

🌈 구현 결과물

https://www.notion.so/dosopt/4-f1ce1b05d2594c57851ebe92b5585a01?pvs=4

…week04/assign1

Yeonseo-Jo

수고했습니댜!!!!

우리 리팩하구 머지도 해보쟝 (나한테 하는 말)
함세도 하이팅 🖤

Yeonseo-Jo · 2023-11-21T11:39:25Z

assignment/week04/login-project/package.json

+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },


오잉 axios가 설치가 안되어 있나용 ?! 확인 해보면 좋을것 같습니댜

Yeonseo-Jo · 2023-11-21T11:45:13Z

assignment/week04/login-project/src/pages/Login.jsx

+import axios from "axios";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { St } from "../styles/Design";


혹시 스타일 파일을 따로 만든 이유가 이쓸까요 ?!
궁금합니댜 💭!!

저는, , ,, 여러파일에서 동일한 styled component가 반복해서 쓰이면 그걸 매 파일마다 작성하기 귀찮아증후군이 있기 때문에 ,, 분리해서 import해서 사용하곤합니당 ,,

Yeonseo-Jo · 2023-11-21T11:46:19Z

assignment/week04/login-project/src/pages/Login.jsx

+          <Link to={"/signup"}>
+            <St.RegisterButton type="button">회원가입</St.RegisterButton>
+          </Link>


Link 자체를 스타일링 하는 방법두 있어용!
RegisterLink = styled(Link) 이런식으로 가능합니다!
참고참고 ~

헐랭! 합세때 바로 써먹어봐야징 ,,

Yeonseo-Jo · 2023-11-21T11:46:29Z

assignment/week04/login-project/src/pages/Login.jsx

+          {/* <St.RegisterButton onClick={onRegisterBtnClick}>
+            회원가입
+          </St.RegisterButton> */}


주석 지우기 얍!

Yeonseo-Jo · 2023-11-21T11:47:46Z

assignment/week04/login-project/src/pages/Mypage.jsx

+          setUserName(response.data.username);
+          setNickName(response.data.nickname);


const {username, nickname} = responose.data
=> 이런식으로 구조분해 할당으로 가져오는것도 가능합니당!

Yeonseo-Jo · 2023-11-21T11:49:07Z

assignment/week04/login-project/src/pages/Signup.jsx

+  });
+  useEffect(() => {
+    if (
+      isExist === false &&


요건 이렇게도 쓸 수 있을것 같아요!
!isExist &&

Yeonseo-Jo · 2023-11-21T11:49:24Z

assignment/week04/login-project/src/pages/Signup.jsx

+  useEffect(() => {
+    if (
+      isExist === false &&
+      !Object.values(userInfo).some((each) => each === "")


헉 대박 이런 깔끔한 방법이 ?!

tmi... 코테스터디에서 배운 some함수 과제할때 쏠쏠하게 활용중임니다 ..

Yeonseo-Jo · 2023-11-21T12:05:00Z

assignment/week04/login-project/src/pages/Signup.jsx

+            // value={userInfo.password}
+            // onChange={onInfoChange}


주석 지우깅 !

Yeonseo-Jo · 2023-11-21T12:06:29Z

assignment/week04/login-project/src/pages/Signup.jsx

+          {disabled ? (
+            <St.SubmitButton type="button" disabled isdisabled={disabled}>
+              회원가입
+            </St.SubmitButton>
+          ) : (
+            <St.SubmitButton type="button" onClick={onRegisterBtnClick}>
+              회원가입
+            </St.SubmitButton>
+          )}


disable 설정은 props로 내려줘서 props에 따라 styled-component에서 버튼 색을 다르게 구현해줄수 있구,
onClick도 disabled가 아닌 경우에만 가능하게 함수에서 설정 해줘도 좋을것 같습니당!
참고하깅 !

Yeonseo-Jo · 2023-11-21T12:09:07Z

package.json

+{
+  "dependencies": {
+    "axios": "^1.6.2",
+    "react-router-dom": "^6.19.0",
+    "styled-components": "^6.1.1"
+  }
+}


오잉 여깄다..! 왜 package.json이 두 개가 생겼지 ?!?!
확인 해봅시다!!!1

SooY2

이번주도 넘 고생했댜!! 합세 파이팅팅

SooY2 · 2023-11-21T13:42:53Z

assignment/week04/login-project/src/pages/Signup.jsx

+  useEffect(() => {
+    if (
+      isExist === false &&
+      !Object.values(userInfo).some((each) => each === "")


이런 방법도 있었구만!!!

SooY2 · 2023-11-21T13:43:56Z

assignment/week04/login-project/src/pages/Signup.jsx

+  }, [isExist, userInfo]);
+
+  const onInfoChange = (e) => {
+    setUserInfo({ ...userInfo, [e.target.name]: e.target.value.toString() });


문자열로 바꿔주는 섬세함 좋댜

SooY2 · 2023-11-21T13:44:41Z

assignment/week04/login-project/src/pages/Signup.jsx

+          <St.InputCategory>ID</St.InputCategory>
+          <St.InputBox
+            required
+            name="id"


required는 뭔가여??

원래 form 태그 + input 이런식으로 활용할때, input에 required가 추가되어있으면, 저 input을 채워야만 form이 제출되는걸로 알고있어용!! 이번엔 필요없던 내용같당 빼야겠다 헤헹

SooY2 · 2023-11-21T13:48:03Z

assignment/week04/login-project/src/pages/Mypage.jsx

+  const [username, setUserName] = useState("");
+  const [nickname, setNickName] = useState("");
+  useEffect(() => {
+    userId !== "" && getUserInfo();


이 코드는 결고ㅏ가 어떻게 나오는건가요??!!,,,

nayujin-dev and others added 14 commits November 17, 2023 14:01

init: router, globalstyle 초기세팅

0ea956c

init: themprovider 추가

40f9a65

feat: 로그인페이지 기본 레이아웃 구현 완료

3ddce7e

Merge branch 'week04/assign1' of github.com:DO-SOPT-WEB/YujinNa into …

20e1d70

…week04/assign1

fix: navigate의 불필요한 state 삭제

2d234a4

fix: 회원가입하기 버튼을 navigate에서 Link로 수정

7659d46

feat: 마이페이지 로직, axios 구현 완료

d19824b

fix: 중복되는 styled-component 분리

a3bb3b5

feat: 마이페이지 UI 구현 완료

91fb5bc

feat: 회원가입페이지 UI 구현 완료

e78ef23

feat: 중복체크 api, 회원가입 버튼 활성화 구현

d5c03bb

feat: 회원가입 api 구현 완료

1b65037

feat: 생각과제

7ce5043

fix: 버튼 타입 지정

de02440

nayujin-dev added 🥈기본 🥉생각 🍁 4주차 labels Nov 17, 2023

nayujin-dev requested review from Yeonseo-Jo and SooY2 November 17, 2023 11:35

nayujin-dev self-assigned this Nov 17, 2023

Yeonseo-Jo reviewed Nov 21, 2023

View reviewed changes

SooY2 reviewed Nov 21, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nayujin-dev commented Nov 17, 2023 •

edited

Loading

Yeonseo-Jo left a comment

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

nayujin-dev Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

nayujin-dev Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

nayujin-dev Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

Yeonseo-Jo Nov 21, 2023

SooY2 left a comment

SooY2 Nov 21, 2023

SooY2 Nov 21, 2023

SooY2 Nov 21, 2023

nayujin-dev Nov 21, 2023

SooY2 Nov 21, 2023

		setUserName(response.data.username);
		setNickName(response.data.nickname);

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

Are you sure you want to change the base?

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

Conversation

nayujin-dev commented Nov 17, 2023 • edited Loading

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

Yeonseo-Jo 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SooY2 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

nayujin-dev commented Nov 17, 2023 •

edited

Loading