[우지석] Week14 #448

jisurk · 2024-05-19T11:13:29Z

요구사항

기본

로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장합니다.
로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 “/folder” 페이지로 이동합니다.
“회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동합니다.
이메일 input에 placeholder는 “이메일을 입력해 주세요.” 비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.” 로 설정해 주세요.
이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해 주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해 주세요.” 에러 메세지를 보입니다.
로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해 주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해 주세요.” 에러 메세지를 보입니다.
로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행돼야 합니다.
https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동합니다.
눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다
소셜 로그인에 구글 아이콘 클릭시 ‘https://www.google.com’ 카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’ 로 이동하게 해주세요
“회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동합니다.
이메일 input에 placeholder는 “이메일을 입력해 주세요.” 비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요.” 비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.” 로 설정해 주세요.
이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지를 보입니다.
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지를 보입니다.
비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지를 보입니다.
비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지를 보입니다.
회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지로 알립니다.
회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행돼야 합니다.
이메일 input focus out 할 때 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인합니다. 중복된 경우 “이미 사용 중인 이메일입니다.” 에러 메세지를 보입니다. (중복된 이메일 확인은 “[email protected]”을 활용해 주세요.)
유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동합니다.

심화

로그인, 회원가입 기능에 react-hook-form을 활용해 주세요.

주요 변경사항

스크린샷

멘토에게

배포링크 : https://5-weekly-mission-rust.vercel.app/

스크린샷처럼 signup페이지에서 중복된 이메일을 적어서 폼제출을 했을때 409에러는 발생하는데
setEamilError가 실행이 안되는같아요.....

…ithub-actions [Fix] delete merged branch github action

…into part3-우지석

choinashil

지난주 분량까지 같이 작업해서 제출하시느라고 수고 많으셨습니다!!

약간 누락된 부분은 시간되면 진행해보세요 화이팅!

choinashil · 2024-05-21T14:26:55Z

components/EmailInput.tsx

@@ -0,0 +1,76 @@
+// components/EmailInput.tsx


파일명 보면 알 수 있는 부분이라 없어도 되는 주석인 것 같아요!!

choinashil · 2024-05-21T14:30:55Z

components/EmailInput.tsx

+export const emailCheck = (email: string) => {
+  const emailForm =
+    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
+  return emailForm.test(email);
+};


보통 요런 유틸성 함수는 별도 utils 폴더에 분리해서 관리하곤 합니다!
지금 emailCheck 함수를 export 하고 있는데, 다른 파일에서도 사용하고 있는 것 같아요
그렇다면 더더욱 분리하시는 것을 추천드립니다!

리액트 컴포넌트 파일에는 보통 리액트 컴포넌트 하나만 default export 하는 식으로 작성합니다

choinashil · 2024-05-21T14:31:42Z

components/EmailInput.tsx

