8기 4조 코드리뷰

src/pages/findId/findId.js

@@ -5,21 +5,24 @@ const emailForm = document.querySelector('form');
 const submitButton = document.querySelector('button[type="submit"]');
 const emailErrorNotice = document.querySelector('.notice');
 
-inputEmail.addEventListener('input', validationEmail);
+inputEmail.addEventListener('input', validateEmail);
 emailForm.addEventListener('submit', findId);
 
+/**
+ * TODO: 거의 다 왔습니다!. 외부에서 input 의 참조를 조달하기 보다는 폼의 이벤트에서 깂을 꺼내면 더 완벽하겠습니다!
+ * @param e
+ * @returns {Promise<void>}
+ */
 async function findId(e) {
   e.preventDefault();
-
-  const emailValue = inputEmail.value;
+  const formData = new FormData(e.currentTarget);
+  const { email } = Object.fromEntries(formData.entries());
 
   try {
     const res = await getData('users', {
-      filter: `email='${emailValue}'`,
+      filter: `email='${email}'`,
     });
 
-    console.log(res);
-
     if (res.length > 0) {
       alert(`아이디는 ${res[0].username} 입니다.`);
       location.href = '/src/pages/login/';
@@ -31,11 +34,22 @@ async function findId(e) {
   }
 }
 
-function validationEmail() {
+const isValidEmail = (emailValue) => {
   const regexEmail = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-  const emailValue = inputEmail.value;
 
-  if (regexEmail.test(emailValue) || emailValue === '') {
+  return regexEmail.test(emailValue) || emailValue === '';
+};
+
+/**
+ * TODO: 하나의 함수가 세가지 일을 하고 있군요.
+ * 1. 이메일 벨리데이션
+ * 2. 벨리데이션이 실패했을 때의 화면 처리
+ * 3. 벨리데이션이 성공했을 때의 화면 처리
+ * 적절하게 추상화해서 함수를 분리하는 것이 좋겠습니다.
+ * 2와 3항목도 분리해 보시면 어떨까요?
+ */
+function validateEmail() {
+  if (isValidEmail(inputEmail.value)) {
     emailErrorNotice.classList.remove('block');
     emailErrorNotice.classList.add('hidden');
     submitButton.classList.remove('bg-button-submit-default');

src/pages/findPassword/findPassword.js

@@ -19,14 +19,19 @@ inputUserId.addEventListener('input', (e) => {
 
 form.addEventListener('submit', findId);
 
+/**
+ * TODO: 함수는 입력값에 따라 츨력값이 정해지는 순수함수로 구성하는 것이 가장 좋습니다.
+ * @param e
+ * @returns {Promise<void>}
+ */
 async function findId(e) {
   e.preventDefault();
-
-  const userIdValue = inputUserId.value;
+  const formData = new FormData(e.currentTarget);
+  const { userId } = Object.fromEntries(formData.entries());
 
   try {
     const res = await getData('users', {
-      filter: `username='${userIdValue}'`,
+      filter: `username='${userId}'`,
     });
 
     if (res.length > 0) {

src/pages/login/login.js

@@ -5,10 +5,10 @@ const loginForm = document.querySelector('#login-form');
 loginForm.addEventListener('submit', async (e) => {
   try {
     e.preventDefault(); // 폼 기본 동작 방지
+    const formData = new FormData(e.currentTarget);
 
     // 입력값 가져오기
-    const username = document.querySelector('#username').value;
-    const password = document.querySelector('#password').value;
+    const { username, password } = Object.fromEntries(formData.entries());
 
     if (!username || !password) {
       alert('아이디 또는 비밀번호를 입력해주세요.');

src/util/crud.js

@@ -1,7 +1,7 @@
 import { pb } from '/src/api/pocketBase';
 
 // 데이터를 가져오는 함수
-async function getData(collectionName, options = {}) {
+export async function getData(collectionName, options = {}) {
   const response = await pb.collection(collectionName).getFullList({
     ...options,
   });
@@ -10,18 +10,16 @@ async function getData(collectionName, options = {}) {
 }
 
 // 데이터를 생성하는 함수
-async function postData(collectionName, data) {
+export async function postData(collectionName, data) {
   await pb.collection(collectionName).create(data);
 }
 
 // 데이터를 수정하는 함수
-async function patchData(collectionName, id, data) {
+export async function patchData(collectionName, id, data) {
   await pb.collection(collectionName).update(id, data);
 }
 
 // 데이터를 삭제하는 함수
-async function deleteData(collectionName, id) {
+export async function deleteData(collectionName, id) {
   await pb.collection(collectionName).delete(id);
 }
-
-export { getData, postData, patchData, deleteData };

src/util/getImageURL.js

@@ -1,7 +1,5 @@
-function getImageURL(item, fileName = 'image') {
+export function getImageURL(item, fileName = 'image') {
   return `${import.meta.env.VITE_PB_URL}/api/files/${item.collectionId}/${
     item.id
   }/${item[fileName]}`;
 }
-
-export { getImageURL };

src/util/insertTemplate.js

@@ -1,4 +1,4 @@
-function insertTemplate(target, template) {
+export function insertTemplate(target, template) {
   if (typeof target !== 'string')
     throw new Error('target은 문자열이어야 합니다.');
 
@@ -8,5 +8,3 @@ function insertTemplate(target, template) {
 
   targetElement.insertAdjacentHTML('beforeend', template);
 }
-
-export { insertTemplate };