[48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.) #4

Cheeze-Man · 2023-08-14T09:35:41Z

1. 본 PR이 우리 팀의 웹 서비스 제품성에 어떠한 기여를 하였고,
사용자에게 어떠한 기대효과를 전달하는지 작성해주세요.

2. 이 브랜치에서 어떤 내용을 개발했는지 큰 제목과 상세 내역을 적어주세요.

로그인 기능 추가

mock데이터를 fetch로 불러오고 find함수를 통해 email과 password가 일치하는 객체가 있을 때만 로그인 가능하게 함.
유효성 검사 및 버튼 활성/비활성화 기능.
백엔드 API로 유저의 로그인 인풋 입력값(email , password)를 POST하고 accessToken을 받아와 로컬스토리지에 동명의 키 이름으로 저장.

회원가입 기능 추가

input태그와 select태그의 유저 입력값을 받아와 객체에 저장한 후 유효성 검사 통과 시 객체 형태의 state를 JSON언어로 바꿔 fetch로 POST하도록 함.
각 input항목 별로 유효성 검사를 구분하여 저장.
위를 수정한 후 각 input에 경고 문구 추가.
백엔드 API로 유저의 회원가입 인풋 입력값 (email, password + 선택 사항)을 POST하여 DB에 올바른 형태로 저장됨을 확인.

3. 개발한 화면을 캡쳐해서 첨부 해 주세요.

(drag & drop 또는 첨부파일 추가)
로그인 페이지 화면
로그인 페이지 화면 (유효)
회원가입 페이지 화면
회원가입 페이지 화면 (유효)
회원가입 완료 페이지

4. 이 브랜치에서 개발하면서 느낀 개발 성장포인트를 적어주세요.

알고리즘 문제를 풀 때 공부했다가 최근 사용이 적어져 까먹었던 정규표현식에 대해 다시 공부했다.
padStart라는 메소드를 처음 알고 사용해보게 됐다.
컴포넌트 분리에 있어서 좀 더 신중해야겠다. (하나의 컴포넌트를 너무 많은 곳에 사용하려다보니 props로 전달할 것도 많아지고 복잡하게 생각할 것들이 많아지는 듯 함.)
fetch함수에 대해 공부할 기회가 됐다.
props의 전달 및 사용에 보다 익숙해지며 컴포넌트의 재사용에 대해 고민하고 실제 사용해보게 되었다.
백엔드 서버와 통신해보며 DB에 보낼 데이터를 어떤 식으로 정제해야 하는지 방법 및 필요성에 대해 깨닫게 되었다.
JWT에 대해 공부하게 되었다. (아직 더 많이 알아볼 필요가 있다,)
조건부 렌더링 및 "&&연산자"에 대해 새로이 인식하게 되었다.
status code에 대해 알아보고 체감할 수 있었다.
에러 메시지에 대해 보다 익숙해지기 시작했다.

lang92

리뷰 확인해주세요 동철님!

그리고 라벨도 올바르게 부착해서 현재 해당 PR이 어떤 상황인지 알려주세요!

lang92 · 2023-08-14T14:47:31Z

src/Router.js

+        <Route path="/" element={<Login />} />
+        <Route path="/login" element={<Login />} />


메인 경로에 로그인 컴포넌트가 들어가 있는데, 의도된 부분일까요?

아 이건 그냥 npm start 시에 추가적으로 URL 타이핑하기 귀찮아서 혼자 편의상 바꿔놨던 건데 그대로 올려버렸네요...

lang92 · 2023-08-14T14:50:59Z

src/pages/Join/Join.scss

해당 파일 하나로 Join 컴포넌트 내의 하위 컴포넌트들에 모두 적용시키고 계신데,
유지보수를 위해서 컴포넌트 하나 당 하나의 scss 파일을 생성해 적용하는 방식으로 수정해 주세요!

그리고 해당 scss 파일에서 tag selector를 많이 사용하셨는데, 당장은 확정된 레이아웃일지라도 추후 변경되었을 때 내가 예상하지 못한 속성이 적용될 수도 있습니다.
tag selector는 정말 변경이 없다고 확신할 수 있는 상황 혹은 공용 스타일 파일인 reset, common.scss 등에서만 활용해 주세요!

lang92 · 2023-08-14T14:57:16Z

src/pages/Join/Birthday.jsx

+      <div>
+        <select
+          value={selectedYear}
+          onChange={e => setSelectedYear(e.target.value)}
+        >
+          {years.map(year => (
+            <option key={year} value={year}>
+              {year}년
+            </option>
+          ))}
+        </select>
+      </div>
+      <div>
+        <select


