[Front] 코드 분석 중 궁금한/모르는 점 정리

1-1. onblur

: 입력창(input)에서 포커스(커서)가 빠져나갈 때 실행되는 이벤트

즉, 사용자가 input 칸에 커서를 뒀다가 → 다른 곳을 클릭하거나 탭해서 빠져나가면(onblur) → 연결된 JavaScript 함수가 실행된다.

주로 입력 값 유효성 체크할 때 자주 사용

<input type="text" name="memberId" onblur="checkJoinMemberId(event)">

즉, 입력 창 영역에서 마우스 커서를 빼면 바로 연결된 js 함수가 실행된다.

• 실시간 검증(유효성 검사)에 많이 씀
• 예: 아이디 중복 체크, 이메일 형식 검사, 비밀번호 조건 확인 등

이벤트	실행되는 시기	특징
oninput	글자가 입력되면 실시간으로 실행	가장 빠르게 반응함 (삭제, 붙여넣기, 한글 조합까지 다 인식)
onkeyup	키보드를 눌렀다가 뗐을 때 실행	한글 조합 입력 안 끝나면 실행 안 됨
onkeydown	키를 눌렀을 때 바로 실행	눌렀을 때 바로 반응, 문자 입력 전에도 실행
onchange	입력한 값이 변하고 포커스를 잃을 때 실행	select, checkbox, radio 등에 적합

---

1-2. label 태그의 for 속성

• for 속성은 label 속성과 함께 쓰이는 것으로, 어떤 <input> 요소와 연결돼 있는지 지정해주는 것이다. // 해당 label(이메일이라는 문자열)을 클릭하면 이메일을 입력하는 input에 자동으로 포커스가 이동한다.
• id="selectEmailAddress" 아이디 속성과 연결된다.

<label class="visually-hidden" for="autoSizingInputGroup">&nbsp;</label>

---

1-3. onchange()

onchange: select 박스나 input 필드의 값이 변경되었을 때 실행되는 이벤트

<select class="form-control" name="memberEmailDomain"
									id="selectEmailAddress" onchange="onChangeEmailAddress(value)">
									<option value="setInputEmailAddress">직접입력</option>
									<option>google.com</option>
									<option>naver.com</option>
									<option>daum.net</option>
									<option>hanmail.net</option>
								</select>

• "onChangeEmailAddress(value)": 변경된 값을 가지고 onChangeEmailAddress라는 자바스크립트 함수를 실행하라는 뜻.
• value: select 요소의 현재 선택된 값(예: "naver.com" 또는 "setInputEmailAddress").

네이버를 선택 시 아래와 같이 작동

onChangeEmailAddress("naver.com");

---

1-4.  &nbsp;란?

• &nbsp; = non-breaking space = 띄어쓰기 한 칸
• 일반적인 공백 ' '과 달리, 줄이 바뀌어도 이 공백은 줄바꿈되지 않음
• 줄 맞춤이나 빈 공간 채우기, 디자인 정렬을 위해 사용함

언제 쓰는지?

1. 라벨 안에 빈 공간을 채울 때

<label for="inputState">&nbsp;</label>

→ 눈에는 안 보이지만 자리 차지는 함

 

2. 텍스트 사이 강제 띄어쓰기

Hello World

→ Hello World로 출력되며, 중간 띄어쓰기는 줄바꿈되지 않음

 

3. 여러 개 연속 공백을 만들고 싶을 때

A   

A B처럼 보임 (일반 스페이스는 연속되면 무시되므로)

---

1-5. aria-label

• 시각장애인용 보조 기기(스크린리더)가 읽는 이름, 접근성 향상

aria-label ="Zip"

---

1-6. label 태그

<label>은 input 요소에 대한 "이름표" 또는 "설명"을 붙이는 태그

→ 사용자가 어떤 값을 입력해야 하는지 알려주는 역할을 한다.

• 사용자가 쉽게 이해할 수 있음
• 예) 이메일, 비밀번호, 전화번호 같은 안내문구를 옆에 표시할 수 있음
• 클릭하면 input에 포커스됨
• label에 for 속성을 쓰면, label을 클릭했을 때 자동으로 해당 input에 커서가 이동함
• 접근성(시각장애인용 스크린리더) 향상
• 스크린리더가 label의 내용을 읽어줘서 폼 사용이 쉬워짐
•  

