[ 4주차 기본,심화 과제 ] 라우팅과 서버통신 #10

lydiacho · 2023-11-17T12:03:12Z

✨ 구현 기능 명세

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

[ 마이 페이지 ]

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

🌠 심화 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

💎 PR Point

▶️ 컴포넌트 분리

디렉토리와 컴포넌트 구조는 다음과 같습니다

처음엔 api 통신 코드를 api 통신이 발생하는 컴포넌트 내에서 구현했었는데요! SRP 원칙을 지키고자 각 역할에 따라 디렉토리를 확실히 분리해보았습니다.

SRP 원칙이란?
책임을 분리하는 원칙 ! 하나의 모듈, 하나의 컴포넌트는 한가지 책임만 가질 수 있도록 설계한다.

라우팅에 따라 변경되는 페이지 컴포넌트는 pages 디렉토리
모든 페이지에 걸쳐 반복되는 컴포넌트(Layout, Button, InputContainer)와 param에 따라 변경되는 내부 콘텐츠 컴포넌트 (MyPageInfo)는 components 디렉토리
UI 렌더링과 무관한, api 통신을 호출하여 데이터를 불러오는 코드는 api 디렉토리
UI 렌더링과 무관한, 토스트 메시지를 1초 띄우는 코드는 utils 디렉토리

아쉬운 점은, 이렇게 단일 역할에 따라 컴포넌트를 세부적으로 분리하다보니 어쩔 수 없니 props의 사이즈가 커지게 되고, props drilling이 조금 발생하더라고요! 전역 상태 관리 라이브러리를 해당 주차 과제에서는 사용할 수 없기 때문에 도입하지 않았지만, 추후 리팩토링 시 Context API 혹은 Recoil을 통해 상태를 관리해볼 수 있을 것 같습니다. (개인적으로 Recoil보다 더 낯선 Context API를 사용해보고 싶습니다)

├── .env  // 환경변수 파일
│
├── 📁public
│   └── sopt.png // 파비콘 파일
│
└── 📁src
		├── main.tsx
    ├── App.tsx
    ├── Router.tsx
    │
    ├── 📁assets
    │
    ├── 📁api
    │   ├── postLogin.js // 로그인 post api
    │   ├── postSignUp.js // 회원가입 post api
    │   ├── getIdCheck.js // 아이디 중복체크 get api
    │   └── useGetUserId.js // 사용자 정보 조회 get api (custom hook)
    │
    ├── 📁utils
    │   └── modalToggle.js // 토스트 메시지 제어 파일
    │
    ├── 📁pages
    │   ├── Home.jsx // 홈 패이지 (/)
    │   ├── Login.jsx // 로그인 페이지 (/login)
    │   ├── MyPage.jsx // 마이 페이지 (/mypage/:id)
    │   └── SignUp.jsx // 회원가입 페이지 (/signup)
    │
    └── 📁components
        ├── Layout.jsx // 전체 레이아웃 컴포넌트
        ├── Buttons.jsx // 버튼 컴포넌트
        ├── InputContainer.jsx // 사용자 입력창 컴포넌트
        └── MyPageInfo.jsx // 마이페이지 내부 콘텐츠 컴포넌트

▶️ 라우터 설계

마이페이지를 /mypage/:userId 로 하나의 페이지로 관리할 수 있었으나, 세미나에서 배웠던 Outlet을 활용해볼 수 있는 유일한 부분인 것 같아서 내부 콘텐츠 부분을 렌더링하는 컴포넌트 MyPageInfo 컴포넌트를 따로 분리하여 Outlet을 사용해봤습니다!

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/login" element={<Login />} />
    <Route path="/signup" element={<SignUp />} />
    <Route path="/mypage" element={<MyPage />}>
      <Route path=":userId" element={<MyPageInfo />} />
    </Route>
  </Routes>
</BrowserRouter>

🚨 그런데 사실 이 방법은 바람직하지 않습니다!

