[정지원] sprint4

[Jiw0nJ]

요구사항

기본

로그인

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "이메일을 입력해주세요." 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 "잘못된 이메일 형식입니다" 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 "비밀번호를 입력해주세요." 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 "비밀번호를 8자 이상 입력해주세요." 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 '로그인' 버튼은 비활성화 됩니다.
• input 에 유효한 값을 입력하면 '로그인' 버튼이 활성화 됩니다.
• 활성화된 '로그인' 버튼을 누르면 "/items" 로 이동합니다

회원가입

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "이메일을 입력해주세요." 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 "잘못된 이메일 형식입니다" 빨강색 에러 메세지를 보입니다.
• 닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 "닉네임을 입력해주세요." 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 "비밀번호를 입력해주세요." 에러 메세지를 보입니다
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 "비밀번호를 8자 이상 입력해주세요." 에러 메세지를 보입니다.
• 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 "비밀번호가 일치하지 않습니다.." 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 '회원가입' 버튼은 비활성화 됩니다.
• input 에 유효한 값을 입력하면 '회원가입' 버튼이 활성화 됩니다.
• 활성화된 '회원가입' 버튼을 누르면 로그인 페이지로 이동합니다

심화

• 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
• 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

주요 변경사항

• 로그인 회원가입 폼에 유효성 검사 기능 추가

스크린샷

⚠️ 로그인 폼 유효성 검사 - 잘못된 입력

⚠️ 회원가입 폼 유효성 검사 - 잘못된 입력

✅ 회원가입, 로그인 폼 - 유효성 검사 통과

멘토에게

• 최근까지 프로젝트를 진행하면서 계속 React나 next.js를 사용해왔기 때문에, 이번 미션에서 React나 외부 라이브러리 없이 순수 JavaScript만으로 구현하는 작업이 꽤 어렵게 느껴졌습니다.이번 미션을 통해 두 가지 방향성에 대한 작은 고민이 생겼습니다

기초인 JavaScript를 더 깊이 있게 공부해서 어떤 상황에서도 구현할 수 있는 기반을 다질 것인지
아니면 React(라이브러리 등)를 더 적극적으로 활용해서 실무에 가까운 방식으로 효율적인 개발을 추구할 것인지

두 방향 모두 필요하다는 건 알지만, 현재 제 수준에서는 어느 쪽에 좀 더 집중하는 게 좋을지 조언을 듣고 싶습니다!

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[dongqui]

지원님 이번 미션도 깔끔하게 잘 마무리 해주셨네요 💯

함수명, 변수명이 직관적이라 보기 편했습니다!

최근까지 프로젝트를 진행하면서 계속 React나 next.js를 사용해왔기 때문에, 이번 미션에서 React나 외부 라이브러리 없이 순수 JavaScript만으로 구현하는 작업이 꽤 어렵게 느껴졌습니다.이번 미션을 통해 두 가지 방향성에 대한 작은 고민이 생겼습니다

기초인 JavaScript를 더 깊이 있게 공부해서 어떤 상황에서도 구현할 수 있는 기반을 다질 것인지
아니면 React(라이브러리 등)를 더 적극적으로 활용해서 실무에 가까운 방식으로 효율적인 개발을 추구할 것인지

두 방향 모두 필요하다는 건 알지만, 현재 제 수준에서는 어느 쪽에 좀 더 집중하는 게 좋을지 조언을 듣고 싶습니다!

->
개인적인 생각으론...
지금은, 지금 하고 계시는 거에 집중하셔도 좋아요! 주어진 스프린트, 미션, 프로젝트에 최선을 다하시면 됩니다. 전반적인 개발 실력을 키우시는 거죠 :)

이후 본격적으로 면접을 준비하고 취업을 준비할 때는 조금 다른 느낌이 될 수 있습니다.
'자바스크립트로 어떤 상황에서도 구현 가능한 능력', '효율적인 개발 추구'를 말씀 주셨는데, 고민하고 계신 부분은 약간 추상적인 느낌이 있습니다.
가령, 회사에서 신입이 정말 자바스크립트를 잘 쓰는지 어떻게 확인할 수 있을까요? 기초 지식을 확인합니다.
호이스팅이 뭔지, 싱글 스레드, 이벤트 루프를 설명할 수 있는지 등을 확인합니다.
React, Next도 마찬가지입니다. Virtual DOM은 뭔지, SSR은 왜 하는지, SSG는 언제 쓰면 좋은지 등을 물어봅니다.
이런 기초 지식이나 개념들은 어느 정도 양이 정해져 있고, 모두 공부해야 하는 것들이지 선택할 수 있는 방향성 같은 것은 아닙니다 :)

물론 위는 제가 생각하는 일반적인 경우고, 특정 영역을 좀 더 학습하실 필요가 있을 수도 있습니다.
이런 경우는 원하시는 목표에 따라 조금 다를 것 같네요.
대기업은 보통 실무보다는 기초가 잘 다져진 신입을, 스타트업은 바로 실무에 투입 가능한 인재를 선호하는 경향이 있습니다 :)
지원님께서 원하는 회사는 어떤 곳인지 먼저 리스트업해 보시고 준비해 보시면 어느 정도 도움이 될 것 같습니다!

---

순수 실력 향상에 대해 고민이신거라면, 굳이 두 방향을 나누기 보다는, 만들고 싶은 것 중심으로 많이 만들어보시는 게 최고입니다 🤣

[dongqui]

정규식을 써주셨네요! 👍

[dongqui]

상태 초기화를 위해서인가요~?
disabled 속성을 사용할 수 있습니다 :)

<button disabled></button>

[dongqui]

여러개의 error span을 다루고 있는데, 하나로 줄여봐도 좋을 거 같습니다 :)
만약 지금 요구사항이 추가 된다면 html도 추가하고 아래 함수에서 다뤄야할 경우의 수도 늘어나겠죠!

function showError(inputElement, errorId, message) {
  const errorElement = document.getElementById(errorId);
  errorElement.style.display = "block";
  errorElement.innerHTML= message;
  inputElement.style.outline = "1px solid var(--error)";
}

[dongqui]

작은 기능별로 함수를 잘 쪼개셨네요! 👍

[dongqui]

변수명, 함수명이 대체로 명확하고 직관적입니다 :) 👍