[4주차 기본/심화/공유 과제] 회원가입 & 로그인 #5

heesunee · 2024-11-12T13:07:16Z

✨ 구현 기능 명세

💡 기본 과제

React + TypeScript
Axios 라이브러리 사용
ThemeProvider, GlobalStyle 사용

로그인

로그인 타이틀
아이디(이름) 입력 Input
비밀번호 입력 Input
로그인 버튼 (hover시 배경색 바꾸기 (transition 적용))
회원가입 버튼 (회원가입 페이지로 이동)

회원가입

이름 - 비밀번호 - 취미 입력이 한 페이지에서 일어남 (컴포넌트만 갈아끼우기)
상단에 회원가입 타이틀
하단에는 로그인 페이지로 가는 링크

회원가입(이름)

이름 입력 Input
다음 버튼 (비밀번호 입력 폼 나옴)
Input 비어있을 때 버튼 비활성화

회원가입(비밀번호)

비밀번호 입력 Input
비밀번호 확인 Input
둘 중 하나라도 비어있으면 버튼 비활성화
두 비밀번호가 다르면 버튼 비활성화
다음 버튼 (취미 입력 폼 나옴)

회원가입(취미)

취미 입력 Input
회원가입 버튼
Input 비어있을 때 버튼 비활성화
회원가입 실패 시 에러메시지 alert 출력
회원가입 성공 시 회원번호 alert 출력하고, login 페이지로 이동

마이페이지

헤더에 취미, 내 정보 메뉴 탭
헤더에 로그아웃 버튼
로그아웃 버튼 클릭 시 token 저장 정보 삭제하고 로그인 페이지로 이동 (token 저장 위치는 자율)
헤더 취미, 내 정보 취미 페이지, 내 정보 페이지 출력 (1개의 페이지로 구현해도 되고, url 달라도 됨)

마이페이지(취미)

마이페이지(내 정보)

비밀번호만 입력하면 비밀번호만 변경
취미만 입력하면 취미만 변경
둘 다 입력하면 둘다 변경
둘 다 비어있으면 alert

🔥 심화 과제

any 사용하지 않기

회원가입 (이름)

8글자 넘어가도 버튼 비활성화 처리
8글자 넘어가는 것에 대해 에러메시지 출력

회원가입 (비밀번호)

[] 비밀번호 보이기 버튼 추가
8글자 넘어가도 버튼 비활성화 처리
8글자 넘어가는 것에 대해 에러메시지 출력
비밀번호 불일치 에러 메시지 출력
(선택) 에러메시지 한개만 출력해도 됨 (우선순위는 알아서)

회원가입 (취미)

8글자 넘어가도 버튼 비활성화 처리
8글자 넘어가는 것에 대해 에러메시지 출력

공유과제

제목:

링크 첨부 :

❗️ 내가 새로 알게 된 점

커밋이 좀 꼬여서 , 11월 12일 커밋부터 봐주시면 됩니다 ㅠㅠ
원래 tailwind CSS가 익숙해서 이번 과제는 tailwind로 구현했습니다!! (괜찮겠죠?? ㅎㅎ..). 사실 이전에는 tailwindCSS를 사용할때 globalstyle, themeProvider를 설정하지 않아서 몰랐는데 styled-component와 함께 사용할 수 있다는 걸 알게 되었습니다. (당연한 것 같기도) 그래서 theme.ts와 tailwind.config.ts에서 사용하는 색상을 같게 하기 위해서 styles폴더에 colors.ts를 추가해 같은 색상명을 공유하도록 설정했습니다!
이전 Typescipt+react 프로젝트를 진행해서 서버와 통신할때는 보통 Swagger 문서를 프로젝트에 바로 연동하는 편이여서 성공시 response, 실패시 response, 요청 request를 딱히 크게 고려하지 않고 바로바로 불러와서 사용하는 편이었는데, 이번에는 types에 서버 명세서를 보고 입력해보았습니다. 직접 작성하다 보니 필요한 값이 뭔지, 더 잘 이해하면서 작업할 수 있었던 것 같습니다 !!!
Token을 헤더에 함께 보낼때, Bearer ${token} 인지.. 그냥 token인지 많이 헷갈렸었습니다 ㅠㅠ 참고 문서를 봐도 다 다르게 나와서.. 세미나 시간에 사용해보았던 Thunder Client로 직접 보내보고 그에 맞게 작성하다보니 해결되었습니다. 역시 직접해보는 것이 제일 중요한 것 같습니다!

