들어가며

오늘은 딱히 막히는 것 없이 무난한 하루였다. 정합성 확인한다고 여기저기 코드 구조를 정돈하면서 재사용성과 효율성을 올렸다. 그 외에는 자잘한 CORS와 Cookie 확인 안되는 이슈들을 해결했다.
회원 가입, 정보 수정, 삭제 같은 기능들이 별거 아닌 것 같아도 손볼게 참 많은 것 같다.

정합성 코드 재사용

일단 항목별로 재사용할 기능을 나눈다. 이메일은 이메일대로, 닉네임은 닉네임대로.
비동기로 서버에 확인할 내용도 따로 빼둔다.
충돌 확인하는게 꼭 필요할 때가 있고 있으면 안될 때가 있더라.

export const isValidEmail = async (email) => {
  if (!email) {
    return '이메일을 입력해주세요.';
  } else if (!/\S+@\S+\.\S+/.test(email)) {
    return '올바른 이메일 형식이 아닙니다.';
  } else if (!(await isUniqueEmail(email))) {
    return '중복된 이메일입니다.';
  } else {
    return '';
  }
};

그래서 이렇게 함수를 나눴는데 이거도 별로 마음에 안든다.
2번 수정해야 되는 부분이 특히나. 검사 항목별로 또 잘게 쪼개야되나?

export const isValidOnlyEmail = async (email) => {
  if (!email) {
    return '이메일을 입력해주세요.';
  } else if (!/\S+@\S+\.\S+/.test(email)) {
    return '올바른 이메일 형식이 아닙니다.';
  } else {
    return '';
  }
};

이렇게 나눈 기능들을 한 번에 확인할 때 아래 코드를 사용한다.
지금은 회원 가입이라 이렇게 되어있고 회원 정보 수정 등 확인할 항목이 다르면 다른 폼으로 검사한다.

export const isValidSignUp = async (values) => {
  const validResult = {
    email: await isValidEmail(values.email),
    nickname: await isValidNickname(values.nickname),
    password: isValidPassword(values.password),
    confirm: isValidPasswordConfirm(values.password, values.confirm),
  };
  return validResult;
};

CORS SameSite

프로젝트 팀원의 에러 로그를 가져왔다.

• 유저 로그인 시 쿠키의 속성을 아래와 같이 주었더니 포스트맨을 통하여 쿠키를 전달받을 수 없어서 secure를 false로 주었더니 포스트맨을 통해서 쿠키를 전달받을 수는 있게 됐지만 반대로 클라이언트에서 쿠키를 전달받을 수 없게 되었다

sameSite: 'None',
secure: true

• same-site를 None으로 설정하는 이유는 cross-site인 경우에도 쿠키 전송이 필요한 경우에 secure 플래그와 함께 사용하는 속성인데 우리가 진행중인 프로젝트는 cross-site에는 전송하지 않아도 되기에 same-site일때만 쿠키를 전송하는 설정으로 변경하여 해결

sameSite: 'Strict'

Custom Header

• 서버에서 응답 시 isLogin 헤더를 추가하여 응답하였는데 클라이언트에서 조회가 안됨
  서버 CORS설정으로 아래와 같은 코드를 추가하여 해결
  exposedHeaders: 'isLogin'