드디어 프로젝트 구현이 거의 끝났다. 추가적인 기능들을 보완하고 서로 피드백을 하는 시간을 가졌다. 오늘은 회원가입을 할 때 비밀번호를 확인하는 필드가 하나 더 있으면 좋을 것 같아 해당 기능을 추가했다.
다음과 같이 비밀번호와 비밀번호 확인 필드의 값을 비교하여 일치 여부를 확인하는 함수를 작성했다. 사용자가 입력 필드의 값을 변경하는 이벤트가 발생할 때마다 실행하는 콜백 함수이다.
function checkPasswordMatch() {
const password = document.getElementById("sign-up-password").value;
const passwordCheck = document.getElementById("sign-up-password-check").value;
const message = document.getElementById("pw-confirm-message");
if (!password || !passwordCheck) {
message.textContent = ""; // 입력되지 않은 경우 초기화
return;
}
if (password === passwordCheck) {
message.textContent = "비밀번호가 일치합니다.";
message.style.color = "green";
} else {
message.textContent = "비밀번호가 일치하지 않습니다. 다시 확인해주세요.";
message.style.color = "red";
}
}
document.getElementById("sign-up-password").addEventListener("input", checkPasswordMatch);
document.getElementById("sign-up-password-check").addEventListener("input", checkPasswordMatch);
✔️ addEventListener
는 특정 HTML 요소에 이벤트를 연결(등록)할 때 사용하는 메서드이다.
기본 구문은 다음과 같다.
element.addEventListener(event, callback, options);
element
: 이벤트를 등록할 HTML 요소event
: 발생할 이벤트 유형(예: click, input, change, submit 등)callback
: 이벤트가 발생했을 때 실행할 함수options
: 선택 사항capture
: 이벤트 캡처링 단계에서 이벤트 처리 여부 지정once
: 이벤트를 한 번만 실행한 후 제거할지 여부 지정passive
: 이벤트 핸들러가 기본 동작을 방해하지 않을 것임을 나타냄그리고나서 회원가입 버튼 이벤트 핸들러 안에 비밀번호와 비밀번호 확인이 불일치 할 때 return 하도록 했다.
// Password가 불일치할 경우
if (password !== passwordCheck) {
return;
}
❔체크 예외 : 개발자가 명시적으로 처리해야 하는 예외. Exception
과 그 하위 예외(RuntimeException
제외)를 말한다. 체크 예외는 잡아서 처리하거나 던지는 것 둘 중에 하나를 반드시 선택해야 한다.
Exception
을 상속받으면 체크 예외, RuntimeException
을 상속받으면 언체크 예외가 된다. try-catch-finally
구문을 통해 예외를 처리할 수 있다.
// Exception을 상속받은 예외는 체크 예외가 된다.
public class MyCheckedException extends Exception {
public MyCheckedException(String message) {
super(message);
}
}
public class Client {
public void call() throws MyCheckedException {
throw new MyCheckedException("ex");
}
}
예외를 던질 때는 throws
키워드를 사용하는데, throw
와의 차이를 알아놓자.
throws
: 발생시킨 예외를 메서드 밖으로 던질 때 사용하는 키워드throw
: 새로운 예외를 발생시킬 수 있는 키워드다음과 같이 예외를 처리하는 callCatch()
메서드와 예외를 던지는 catchThrow()
메서드로 예외를 다룰 수 있다. catchThrow()
메서드에서 체크 예외는 예외를 잡지 않고 밖으로 던지려면 throws
예외를 메서드에 필수로 선언해야 한다는 것을 알 수 있다.
public class Service {
Client client = new Client();
public void callCatch() {
try {
client.call();
} catch (MyCheckedException e) {
System.out.println("예외 처리, message=" + e.getMessage());
}
System.out.println("정상 흐름");
}
public void catchThrow() throws MyCheckedException {
client.call();
}
}
❔ 언체크 예외 : 런타임 예외라고도 하며, 개발자가 명시적으로 처리하지 않아도 되는 예외. RuntimeException
과 그 하위 예외를 말한다. 예외를 잡아서 처리하지 않아도 throws
키워드를 생략할 수 있다.
언체크 예외는 예외를 잡거나 던지지 않아도 된다. 예외를 잡지 않으면 자동으로 밖으로 던진다.
// RuntimeException을 상속받은 예외는 언체크 예외가 된다.
public class MyUncheckedException extends RuntimeException {
public MyUncheckedException(String message) {
super(message);
}
}
체크 예외와 달리 throws
키워드를 사용하지 않은 것을 볼 수 있다.
public class Client {
public void call() {
throw new MyUncheckedException("ex");
}
}
다음과 같이 필요한 경우 예외를 잡아서 처리할 수 있다. 물론 예외를 잡지 않아도 된다. 그런 경우 자연스럽게 상위로 넘어간다. 실행 결과는 체킁 예외와 동일하다.
public class Service {
Client client = new Client();
public void callCatch() {
try {
client.call();
} catch (MyUncheckedException e) {
System.out.println("예외 처리, message=" + e.getMessage());
}
System.out.println("정상 로직");
}
public void callThrow() {
client.call();
}
}
오늘은 프로젝트를 거의 끝내고 추가적인 기능을 구현 후, 팀원분들과 통합 테스트를 진행했다. 튜터님께서 저녁에 피드백을 해주신다고해서 그 전까지 기능을 모두 구현하고 디버깅하는 것에 집중했다. 튜터님께서 피드백을 하러 오셔서 간단히 시연했는데 아주 극찬을 해주셨다.😎 주말에 보완하지 않아도 될 것 같아서 다행이다. 다음주 발표까지 화이팅!