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

Jun-min2 · 2023-11-17T13:22:58Z

🌱 기본 조건

.env 파일 사용하기

🧩 기본 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

[ 마이 페이지 ]

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

🌠 심화 과제

[ 로그인 페이지 ]

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

[ 회원가입 페이지 ]

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

생각과제

API 통신에 대하여

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

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

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

💎 PR Point

Get, Post를 통한 HTTP method를 사용하고
useParams, useEffect, useState 등의 Hook을 사용했습니다.

🥺 소요 시간, 어려웠던 점

4d

🌈 구현 결과물

_2023_11_17_22_19_40_318.mp4

doyn511

과제하느라 고생 많아따!!! styled-component 적용해서 쓴거 너무 잘했따!! 좀 더 많이 알려주고 싶은데 아직 나의 실력이 그러지 못하네잉.. 나도 많이 공부해서 더 많은걸 알려주도록 노력해볼게! 고생해따!

doyn511 · 2023-11-18T12:14:42Z

week4/index.html

+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


별건 아닌데 관련 없는 favicon은 지우고 title도 나중엔 바꿔줬으면 좋겠다...! 내 개인적인 욕심 ㅎㅎ

웅웅 title도 바꿔주세요

doyn511 · 2023-11-18T12:15:22Z

week4/src/Components/Router.jsx

+    <BrowserRouter>
+      <Routes>
+        <Route path="/Login" element={<Login />} />
+        <Route path="/SignUp" element={<SignUp />} />
+        <Route path="/MyPage/:userId" element={<MyPage />} />
+      </Routes>
+    </BrowserRouter>


Router 야무지게 썼네!! 잘해따잉~👍 근데..... 과제에는 다 소문자였던거 같은데 상관은 없겠지?

URI 에서는 소문자를 사용하는 컨벤션이 있는 걸로 알고있습니댱
소문자로 바꿔주는 게 좋을 것 같아!

컴포넌트 폴더에 router 밖에 없는 건가요?

컴포넌트 분리 무조건 해주시!!!길!!
그리고 수빈이 말대로 url 소문자로 바꿔주시용

doyn511 · 2023-11-18T12:20:36Z

week4/src/Pages/Login.jsx

+  const [loginUserId, setLoginUserId] = useState("");
+  const [loginPassWord, setLoginPassWord] = useState("");
+  const navigate = useNavigate();
+  const [fail, setFail] = useState("");
+  const [open, setOpen] = useState(false);


이게 맞는지는 모르겠지만..! useState는 useState끼리, useNavigate는 useNavigate끼리 모아서 써주면 더 보기 좋을거 같다..!

Suggested change

const [loginUserId, setLoginUserId] = useState("");

const [loginPassWord, setLoginPassWord] = useState("");

const navigate = useNavigate();

const [fail, setFail] = useState("");

const [open, setOpen] = useState(false);

const [loginUserId, setLoginUserId] = useState("");

const [loginPassWord, setLoginPassWord] = useState("");

const [fail, setFail] = useState("");

const [open, setOpen] = useState(false);

const navigate = useNavigate();

doyn511 · 2023-11-18T12:22:00Z

week4/src/Pages/Login.jsx