이번 과제는 outlet을 활용하기 위에 위와 같이 라우터를 설계하여 마이페이지의 url이 다음과 같이 완성되는데요!

http://localhost:5173/mypage/185

그런데 마이페이지 url은 이렇게 생기면 안된다는 사실…!!!!

마이페이지 url이 이렇게 생겼을 경우, 사용자가 주소창에 /mypage/1 이렇게 입력하면 1번 유저의 마이페이지에 마음대로 접근할 수 있겠죠?

그리고 서버 통신의 api 는 /check?username=${ID} 이렇게 생겼지만, 라우터의 path는 서버 통신 url과는 무관하게 설정해줘도 됩니다!!

따라서, api 통신 코드에서는 url에 따라 /check?username=${ID} 이렇게 조회할 사용자의 id 값을 넣어서 ID번 유저의 정보를 가져오고, 그 데이터를 /mypage 페이지 내부에 뿌려주기만 하는거죠!

이렇게 url로 다른 유저의 마이페이지에 마음대로 접근하는 것을 막는 방식이 훨씬 더 바람직하답니다 😈

▶️ try catch 문 사용

처음에 습관적으로 .then .catch 방식을 사용했었는데요!

세미나에서 .then .catch 방식보다 try catch 문을 사용하는 것을 더 추천한다는 내용을 떠올려서

api 통신 코드를 모두 try catch 문으로 변경했습니다!

[ 관련내용 ]
가독성이 떨어지고, 디버깅이 불편하다 (길어지는 체이닝)
예외처리 (try…catch 와 .then / .catch의 혼용이 헷갈림)
동기/비동기 구분없이 try/catch로 일관되게 예외 처리를 할 수 있게 된다!

// 예시
const postSignUp = async (request, navigate) => {
  try {
    await axios.post(`${import.meta.env.VITE_BASE_URL}`, request);
    navigate("/login");
  } catch {
    (err) => {
      console.log(err);
    };
  }
};

▶️ 중복체크 API가 없었을 때 자체 중복체크 처리한 법

지금은 소용 없어진 논리와 코드이지만….^ 과제하면서 가장 많이 고민했던 지점이기에 기록 남깁니당

🐵중복체크에 뜬금없이 로그인 api를 사용한 숭의 논리

처음엔 사용자정보 get을 쓰는거겠지? 싶었는데, 회원가입 절차의 경우 memberId를 알 수가 없어서 이 api는 쓸 수 없고,

그렇다면.. 회원가입 post를 날려서 ‘이미 존재하는’ 사용자 에러를 받으면??

중복체크 실패 처리는 가능하지만, 만약 성공한다면? 그럼 그대로 post 통신이 실행돼버리면서 비밀번호 등 나머지 정보를 입력하기도 전에 미완성 데이터가 서버로 넘어가버린다...

그래서 결론은!

괴상하지만…. 로그인 api를 활용하자!

로그인 post의 에러메시지는 다음과 같다.

아이디가 틀릴 경우 : “message”:”사용자가 존재하지 않습니다.”
아이디는 맞고 비번만 틀릴 경우 : “비밀번호가 일치하지 않습니다.”

따라서 중복 체크할 경우, 에러 메시지에 따라 다음과 같이 처리할 수 있다.

사용자가 존재하지 않습니다 errror → 중복확인(O) 초록색
비밀번호가 일치하지 않습니다 error → 중복실패(X) 빨간색

// 결과
  const checkDouble = async () => {
    await axios
      .post(`${import.meta.env.VITE_BASE_URL}/sign-in`, {
        username: ID,
        password: "",
      })
      .then((res) => {
        console.log("성공 : ", res);
      })
      .catch((err) => {
        if (err.response.data.message === "비밀번호가 일치하지 않습니다.")
          setExist("red");
        else if (err.response.data.message === "사용자가 존재하지 않습니다.")
          setExist("green");
      });
  };

