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

binllionaire · 2023-11-17T09:02:59Z

✨ 구현 기능 명세

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

[ 마이 페이지 ]

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

🌠 심화 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

생각과제

API 통신에 대하여

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

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

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

💎 PR Point

week3 의 커밋 내역들이 딸려와서 그거 삭제하고 삽질하고 하다가 커밋이 저렇게 하루로 묶여버림 이슈 하.. 😩
저는 이번 과제에서 컴포넌트 재사용성 , 관심사에 따른 코드 분리 , 컴포넌트의 단일 책임 에 신경을 써봤어요

♻️ 로그인 & 회원가입 컴포넌트 재사용

로그인과 회원가입 화면이 유사한 구조를 갖고 있어서 SignForm 컴포넌트로 정의한 후 조건부 렌더링을 통해 구현했어요

const LoginPage = () => {
  return <SignForm type={PAGE.LOGIN} />;
};

const SignUpPage = () => {
  return <SignForm type={PAGE.SIGNUP} />;
};

♻️ Input 컴포넌트 재사용

Input 도 4번 반복 되기 때문에 따로 빼주어서 props를 이용해 구현했습니다

<Input
  pageType={type}
  inputType={INPUT.PWCHECK}
  onInputChange={handleInputChange}
></Input>

🥢 분리할 수 있는 로직은 분리

서버 통신이 필요한 Login , SignUp , DoubleCheck 로 따로 분리했어요!
로직을 분리했기 때문에 수정 시에도 찾기 쉬웠답니당

📋 배열 순환에 every() 사용

array.every() 는 배열을 순환하면서 모든 요소가 조건에 부합하면 true, 아니면 false를 반환합니다
이 메소드를 통해 조건에 부합하는 지 쉽게 확인 할 수 있었어요

const validateInputs = () => {
      const requiredInputs = [INPUT.ID, INPUT.PW, INPUT.PWCHECK, INPUT.NAME];
      const areInputsFilled = requiredInputs.every(
        (inputType) => inputValues[inputType]
      );
      return areInputsFilled;
    };

🧮 대괄호 표기법 (Computed Property Name) 사용

객체의 속성 이름을 동적으로 결정하여 inputValue 업데이트를 간편하게 구현하였어요

  const [inputValues, setInputValues] = useState({
    [INPUT.ID]: "",
    [INPUT.PW]: "",
    [INPUT.PWCHECK]: "",
    [INPUT.NAME]: "",
  });

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

🥺 소요 시간, 어려웠던 점

11h
저번 과제를 하면서 리액트와 styled-component에 익숙해져서 구현은 그렇게 오래걸리지 않았지만
컴포넌트 설계를 고민하는데에 많은 시간을 썼어요

🌈 구현 결과물

회원가입

signup.mov

회원가입 버튼 활성화

check.mov

로그인 성공 & 로그아웃

login.mov

로그인 실패

login_failed.mov

doyn511

디자인이 너무나도 깔쌈하고.. 심화과제까지 완벽하게 해낸 우리 갓기 칭찬해~ 이모티콘 하나씩 넣었다고 훨씬 더 보기 좋은거 있지?! 그리고 상수화 시킨거 너무 인상적이였어.. 고생해따!!!!!

doyn511 · 2023-11-18T11:28:27Z

week4/assignment/로그인 & 회원가입 👤/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="ko">


잊지 않고 야무지게 바꿔줬네.. 역시 우리 갓기🫶

