Part1 전소은 week4 by sobokki · Pull Request #168 · codeit-bootcamp-frontend/2-Weekly-Mission

sobokki · 2023-11-12T17:11:49Z

요구사항

기본

[x][기본]이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지가 보이나요?
[x][기본]이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 input에 빨강색 테두리와 아래에 “올바른 이메일 주소가 아닙니다.” 빨강색 에러 메세지가 보이나요?
[x][기본]이메일 input에서 focus out 일 때, input 값이 test@codeit.com 일 경우 input에 빨강색 테두리와 아래에 “이미 사용 중인 이메일입니다.” 빨강색 에러 메세지가 보이나요?
[x][기본]비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, input에 빨강색 테두리와 아래에 “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 빨강색 에러 메세지가 보이나요?
[x][기본]비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input에 빨강색 테두리와 아래에 “비밀번호가 일치하지 않아요.” 빨강색 에러 메세지가 보이나요?
[x][기본]회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 빨강색 테두리와 에러 메세지가 보이나요?
[x][기본]이외의 유효한 회원가입 시도의 경우, “/folder”로 이동하나요?
[x][기본]이메일: test@codeit.com, 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동하나요?
[x][기본]비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?
[][기본]이외의 로그인 시도의 경우 이메일, 비밀번호 input에 빨강색 테두리와 각각의 input아래에 “이메일을 확인해주세요.”, “비밀번호를 확인해주세요.” 빨강색 에러 메세지가 보이나요?
[][기본]회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 되나요?
[x][기본]이메일, 비밀번호 input에 에러 관련 디자인을 Components 영역의 에러 케이스로 적용했나요?

심화

[][심화]눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 하나요?
[][심화]비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
[][심화]로그인, 회원가입 페이지에 공통적으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용했나요?

주요 변경사항

스크린샷

week2.html_signup-email.test.40codeit.com.signup-password.codeit101.signup-password2.codeit101.-.Avast.Secure.Browser.2023-11-13.02-07-36.mp4

멘토에게

-심화 부분은 시도했으나 구현이 안됐습니다.

[][기본]이외의 로그인 시도의 경우 이메일, 비밀번호 input에 빨강색 테두리와 각각의 input아래에 “이메일을 확인해주세요.”, “비밀번호를 확인해주세요.” 빨강색 에러 메세지가 보이나요?
[][기본]회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 되나요?
-위 두 가지도 구현이 힘들었습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

pocojang

안녕하세요
소은님!

CSS만 만지다가 이제 드디어 JS까지 입문하셨네요.
적은 코드량으로 적절하게 잘해주셨다고 보입니다~~

질문 남겨주신 것은 그냥 심화 내용을 다 못했어요~ 라는 것이지요?!

신나게 피드백하다가...순한맛 버전으로 좀 줄여서 했는데요
다음에는 매운맛으로 한번 받아보세요!!

몇가지 습관만 갖춰도 많이 좋아지실 것 같습니다!

그리고 PR 타겟 브랜치!! 고쳐주셔야합니다~~

pocojang · 2023-11-15T23:51:39Z

+const emailInput = document.getElementById("signup-email");
+const errorMessage = document.getElementById("error-message");
+const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;


pocojang · 2023-11-15T23:52:19Z

@@ -0,0 +1,83 @@
+const emailInput = document.getElementById("signup-email");
+const errorMessage = document.getElementById("error-message");
+const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;


분리는 잘하셨고요!
불리언을 반환하는 값이라면 isEmailRegex 과 같은 표현으로 바꾸는게 낫지 않을까요?

pocojang · 2023-11-15T23:53:05Z

