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

doyn511 · 2023-11-17T14:36:42Z

✨ 구현 기능 명세

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

[ 마이 페이지 ]

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

🌠 심화 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

생각과제

API 통신에 대하여

로딩 / 에러 처리를 하는 방법에는 어떤 것들이 있을까?패칭 라이브러리란 무엇이고 어떤 것들이 있을까?패칭 라이브러리를 쓰는 이유는 무엇일까?

💎 PR Point

Router 설정

import { BrowserRouter, Route, Routes } from "react-router-dom";
import MainPage from "./pages/main/MainPage";
import LogIn from "./pages/login/LoginPage";
import SignUp from "./pages/signup/SignupPage";
import MyPage from "./pages/mypage/MyPage";

function Router() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/login" element={<LogIn />} />
          <Route path="/signup" element={<SignUp />}></Route>
          <Route path="/mypage/:userId" element={<MyPage />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default Router;

SignUp Page

회원가입 창에서 작성된 input값들을 서버로 POST하는 함수

const [newID, setNewID] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [newNickname, setNewNickname] = useState("");

  const navigate = useNavigate();

  const handlePost = async () => {
    try {
      await axios.post(`${import.meta.env.VITE_APP_BASE_URL}/api/v1/members`, {
        username: newID,
        password: newPassword,
        nickname: newNickname,
      });

      navigate("/login");
    } catch (error) {
      console.log(error);
    }
  };

input의 요소가 모두 작성되었는지, ID의 중복체크가 이루어졌는지, 비밀번호가 일치하는지 확인하는 함수

  const checkInputFilled = () => {
    return (
      newID !== "" &&
      newPassword !== "" &&
      confirmPassword !== "" &&
      newPassword === confirmPassword &&
      newNickname !== "" &&
      isIdValid
    );
  };

  useEffect(() => {
    setIsActive(checkInputFilled());
  }, [newID, newPassword, confirmPassword, newNickname, isIdValid]);

useEffect를 사용해 해당 deps값이 변경되었을 때만 실행되도록 해두었습니다!

중복 체크 함수

  const checkIsValid = async () => {
    try {
      const response = await axios.get(
        `${import.meta.env.VITE_APP_BASE_URL}/api/v1/members/check`,
        {
          params: {
            username: value,
          },
        }
      );

      if (response.data.isExist) {
        setIsIdValid(false);
      } else if (!response.data.isExist) {
        setIsIdValid(true);
      }
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    setIsIdValid(null);
  }, [value]);

POST가 아닌 GET을 이용해 isExist의 값을 받아온 뒤, 처리했습니다!

Login Page

로그인 페이지에서 작성된 id와 비밀번호를 POST하는 함수

const navigate = useNavigate();

  const handlePost = async () => {
    try {
      const response = await axios.post(
        `${import.meta.env.VITE_APP_BASE_URL}/api/v1/members/sign-in`,
        {
          username: inputUsername,
          password: inputPW,
        }
      );
      console.log("login 성공", response);
      navigate(`/mypage/${response.data.id}`);
    } catch (error) {
      console.log(error);
    }
  };

MyPage

userId에 해당하는 username과 nickname을 서버로부터 GET으로 받아오는 함수

const { userId } = useParams();

  const navigate = useNavigate();

  const handleGet = async () => {
    try {
      const response = await axios.get(
        `${import.meta.env.VITE_APP_BASE_URL}/api/v1/members/${userId}`,
        {
          userId: userId,
        }
      );
      const { data } = response;
      setGetUsername(data.username);
      setGetNickname(data.nickname);
    } catch {
      console.log("error");
    }
  };

  useEffect(() => {
    handleGet();
  }, []);

사실 처음에는 mypage의 주소를 userId가 아닌 username으로 해서 제대로 된 Promise 객체를 받아오지 못했답니다....

🥺 소요 시간, 어려웠던 점

2days
뷰를 짜는데는 전보다 훨씬 익숙해져서 오랜 시간이 걸리진 않았지만, api 연결과 서버와의 통신을 처음 해보는거라 처음에는 감을 잡지 못해 오랜 시간이 걸렸어요.
아직도 어떤 컴포넌트를 어떤 폴더에 넣어야 하는지, 폴더 구조를 짜는데 확신이 없어 어려움을 겪는거 같아요.
처음에 Wrapper 부분을 form 태그로 구성했더니 제출 시 무조건 렌더링이 되어 데이터를 확인할 수 없어 요것도 시간이 좀 걸렸던 것 같아요.
기본 주소인 "/'에 대한 조건이 없어 어떻게 "/login"부터 시작하나 고민을 했었는데, 임의로 home 페이지를 만들어 해결했습니다..!

🌈 구현 결과물

https://six-puppy-7ec.notion.site/4-3dcbe96cff8b42fc8787e655e7434c6e?pvs=4

hae2ni

귣~!
도윤이 너무너무 수고했어! 과제 제출하는 당일까지 진짜 아침부터 얼마나 고생했는지 나는 다 알지!!! 그래도 도움이 된 것 같아서 너무 다행이다! 너무 열심히 한 흔적이 보이고 고민한 부분이 보여서 너무너무 좋아!!! 진짜 쑥쑥 성장할 도유니를 기대할게 라뷰~!

hae2ni · 2023-11-20T08:21:32Z

week4/assignment/src/assets/DATA.js

@@ -0,0 +1,29 @@
+export const TypeList = [


완전 깔끔하네요!

상수 이름은 주로 대문자 + 스네이크 표기법을 이용합니다!

그러면 TYPE_LIST가 되겠네요!

hae2ni · 2023-11-20T08:47:49Z

week4/assignment/src/assets/DATA.js

+  },
+];
+
+export const Profile =


