[코드잇 스프린트 FE 19기] 스프린트 미션 4 후기

📝 스프린트 미션 주제

미션 4는 기존 미션에서 작업한 로그인, 회원가입 페이지에

자바스크립트를 사용해서 폼 유효성 검사를 구현하는 것이 주제였다.

 

🔁 스프린트 미션 진행 과정

🖥️ 이전 작업 수정

1. name 속성 추가

미션 4를 진행하려고 보니 input이나 from 태그에

name 속성이 빠져 있어서 그 부분을 추가해 주었다.

name 속성은 폼 데이터 전송 시 key 역할을 한다.
form이 제출될 때, 각 input의 name=value 형태로 서버에 전달됨

 

2. autocomplete 속성 추가

브라우저 콘솔을 확인해보니 autocomplete 속성과 관련된 경고가 떠서

접근성을 위해 속성을 추가해주었다.

 

autocomplete 속성을 사용하면

위 사진처럼 브라우저에서 자동완성 기능을 제공해준다.

 

🗂️ 폴더 구조

📦 sprintMission
 ┣ 📂constant
 ┃ ┗ 📜regex.js
 ┣ 📂css
 ┃ ┣ 📜auth-style.css
 ┃ ┣ 📜common.css
 ┃ ┣ 📜index-style.css
 ┃ ┗ 📜variables.css
 ┣ 📂images
 ┣ 📂js
 ┃ ┣ 📜auth.js
 ┃ ┗ 📜auth-handlers.js
 ┣ 📜index.html
 ┣ 📜login.html
 ┣ 📜signup.html
 ┗ 📜item.html

이번 미션부터 JS파일을 추가해야 해서 js 폴더를 만들었고,

정규식을 관리하기 위해 constant 폴더를 별도로 만들었다.

 

⚙️ 구현과정

📂 파일 나누기

JS 파일은 크게 두 개로 나누었다.

• auth.js → 기능 구현 코드
• auth-handler.js → 이벤트 핸들러 연결 코드

각 HTML 파일에는 auth-handler.js만 연결했다.

이렇게 나누면 DOM 제어와 기능 구현을 분리할 수 있고, 관리하기도 편리할 것이라고 생각했다.

 

처음에는 이벤트 핸들러 연결 코드를 login.js, signup.js로 나눠 작성했는데,

결국 로그인과 회원가입 모두 폼 검증 + 비밀번호 보이기 기능이 필요하다는 점이 같아서

이벤트 핸들러도 하나로 합쳐 auth-handler.js에서 관리하도록 바꾸었다.

 

⚠️ 에러 메세지 출력

폼 에러 메세지를 표시하기 위해 span 태그를 html파일에 미리 추가해두었다.

<span class="auth-input-errorMsg none"></span>

이메일이나 닉네임 input은 다음 형제 요소로 해당 에러 span태그가 있어서

nextElementSibling으로 접근할 수 있었지만

const errorSpan = input.nextElementSibling

비밀번호 input은 비밀번호 보이기 버튼 때문에

div태그로 한 번 더 감싸져 있어서 위처럼 접근이 불가능했다.

 

어떻게 할지 고민하다가 closest() 메서드가 있다는 것을 알게되었고,

closest()메서드를 활용해서 문제를 해결하였다.

const errorSpan = input.closest('.auth-input-area').querySelector('.auth-input-errorMsg')

closest()는 지정한 선택자와 일치하는 가장 가까운 조상 요소를 찾아주는 메서드이다.

모든 input이 .auth-input-area에 감싸져 있었기 때문에

이를 기준으로 span 태그를 찾을 수 있었다.

위 방식으로 span 태그 접근을 변경해주었더니

에러메세지가 원하는 위치에 잘 나타난다.

 

✅ 폼 유효성 검증

const handleFormValidation = (e) => {
  const { name, value } = e.target
  let errorMsg = ''

  if (name === 'email') {
    errorMsg = isRequired(value, '이메일을') || validateEmail(value)
  } else if (name === 'password') {
    errorMsg = isRequired(value, '비밀번호를') || validatePassword(value)
  } else if (name === 'confirmPassword') {
    errorMsg = isRequired(value, '비밀번호를') || validateConfirmPassword(value)
  } else if (name === 'nickname') {
    errorMsg = isRequired(value, '닉네임을') || validateNickname(value)
  }

  errorMsg ? showErrorMsg(e.target, errorMsg) : clearErrorMsg(e.target)
}

처음에는 if ~ else if문으로 조건별 검증을 처리했지만,

중복이 많아 보여 객체를 활용한 방식으로 변경했다.

const validators = {
  email: (value) => isRequired(value, '이메일을') || validateEmail(value),
  password: (value) => isRequired(value, '비밀번호를') || validatePassword(value),
  confirmPassword: (value) => isRequired(value, '비밀번호를') || validateConfirmPassword(value),
  nickname: (value) => isRequired(value, '닉네임을') || validateNickname(value),
}

export const handleInputValidation = (e) => {
  const { name, value } = e.target
  const errorMsg = validators[name] ? validators[name](value) : ''
  errorMsg ? showErrorMsg(e.target, errorMsg) : clearErrorMsg(e.target)
}

||연산자의 특징(a || b → a가 true면 a를 리턴)을 이용해서 코드를 작성했다.

앞의 검증에서 에러가 발생하면 해당 메시지를 반환하고,

통과하면 빈 문자열이 반환되어 다음 검증 함수가 실행된다.

