백엔드3명, 프론트엔드2명으로 구성되었으며 많은 것들을 문서로 남기면 좋겠다 싶어 노션을 통해 정보를 공유하기로 했다.

먼저 어떤 기능이 필요한지, 어떤 기능을 추가로 넣을 것인지 정했고 기본 기능으로는 [회원가입, 로그인/아웃, 구독서비스 CRUD, 월별 결제금액 조회] 와 같은 간단한 기능들이고 추가 기능으로는 [연령대/성별 별 구독 서비스 통계, 구독 추천 기능, 구독 해지 기능] 이정도로 생각이 되었다.

그 다음으로는 와이어 프레임을 만들어 대략 어떻게 레이아웃을 만들것이고 어떻게 동작할 것인가에 대해 이야기를 나눴다.

이렇게 구성을 해보았고 웹에서 진행하는 것이지만 대부분 스마트폰으로 접속하기 때문에 모바일에 맞춰 작업하기로 했다.

회원가입, 로그인은 기존 개인프로젝트의 코드를 가져와 가공했는데 예외처리를 하나도 하지않았어서 예외처리하는데 특히 시간을 많이 쏟았다.

처음 해보기도 하였고 프론트단에서 유효성 검사를 해주는 라이브러리(yup, Formik 등등)이 있었는데 이해가 잘 안되기도 했고 직접 구현해보고 싶어서 함수를 따로 만들었다

// /lib/validate.js

export const idValidation = (data) => {
  const Regex = /^[a-z]{1}[0-9a-z]+$/;

  if (!Regex.test(data)) {
    return {
      result: false,
      message: '아이디는 영어로 시작해야합니다.',
    };
  }

  return {
    result: true,
  };
};

export const pwValidation = (data) => {
  const Regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).*$/;

  if (data.length < 8 || data.length > 15) {
    return {
      result: false,
      message: '비밀번호는 8~15자 입니다.',
    };
  }

  if (!Regex.test(data)) {
    return {
      result: false,
      message: '비밀번호는 영어/숫자/특수문자가 포함되어야합니다.',
    };
  }

  return { result: true, message: '' };
};
...

위와 같이 따로 파일로 분리하여 로그인, 회원가입 또는 다른 필요할 때 사용할 수 있도록 했다.

비밀번호 같은 경우 처음엔 return 값을 true of false만 하려했는데 비밀번호가 양식에 맞지않을때, 길이가 부족할 때 등을 나눠서 에러를 보여주고 싶어서 result와 message를 담은 객체로 반환 형식을 바꾸었다.

그래서 이 유효성검사를 사용할때는 true일때는 빈 메세지이므로 함수명.result를 검사하고 함수명.message를 보여주면된다.

또 브라우저 에디터로 input에 대한 type을 바꿀경우를 대비해 정규표현식을 이용했다.

여기에 쓰진 않았지만 네이버 회원가입 시 생일년도가 현재년도보다 크면 '미래에서 오셨나요?' 등의 재치있는 문구를 보여줘서 나도 추가했다.

로그인, 회원가입 컴포넌트를 만들 때 처음에 한 컴포넌트에서 진행 했었는데 유효성 검사 부분에서 함수가 계속 길어지게 되어 가독성을 위해 컴포넌트를 분리하였다.

컴포넌트를 만들 때도 어려움이 있었다.
CSS적인 문제였는데 자꾸 가운데에 배치가 안되고 맨 위 가운데로 가는 문제였다.
검색해보니 html과 body를 100%로 주고 자식속성을 100vh로 주면 된다고 한다.
나는 tailwindCSS를 이용하기 때문에 나름대로 어떻게 해서 스크롤없이 화면의 정 가운데에 배치가 되었다.
항상 이 부분이 어려운 것 같다.