[프로젝트] Express 미니 프로젝트 회고록

민수·2023년 1월 2일

express node.js 프로젝트 회고록

📋1. 프로젝트 설명

1.1 프로젝트 설명

수업 시간에 배운 Express를 이용해 CRUD를 구현하는 미니 프로젝트이다.

1.2 팀구성

총 3명
Main 페이지, Admin 페이지 담당
User 페이지 담당
Board 페이지 담당
이 중에서 나는 Main 페이지와 Admin 페이지를 담당했다.

1.3 진행 기간

22.12.26 ~ 22.12.30

1.4 기술 스택

Front-End

HTML/CSS
Javascript

Back-End

Node.js
Express
MySQL

1.5 구현 기능

필수 구현 기능

메인 페이지 슬라이드

회원 가입 기능

로그인 기능

게시판

유저 정보 수정

선택 사항

관리자 페이지

회원 수정 및 게시글 수정

1.6 페이지 디자인

페이지 디자인은 프로젝트가 시작하기 전 주말에 개인적으로 만들었다.
프로젝트가 시작됬을 때 아무것도 없는 백지 상태에서 페이지를 만들기는 힘들 것 같아서 만들어 보았다.
프로젝트 페이지 디자인

1.7 DB 설계

데이터 베이스는 위와 같이 설계하였다.
board의 idx와 reply의 postingNum은 외래키를 이용해 board 게시물이 삭제되면 reply도 삭제되도록 설계하였다.
DB 설계

📖2. 구현한 기능

2.1 메인 페이지

기능
- 무한 슬라이드
- 팀원 이름 클릭 시 역할 표시
- 조회수를 기반한 인기 게시물 표시
- SKILL 부분 떠오르는 효과

2.2 관리자 페이지

2.2.1 로그인

기능
- 관리자가 아닌 회원은 관리자 페이지 로그인 불가
- 간단한 SQL Injection 방어

2.2.2 회원 관리 페이지 및 회원 수정

기능
- 회원 목록 확인
- 회원 정보 수정
- 중복 체크

2.2.3 게시글 관리 페이지 및 게시글 삭제

기능
- 게시글 목록 확인
- 게시글 삭제

📝3. 느낀점

3.1 어려웠던 부분

프로젝트를 하면서 어려웠던 부분은 메인 페이지의 무한 슬라이드 부분과 회원 수정 페이지의 값의 변화에 따라 메시지를 보여주는 부분이었다.
무한 슬라이드 부분은 머리로는 이해가 됬는데 코드가 잘 안쳐졌다.

그리고 저 부분이 오타가 나서 트랜지션 효과가 계속 안먹었는데 결국 프로젝트 막바지에 찾아서 해결 할 수 있었다.
회원 수정 페이지에서는 입력한 값이 변했다는 걸 체크하기 위해 처음에는 blur 이벤트를 이용했다.
blur 이벤트를 input 박스에 주고 input 박스에서 focus가 나가면 체크하도록 구현했었는데 뭔가 부자연스럽다는 느낌이 들었다.
그래서 실시간으로 체크할 수 있는 방법을 찾아보다 input 이벤트와 change 이벤트를 알게되었다.
input 태그에서 input 이벤트는 사용자가 입력을 할 때 발동이 되고 change 이벤트는 요소의 값이 변했을 때 발동이 된다.
input 이벤트와 change 이벤트를 활용해서 회원 정보를 수정할 때 값을 체크 하도록 했더니 조금 더 자연스럽게 수정 사항을 체크할 수 있었다.

3.2 기억하고 싶은 부분

const reg = {
  id: [/^[a-zA-Z0-9]{4,12}$/, `**ID는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.`],
  pw: [/^(?=.*[a-z])(?=.*\d)[a-zA-Z\d]{5,}$/, `**5글자 이상 소문자,숫자를 포함해주세요.`],
  rpw: [/^(?=.*[a-z])(?=.*\d)[a-zA-Z\d]{5,}$/, `**5글자 이상 소문자,숫자를 포함해주세요.`],
  userName: [/^[a-zA-Z가-힣]{1,25}$/, `**이름은 최대 25자 영문 한글로만 입력이 가능합니다.`],
  nickName: [/^[a-zA-Z0-9가-힣]{2,25}$/, `**닉네임는 2~25자의 영문 대소문자와 숫자, 한글로만 입력하여 주세요.`],
  userBirthyy: [/^[0-9]{4,4}$/, `**연도는 4글자로 입력 해주세요.`],
  userBirthdd: [/^[0-9]{2,2}$/, `*일자는 2글자로 입력 해주세요.`],
  userPhone: [/^[0-9]{3,3}$/, `**3글자숫자로 입력 가능합니다.`],
  userPhoneMiddle: [/^[0-9]{3,4}$/, `**3,4글자숫자로 입력 해주세요.`],
  userPhoneLast: [/^[0-9]{3,4}$/, `**3,4글자숫자로 입력 해주세요.`],
  userCall: [/^[0-9]{3,3}$/, `**3글자숫자로 입력 가능합니다.`],
  userCallMiddle: [/^[0-9]{3,4}$/, `**3,4글자숫자로 입력 해주세요.`],
  userCallLast: [/^[0-9]{3,4}$/, `**3,4글자숫자로 입력 해주세요.`],
};

const message = {
  blank: `**값을 입력해 주세요.`,
  duplicate: `중복체크를 해주세요`,
  idEngNum: `**ID는 4~12자의 영문 대소문자와 숫자로만 입력하여 주세요.`,
  pwLenght: `**5글자 이상 소문자,숫자를 포함해주세요.`,
  difPw: `**비밀번호 값이 다릅니다".`,
  nameRule: `**이름은 최대 25자 영문 한글로만 입력이 가능합니다.`,
  nickNameRule: `**닉네임는 2~25자의 영문 대소문자와 숫자, 한글로만 입력하여 주세요.`,
  yearLenght: `**연도는 4글자숫자로 입력 가능합니다.`,
  yerrCheck: `**연도를 확인해주세요.`,
  dayMax: `*일자는 2글자숫자로 입력 해주세요. ex)1일 -> 01`,
  phoneF: `**3글자숫자로 입력 가능합니다.`,
  phoneML: `**3,4글자숫자로 입력 해주세요.`,
};

const checkInput = (e) => {
  const t = e.target;
  const name = t.name;
  const value = t.value;
  const span = t.dataset.span;

  if (value === "") {
    spanObj[span].style.color = "red";
    spanObj[span].innerHTML = message.blank;
    state[t.id] = false;
  } else if (!reg[name][0].test(value)) {
    spanObj[span].style.color = "red";
    spanObj[span].innerHTML = reg[name][1];
    state[t.id] = false;
  } else {
    spanObj[span].innerHTML = "";
    state[t.id] = true;
  }
};

for (let i = 0; i < input.length; i++) {
  input[i].addEventListener("input", checkInput);
}

회원 정보 수정시 입력한 데이터가 형식이 맞는지 체크하는 로직을 구현할 때 겹치는 부분도 생기기도 하고 다른 함수로 만들어서 형식을 체크하기 보다는 하나의 함수에서 체크를 하고 싶어서 형식을 체크하는 정규표현식과 정규표현식에 맞지 않는다면 보여줄 메시지를 객체에 담아서 사용했었다.
이런 형태는 나중에도 사용할 일이 있을 거 같아서 기억을 해둬야 겠다고 생각했다.