+    } catch (e) {
+      setFail(e.response.data.message);
+      setOpen(true);
+      setTimeout(() => setOpen(false), 3000);


혹시 요거 setTimeout은 왜 준건지 알려줄 수 있을까?! Toast때문인가?????

아마 3초 뒤에 모달 사라지는 거 같으,,, @doyn511

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

week4/src/Pages/Login.jsx

+        <Button type="button" onClick={handleLogin}>
+          로그인{" "}
+        </Button>
+
+        <Button type="button" to="/SignUp">
+          회원가입{" "}
+        </Button>


여기서 { " " } 얘넨 뭐야??

옹 그러게 지워줘도 될 것 같아

저거 그냥 생기는 쓸데없는 거,,, 라서 지워주셔야 합니다

doyn511 · 2023-11-18T12:31:37Z

week4/src/Pages/MyPage.jsx

+const Button = styled(Link)`
+  background-color: black;
+  color: white;
+
+  margin: 1px;
+  font-size: 1rem;
+
+  text-decoration: none;
+`;


우와 Link도 저렇게 스타일을 줄 수 있구나...! 요건 새롭다!!!

doyn511 · 2023-11-18T12:35:30Z

week4/src/Pages/SignUp.jsx

+      nickName === "" ||
+      isExist == true ? (
+        <Button onClick={handleSignUp} disabled>
+          회원가입{" "}


요기도 알 수 없는 { " " } 있다!

doyn511 · 2023-11-18T12:36:10Z

week4/src/Pages/SignUp.jsx

+      <section>
+        비밀번호
+        <input
+          type="text"
+          placeholder="비밀번호를 입력해주세요"
+          value={passWord}
+          onChange={(e) => setPassWord(e.target.value)}
+        />
+      </section>


근데 비밀번호 확인 input은 없어도 되나?!!?

binllionaire

고생했어 !! 뭔가 이제 리액트가 좀 익숙해진게 느껴지네용 🤓

binllionaire · 2023-11-21T08:44:36Z

week4/src/Pages/Login.jsx

+        <Button type="button" onClick={handleLogin}>
+          로그인{" "}
+        </Button>
+
+        <Button type="button" to="/SignUp">
+          회원가입{" "}
+        </Button>


옹 그러게 지워줘도 될 것 같아

binllionaire · 2023-11-21T08:48:23Z

week4/src/Components/Router.jsx

+    <BrowserRouter>
+      <Routes>
+        <Route path="/Login" element={<Login />} />
+        <Route path="/SignUp" element={<SignUp />} />
+        <Route path="/MyPage/:userId" element={<MyPage />} />
+      </Routes>
+    </BrowserRouter>


URI 에서는 소문자를 사용하는 컨벤션이 있는 걸로 알고있습니댱
소문자로 바꿔주는 게 좋을 것 같아!

binllionaire · 2023-11-21T08:55:44Z

week4/src/Pages/SignUp.jsx

+          import.meta.env.VITE_BASE_URL
+        }/api/v1/members/check?username=${userId}`
+      );
+      setIsExist(idChecker.data.isExist);


상수화 해주는 것도 좋을 것 같아!
나는 요로케 했어

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

binllionaire · 2023-11-21T09:44:33Z

week4/src/Pages/SignUp.jsx

+      {userId === "" ||
+      passWord === "" ||
+      nickName === "" ||
+      isExist == true ? (


=== 로 수정해주장!

hae2ni

로직 상으로는 너무너무 좋아요! 물론, reducer를 사용해보는 부분이나 함수를 분리하거나 그런 부분도 있지만 그건 일차적으로 미루고 일단 기능이 돌아가게 했다는게 너무 고생하신 것 같습니다. 다만, 컴포넌트들이 전혀 분리되어 있지 않는다는게 너무 아쉬운데,
컴포넌트 폴더가 있으니 당연히 분리를 해야겠죠?
그리고 사실 페이지 컴포넌트에서 모든 컴포넌트를 만들고 스타일링해서 렌더링하는 건, 하나의 컴포넌트가 하나의 역할을 해야하는 최적화 규칙과는 어긋난다고 생각해요!
최대한 컴포넌트를 잘게 쪼개주시고, 과제 해봐서 아시겠지만 계속 반복되는 컴포넌트가 있죠? 걔네 스타일 컴포넌트까지 해서, 하나의 컴포넌트로 묶어서 불러오면서 props로 조건이나 이벤트함수를 처리하는 부분을 연습하면 좋을것 같아요!
그래도 과제 끝까지 하는거 너무 수고하셨고, 좀더 컴포넌트 분리에 있어서 고민해보는게 좋을 것 같습니다! 모르겠으면 물어바~

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

week4/index.html

+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>


웅웅 title도 바꿔주세요

hae2ni · 2023-11-24T05:23:12Z

week4/src/Components/Router.jsx

+    <BrowserRouter>
+      <Routes>
+        <Route path="/Login" element={<Login />} />
+        <Route path="/SignUp" element={<SignUp />} />
+        <Route path="/MyPage/:userId" element={<MyPage />} />
+      </Routes>
+    </BrowserRouter>


컴포넌트 폴더에 router 밖에 없는 건가요?

hae2ni · 2023-11-24T05:23:30Z

week4/src/Components/Router.jsx

+    <BrowserRouter>
+      <Routes>
+        <Route path="/Login" element={<Login />} />
+        <Route path="/SignUp" element={<SignUp />} />
+        <Route path="/MyPage/:userId" element={<MyPage />} />
+      </Routes>
+    </BrowserRouter>


컴포넌트 분리 무조건 해주시!!!길!!
그리고 수빈이 말대로 url 소문자로 바꿔주시용

hae2ni · 2023-11-24T05:24:21Z

week4/src/Pages/Login.jsx

+      </Container>
+
+      {open &&
+        createPortal(<Toast>{fail}</Toast>, document.getElementById("toast"))}


오 심화과제까지 하는 똑또기!!

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

week4/index.html

+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="toast"></div>


toast 해주었네요!

hae2ni · 2023-11-24T05:28:57Z

week4/src/Pages/SignUp.jsx

+    <Container>
+      <h1>SingUp</h1>
+      <section>
+        ID{" "}


지워주세요!

hae2ni · 2023-11-24T05:29:15Z

week4/src/Pages/SignUp.jsx

+  };
+
+  return (
+    <Container>


나중엔 다 styled-component랑 theme을 이용해 보시길,,,

hae2ni · 2023-11-24T05:29:41Z

week4/src/Pages/SignUp.jsx

+        />
+        <Button
+          onClick={idCheck}
+          className={


className말고 styled-component props를 이용한 조건부 렌더링으로 수정해주세요!

https://www.daleseo.com/react-styled-components/
참고!

hae2ni · 2023-11-24T05:30:31Z

week4/src/Pages/SignUp.jsx

+      </section>
+      <section>
+        비밀번호
+        <input


input이 겹치니까 나중에는 하나의 컴포넌트로 분리하는 게 좋을 걳 같아요

hae2ni · 2023-11-24T05:30:50Z

week4/src/Pages/SignUp.jsx

+          중복체크
+        </Button>
+      </section>
+      <section>


section말고 article로 하는게 좀더 시멘틱할 것 같습니다

Jun-min2 added 4 commits November 16, 2023 17:47

Save changes before switching branches

63f931f

view

334a936

post,get

ea5e069

IdCheck

1f083c8

Jun-min2 requested review from binllionaire, seobbang, hae2ni, aazkgh and doyn511 November 17, 2023 13:22

Jun-min2 self-assigned this Nov 17, 2023

Toast

b19b50e

doyn511 reviewed Nov 18, 2023

View reviewed changes

binllionaire reviewed Nov 21, 2023

View reviewed changes

hae2ni reviewed Nov 24, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Jun-min2 commented Nov 17, 2023

doyn511 left a comment

doyn511 Nov 18, 2023

hae2ni Nov 24, 2023

doyn511 Nov 18, 2023

binllionaire Nov 21, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

hae2ni Nov 24, 2023

doyn511 Nov 18, 2023

binllionaire Nov 21, 2023

hae2ni Nov 24, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

doyn511 Nov 18, 2023

binllionaire left a comment

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

binllionaire Nov 21, 2023

hae2ni left a comment

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

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

hae2ni Nov 24, 2023

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

Are you sure you want to change the base?

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

Conversation

Jun-min2 commented Nov 17, 2023

🌱 기본 조건

🧩 기본 과제

🌠 심화 과제

생각과제

💎 PR Point

🥺 소요 시간, 어려웠던 점

🌈 구현 결과물

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

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

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