+};
+
+export function EmailInput({ value, onChange, error }: EmailInputProps) {
+  const cx = classNames.bind(styles);


요거는 컴포넌트 렌더링 될 때마다 매번 다시 선언되지 않아도 되는 코드라서 컴포넌트 바깥쪽에 두셔도 돼요

저는 보통 import 문과 컴포넌트 사이에 둡니다

choinashil · 2024-05-21T14:33:16Z

components/EmailInput.tsx

+  return (
+    <div className={cx("input__section")}>
+      <label className={cx("text")}>
+        이메일 <br />


불필요해보이는 br 이네요!

choinashil · 2024-05-21T14:36:24Z

components/SignInForm.tsx

+  const cx = classNames.bind(styles);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [emailError, setEmailError] = useState("");
+  const [passwordError, setPasswordError] = useState("");
+  const router = useRouter();
+  const handleSubmit = async (e: React.FormEvent) => {


다른 파일들처럼 적당히 빈 줄을 추가해주면 더 읽기 편할 것 같아요!

choinashil · 2024-05-21T14:42:58Z

components/SignUpForm.tsx

+    const emailChecked = emailCheck(email);
+    const validPassword = isValidPassword(password);


emailCheck , isValidPassword 둘 다 동일하게 유효성 검증을 하는 함수인데
네이밍 방식도 다르고 사용한 단어 (valid, check) 도 달라서 좀 헷갈리는 것 같아요

멘토링 때 말씀드린대로 함수는 동사로 시작하게 작성해보시면 좋을 것 같고,
동일한 역할을 하는 함수라면 동일한 단어를 사용해서 일관성 있게 작성하면 더 좋을 것 같습니다!

함수의 리턴값이 boolean 형이니 변수도 boolean 형에 맞게 지어주시면 좋을 것 같고요!

Suggested change

const emailChecked = emailCheck(email);

const validPassword = isValidPassword(password);

const isEmailValid = validateEmail(email);

const isPasswordValid = validatePassword(password);

choinashil · 2024-05-21T14:44:54Z

components/SignUpForm.tsx

+    const passwordMatch = password === confirmPassword;
+
+    if (emailChecked && validPassword && passwordMatch) {
+      const checkEmailUrl = "https://bootcamp-api.codeit.kr/api/check-email";


요거는 submit 시점이 아니라 email 인풋 blur 시점에 확인해야 하는 것 같아요! (요구사항 확인)

choinashil · 2024-05-21T14:52:00Z

components/SignUpForm.tsx

+          checkEmailData
+        );
+        if (checkEmailResponse.status === 409) {
+          setEmailError("이미 사용 중인 이메일입니다.");


스크린샷처럼 signup페이지에서 중복된 이메일을 적어서 폼제출을 했을때 409에러는 발생하는데
setEamilError가 실행이 안되는같아요.....

배포 url 이 있어서 확인이 가능했습니다!!

409 에러 났을 때 콘솔에 'hello2' 가 찍히는 걸 보니 47라인이 실행됐다는 건데요
그 말은 error 가 나서 catch 구문으로 넘어갔다는 거겠죠?

27~30 라인에서 axios 요청하면서 에러가 났기 때문에 31라인 이후로 진행되지 않고 46라인으로 이동한거에요

catch 문에서 error의 status 가 409 인 경우 처리를 해주는 식으로 처리하시면 될 것 같습니다!

지금 submit 시점에 하나의 try~catch 문 안에서 두 개의 api (이메일 중복 확인, 회원가입) 을 처리하고 있는데
하나의 catch 문 내에서 두 api 의 에러 케이스를 같이 커버하면 코드가 섞일 수도 있고 하니
api 마다 각각 try~catch 로 감싸면 좋을 것 같아요
어차피 요구사항 상 두 개의 api 가 실행되어야 하는 시점이 별개라서 요구사항에 맞춰 수정하면 자연스럽게 정리될 것 같긴 합니다

choinashil · 2024-05-21T14:57:51Z

components/passwordToggle.js

@@ -0,0 +1,16 @@
+$(document).ready(function () {


갑분제이쿼리 어디서 나온거죠 ㅋㅋ 급한건 아니니 시간되면 고치시고 그리 중요한 부분은 아니라 냅두셔도 됩니다

choinashil · 2024-05-21T15:00:43Z

styles/Home.module.scss

+}
+.nav__bar {


띄어쓰기 일관성있게 해주세요!!

Suggested change

}

.nav__bar {

}

.nav__bar {

withyj-codeit and others added 13 commits September 3, 2023 21:57

chore: 머지 후 브랜치 삭제 github action 추가

93a0e93

reset

b2e37bd

Merge branch 'codeit-bootcamp-frontend:main' into main

6f8bbb0

fix: 머지 후 브랜치 삭제 github action 수정

e11e25f

env: workflows 폴더로 이동

212e864

Merge pull request codeit-bootcamp-frontend#237 from hanseulhee/fix-g…

4dc5dd0

…ithub-actions [Fix] delete merged branch github action

Merge branch 'part3-우지석' of https://github.com/jisurk/5-Weekly-Mission …

140ab86

…into part3-우지석

index.tsx 마이그레이션

58bef45

signin.js 마이그레이션

29d9df9

upload

af73df9

EmailInput 컴포넌트 마이그레이션

4f0db67

SignInForm 컴포넌틑 마이그레이션

ca08430

SignUp페이지 마이그레이션

6bf4fe8

jisurk requested a review from choinashil May 19, 2024 11:13

jisurk added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels May 19, 2024

jisurk self-assigned this May 19, 2024

choinashil approved these changes May 21, 2024

View reviewed changes

choinashil changed the base branch from main to part3-우지석 May 21, 2024 15:02

choinashil merged commit 5b4db1f into codeit-bootcamp-frontend:part3-우지석 May 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[우지석] Week14 #448

[우지석] Week14 #448

jisurk commented May 19, 2024 •

edited

Loading

choinashil left a comment

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

choinashil May 21, 2024

		const emailChecked = emailCheck(email);
		const validPassword = isValidPassword(password);

[우지석] Week14 #448

[우지석] Week14 #448

Conversation

jisurk commented May 19, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

choinashil 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

jisurk commented May 19, 2024 •

edited

Loading