<label for="email">이메일</label>
<input type="email" id="email" name="email">

• for="email": 이 label이 id="email"인 input과 연결됨
• 사용자가 "이메일"이라는 글자를 클릭하면 자동으로 아래 input에 포커스 이동

---

1-7. input 태그 타입 종류

타입	설명
text	일반 텍스트 입력 (이름, 아이디 등)
password	비밀번호 입력 (입력값 숨김 처리)
email	이메일 주소 입력 (형식 검사 가능)
tel	전화번호 입력 (모바일에서 숫자 키패드 표시)
number	숫자만 입력 가능 (화살표 조절도 나옴)
checkbox	체크박스
radio	라디오 버튼 (여러 개 중 하나 선택)
button	일반 버튼 (기능은 JS로 지정)
submit	폼 전송 버튼
reset	입력값 초기화 버튼
file	파일 업로드 (사진 첨부 등)
date	날짜 선택 달력 표시
time	시간 선택
datetime-local	날짜 + 시간 선택
range	슬라이더 막대 (숫자 범위 조절)
hidden	사용자에겐 보이지 않지만 폼에 값은 포함됨
search	검색창 (브라우저 최적화됨)
url	URL 입력 (형식 검사 가능)
color	색상 선택 도구

---

1-8. 화살표 함수

: 간단한 함수는 화살표 함수로 작성하면 좋다.

const limitInputBirth = () => {
// 함수 내용
}

function limitInputBirth() {
  // 함수 내용
}

위 코드는 동일하다.

---

1-9. input 태그의 date 타입

: 브라우저가 UI에 달력(날짜 전용 입력 필드) 을 띄워준다.

• 자바스크립트 코드가 아니라 <input type="date"> 자체의 기능
• 사용 시 미래 날짜를 선택하지 못하게 하는 함수를 사용해서 옳지 않은 날짜는 선택하지 못하도록 막을 수 있다

<input type="date" id="memberBirth">

---

1-10. 제이쿼리 문법

jQuery에서 $()로 감싸서 선택하면, 이후 .text(), .hide(), .show() 같은 조작이 가능하다.

// 아이디 사용 여부 검사 기능
const checkJoinMemberId = (event) => {
	// 아이디 입력 패턴
	const memberIdPattern = /^[a-z][a-z0-9]{2,15}$/;
	// 행동이 일어난 태그의 값(양쪽 여백 제거) 받아오기
	let joinMemberId = $(event.target).val().trim();
	// (event.target) : 입력이 발생한 <input> 태그
	// 공백을 앞뒤로 제거 후 값을 가져옴
	const isPatternValid = memberIdPattern.test(joinMemberId);
	// test()는 자바스크립트 내장객체에 포함된 메서드이다. 정규식에 맞는지 검사함
	const memberId = $("#memberId");
	const memberIdFeedback = $("#memberIdFeedback");
	// 제이쿼리 문법
	
	// 입력값이 없으면 요청하지 않음
	if (!joinMemberId) { // 입력값이 없다면
		memberId.removeClass("is-valid is-invalid"); 
		memberIdFeedback.hide(); // hide() : 선택한 요소를 화면에서 안 보이게(hidden 처리) 해주는 jQuery 내장 메서드
		console.log("입력값이 비어 있어 요청하지 않음");
		return;
	}

	// 입력 패턴에 맞지 않다면
	if (!isPatternValid) {
		// UI/UX
		memberId.addClass("is-invalid").removeClass("is-valid");
		// 사용자에게 패턴 오류 알림
		memberIdFeedback.text("영어와 숫자만 세글자 이상 입력").show();
		return;
	}

이름	설명
hide()	요소의 CSS 속성 display: none;으로 만들어서 화면에서 감춤
show()	반대로 다시 보여줌 (display: block 등으로 복원됨)
toggle()	보이면 숨기고, 숨겨졌으면 보여줌