❓ 구현 과정에서의 어려웠던/고민했던 부분

1. 회원가입 시 단계별로 다른 컴포넌트를 보여주기

처음 과제 요구사항을 읽었을 때는, 페이지를 넘어가면 되는건가? 했었는데 보여지는 컴포넌트를 다르게 처리하라는 내용이었습니다. 저는 1, 2, 3단계로 생각을 해서 useState와 조건부 렌더링을 사용해서 각 단계를 관리했습니다.
1단계: 이름입력, 2단계: 비밀번호 입력: 3단계: 취미입력 기본은 const [step, setStep] = useState(1); 1단계로 설정
{step ===1 이면 <이름 입력하는 컴포넌트>} 이런식으로 구현했습니다

2. 회원가입 시 입력 필드에 대한 유효성 검사

기존에는 이름의 길이, 비밀번호 일치, 비밀번호 길이, 취미의 길이에 대한 state를 각각 작성했었는데요, 비효율적인 것 같아서 각 입력필드의 유효성 검사 상태를 객체로 저장했습니다.

  /* 각 입력 필드의 유효성 검사 상태를 객체로 관리 */
  const [errors, setErrors] = useState({
    username: false,
    password: false,
    confirmPassword: false,
    hobby: false,
  });

그리고 스프레드 연산자를 사용해 기존 errors 상태 객체 값을 유지하면서, 특정 필드에 대한 값을 업데이트 했습니다.

setErrors((prevErrors) => ({ // 비밀번호 에러 업데이트 부분
  ...prevErrors,
  password: isValidLength(inputPassword),
  confirmPassword: inputPassword !== confirmPassword,
}));

이를통해 필요하지 않은 필드에 대해서는 값을 그대로 유지하면서, 새로 에러를 체크하려는 필드만 선택적으로 업데이트 할 수 있었습니다.

폴더구조와 컴포넌트

저는 이번에 폴더를 api, component, pages, styles, route, types 정도로 나누어서 관리했는데 다른분들은 어떻게 하셨는지 궁금해요! 컴포넌트도 저는 Header만 작성을 해서... 이번에 비슷한 화면 패턴이 많은데 다른 분들의 코드가 궁금하네요😃

axios

이번에 가장 많이 공을 들인 부분인데요, 사실 api 호출에서 작성하는 부분이 겹치는 경우가 많은데 (token이나 get, post, put 등의 요청 함수) 나누어서 관리하려고 노력했습니다.
axiosConfig.ts

import axios from 'axios';

// 사용자 지정 config로 새로운 Axios 인스턴스 생성
const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
});