이 방식으로 가독성을 높이고 중복을 줄일 수 있었다.

 

이 방식이 가장 좋은 방법일지는 잘 모르겠지만

if ~ else if문 대신 객체를 사용해서 함축적으로 표현한 것 같아

아직은 만족스러운 방법이라고 생각하고 있다.

 

🎨 엉뚱한 요소에 css가 적용되는 문제

input 값이 유효하면 auth-input-complete 클래스를 추가하도록 했는데,

비밀번호 보이기 버튼(.show-password-button)에도 해당 클래스가 적용되는 문제가 발생했다.

 

원인은 clearErrorMsg 함수의 인자로

input 태그만 전달될거라는 예상과 달리 버튼 요소도 함께 들어오고 있었다.

그래서 handleInputValidation에서 input 태그가 아닌 경우 바로 리턴하도록 코드를 수정했다.

export const handleInputValidation = (e) => {
  if (e.target.tagName !== 'INPUT') return

  const { name, value } = e.target
  const errorMsg = validators[name] ? validators[name](value) : ''
  errorMsg ? showErrorMsg(e.target, errorMsg) : clearErrorMsg(e.target)
}

이렇게 수정했더니 문제 없이 잘 동작했다.

 

🔀 페이지 이동 처리

미션 요구사항에서 API 연동은 없었기 때문에

검증이 완료되면 단순히 다른 페이지로 이동하도록 구현했다.

location.replace('/item.html')

이때 location.replace() 메서드를 사용해서 페이지를 이동시켰다.

replace()는 히스토리에 현재 페이지를 남기지 않기 때문에

사용자가 뒤로가기 버튼을 누르더라도 로그인/회원가입 페이지로 돌아갈 수 없다.

 

로그인이나 회원가입에 성공한 후 뒤로가기를 눌렀을 때

다시 로그인 페이지나 회원가입 페이지가 보이는 것은

어색한 동작이라고 생각해서 replace()메서드를 사용했다.

 

✍️ 코드 리뷰

🧹 클린 코드 관련 피드백

이번 미션에서는 중복 코드를 최대한 줄이고

한 함수가 하나의 역할만 하도록 작성하려고 신경을 썼다.

그럼에도 불구하고 코드 분리를 잘 했는지 확신이 서지 않아 질문을 드렸고,

멘토님께서 토스에서 진행한 클린코드 영상을 추천해주셨다.

 

영상에서는 실무에서 어떤 코드를 클린코드라고 하는지

응집도 높은 코드를 어떻게 작성할 수 있는지 사례와 함께 다루고 있었다.

특히 코드 응집에 대한 개념을 다시 생각해볼 수 있어서 영상이 도움이 되었던 것 같다.

 

사실 아직 완전히 이해하지는 못했지만,

시간이 날 때 다시 영상을 보면서 코드 작성 기준을 생각해 봐야할 것 같다.

 

⏩ script 태그의 async/defer 관련 피드백

이번 구현에서 아래와 같이 body 닫는 태그 바로 위에 script 태그를 추가했었다.

<body>
    ...
    <script type="module" src="./js/auth-handlers.js"></script>
</body>

이렇게 작성한 이유는 브라우저가 DOM을 파싱할 때

script 태그를 만나면 파싱을 멈춘다는 점이 생각나서

DOM이 모두 그려진 후에 스크립트가 실행되도록 body 태그 하단에 추가했다.

피드백 당시 이 방식이 예전 렌더링 차단 문제를 위해 자주 쓰던 방식이고,

현재는 head에 스크립트 태그를 두고 defer 속성을 사용하는 것이 더 현대적인 방법이라고 알려주셨다.

 

defer 속성

• 스크립트가 백그라운드에서 다운로드된다.
• DOM 파싱은 멈추지 않는다.
• 실행은 DOM 파싱이 끝난 뒤에 일어난다.

defer를 쓰면 렌더링 차단 문제를 해결하면서도 DOM이 준비된 뒤에 안정적으로 실행할 수 있다.

 

또한, 이번 코드에서 사용한 type="module" 속성은

기본적으로 defer처럼 동작한다는 사실도 새롭게 알게 되었다.

그래서 굳이 body 하단에 둘 필요 없고, head 하단에 위치시켜도 문제가 없다.

 

이와 함께 자주 비교되는 속성인 async도 짚어주셨다.

async 속성

• 스크립트가 백그라운드에서 다운로드된다.
• 다운로드가 끝나는 즉시 실행되므로 DOM 파싱이 멈출 수 있다.
• 문서 내 순서를 따르지 않고, 가장 먼저 다운로드된 스크립트가 먼저 실행된다.

이 특성 때문에 async는 주로 구글 애널리틱스(GA)나 광고처럼
DOM과 별개로 실행되는 외부 스크립트를 연결할 때 자주 사용된다고 한다.

 

👏 스프린트 미션 4 후기

이번 미션은 이전 미션보다 확실히 난이도가 높게 느껴졌다.

특히 함수 분리나 중복 제거, 단일 책임 원칙을 얼마나 잘 지키고 있는지에 대해 고민이 많았다.

 

아직은 기준이 명확하지 않아 계속 코드를 수정하며 작성했지만,

그래도 이런 고민 과정 자체가 의미 있다고 생각한다. 🥹

 

다음 미션부터는 리액트를 활용해 페이지를 구현하는 걸로 알고 있다.

리액트도 다시 잘 공부해서 앞으로의 미션도 잘 완수하고 싶다. 👏