▶️ api 통신 과제를 하면서 정리된 에러코드 케이스

제 코드, 다른 파트원들 코드를 보면서 다양한 에러를 맞다보니 이제는 에러코드만 봐도 어느 부분을 체크하면 될지 감이 잡히더라고요!

대체로 클라의 문제인 4XX 케이스의 경우 다음과 같다는 결론을 내렸습니다

400 → 리퀘스트 body가 뭔가 잘못됨
404 → api 통신 url이 잘못됨
- 그중에서도 .env 파일을 src 내부에 위치시켜줘서 base url이 undefined로 찍혀서 문제생기는 경우가 많았음
405 → 메소드가 잘못됨 (post인데 get으로 보내는 등 .. )

🥺 소요 시간, 어려웠던 점

하루 1시간 넘게씩 5일 내내 했습니다!
사실 중복체크 로직 구현이 가장 어려웠다고 하려했는데 ㅋㅋ⫬ㅋ⫬ㅋ⫬ㅋㅋ⫬ㅋㅋ⫬ 이슈가 있던거라서...^^ api통신 코드와 UI렌더링 컴포넌트를 분리하는 과정에서 생기는 문제들을 해결하는데에 가장 많이 시간 소비한 것 같습니다

🌈 구현 결과물

로그인 -> 마이페이지

i.e.e.e.2023-11-17.i.i.6.30.36.mov

회원가입 -> 로그인

i.e.e.e.2023-11-17.i.i.6.31.46.mov

심화과제

i.e.e.e.2023-11-17.i.i.6.32.52.mov

se0jinYoon

PR을 엄~~청 상세하게 써 줘서 승희가 어느 부분에서 고민하면서 코드를 짰는지 집중해서 볼 수 있었어요 !!! 그리고 고민한 흔적이나 로직 설계할 때 api분리하려고 머리쓴게 너무너무 잘 보여서 감탄하면서 보았습니당
나도 항상 view랑 side effect를 분리하여서 작성하려고 하는데 어느정도로 분리하여야 하는지 (?)에 대한 기준이 늘 모호해서 제대로 분리가 안되는 듯 하는데 승히 코드 보고 인사이트 많이 얻어갑니다 ~😘
바빴을텐데 수고 많았어요 🥹💗

se0jinYoon · 2023-11-21T03:49:48Z

week4/src/components/InputContainer.jsx

+  display: grid;
+  grid-template-columns: auto 23rem;


오와 이렇게 하면 됐구나 ...
나는 이 생각을 못하고 중복버튼이 있는 경우를 따로 생각해서 조건부 width 지정해줬는데 !
뭔가 styled component를 사용하려니 기존에 알던 css들을 삐그덕 거리면서 적용하게 되는 느낌이었는데 .. 승히 코드를 보며 다시 한 번 느끼고 갑니다 .. 더 연습해야겠구망!

se0jinYoon · 2023-11-21T03:52:04Z

week4/src/components/MyPageInfo.jsx

