코드잇 5주차 과제 회고

과제 설명

회원가입 폼 에러 메시지 구현
공통 로직과 폴더 구조 모듈화
배포 링크: https://linkbraryproject.netlify.app

어려웠던 부분

1. 모듈화를 처음 해봐서 어려웠다.

• 처음엔 관심사별로 파일을 분리했다.
• 그런데 모듈화의 효율을 높이기 위해 pages, js, style, utils 등 기능(역할)로 폴더 구조를 변경했다. 하위 폴더를 관심사별로 나눠도 좋을 듯 하다.
• 그래도 한 번 폴더 구조를 짜보니 앞으로는 수월할 듯하다.

2. 공통 로직을 함수로 선언하는 게 어려웠다.

• 함수는 하나의 기능을 해야 한다.
• 함수를 선언했는데, 제대로 동작하지 않았다. if~else문에서 else를 생략해서 else문이 그대로 동작해서 그랬다.

function checkError(input, error, message) {
  input.classList.add('invalid');
  error.innerHTML = message;
  return;
}
function handleEmailCheck() {
  const isEmailValid = validateEmail(emailInput.value);
  const emailError = document.getElementById('emailError');
  const emailErrorMessage = emailInput.value.trim() ? '올바른 이메일 주소가 아닙니다.' : '이메일을 입력해 주세요.';
  if (!isEmailValid) {
    checkError(emailInput, emailError, emailErrorMessage);
  } else {
    emailInput.classList.remove('invalid');
    emailError.innerHTML = '';
  }
}

3. Netlify를 활용한 사이트 배포

• Netlify는 index.html만 인식해서 페이지로 로딩한다.
• 폴더를 구조화 하다보니 index.html을 깊숙히 은닉해서 처음에 404에러가 떴다.
• index.html을 루트 폴더로 뺐다.
• Netlify를 깃허브 브랜치에 연동해 좀 더 쉽게 배포할 수 있게 됐다.

KPT 회고

회고에도 다양한 방식이 있다는 것을 알았다. 좀 더 효과적인 회고를 위해 이번엔 KPT 회고 방식을 사용하겠다.

KEEP

• utils 폴더에 재사용을 많이 하는 로직을 저장하자.

PROBLEM

• 전역변수를 고민없이 사용했다.
• 함수 명을 명사+동사로 지었다.
• 이벤트 호출 방식을 통일해야한다.

TRY

• 전역변수 사용을 지양하자.
• DOM 요소 id 1개를 가져올 때 querySelector보다 getElementById를 사용하면 속도가 더 빠르다.
• 함수 명을 지을 때 동사로 첫 머리를 시작하자.
• 하나의 js 파일 내에서도 재사용을 많이 하는 공통 로직은 함수로 만들어 사용하자.