select 섹션마다 빈 div 태그를 감싸주셨는데, select 태그에 스타일 속성을 부여해서는 구현이 불가능한 부분인가요?

일단 각 구간을 나눠야 한다는 생각에 이처럼 작성했는데 지금보니 쓸 데 없이 코드가 길어진 것 같기도 하네요.
참고하여 수정해보도록 하겠습니다!

lang92 · 2023-08-14T14:57:56Z

src/pages/Join/JoinDone.jsx

+          <p>이제 로그인해주세요.</p>
+        </div>
+      </div>
+      <LoginButton text={'확인'} />


Suggested change

<LoginButton text={'확인'} />

<LoginButton text='확인' />

lang92 · 2023-08-14T14:59:02Z

src/pages/Join/Join.scss

+    p {
+      &:first-child {
+        font-size: 16px;
+      }
+      &:last-child {
+        color: $grey80;
+        font-size: 12px;
+      }
+    }


first-child 및 last-child를 활용해서 구현하는 것은 좋지만, 추후 유지보수가 필요할 때 오히려 불편함을 겪을 수 있습니다.

반영하여 수정했습니다!

lang92 · 2023-08-14T15:13:42Z

src/pages/Join/JoinInfo.jsx

+      navigate('/join-done');
+      fetch('data/userData.json', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json;charset=utf-8',
+        },
+        body: JSON.stringify(joinUserInfoData),
+      }).then();
+    } else if (


실제로 API 연결하실 때 분기처리 하시겠지만, navigate는 결과에 따라 처리되어야 합니다!

넵 염두해뒀다가 연결 시 navigate 분기처리하도록 하겠습니다!

lang92 · 2023-08-14T15:19:05Z

src/pages/Join/JoinInfo.jsx

+    setJoinUserInfo(prev => {
+      return {
+        ...prev,
+        birthday: formattedBirthday,
+      };
+    });


개인의 차이일 수 있지만, 저같은 경우는 return문은 앞에 로직이 없으면 사용하지 않습니다. 동철님도 앞으로 개발하시면서 이처럼 동철님 나름의 기준을 세워보세요!
참고만 해주세요!

Suggested change

setJoinUserInfo(prev => {

return {

...prev,

birthday: formattedBirthday,

};

});

setJoinUserInfo(prev => ({

...prev,

birthday: formattedBirthday,

}));

저도 평소엔 적지 않는 것을 선호하는 편인데 아무 생각 없이 작성한 거 같습니다...

lang92 · 2023-08-14T15:20:45Z

src/pages/Join/JoinInfo.jsx

+          <select>
+            <option value="010">010</option>
+            <option value="011">011</option>
+            <option value="016">016</option>
+            <option value="017">017</option>
+            <option value="018">018</option>
+            <option value="019">019</option>
+          </select>


이 부분도 상수데이터로 관리하면 유지보수에 좋을 것 같습니다.

해당 파일 컴포넌트 밖에 국번을 의미하는 "AREA_CODE" 라는 이름의 상수데이터로 분리 후 map함수로 반복하도록 수정했습니다!

lang92 · 2023-08-14T15:23:02Z

src/pages/Login/Login.jsx

+  const handleLogin = () => {
+    fetch('data/userData.json')
+      .then(res => res.json())
+      .then(userData => {
+        const userMatched = userData.find(
+          user =>
+            user.email === loginUserInfo.email &&
+            user.password === loginUserInfo.password,
+        );
+
+        if (userMatched) {
+          navigate('/join-done');
+        } else {
+          alert('이메일 또는 비밀번호가 일치하지 않습니다.');
+        }


userData와 비교한다라는 건 해당 요청의 response로 모든 유저의 데이터가 들어오는 것을 상정하고 작성하신 것 같은데, 실제로는 request에 담긴 user의 정보가 유효한지는 백엔드에서 체크해서 유효하다/아니다에 대한 response만 전달받을 것 같네요!
로그인&회원가입 실습에서 경험하신 대로 작업하시면 될 것 같습니다.

혹은 이 부분이 의도된 기획인가요?

의도한 바는 아니지만 mock데이터의 크기 자체가 작다보니 당연스럽게 생각했던 부분인 것 같습니다ㅠ
아직 fetch에 대한 개념이 좀 약해서 일단 받아온 후 어떻게 처리해야 할 지에 대해서만 고민했던 것 같네요...
말씀주신 부분 참고하여 수정하고 아래에 댓글 다시 남기도록 하겠습니다!

lang92 · 2023-08-14T15:26:58Z

src/style/common.scss

+  border: 1px solid #e6e6e6;
+  border-radius: 16px;
+  background-color: white;


인재님 PR에도 리뷰 남겼는데, 팀 공통에 대한 수정 사항은 개별 PR마다 따로 적용시키는 게 아니라 해당 내용만 수정하는 PR을 올려서 머지한 후 적용시켜야 합니다.

팀원 중 한 분만 main에서 새로 branch 생성해서 작업 후 PR 올려주세요!

넵!! 팀원 분들과 상의하여 말씀대로 하겠습니다!

Cheeze-Man added 6 commits August 12, 2023 13:17

Add:Login페이지 레이아웃

bb23d07

Fix:git push재시도를 위한 merge및 conflict해결중

6dac0a5

Add:Join페이지 레이아웃

089999d

Add:Join페이지(2개) 레이아웃

7d4cc5f

Add:로그인 기능(mock데이터와 비교) 추가

9919bb0

Add : 회원가입 기능 구현(수정 필요)

0c0958f

Cheeze-Man changed the title ~~[48기 이인재] Login 로그인, 회원가입 기능 구현 (많은 수정 필요.)~~ [48기 박동철] Login 로그인, 회원가입 기능 구현 (많은 수정 필요.) Aug 14, 2023

Modify : Join.scss 일부 수정

9c464b8

lang92 reviewed Aug 14, 2023

View reviewed changes

lang92 added the 수정 요청 label Aug 14, 2023

Modify : 유효성검사 항목 별 구분 + 유효성 검사에 따른 UI 변경 요소 추가

8914ef6

Cheeze-Man added the 추가 기능 구현 중 label Aug 15, 2023

Modify : 수정 요청 사항 반영하여 수정 완료.

ec40385

Cheeze-Man removed the 수정 요청 label Aug 15, 2023

Modify : 일부 변수명 및 클래스명 첫 알파벳 대문자 -> 소문자

d903115

Cheeze-Man changed the title ~~[48기 박동철] Login 로그인, 회원가입 기능 구현 (많은 수정 필요.)~~ [48기 박동철] Login 로그인, 회원가입 기능 구현 + 유효성 검사 기능 추가 Aug 15, 2023

Cheeze-Man added 5 commits August 16, 2023 14:35

Modify : CSS 수정중

cc1fd24

Modify : Input & Button 공통 컴포넌트로 변경 후 css수정

378c322

Modify : 회원가입 유효성 검사 삼항연산자 -> &&연산자로 변경

12d8532

Modify : fetch함수 API주소 백엔드와 연결 및 phoneNumer 표시 방식 변경

b974a54

Modify : fetch함수 수정 및 Join.jsx -> JoinInfo.jsx 파일명 수정

060e389

Cheeze-Man changed the title ~~[48기 박동철] Login 로그인, 회원가입 기능 구현 + 유효성 검사 기능 추가~~ [48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.) Aug 18, 2023

로그인 성공(토큰 받기까지)시 useNavigate주소 /post-list로 변경

dfd4886

Cheeze-Man added 완료 and removed 추가 기능 구현 중 labels Aug 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.) #4

[48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.) #4

Cheeze-Man commented Aug 14, 2023 •

edited

Loading

lang92 left a comment •

edited

Loading

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

lang92 Aug 14, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

lang92 Aug 14, 2023

Cheeze-Man Aug 15, 2023

		<Route path="/" element={<Login />} />
		<Route path="/login" element={<Login />} />

	<LoginButton text={'확인'} />
	<LoginButton text='확인' />

[48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.) #4

Are you sure you want to change the base?

[48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.) #4

Conversation

Cheeze-Man commented Aug 14, 2023 • edited Loading

1. 본 PR이 우리 팀의 웹 서비스 제품성에 어떠한 기여를 하였고, 사용자에게 어떠한 기대효과를 전달하는지 작성해주세요.

2. 이 브랜치에서 어떤 내용을 개발했는지 큰 제목과 상세 내역을 적어주세요.

3. 개발한 화면을 캡쳐해서 첨부 해 주세요.

4. 이 브랜치에서 개발하면서 느낀 개발 성장포인트를 적어주세요.

lang92 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

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

Cheeze-Man commented Aug 14, 2023 •

edited

Loading

1. 본 PR이 우리 팀의 웹 서비스 제품성에 어떠한 기여를 하였고,
사용자에게 어떠한 기대효과를 전달하는지 작성해주세요.

lang92 left a comment •

edited

Loading