// JWT 토큰을 요청 헤더에 추가하는 인터셉터
axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('accessToken') || '';
    console.log('토큰:', token);

    if (token) {
      config.headers.token = token;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;

axiosConfig.ts에는 토큰 요청을 헤더에 추가하는 인터셉터를 작성해서 새로운 커스텀된 axios 인스턴스를 만들었습니다! (참고링크: https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9)
-api.ts에는 get, post, put의 HTTP 요청을 처리하는 함수들을 정의해두었습니다. 여기서 정의해두었던 axiosInstance를 사용했어요
-authApi에는 유저와 관련된 api, hobbyApi에는 취미 관련 api를 작성했습니다. 미리작성해두니 페이지 안에서 함수 response를 받는 부분이 const response = await getMyHobby(); 처럼 간단해졌습니다.

가장 고민했던 부분

유저정보를 변경하는 api를 연결하는 부분에서 많은 시간이 걸렸습니다..
기존에 PutUserRequest에는 hobby, password, token을 모두 작성했었는데

 //유저 정보 변경
export interface PutUserRequest {
  //
  hobby?: string;
  password?: string;
  headers: {
    Authorization: string; // 로그인 시 받은 token
  };
}

유저 정보를 변경하는 request에는 취미, 비밀번호, 헤더를 모두 포함해서 보내놓게 작성해두고 axiosInstance에 이미 토큰이 포함되어있으니까 updataData에는 취미랑 비밀번호만 작성해야겠다. 하고 작성했더니 타입 불일치가 계속 떠서, 전 토큰 문제인지 axiosInstace를 잘못 작성한건지 updateUser 함수를 잘못 작성한건지 한참 헤멨는데, 그냥 PutUserRequest 자체에 헤더가 포함이 되지 않아도 자동으로 붙여지는 것이기 때문에 PutUserRequest에서 headers를 지웠더니.. 아주 말끔하게 해결되었습니다! 역시... 인과관계를 잘 살펴봐야하는 것 같습니다 ㅠㅠ

    // 수정하려는 유저 데이터
    const updateData = {
      hobby: hobby || '',
      password: password || '',
    };

 //유저 정보 변경, headers를 지우니 타입 불일치 해결!
export interface PutUserRequest {
  //
  hobby?: string;
  password?: string;
}

🥲 소요 시간

12h

🖼️ 구현 결과물

회원가입, 이름 ,비밀번호, 닉네임 입력하고 유효성 검사

default.mp4

8.mp4

로그인, 토큰확인

default.mp4

다른 사용자 취미 조회

default.mp4

내 정보 변경

default.mp4

KIMGEONHWI

희선님 4주차 과제도 고생많으셨어요😄
오랜만에 보는 테일윈드여서 반가웠네요! 전체적으로 구조도 너무 잘짰고, 스타일링은 말할것도 없네요. api 로직 분리해서 사용한 부분도 많이 배울 수 있었습니다. 합세 기간 동안도 잘부탁드립니다.

KIMGEONHWI · 2024-11-19T07:51:11Z

week04/API/.env

p1: 현재 .env 파일이 그대로 노출되어 있습니다. .gitignore에 .env를 추가해주어서 git에 올라가지 않도록 하는 것이 좋을 것 같습니다. 아마 깜빡하고 놓친 부분이겠죠?

KIMGEONHWI · 2024-11-19T08:18:13Z

week04/API/src/pages/mypage.tsx

+
+  return (
+    <div>
+      <Header />


p3: 현재 mypage와 hobby 컴포넌트에서 모두 공통적으로 Header컴포넌트를 불러와서 사용하고 있는데 Layout으로 설정해서 공통으로 불러와서 사용할 수도 있게 할 수 있을거 같아요

KIMGEONHWI · 2024-11-19T08:19:52Z

week04/API/src/route/route.tsx

+    path: 'mypage',
+    element: <MyPage />,
+  },
+  {
+    path: 'hobby',
+    element: <Hobby />,


p5: 저는 조건부 렌더링 방식으로 버튼 클릭시 mypage와 hobby 컴포넌트를 렌더링 해주는 방식으로 구현 했는데, 각각 페이지로 만드는건 생각못했네요!!

KIMGEONHWI · 2024-11-19T08:43:53Z

week04/API/src/pages/signup.tsx

p2: 각 단계에서 렌더링되는 입력 필드를 컴포넌트로 분리하면 가독성과 관심사 분리 차원에서 더 좋을 것 같아요!

KIMGEONHWI · 2024-11-20T05:22:00Z

week04/API/src/api/api.ts

p5: 별도의 HTTP 요청 함수를 정의해 두니 재사용성도 증가하고, 훨씬 효육적인거 같네요. 배워갑니다!

KIMGEONHWI · 2024-11-20T05:23:11Z

week04/API/src/api/authApi.ts

p5: 저는 급하게하느라 api로직을 분리하지 못했는데, 반성하게 되네요.

KIMGEONHWI · 2024-11-20T05:28:01Z

week04/API/src/pages/signup.tsx

+  const [errors, setErrors] = useState({
+    username: false,
+    password: false,
+    confirmPassword: false,
+    hobby: false,
+  });


p2: 현재 유효성 검사 상태를 관리하는 errors를 사용하고 있지만, 개별적으로 업데이트하고 있네요. 유효성 검사를 단계별로 관리할 수 있게 해주어서 가독성을 높일 수 있을 것 같아요!

KIMGEONHWI · 2024-11-20T05:30:54Z

week04/API/src/pages/signup.tsx

+              </div>
+              {errors.password && (
+                <p className='text-red-600 mt-4 text-sm'>
+                  비밀번호를 8자 이하로 입력해주세요


p3: 다음과 같은 유효성 검사 메시지는 별도의 상수 객체로 분리해서 사용하면 관리하기 더 좋을거 같아요!

minjeoong

tailwind 도 theme 이 있군요.. 🤔
styled-component 랑 두개를 섞어서 쓴 건가요??!
설정하는 것에서 쉽지 않았을 것 같아요,,
코드를 전체적으로 밖으로 빼는 방식으로 구현하셔서 보기에 너무 깔끔했습니다!
4주차 너무 고생하셨습니다 !!!! :)

minjeoong · 2024-11-20T08:13:07Z

week03/1-to-50/src/components/CardGame/GameBoard.jsx

+} from '../../utils/cardUtil';
+
+const GameBoard = ({ gameLevel, startGame, stopGame, setTimer }) => {
+  const { firstSet, secondSet } = LEVELS[gameLevel];


p5: 이렇게 Levels 로 빼서 작성하는 방법 좋은 것 같습니다 !!🥺

minjeoong · 2024-11-20T08:20:18Z

week03/1-to-50/src/components/Modal/Modal.jsx

+const Modal = ({ isOpen, onClose, message }) => {
+  if (!isOpen) return null;
+  console.log(message);
+
+  return ReactDOM.createPortal(
+    <Overlay>
+      <ModalContainer>
+        <p>✨ 1 to 50 ✨</p>
+        <Message>{message}</Message>
+        <Button onClick={onClose}>확인</Button>
+      </ModalContainer>
+    </Overlay>,
+    document.getElementById('modal-root') // `index.html`에 모달을 렌더링할 DOM 요소 추가 필요


p5: 저는 모달을 빼야지 빼야지 했다가 시간 없어서 뒀었는데, 빼셨네요.. 리스펙...........✨

minjeoong · 2024-11-20T08:24:54Z

week03/1-to-50/src/constants/level.js

+export const LEVELS = {
+  level1: { firstSet: 9, secondSet: 18 }, // 첫 번째 세트: 1~9, 두 번째 세트: 10~18
+  level2: { firstSet: 16, secondSet: 32 }, // 첫 번째 세트: 1~16, 두 번째 세트: 17~32
+  level3: { firstSet: 25, secondSet: 50 }, // 첫 번째 세트: 1~25, 두 번째 세트: 26~50
+};


p5: 너무 깔끔하고 좋습니다....🥺

minjeoong · 2024-11-20T08:28:24Z

week03/1-to-50/src/utils/gameLogic.js

+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (isTimerStarted) {
+        setTimer((prev) => prev + 0.01);
+      }
+    }, 10);
+    return () => clearInterval(interval);
+  }, [isTimerStarted]);
+
+  useEffect(() => {
+    initializeGame();
+  }, [gameLevel]);


p3: react 공식문서에 의하면

When you’re not sure whether some code should be in an Effect or in an event handler, ask yourself why this code needs to run. Use Effects only for code that should run because the component was displayed to the user.

-> 사용자에게 해당 컴포넌트가 보여졌다는 이유만으로도 호출되어야 하는 코드는 useEffect를 사용하고, 사용자와 인터랙션이 있을 때는 useEffect를 사용하지 않는 편이 좋다.
라고 합니다!
저도 useEffect 를 자주종종 쓰긴 하지만 참고용으로 언급 드려요!

minjeoong · 2024-11-20T08:36:52Z

week04/API/src/pages/hobby.tsx

+  }, []);
+
+  const handleGetUserHobby = async (e: React.FormEvent) => {
+    e.preventDefault();


p4: 이 e.preventDefault();해당 코드가 여기서 쓰이는 이유가 궁금합니다,,!

minjeoong · 2024-11-20T08:37:41Z

week04/API/src/pages/login.tsx

+      if ('result' in response) {
+        localStorage.setItem('accessToken', response.result.token);
+        console.log('로그인 요청결과:', response); // 요청 결과 콘솔로 출력


p3: 전체적으로 데이터를 확인하기 위한 console 을 제거하는 게 좋을 것 같아요!

ayla-12

안녕하세요 희선님!! 전반적으로 폴더구조를 잘 쪼개주셔서 동작에 따라 어떤 코드를 참고하면 되는지 바로 찾을 수 있어서 좋았던 것 같습니다. 다만 (물론 저도.. 콘솔지우기 습관이 덜들었지만요) 콘솔이 이곳 저곳 남아있는 곳이 있는 것 같아서, 테스트해보고 필요없어진 콘솔로그는 지우는 게 좋을 것 같아요!!

코드 보면서 많이 배워갑니다. 짱!!!

Heesun added 26 commits November 5, 2024 01:21

feat: theme, Header

037f3e2

feat: 레벨에 따른 카드 렌더링

8635985

feat: 카드 클릭시 숫자 변경

2a558e2

feat: 다음 숫자 표시 및 유효성 검사

f222552

feat: 타이머 기능 추가

afe3a5b

fix: 레벨 선택 오류 수정

19ab40f

chore: 파일 분리

bd2d7ab

design: 랭킹 테이블

3d6a74f

feat: 파일 분리.. 실패

96f78f8

feat: 로컬 스토리지 랭킹

64d5436

feat: 랭킹 내림차순, 레벨 오름차순 정렬

b2b01f9

design: 카드 클릭 깜빡이는 효과

66be515

chore: storage 파일 분리

4952fdc

chore: 폴더 정리

e6da1b0

fix: 오타 수정

4751c02

fix: 파일 충돌

f506cee

feat: 전역 style 파일

137ce80

feat: route 설정

406eba3

feat: 로그인 페이지

8537044

feat: 회원가입 페이지 및 유효성 검사

69bc7f3

feat: Header Component 추가

767d1ea

feat: mypage 추가

1f2a069

feat: hobby page

842a3a3

feat: 취미 api 연동

2cad467

feat: 회원가입 시 회원번호 알림 추가

67ac7f1

fix: 비밀번호 변경 오류 수정

ffed036

heesunee added 💭 공유과제 ✏️ 기본과제 💡 심화과제 labels Nov 12, 2024

heesunee requested a review from KIMGEONHWI November 12, 2024 13:07

heesunee requested review from ayla-12 and minjeoong November 12, 2024 13:07

heesunee self-assigned this Nov 12, 2024

KIMGEONHWI approved these changes Nov 20, 2024

View reviewed changes

minjeoong reviewed Nov 20, 2024

View reviewed changes

ayla-12 approved these changes Nov 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4주차 기본/심화/공유 과제] 회원가입 & 로그인 #5

[4주차 기본/심화/공유 과제] 회원가입 & 로그인 #5

heesunee commented Nov 12, 2024 •

edited

Loading

KIMGEONHWI left a comment

KIMGEONHWI Nov 19, 2024

KIMGEONHWI Nov 19, 2024

KIMGEONHWI Nov 19, 2024

KIMGEONHWI Nov 19, 2024

KIMGEONHWI Nov 20, 2024

KIMGEONHWI Nov 20, 2024

KIMGEONHWI Nov 20, 2024

KIMGEONHWI Nov 20, 2024

minjeoong left a comment

minjeoong Nov 20, 2024

minjeoong Nov 20, 2024

minjeoong Nov 20, 2024

minjeoong Nov 20, 2024

minjeoong Nov 20, 2024

minjeoong Nov 20, 2024

ayla-12 left a comment

[4주차 기본/심화/공유 과제] 회원가입 & 로그인 #5

Are you sure you want to change the base?

[4주차 기본/심화/공유 과제] 회원가입 & 로그인 #5

Conversation

heesunee commented Nov 12, 2024 • edited Loading

✨ 구현 기능 명세

💡 기본 과제

🔥 심화 과제

공유과제

제목:

❗️ 내가 새로 알게 된 점

❓ 구현 과정에서의 어려웠던/고민했던 부분

🥲 소요 시간

🖼️ 구현 결과물

KIMGEONHWI 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

minjeoong 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

ayla-12 left a comment

Choose a reason for hiding this comment

heesunee commented Nov 12, 2024 •

edited

Loading