[유경민] sprint4

[9oostin]

✅ 체크리스트 [기본]

🔐 로그인

• 이메일 input에서 focus out 시 값이 없으면:
  • input에 빨강색 테두리
  • 아래에 “이메일을 입력해주세요.” 빨강색 에러 메시지 표시
• 이메일 input에서 focus out 시 이메일 형식이 틀리면:
  • input에 빨강색 테두리
  • 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메시지 표시
• 비밀번호 input에서 focus out 시 값이 없으면:
  • 아래에 “비밀번호를 입력해주세요.” 에러 메시지 표시
• 비밀번호 input에서 focus out 시 8자 미만이면:
  • 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메시지 표시
• input에 빈 값 or 에러 메시지가 있으면:
  • ‘로그인’ 버튼 비활성화
• 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에 빈 값 or 에러 메시지가 있으면:
  • ‘회원가입’ 버튼 비활성화
• input에 유효한 값 입력 시:
  • ‘회원가입’ 버튼 활성화
• 활성화된 ‘회원가입’ 버튼 클릭 시:
  • 로그인 페이지로 이동

✨ 체크리스트 [심화]

• 눈 모양 아이콘 클릭 시:
  • 비밀번호 문자열 보임 / 가려짐 토글
  • 가려질 때 → 눈 모양 아이콘에 사선 있음
  • 보일 때 → 사선 없는 눈 모양 아이콘 표시

---

배포사이트

https://pandapandapanda.netlify.app/login
https://pandapandapanda.netlify.app/signup

---

주요 변경사항

• 프리티어스 적용
• 커밋 메시지 컨벤션 적용
• 이미지 svg로 변경
• class 태그이름 추가

---

스크린샷

로그인

회원가입

---

멘토에게

1. 제가 과제 요구사항에 맞게 코드를 짠 건지 궁금합니다
2. 필요 없는 구조나 더 단순화할 수 있는 부분이 있으면 피드백 주시면 감사하겠습니다!
3. 현재 단계에서 고치거나 연습하면 좋은 부분 + 채우기 위해 어떤 공부를 하면 좋을지 궁금하네요..
4. 문제가 있을 때 (예로 비밀번호 가리기 기능을 추가해야한다 ) 멘토님은 보통 어떻게 풀어나가시나요? 평소에 문제를 접할 때 어떤 순서로 접근하시는지(노트참고, 서치, 해결 과정 미리 정리해보기 등..)궁금합니다
5. *스프린트 미션 외에 개인 프로젝트 리뷰 관련 조언이 필요할때 주변에 지인이 없으면 어떤 채널이나 방법으로 피드백 받는 게 좋을까요? 크몽, 링크드인, 오픈 커뮤니티 등.. 추천해주시면 감사하겠습니다!

[kiJu2]

스프리트 미션 하시느라 수고 많으셨어요.
경민님 학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다. 😊

[kiJu2]

(제안) 만약 스타일 선택자 목적이라면 태그보다는 class를 선택자로 사용하는게 어떨까요?

Suggested change

	input[type='email'],
	input[type='password'] {
	.input[type='email'],
	.input[type='password'] {

클래스는 재사용이 가능하며, 자유롭게 태그에 스타일을 붙일 수 있어서 유지보수에 용이하므로 단순히 스타일을 위해서라면 class를 추천드려요 !

좀 더 자세히 🤔

유지보수가 어려워질 수 있어요.

특정 p 태그에만 다른 스타일을 적용하려면 추가적인 선택자를 작성하거나 기존 스타일을 덮어써야 하므로 유지보수가 어려워집니다.

태그 의미를 명확히 부여하기 어려워요.

스타일링을 태그에 직접 적용하면, 태그가 어떤 의미를 가지는지 어렵기에 가독성이 보다 좋지 못할 수 있어요.

만약 다음 코드의 스타일을 태그 선택자로만 지정한다면 ?

<p class="error-message">오류가 발생했습니다.</p>

물론 전역적인 것을 의미한다면 일정 허용될 수 있어요.

예를 들어서 p의 기본 마진을 없애고 싶다면 다음과 같이 작성할 수 있을거예요:

p {
    margin: 0;
}

그렇지만 특정 스타일을 지정하고 싶다면 다음과 같이 작성해볼 수 있어요:

.paragraph {
    font-size: 16px;
    color: #333;
}

.highlight {
    background-color: yellow;
}

[kiJu2]

컬러 팔레트를 사용해보시는건 어떨까요? 🎨

컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요?
컬러 팔레트는 color.css 혹은 global.css에서 정의하는게 일반적입니다 !
컬러 팔레트는 다음과 같이 정의할 수 있습니다:

:root {
  --primary: #6D6AFE;
  --red: #FF5B56;
  --black: #111322;
  --white: #FFFFFF;
  --gray-100: #3E3E43;
  --gray-200: #9FA6B2;
  --gray-300: #CCD5E3;
  --gray-400: #E7EFFB;
  --gray-500: #F0F6FF;
}

[kiJu2]

굿굿 ! 적절한 이벤트 리스너네요 👍

이렇게 되면 DOM이 로드가 된 후 순서를 보장할 수 있으며, 글로벌 스코프를 방지할 수 있겠어요

[kiJu2]

크으 ~ 순수 함수를 구현하시다니 👍

해당 함수는 입력값(email)이 같으면 언제나 같은 결과(true/false)를 반환하고 외부 상태에 영향을 주거나 의존하지도 않아요.
이런 함수를 “순수 함수(Pure Function)” 라고 부릅니다.

이러한 구조는 테스트하기도 쉽고, 예측 가능한 코드 작성에 도움이 되는 좋은 패턴입니다.
지금처럼 유틸리티 함수를 순수하게 분리해 작성하는 습관, 정말 잘 하고 계세요! 🔥

[kiJu2]

별칭을 작성해서 가독성을 높이셨군요 ! 깔끔합니다!

emailValid, passwordValid 등. 조건문을 인라인으로 바로 사용하지 않고 별칭을 사용해서 가독성이 훨씬 좋아졌네요 👍

다만 보통 boolean은 is~로 시작하는게 일반적입니다

일반적인 네이밍 컨벤션 보기

[kiJu2]

굿굿 ~ 유효한 속성들이 추가되었군요 ! 👍👍

[kiJu2]

submit 이벤트에 리스너를 등록해도 될 것 같아요.

예를 들어 폼 내에서 enter로 제출을 시도하게 되면 어떻게 될까요?
일반적으로 엔터 혹은 탭을 통해 버튼을 클릭할 수도 있어요.
enter로 제출하면 해당 버튼의 비밀번호 유효성 검사가 실행되지 않을거예요 ! 😊

[kiJu2]

수고하셨습니다 경민님 !
마지막까지 학습을 놓치 않고 끝까지 스프린트 미션을 달성하신 점 정말 리스펙합니다 👍👍
정말 아쉽지만, 앞으로 하고싶은 일 모두 잘 이루어지기를 진심으로 기원합니다 !