doyn511 · 2023-11-18T11:33:26Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+const Input = ({
+  pageType,
+  inputType,
+  onInputChange,
+  isAvailable,
+  setIsAvailable,
+}) => {


사실 나도 이렇게 했는데 .. props로 받아와서 구조분해할당으로 주는게 조금 더 깔끔한거 같기도 해... 내 개인적인 생각이야..!

Suggested change

const Input = ({

pageType,

inputType,

onInputChange,

isAvailable,

setIsAvailable,

}) => {

const Input = (props) => {

const { pageType, inputType, onInputChange, isAvailable, setIsAvailable } = props;

마쟈마쟈!!

doyn511 · 2023-11-18T11:35:21Z

week4/assignment/로그인 & 회원가입 👤/src/constants/check.js

+export const CHECK = {
+  NOT_CHECKED: 0,
+  EXIST: 1,
+  NOT_EXIST: 2,
+};


오..... 이렇게 상수화 시킨거 좋다......

doyn511 · 2023-11-18T11:35:47Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+  const [inputValue, setInputValue] = useState("");
+
+  const handleChange = (e) => {
+    setIsAvailable && setIsAvailable(CHECK.NOT_CHECKED);


상수화 시키니까 어떤 조건인지 좀 더 쉽게 볼 수 있는거 같아!!!
근데 이 조건은 input에 쓰여진 값이 바뀔 때마다 setIsAvailable (중복체크 관련 state)를 NOT_CHECKED(중복체크 버튼 검정색)로 바꿔주는 그런 ... 조건인가?!

doyn511 · 2023-11-18T11:50:54Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+
+  return (
+    <Sign.InputWrapper>
+      <img src={iconSrc} />


각 input마다 아이콘 넣은거 너무 귀여워 ........🫶

img 태그에 alt 추가해주기!

doyn511 · 2023-11-18T11:57:44Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/SignForm.jsx

+  useEffect(() => {
+    const validateInputs = () => {
+      const requiredInputs = [INPUT.ID, INPUT.PW, INPUT.PWCHECK, INPUT.NAME];
+      const areInputsFilled = requiredInputs.every(


오...! .every 처음봤어.. forEach랑 뭐가 다른걸까 싶어서 찾아봤는데 every 다음에 오는 함수가 모두 통과하는지 검사하고 boolean값을 반환한다는 점이 다른거 같긴 하다! 하나 새로 알아가!

doyn511 · 2023-11-18T12:02:51Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Title.jsx

+const Title = ({ page }) => {
+  switch (page) {
+    case PAGE.LOGIN:
+      return <TitleText>로그인</TitleText>;
+    case PAGE.SIGNUP:
+      return <TitleText>회원가입</TitleText>;
+    case PAGE.MYPAGE:
+      return <TitleText>마이페이지</TitleText>;
+  }
+};


우왕 난 그냥 페이지마다 박아줬는데 이렇게 하면 페이지들 더 추가했을 때 유지보수하기 좋을거 같다!!

이거 너무 아이디어 좋은데용? 리팩할 때 써먹ㅇㅓ야지~

doyn511 · 2023-11-18T12:03:24Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Toast.jsx

심화과제까지.. 완벽하다 우리 수빈이..👍

doyn511 · 2023-11-18T12:04:09Z

week4/assignment/로그인 & 회원가입 👤/src/components/login/Login.jsx

+  const RequestLogin = async () => {
+    await axios
+      .post(
+        import.meta.env.VITE_BASE_URL + "/api/v1/members/sign-in",


헉 요렇게 +로 이어주는거 처음봤다..! 이렇게도 가능하구나..?

혹시 ${} 이거 안 쓴 이유가 있을까아?

doyn511 · 2023-11-18T12:06:56Z

week4/assignment/로그인 & 회원가입 👤/src/components/my/UserInfo.jsx

+  useEffect(() => {
+    const fetchData = async () => {
+      const path = location.pathname;
+      const idFromURL = path.substring(path.lastIndexOf("/") + 1);
+      try {
+        const data = await axios.get(
+          import.meta.env.VITE_BASE_URL + `/api/v1/members/${idFromURL}`
+        );
+        setID(data.data.username);
+        setName(data.data.nickname);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    fetchData();
+  }, [location]);


혹시 여기서 26번째 줄에 fetchData()는 왜 넣어줬는지..? 무슨 역할을 하는지 알려줄 수 있을까?! 딱 저부분만 이해를 못했어..

se0jinYoon

갓기야 구경왔다가 디자인에 화들짝 놀라구 간다 ........ 갓기 폼미 ..💗💗

hae2ni

굿굿! 일단 수비니는 상수화에 진짜 능한 거 같아! 나는 그냥 아무 생각없는 것도 뚝딱 상수화하니까 되게 가독성이 좋아지는 것 같아요!! 그리고 commonStyle 따로 빼준 거 너무너무 칭찬해!! 너무 잘 한 거 같아요
로직같은 거는 딱히 내 눈엔 손 댈게 없는 것 같고,, 나중에 fetch 함수들을 utils로 빼서 활용하는 방식으로 리팩토링 해줘도 많이 좋을 것 같다는 생각이 드네요!
진짜 늘 느끼지만 하나하나 정성스럽게 코드 짜주는 것 같아서 내가 다 고마워!

hae2ni · 2023-11-20T12:08:06Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+const Input = ({
+  pageType,
+  inputType,
+  onInputChange,
+  isAvailable,
+  setIsAvailable,
+}) => {


마쟈마쟈!!

hae2ni · 2023-11-20T12:08:54Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+
+  const [inputValue, setInputValue] = useState("");
+
+  const handleChange = (e) => {


아예 hanldeChange함수를 빼버렸구나!!?

hae2ni · 2023-11-20T12:09:07Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+    onInputChange(inputType, e.target.value);
+  };
+
+  useEffect(() => {


너무 깔끔해!! 좋아요좋아요!

hae2ni · 2023-11-20T12:09:20Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+
+  return (
+    <Sign.InputWrapper>
+      <img src={iconSrc} />


img 태그에 alt 추가해주기!

hae2ni · 2023-11-24T05:46:25Z

week4/assignment/로그인 & 회원가입 👤/src/assets/imgs/profile.png

귀여워,,,,,,,,,,,,,,,,,,,,,,

hae2ni · 2023-11-24T05:51:19Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Toast.jsx

+    <ToastWrapper>
+      <ToastMessage>{message}</ToastMessage>
+    </ToastWrapper>,
+    document.body


깔꼼하네용

hae2ni · 2023-11-24T05:51:48Z

week4/assignment/로그인 & 회원가입 👤/src/components/login/Login.jsx

+  const RequestLogin = async () => {
+    await axios
+      .post(
+        import.meta.env.VITE_BASE_URL + "/api/v1/members/sign-in",


혹시 ${} 이거 안 쓴 이유가 있을까아?

hae2ni · 2023-11-24T05:52:26Z

week4/assignment/로그인 & 회원가입 👤/src/components/my/UserInfo.jsx

+  const [name, setName] = useState("");
+
+  useEffect(() => {
+    const fetchData = async () => {


함수 분리시켜주는게 더 가독성 있을 것 같아요!

useEffect 밖으로 뺄 수 있을거야!

hae2ni · 2023-11-24T05:52:59Z

week4/assignment/로그인 & 회원가입 👤/src/components/my/UserInfo.jsx

+        const data = await axios.get(
+          import.meta.env.VITE_BASE_URL + `/api/v1/members/${idFromURL}`
+        );
+        setID(data.data.username);


요런거 나중에 점점 많아지면 구조분해할당으로 바꿔줘도 좋습니다!

hae2ni · 2023-11-24T05:53:16Z

week4/assignment/로그인 & 회원가입 👤/src/components/signup/DoubleCheck.jsx

+      import.meta.env.VITE_BASE_URL + `/api/v1/members/check?username=${id}`
+    );
+    data.data.isExist
+      ? setIsAvailable(CHECK.EXIST)


굿굿 너무 깔끔하다!

Jun-min2 · 2023-11-28T05:06:27Z

week4/assignment/로그인 & 회원가입 👤/src/components/common/Input.jsx

+      case INPUT.ID:
+        setIconSrc(loginIcon);
+        setPlaceholderText("아이디");
+        break;
+      case INPUT.PW:
+        setIconSrc(passwordIcon);
+        setPlaceholderText("비밀번호");
+        break;
+      case INPUT.PWCHECK:


여기서 위에 INPUT을 상수화 시켜준 이유가 나오는구나!

Jun-min2 · 2023-11-28T05:10:22Z

week4/assignment/로그인 & 회원가입 👤/src/pages/MyPage.jsx

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


다른 상수로 해서 onClick에 넣어주는거 너무 좋다

binllionaire added 30 commits November 17, 2023 15:58

practice : 👊🏻 4차 세미나 실습

176b173

init : 🎉 Vite + React 환경 세팅

719ab17

add : 📦 styled-components 라이브러리 추가

9a46bfc

add : 📦 react-router-dom 라이브러리 추가

22f326e

design : 💄 전역 스타일 적용

cad65d6

feat : ✨ 라우트 설정

92111ba

add : 🍱 Pretendard 폰트 추가

561823f

add : 🍱 아이콘 추가

c1666fd

remove : 🔥 사용하지 않는 파일 제거

9ea2195

design : 💄 ThemeProvider 설정

f295b35

design : 💄 로그인 페이지 퍼블리싱

be3d429

refactor : ♻️ 스타일 컴포넌트 분리

771b700

design : 💄 회원가입 페이지 퍼블리싱

1745ecb

refactor : ♻️ SignForm 컴포넌트 분리

22aedad

design : 💄 닉네임 필드 추가

bed381e

fix : ✏️ 로그인 -> 아이디 오타 수정

fcf96dd

add : 🍱 프로필 이미지 추가

88a0a0c

design : 💄 마이페이지 퍼블리싱

48779de

design : 💄 유저 정보 텍스트 스타일 수정

f0a2695

feat : ✨ 회원가입 페이지 이동 구현

2c571a4

add : 📦 axios 라이브러리 추가

08db495

feat : ✨ 아이디 중복 체크 구현

9b71f86

design : 💄 Theme 색상 추가

8c09b5b

design : 💄 활성화/비활성화 버튼

c1e069b

feat : ✨ 회원가입 버튼 활성화 구현

b983bd8

feat : ✨ 회원가입 구현

c298ba2

rename : 🚚 상수명 변경

396e1a5

style : 🎨 import문 개행 수정

a5238a2

add : 🍱 파비콘 이미지 추가

16137a9

improve : ♿ 언어, 파비콘, 타이틀 수정

a4926e1

binllionaire added 15 commits November 17, 2023 15:58

feat : ✨ 토스트 메시지 구현

4be8d51

move : 🚚 컴포넌트 해당 페이지 별로 폴더화

6a345d2

docs : 📝 생각과제 작성

558885e

refactor : ♻️ 타이틀 컴포넌트 분리

e3190e0

refactor : ♻️ 회원가입 이동 텍스트 컴포넌트 분리

533af69

refactor : ♻️ createPortal 로직 이동

cbf0217

fix : 🚑️ 토스트 에러 메시지 변경

b479edb

move : 🚚 토스트 컴포넌트 이동

d750dc7

style : 🎨 import문 개행 수정

981afe3

refactor : ♻️ 중복체크 플래그 상수 사용

6812b80

fix : 💬 비밀번호 확인 placeholder 텍스트 수정

cdc5b0a

fix : 🔒 서버 URL .env로 설정

b990e3f

add : 🙈 .env 반영되지 않도록 추가

9b7bfbb

refactor : ♻️ 중복체크 플래그 상수 사용

fe89bf7

design : 💄 회원가입 버튼 활성화 시 커서 변경

c743b75

binllionaire self-assigned this Nov 17, 2023

binllionaire requested review from hae2ni, doyn511 and Jun-min2 November 17, 2023 10:16

binllionaire added 기본과제 심화과제 생각과제 labels Nov 17, 2023

move : 🚚 week2,week3 -> week4

d8c9600

binllionaire force-pushed the week4 branch from 940ce23 to d8c9600 Compare November 17, 2023 16:42

doyn511 reviewed Nov 18, 2023

View reviewed changes

se0jinYoon reviewed Nov 21, 2023

View reviewed changes

hae2ni reviewed Nov 24, 2023

View reviewed changes

Jun-min2 reviewed Nov 28, 2023

View reviewed changes

binllionaire merged commit b5597cb into main Jan 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

binllionaire commented Nov 17, 2023

doyn511 left a comment

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

hae2ni Nov 20, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

hae2ni Nov 20, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

hae2ni Nov 24, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

hae2ni Nov 24, 2023

doyn511 Nov 18, 2023

se0jinYoon left a comment

hae2ni left a comment

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

Jun-min2 Nov 28, 2023

Jun-min2 Nov 28, 2023


		const [inputValue, setInputValue] = useState("");

		const handleChange = (e) => {

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

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

Conversation

binllionaire commented Nov 17, 2023

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

♻️ 로그인 & 회원가입 컴포넌트 재사용

♻️ Input 컴포넌트 재사용

🥢 분리할 수 있는 로직은 분리

📋 배열 순환에 every() 사용

🧮 대괄호 표기법 (Computed Property Name) 사용

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

doyn511 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

Choose a reason for hiding this comment

se0jinYoon left a comment

Choose a reason for hiding this comment

hae2ni 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