+// 마이페이지 내부 콘텐츠 컴포넌트
+const MyPageInfo = () => {
+  const param = useParams();
+  const { username, nickname } = useGetUserInfo(param.userId);


오홍 커스텀 훅 !
나도 이번 과제에서 view랑 api로직을 분리하려고 했었는데 .. 뭔가 분리하려니 굳이 ..? 싶은 코드들이 나오게 되는 것 같아서 따로 분리하지 않았었는데 이렇게 커스텀 훅을 통해서 GET을 받아오니 너무너무 깔끔하고 좋다 !!!!
커스텀 훅은 중복되는 로직이 있는 경우에 (side effect 로직의 재사용성이 높을 경우!) 사용하는게 좋다고 알고 있어서 이번 과제에서 로직 분리할 때 커스텀훅을 생각해보지 못했는데,
사실 우리 과제에서는 myPage에서만 유저 정보가 필요하니 크게 중복된다고 할 순 없지만, 더 규모가 커진다면 이렇게 유저 정보 받아오는 걸 커스텀 훅으로 관리하는게 아주아주 효율적일 것이라는 생각이 드네요 !
배워갑니다용 🥹

맞아요! 사실 저희 과제에서는 커스텀훅으로 분리하기에는 오히려 재사용성이 너무 떨어지다보니 불필요한 분리가 아닐까 싶을 수 있지만, 저희 과제의 궁극적인 목적인 추후 더 큰 프로젝트에서 활약하기 위한 연습을 하는 것이기 때문에, 과제 특성상 규모가 작다는 이유로 재사용성이 낮은 것을 고려하여 어떠한 구현방식을 선택하지 않을 필요는 절대절대 없다고 생각합니다!!! 과제에서 열심히 연습해보아요 😎

se0jinYoon · 2023-11-21T03:58:33Z

week4/src/components/MyPageInfo.jsx

+          </p>
+        </div>
+      ) : (
+        <div>로딩중...</div>


로딩중 야무지다

se0jinYoon · 2023-11-21T03:59:38Z

week4/src/components/MyPageInfo.jsx

+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  align-items: center;


승히는 css를 진짜 야무지게 잘 쓰는 것 같아

se0jinYoon · 2023-11-21T04:07:09Z

week4/src/pages/Login.jsx

+import Layout from "../components/Layout";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import postLogin from "../api/postLogin";
+import Buttons from "../components/Buttons";
+import InputContainer from "../components/InputContainer";
+import { createPortal } from "react-dom";
+import styled from "styled-components";


import 순서를 맞춰주면 좋을 것 같아요 !

요거 지난 과제에서도 서진언니가 코멘트 달아줬었는데 반영을 못했네요 ㅠㅠ import 순서를 자동으로 맞춰주는 lint 규칙을 활용해서 앞으로는 잊지않고 꼭꼭 순서 맞추려고합니다!!

se0jinYoon · 2023-11-21T10:01:45Z

week4/src/pages/Home.jsx

+
+  return (
+    <div>
+      <Layout title="33th SOPT" buttons={Buttons(btnInfo)} />


버튼을 공통 컴포넌트로 분리하여서 이렇게 사용하게 되었군뇨 !
prop으로 컴포넌트 자체를 넘기는 것은 처음보는지라 .. (제가 마주한 코드가 몇 개 안되어서 그런 거인 듯 합니당) 처음에 봤을 때 약간 생소했는데 혹시 이렇게 컴포넌트 자체를 prop으로 넘기는게 흔히 있는 일인가요 ? (단순 궁금)

헉 사실 흔하지는 않은 것 같아요 저도 처음써보는 형태인 것 같습니다 ㅋㅎㅋㅎㅎ
이번 케이스에서는 하나의 Wrapper 안에 Button의 개수가 다양했는데요! 따라서 일반적인 데이터만을 전달해서 컴포넌트를 렌더링하는 것이아닌, 내부 컴포넌트들을 그대로 전달하는 children을 활용하고 싶었습니다. 그러나 Layout 컴포넌트가 감싸는 진짜 내부 내용물 때문에 children을 중복으로 두번 사용할 수 없는 문제에 봉착했고! 그에 따라 children으로 전달해주고 싶었던 버튼들의 묶음을 또하나의 별도 컴포넌트로 분리하여 Props로 전달해주었어요!

rachel5640

잔디선생님들이 코드리뷰에 하나의 모듈과 하나의 컴포넌트는 한가지 책임만 가질 수 있게 해주면 좋겠다고 이야기해줬는데 어떤 방식으로 모듈을 분리해줄 수 있을지를 진짜 많이 배워갈 수 있었던 것 같아요! 그 만큼 props drilling 문제를 해결할 수 있는 방법도 함께 고민해보아야겠네요!! 프로젝트의 규모가 커지면서 정말 재사용하기 좋은 형태로 코드를 짜는 방식이 무엇인지에 대해 많이 고민해볼 필요를 느끼게 되었습니다🥹🥹 뭔가 항상 코드리뷰하면 도움은 못되고 항상 배워가는 것 같아요!! 진짜 좋은 코드에 대해 이야기해볼 수 있는 멋진 잔디가 되어볼께요ㅎㅎ🍀 이번주도 너무 바빴을텐데 과제하느라 너무 고생많았어요!!

rachel5640 · 2023-11-22T22:44:35Z

week4/src/Router.jsx

+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<SignUp />} />
+        <Route path="/mypage" element={<MyPage />}>
+          <Route path=":userId" element={<MyPageInfo />} />


진짜 생각해보니 userID 값만 바꿔서 사용자 정보에 접근할 수 있는 문제가 생길 수있겠군요...
이렇게 페이지 패스와 url을 다르게 설정하는 방법으로 이를 해결할 수 있구나...진짜 섬세함에 다시 한번 감탄했어요..

증말루,, 요런 거까지 챙기는 뜽희는 멋쟁이✨

rachel5640 · 2023-11-22T22:46:45Z

week4/src/components/Buttons.jsx

+    &:not(:disabled) {
+      cursor: pointer;


진짜 미친 섬세함...

rachel5640 · 2023-11-22T22:50:19Z

week4/src/components/MyPageInfo.jsx

+    & > span:nth-child(1) {
+      padding-left: 1rem;
+      font-weight: 600;
+      border-left: 0.5rem solid ${({ theme }) => theme.colors.sopt};
+      height: 1.3rem;


따로 컴포넌트 안만들고 이렇게 적용할 수도 있겠군요.. 진짜 너무 야무지다..

rachel5640 · 2023-11-22T22:57:39Z

week4/src/pages/MyPage.jsx

+    <Layout title="MY PAGE" buttons={Buttons(btnInfo)}>
+      <Outlet />
+    </Layout>


복습하면서 outlet으로 적용해볼 생각을 못했는데 이렇게 중첩된 라우트를 관리하는 방식이 있겠군용
Layout 구조 위에 outlet으로 하위 라우트 컴포넌트만 렌더링 되는 걸로 이해했는데 맞나용??🥹

seobbang · 2023-11-29T12:53:08Z

week4/src/api/getIdCheck.js

+// ID 중복체크 API
+const getIdCheck = async ({ ID, setExist }) => {
+  try {
+    const res = await axios.get(
+      `${import.meta.env.VITE_BASE_URL}/check?username=${ID}`
+    );
+    res.data.isExist ? setExist("true") : setExist("false");
+  } catch {
+    (err) => {
+      console.log(err);
+    };
+  }
+};


set함수까지 넘겨주기보다는 중복체크 후 결과만 return해주고 그 결과값을 바탕으로 해당 컴포넌트에서 set함수를 핸들링해주는것은 어떤가요? 그러면 좀 더 단일책임을 따르는 좋은 함수가 될 수 있을 것 같아용~!

seobbang · 2023-11-29T12:57:51Z

week4/src/pages/Login.jsx

+  const [ID, setId] = useState("");
+  const [PW, setPw] = useState("");


여기 왜 ID, PW는 대문자로 한지 궁금해요!

seobbang · 2023-11-29T13:00:56Z

week4/src/pages/SignUp.jsx

+      <InputContainer custom={true}>
+        <label htmlFor="id">ID</label>
+        <div>
+          <input
+            type="text"
+            id="id"
+            value={ID}
+            onChange={(e) => setId(e.target.value)}
+          />
+          <CheckBtn
+            type="button"
+            onClick={function () {
+              getIdCheck({ ID, setExist });
+            }}
+            $isExist={isExist}>
+            중복체크
+          </CheckBtn>
+        </div>
+      </InputContainer>


이렇게 결국 custom만 줘서 껍데기만 사용하는 경우가 된다면, 이런 경우까지 과연 공통 컴포넌트로 사용해야 할까요?! 고민해보면 좋을 것 같아용 ㅎㅎ 🤔

aazkgh

이번에 숭이가 ✨우수 과제✨를 수상해서 과제 구경하러 한 번 더 놀러왔어요,,~ 정말 승희 코드 볼 때마다 넘넘 감탄뿐이고,, 앞으로 더 열심히 해야겠따 라는 다짐이 드는 코드,, 정말 멋져요💛💛💛

PR에 승희가 고민했던 내용들도 자세하게 써줘서 제가 생각하지 못했던 부분까지 고찰하게 해주는 것 같아서 정말 몰입해서 읽었던 것 같습니다 ! 서현이가 우수과제 안 줄 수 없었다는 말 완전 인정 ><

aazkgh · 2023-12-08T10:29:03Z

week4/src/api/postLogin.js

+) {
+  try {
+    const res = await axios.post(`${import.meta.env.VITE_BASE_URL}/sign-in`, {
+      username,


이렇게 단축해서 POST로 보낼 수도 있구나 알아갑니당

aazkgh · 2023-12-08T10:30:29Z

week4/src/Router.jsx

+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<SignUp />} />
+        <Route path="/mypage" element={<MyPage />}>
+          <Route path=":userId" element={<MyPageInfo />} />


증말루,, 요런 거까지 챙기는 뜽희는 멋쟁이✨

aazkgh · 2023-12-08T10:33:17Z

week4/src/api/useGetUserInfo.js

+  };
+
+  useEffect(() => {
+    getUserInfo();


위에 함수 선언해주고 useEffect에서 불러주면 되는데 컴포넌트 최상단이 코드 최상단이랑 같은 줄 알구 useEffect 안에서 함수 선언해줬던 밥오,,

aazkgh · 2023-12-08T10:34:20Z

week4/src/components/Buttons.jsx

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+// 버튼 컴포넌트 (공통)


공통 컴포넌트까지 만들어준 이 숭 어쩌면 조아,,,

aazkgh · 2023-12-08T10:40:36Z

week4/src/pages/SignUp.jsx

+
+  const navigate = useNavigate();
+
+  const btnInfo = [


공통 컴포넌트에 props만 다르게 줘서 다양한 버튼을 만든 거,, 진짜 너무 신기하네요,, 이런 생각 어케 하는 건가요 승희님 ? ?? ??

lydiacho added 30 commits November 13, 2023 01:00

setting: 프로젝트 생성

649eae4

setting: 불필요한 파일 삭제

22774ec

setting: 디렉토리/파일 세팅

897d4b5

setting: styled-components, styled-reset 의존성 설치

cd0d384

setting: react-router-dom 설치

d03d373

setting: Router 세팅

efd5963

setting: Outlet 실습을 위한 구조 수정

bb10894

chore: 인수조건 주석 정리

f8134d6

style: GlobalStyle, theme 세팅

c702e58

style: Layout 기본 UI 구현

2f49754

style: Login 기본 UI

19c8801

feat: usePostLogin api 통신 연결

0192925

feat: usePostLogin -> postLogin

1ab99de

feat: 회원가입 버튼 클릭시 navigate

70a2923

feat: api 통신 파일 통합

f2556a6

style: SignUp 페이지 기본 UI

d58ef83

feat: postSignUp 회원가입 api 통신 연결

696b618

feat: getUserInfo 통신문 구현

59aeceb

style: MyPageInfo 기본 UI 구현

a094443

feat: MyPageInfo에서 useGetUserInfo 통신

a7f708c

feat: Login 시, postLogin 통신 후 navigate

1741edf

feat: SignUp시, postSignUp 통신 후 navigate

80f4221

style: 중복체크 버튼 생성

cac5daa

feat: postLogin 로그인 통신 오류 수정

ab491e0

feat: 아이디 중복체크 처리

a18cca3

feat: 회원가입 버튼 활성화 조건

7c992ed

feat: 마이페이지 로그아웃 구현

671db03

feat: postSignUp 분리

d8d8e7c

feat: 중복처리 api 수정 및 분리

1a6638e

feat: Buttons 컴포넌트 분리 및 btnInfo 데이터 활용

1b44ca8

lydiacho added 15 commits November 17, 2023 05:23

feat: InputContainer 컴포넌트 분리 및 재사용

3abd515

feat: 주석추가 및 API통신 .then -> try catch문으로 변경

e844fd3

fix: useGetInfo async await 에러 해결

c86daef

fix: LoginPage 스타일 에러 해결

8938f3a

fix: prop prefix 문제 해결

34b86dd

style: 모달창 색상 수정

520816f

style: 버튼 스타일 수정

def6069

style: Input 스타일 수정

5e7a248

style: 비활성화된 버튼에hover 효과 삭제

99ef4ec

style: My page 스타일 수정

1022b53

style: 중복체크 버튼 스타일 수정

f199500

feat: Home 컴포넌트 구현

bb551ec

feat: 회원가입에 비밀번호 확인 조건 추가

c576a39

feat: 로그인 에러메시지 모달 구현

8bf8b8c

chore: lang change

37a5d96

lydiacho added 기본과제 심화과제 labels Nov 17, 2023

lydiacho requested review from seobbang, se0jinYoon and rachel5640 November 17, 2023 12:03

lydiacho self-assigned this Nov 17, 2023

se0jinYoon reviewed Nov 21, 2023

View reviewed changes

rachel5640 reviewed Nov 22, 2023

View reviewed changes

seobbang reviewed Nov 29, 2023

View reviewed changes

aazkgh reviewed Dec 8, 2023

View reviewed changes

lydiacho merged commit 280f838 into main Jan 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ 4주차 기본,심화 과제 ] 라우팅과 서버통신 #10

[ 4주차 기본,심화 과제 ] 라우팅과 서버통신 #10

lydiacho commented Nov 17, 2023 •

edited

Loading

se0jinYoon left a comment

se0jinYoon Nov 21, 2023

se0jinYoon Nov 21, 2023

lydiacho Nov 22, 2023

se0jinYoon Nov 21, 2023

se0jinYoon Nov 21, 2023

se0jinYoon Nov 21, 2023

lydiacho Nov 22, 2023

se0jinYoon Nov 21, 2023

lydiacho Nov 22, 2023

rachel5640 left a comment

rachel5640 Nov 22, 2023

aazkgh Dec 8, 2023

rachel5640 Nov 22, 2023

rachel5640 Nov 22, 2023

rachel5640 Nov 22, 2023

seobbang Nov 29, 2023

seobbang Nov 29, 2023

seobbang Nov 29, 2023

aazkgh left a comment

aazkgh Dec 8, 2023

aazkgh Dec 8, 2023

aazkgh Dec 8, 2023

aazkgh Dec 8, 2023

aazkgh Dec 8, 2023

		const [ID, setId] = useState("");
		const [PW, setPw] = useState("");

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

		// 버튼 컴포넌트 (공통)

[ 4주차 기본,심화 과제 ] 라우팅과 서버통신 #10

[ 4주차 기본,심화 과제 ] 라우팅과 서버통신 #10

Conversation

lydiacho commented Nov 17, 2023 • edited Loading

✨ 구현 기능 명세

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

💎 PR Point

▶️ 컴포넌트 분리

▶️ 라우터 설계

🚨 그런데 사실 이 방법은 바람직하지 않습니다!

▶️ try catch 문 사용

▶️ 중복체크 API가 없었을 때 자체 중복체크 처리한 법

▶️ api 통신 과제를 하면서 정리된 에러코드 케이스

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

se0jinYoon 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

rachel5640 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

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

lydiacho commented Nov 17, 2023 •

edited

Loading