+const errorMessage = document.getElementById("error-message");
+const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
+
+function showError(input, errorElement, errorMessage) {


Suggested change

function showError(input, errorElement, errorMessage) {

function showError({ input, errorElement, errorMessage }) {

객체로 받는게 어떨까요!?

pocojang · 2023-11-15T23:53:52Z

+const joinButtons = document.getElementsByTagName("button")[0];
+const joinMessage = document.getElementsByClassName("join-message")[0];


Suggested change

const joinButtons = document.getElementsByTagName("button")[0];

const joinMessage = document.getElementsByClassName("join-message")[0];

const [joinButtons] = document.getElementsByTagName("button");

const [joinMessage] = document.getElementsByClassName("join-message");

배열 구조 분해 할당을 활용해보세요 :)

pocojang · 2023-11-15T23:55:11Z

+
+    // 이메일 유효성 검사
+    if (
+      (emailInput.value === "" &&
+        !emailRegex.test(emailInput.value) &&
+        emailInput.value === "test@codeit.com") ||
+      !/^(?=.*[a-zA-Z])(?=.*\d)/.test(passwordInput.value) ||
+      passwordInput.value.length < 8 ||
+      passwordInput.value !== passwordInputOmt.value
+    ) {


Suggested change

// 이메일 유효성 검사

if (

(emailInput.value === "" &&

!emailRegex.test(emailInput.value) &&

emailInput.value === "test@codeit.com") ||

!/^(?=.*[a-zA-Z])(?=.*\d)/.test(passwordInput.value) ||

passwordInput.value.length < 8 ||

passwordInput.value !== passwordInputOmt.value

) {

const isValidEmail = (emailInput.value === "" &&

!emailRegex.test(emailInput.value) &&

emailInput.value === "test@codeit.com") ||

!/^(?=.*[a-zA-Z])(?=.*\d)/.test(passwordInput.value) ||

passwordInput.value.length < 8 ||

passwordInput.value !== passwordInputOmt.value

if (isValidEmail) {

이렇게 뽑아낼 수 있겠죠?!

pocojang · 2023-11-15T23:56:18Z

week2-1.js이과 코드가 굉장히 비슷한데 어떤 관계일까요..?!

pocojang · 2023-11-15T23:56:42Z

+
+function showError(input, errorElement, errorMessage) {
+  input.classList.add("error");
+  errorElement.innerText = errorMessage;


이렇게 메세지를 받아서 공통으로 분리하다니 굉장히 좋은 시도네요!

pocojang · 2023-11-15T23:56:58Z

+const passwordInput = document.getElementById("signup-password");
+const errorMessage2 = document.getElementById("error-message2");
+const passwordInputOmt = document.getElementById("signup-password2");
+const errorMessage2Omt = document.getElementById("error-message2-omt");


이런 선언들은 다 가장 위에 모아놓는게 어때요?!

pocojang · 2023-11-15T23:58:32Z

+<html>
+<head>
+  <meta charset="utf-8">
+  <title></title>


헛.. 비어있어요!
이정도 태그는 꼭 채워주시는게 좋습니다

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

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

93a0e93

1~2주차_미션

f1e1c98

week2미션_전소은

91258b0

week2

6ee478a

week2

38333b1

week2_전소은

232198d

week3 weekly mission

af856fa

week3 agian1

10c623a

week4 mission finshi

b3a617c

week4 email, password 표시 수정

1ba1105

sobokki requested a review from pocojang November 12, 2023 17:12

sobokki added 미완성 죄송합니다... 순한맛🐏 마음이 많이 여립니다... labels Nov 12, 2023

pocojang approved these changes Nov 16, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Part1 전소은 week4#168

Hidden character warning

Part1 전소은 week4#168
sobokki wants to merge 10 commits intocodeit-bootcamp-frontend:mainfrom
sobokki:part1-전소은-week4

sobokki commented Nov 12, 2023

Uh oh!

pocojang left a comment •

edited

Loading

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

pocojang Nov 15, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	function showError(input, errorElement, errorMessage) {
	function showError({ input, errorElement, errorMessage }) {

		const joinButtons = document.getElementsByTagName("button")[0];
		const joinMessage = document.getElementsByClassName("join-message")[0];

Conversation

sobokki commented Nov 12, 2023

요구사항

기본

심화

주요 변경사항

스크린샷

멘토에게

Uh oh!

pocojang left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pocojang left a comment •

edited

Loading