여기도 마찬가지로 PROFILE로 바꿔줄 수 있겠네요!

hae2ni · 2023-11-20T08:49:12Z

week4/assignment/src/components/common/input.jsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {


이렇게 받아오는 인자가 많을 땐 하나의 인자로 받아서 그 부분을 구조 분해 할당으로 바꿔주는 건 어때요?

Suggested change

const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {

const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {

CONST PerInput = (props) => {

const {title, type, placeholder, value, onChange, disabled}= props

hae2ni · 2023-11-20T08:52:28Z

week4/assignment/src/pages/login/loginPage.jsx

+    }
+  };
+
+  const GoToSignUp = () => {


그냥 한번에 이동하는 거니까 Link 컴포넌트를 사용하는 게 더 좋을 것 같아요!
useNavigate랑 Link랑 차이점을 알고 있으면 더 편하겠죠?
Link vs useNavigate

hae2ni · 2023-11-20T08:53:23Z

week4/assignment/src/pages/login/loginPage.jsx

+
+  const navigate = useNavigate();
+
+  const handlePost = async () => {


나중에 이런 부분 함수 따로 빼주는 것도 너무 좋겠다!

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

week4/assignment/src/components/common/idCheckBtn.jsx

+
+export default IdCheckBtn;
+
+const Button = styled.button`


그리고 스타일컴포넌트도 컴포넌트니까 이 컴포넌트가 무엇을 하는 친구인지 바로 알수 있는 이름을 지어야 나중에 헷갈리지 않겠죵?

hae2ni · 2023-11-20T12:00:40Z

week4/assignment/src/pages/signup/signupPage.jsx

+
+const SignUp = () => {
+  // 회원가입 버튼 활성화
+  const [isActive, setIsActive] = useState(false);


관리해야 할 state가 많다면? reducer를 사용해보는 것도 나쁘진 않아!

hae2ni · 2023-11-20T12:00:50Z

week4/assignment/src/pages/signup/signupPage.jsx

+
+  const navigate = useNavigate();
+
+  const handlePost = async () => {


히히 귣!!

hae2ni · 2023-11-20T12:01:13Z

week4/assignment/src/pages/signup/signupPage.jsx

+  };
+
+  useEffect(() => {
+    setIsActive(checkInputFilled());


오 이거 너무 깔끔한데? 나도 리팩토링 때 참고해야겠다

hae2ni · 2023-11-20T12:01:30Z

week4/assignment/src/styles/CommonStyle.jsx

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+export const Wrapper = styled.div`


많이 쓰는 style요소 빼오는 거 너무 칭찬해!

binllionaire

과제하느라 고생했어요 !!! 🖤 나도 처음 api통신 할 때는 뭐가 뭔지 모르겠고 엄청 헤맸었어,,
그래도 몇 번 해보면 딱 감이 잡히더라고 !
상수화도 되어있고 점점 잘해지는게 보인다 보여!!!! 👀

binllionaire · 2023-11-21T10:40:34Z

week4/assignment/src/pages/login/loginPage.jsx

+export default LogInPage;
+
+const SignUpBtn = styled(Btn)`
+  background-color: #fffffff;


요기 f가 7개 들어갔다!!!

혜인언니 말대로 theme 한번 써보는 거 추천!!!!

binllionaire · 2023-11-21T11:11:53Z

week4/assignment/src/pages/mypage/mypage.jsx

+    } catch {
+      console.log("error");
+    }


이렇게 하면 무슨 error인지 더 알기 쉽겠징?!

Suggested change

} catch {

console.log("error");

}

catch (error) {

console.error(error);

}

binllionaire · 2023-11-21T11:13:00Z

week4/assignment/src/pages/signup/signupBtn.jsx

+      {isLoginPage && (
+        <InLoginPageBtn onClick={onClick}>회원가입</InLoginPageBtn>
+      )}
+      {isSignUpPage && !isActive && (


동의합니당!!

binllionaire · 2023-11-21T11:40:16Z

week4/assignment/src/pages/mypage/mypage.jsx

+
+  const { userId } = useParams();
+


우왁 useParams라는게 있구나 ㅠㅠ 나는 path가져와서 직접 쪼개줬는데 꿀팁알아갑니다용

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

week4/assignment/src/pages/signup/signupInput.jsx

+const InputWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const BtnWrapper = styled(InputWrapper)`
+  justify-content: end;
+  gap: 1rem;
+  width: 75%;


InputWrapper의 속성도 가지면서 BtnWrapper만의 속성을 주는게 맞을까요?

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

week4/assignment/src/pages/signup/signupPage.jsx

+  const checkInputFilled = () => {
+    return (
+      newID !== "" &&
+      newPassword !== "" &&
+      confirmPassword !== "" &&
+      newPassword === confirmPassword &&
+      newNickname !== "" &&
+      isIdValid
+    );
+  };


공백도 안되게 해놓은건가?!

doyn511 added 30 commits November 15, 2023 14:35

[init] 초기세팅

e673489

[init] react-router-dom 설치

2bc9baa

[feat] 로그인 화면 구현

d24817a

[feat] Router 파일 생성

b537dd7

[style] input style 변경

7f4ab7c

[feat] 회원가입 페이지 구현

bacdc53

[style] 회원가입 버튼 수정

903464f

[feat] DATA.js Profile Img 추가

63df661

[fix] DATA.js export에 따른 import 변경

27140e7

[feat] 마이페이지 구현

469fee1

[feat] axios 설치

b3956c6

[feat] Main page 추가

5ce52c5

[feat] Router 추가

9e7c626

[feat] button type 추가

caec88f

[style] Wrapper tag 수정

a97364d

[feat] DATA.js type 변경

2a65b25

[feat] loginPage import 삭제

0b1b762

[feat] .gitignore 수정

9873f07

[feat] input props 수정

4f8b13c

[feat] SignUp POST 구현

fcf2000

[feat] signupInput props 수정

4f4421e

[feat] LoginBtn props 추가

fd3977f

[feat] signupBtn props 추가

477e9a7

[feat] Login시 mypage/{userid}로 이동

c247726

[feat] input disabled 속성 추가

e7a501a

[feat] Wrapper tag 변경

d54eaf7

[feat] mypage ID, 닉네임 get으로 불러오기

cc2e5db

[feat] 중복체크 구현

4980045

[feat] 모든 input이 채워졌을 때 버튼 활성화

accd7d9

[feat] login 후 navigate 경로 변경

16eca54

doyn511 added 6 commits November 17, 2023 17:43

[feat] id 중복체크 구현2

7a8d682

[feat] 페이지 별 signup 버튼 수정

3f1d999

[fix] 불필요 파일 제거 및 디렉토리 이동

7ca5a5d

[fix] .gitignore 추가

4edd7b2

[docs] 생각과제

a0b8299

[fix] 필요없는 파일 및 주석 제거

8ac8639

doyn511 added 기본과제 생각과제 4주차 labels Nov 17, 2023

doyn511 requested review from binllionaire, hae2ni and Jun-min2 November 17, 2023 14:36

doyn511 self-assigned this Nov 17, 2023

hae2ni reviewed Nov 20, 2023

View reviewed changes

binllionaire reviewed Nov 21, 2023

View reviewed changes

Jun-min2 reviewed Nov 28, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

doyn511 commented Nov 17, 2023 •

edited

Loading

hae2ni left a comment •

edited

Loading

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

hae2ni Nov 20, 2023

binllionaire left a comment

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

Jun-min2 Nov 28, 2023

Jun-min2 Nov 28, 2023

		@@ -0,0 +1,34 @@
		import styled from "styled-components";

		const PerInput = ({ title, type, placeholder, value, onChange, disabled }) => {


		const navigate = useNavigate();

		const handlePost = async () => {

		@@ -0,0 +1,33 @@
		import styled from "styled-components";
		export const Wrapper = styled.div`

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

Are you sure you want to change the base?

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

Conversation

doyn511 commented Nov 17, 2023 • edited Loading

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

Router 설정

SignUp Page

Login Page

MyPage

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

hae2ni left a comment • 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

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

binllionaire 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

doyn511 commented Nov 17, 2023 •

edited

Loading

hae2ni left a comment •

edited

Loading