[FE] 최신의 서버 에러 코드를 프론트에 업데이트하고, 사용자에게 보여지는 에러 메세지를 이해하기 쉽도록 수정 #632

pakxe · 2024-09-25T07:38:06Z

issue

close [FE] 서버 에러 코드를 프론트에 업데이트하고 사용자에게 보여지는 에러 메세지를 이해하기 쉽도록 수정 #616

🎾 구현 목적

현재 클라이언트에서 관리하는 서버 에러 코드 최신화가 안되어있는 문제가 있어요.
물론 최대한 뜨지 않는게 좋지만.. 혹시나 만약에 사용자에게 뜰 수도 있는 에러 메세지가 서버에서 보내는 디버깅 용이하기 위한 날 것의 에러 메세지가 그대로 사용되고 있었어요.
이름 길이같은 상수들이 분리되어 있었는데 이 상수들을 사용하지 않고 있는 문제가 있었어요.
constanst/errorMessage.ts 안의 그냥 ERROR_MESSAGE에서 SERVER_ERROR_MESSAGE와 비슷한 메세지를 사용하는 경우가 있어요. 재사용하는게 좋을 것 같아요.
서버 에러 코드가 굉장히 많아져서 공백으로는 직관적으로 에러 코드를 이해하기 어려울 것 같아요.

🎾 구현 사항

✅ 클라이언트에서 관리하는 서버 에러 코드가 최신의 서버 에러 코드와 일치하지 않아 이를 업데이트

백엔드에게 물어보다가 알게된건데, 앞으로는 서버에서 제공하는 문서를 목적에 따라 보는 것에 좋겠습니다.

서버에서 제공하는 문서는 총 2가지 있는데요. 문서를 보려는 목적에 따라 적합한 문서를 선택해 보는 걸 권장한다고 합니다. 왜냐면 업데이트가 잘 되는 부분이 문서마다 다르다고 해요.

노션: 서버 에러 코드
REST Docs: api 명세

최신의 서버 에러 코드를 보기 위해 노션을 참고해 서버 에러 코드를 업데이트 했습니다.

[⬆️ 최신 서버 에러 코드]

✅ 서버 에러 코드에 가독성을 위한 주석 추가

서버 에러 코드가 굉장히 많아져서 도메인별로 주석을 넣어주었어요.

// 행사 관련 에러 코드   ⬅️ NEW!
  EVENT_NAME_CONSECUTIVE_SPACES: '행사 이름에는 공백 문자가 연속될 수 없어요.',

// 멤버 관련 에러 코드   ⬅️ NEW!
  MEMBER_NAME_LENGTH_INVALID: `멤버 이름은 한글 ${RULE.maxEventNameLength}자까지, 영어 ${RULE.maxEventNameLength * 2}자까지 입력 가능해요.`,

✅ 에러 메세지에서 상수를 재사용하도록 함

이름 길이(4자)같은 상수들이 분리되어 있었는데 이 상수들을 에러메세지에서 사용하고 있지 않았어요. 상수를 만든 의미는 이 값을 재사용해서 이후 일어날 수 있는 수정을 용이하게 하는 것인데 이 장점을 누리지 못하면서 상수는 분리되어있는 상태였죠.

그래서 에러 메세지에 상수를 사용하도록 수정했습니다. 값이 날 것으로 분산되어있으니까 수정하기 어렵고, 만약 개발자가 분산된 것 중 하나라도 놓쳐 사용자에게 잘못된 메세지를 노출시킬 수 있는 가능성이 있었어요.

스트링 안에 변수명이 있어 가독성은 조금 나빠졌지만 유지보수 측면에서는 상수를 재사용하는게 맞다 생각하여 변경했습니다.

  MEMBER_NAME_LENGTH_INVALID: `멤버 이름은 한글 ${RULE.maxEventNameLength}자까지, 영어 ${RULE.maxEventNameLength * 2}자까지 입력 가능해요.`,

✅ `SERVER_ERROR_MESSAGE`를 재사용

constanst/errorMessage.ts 안의 그냥 ERROR_MESSAGE에서 SERVER_ERROR_MESSAGE와 비슷한 메세지를 사용하는 경우가 있어요.

그래서 SERVER_ERROR_MESSAGE의 메세지를 재사용하도록 했어요. 이후 발생할 수 있는 불필요한 수정을 줄여줄 것이라 기대했습니다. (ex. 비밀번호에 영어도 가능하게 할 경우 한 곳의 메세지만 수정해주면 됨)

export const SERVER_ERROR_MESSAGES: ErrorMessage = {
  // 행사 관련 에러 코드
  EVENT_NAME_LENGTH_INVALID: `행사 이름의 길이는 2자 이상 ${RULE.maxEventNameLength}자 이하만 가능해요.`,
}

export const ERROR_MESSAGE = {
  eventName: SERVER_ERROR_MESSAGES.EVENT_NAME_LENGTH_INVALID,
}
``

github-actions · 2024-09-25T07:40:14Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-yotuzleqpe.chromatic.com/

jinhokim98

웨디~ 에러코드 정리해줘서 고마워요!
사용자에게 서버 오류 메시지를 날 것 그대로 보여주고 있었는데 한 번 정제해주니 사용자가 덜 헷갈릴 수 있을 것 같아요.

하지만 더 논의해 볼 내용이 있어 Request Change 드립니다. 백엔드와 같이 논의가 필요한 내용입니다.

jinhokim98 · 2024-09-25T23:55:00Z

client/src/constants/errorMessage.ts

-  NO_RESOURCE_REQUEST: '존재하지 않는 자원입니다.',
-  REQUEST_METHOD_NOT_SUPPORTED: '지원하지 않는 요청 메서드입니다.',
-
+  // 행사 관련 에러 코드


가독성 좋게 구분하니 보기 너무 쉬워진 것 같아요😄

다행입니다~~ 😄

jinhokim98 · 2024-09-25T23:58:52Z

client/src/constants/errorMessage.ts

+  MEMBER_ACTION_NOT_FOUND: '존재하지 않는 멤버 액션이에요.',
+  MEMBER_ACTION_STATUS_INVALID: '유효하지 않은 멤버 액션 상태에요.',
+  MEMBER_NOT_EXIST: '현재 참여하고 있지 않은 인원이 존재해요',
+  MEMBER_UPDATE_MISMATCH: '업데이트 요청된 참여자 정보와 기존 행사 참여자 정보가 일치하지 않아요.',


이 부분은 서버에서

"업데이트 요청된 참여자 ID 목록과 기존 행사 참여자 ID 목록이 일치하지 않습니다

로 오고 있습니다.

ID라는 말을 사용자에게 보여줄 필요가 없어서 제거하신 걸까요?

맞아요! 그런데 저 에러 메세지 자체가 사용자에게 노출될 확률보다는 개발자에게 더 자주 보일테니 디버깅에 용이하도록 ID를 넣을까요?.?

client에서 보여줄 메세지와, dev에서 보여줄 메세지를 전체적으로 구분해도 괜찮겠다는 생각이 들어요 2.0.1에서 한번 논의해봐용

그것도 되게 좋을 것 같아요 !! 저도 고민이 됐던 부분이에요 ㅜ.ㅜ

jinhokim98 · 2024-09-25T23:59:32Z

client/src/constants/errorMessage.ts

+  // 멤버 관련 에러 코드
+  MEMBER_NAME_LENGTH_INVALID: `멤버 이름은 한글 ${RULE.maxEventNameLength}자까지, 영어 ${RULE.maxEventNameLength * 2}자까지 입력 가능해요.`,
+
+  MEMBER_NAME_CHANGE_DUPLICATED: '요청 본문에 중복된 이름이 존재해요. \n(ex. [이상, 이상, 감자, 백호])',


예시를 들어준 것 너무 좋아요!!

코드 읽는데 시간이 줄었길 기대합니다 ㅎ.ㅎ

jinhokim98 · 2024-09-26T00:03:20Z

client/src/constants/errorMessage.ts

+  MEMBER_UPDATE_MISMATCH: '업데이트 요청된 참여자 정보와 기존 행사 참여자 정보가 일치하지 않아요.',
+
+  // 지출 관련 에러 코드
+  BILL_ACTION_NOT_FOUND: '존재하지 않는 지출 액션이에요.',


이건 백엔드와 맞춰야하지만 액션이라는 용어를 사용하지 않게 돼서

존재하지 않는 지출 내역이에요. 라고 바꿔도 좋을 것 같아요.

헉.. 백엔드 에러코드에서 말 끝만 바꿔줬었는데요. 그러면 일단 프론트에서는 액션이라는 말을 뺄게요!

jinhokim98 · 2024-09-26T00:04:20Z

client/src/constants/errorMessage.ts

+  MEMBER_NAME_DUPLICATE: '요청 본문에 중복된 이름이 존재해요. \n(ex. [이상, 이상, 감자, 백호])',
+  MEMBER_ALREADY_EXIST: '이미 행사에 참여중인 인원이에요. \n겹치지 않도록 다른 이름을 사용해주세요.',
+
+  MEMBER_ACTION_NOT_FOUND: '존재하지 않는 멤버 액션이에요.',


여기는 멤버 액션 자체가 사라졌기 때문에 없어져야 할 에러코드인 것 같아요

엇... 노션 명세서에 있어서 제가 멋대로 없앨 순 없을 것 같아요. 백엔드랑 논의 해보고 결정된 사안을 알려드릴게요 😆

상수화 한번 해야하긴하는데... 싶다가도 너무 귀찮은 작업이라 엄두가 안났는데,
에러코드도 변경한 김에 production 코드에서도 모두 상수화를 쓰도록 변경해 줘야 할 것 같아요~

모두 바꿔봤어요!!!~~ 좋은 피드백 굿굿 👍

jinhokim98 · 2024-09-26T00:06:15Z

client/src/constants/errorMessage.ts

+
+  // 로그인 관련 에러 코드
+  TOKEN_NOT_FOUND: '로그인이 필요한 서비스에요.',
+  TOKEN_EXPIRED: '로그인이 만료되었어요.',


로그인이 만료되었어요. 다시 로그인해주세요.

로 로그인을 다시 유도하는 것도 좋아보입니다

그것도 좋네요!! 추가하겠습니다!~~

github-actions · 2024-09-26T00:49:08Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-hposelohoj.chromatic.com/

soi-ha

에러 메세지 정리해줘서 고마워요 웨디~

soi-ha · 2024-09-26T00:59:29Z

client/src/constants/errorMessage.ts

+  BILL_ACTION_TITLE_INVALID: `지출 내역 이름은 1자 이상 ${RULE.maxBillNameLength} 이하여야 해요.`,
+  BILL_ACTION_PRICE_INVALID: `지출 금액은 ${RULE.maxPrice.toLocaleString('ko-KR')} 이하의 자연수여야 해요.`,
+
+  // 계좌 관련 에러 코드


친절한 주석들 좋아용

soi-ha · 2024-09-26T00:59:48Z

client/src/constants/errorMessage.ts

+  eventName: SERVER_ERROR_MESSAGES.EVENT_NAME_LENGTH_INVALID,
+  eventPasswordType: SERVER_ERROR_MESSAGES.EVENT_PASSWORD_FORMAT_INVALID,
+  memberName: SERVER_ERROR_MESSAGES.MEMBER_NAME_LENGTH_INVALID,
+  purchasePrice: `${RULE.maxPrice.toLocaleString('ko-kr')}원 이하의 숫자만 입력이 가능해요`,
+  purchaseTitle: `지출 이름은 ${RULE.maxBillNameLength}자 이하의 한글, 영어, 숫자만 가능해요`,


재활용 조하요

Todari

번거로운 작업이었을 텐데, 정말 섬세하게 변경해 줘서 고마워요~
항상 섬세한 웨디 감사하다~

Todari · 2024-09-26T01:22:10Z

client/src/constants/errorMessage.ts

+  MEMBER_NAME_DUPLICATE: '요청 본문에 중복된 이름이 존재해요. \n(ex. [이상, 이상, 감자, 백호])',
+  MEMBER_ALREADY_EXIST: '이미 행사에 참여중인 인원이에요. \n겹치지 않도록 다른 이름을 사용해주세요.',
+
+  MEMBER_ACTION_NOT_FOUND: '존재하지 않는 멤버 액션이에요.',


상수화 한번 해야하긴하는데... 싶다가도 너무 귀찮은 작업이라 엄두가 안났는데,
에러코드도 변경한 김에 production 코드에서도 모두 상수화를 쓰도록 변경해 줘야 할 것 같아요~

Todari · 2024-09-26T01:23:17Z

client/src/constants/errorMessage.ts

+  MEMBER_ACTION_NOT_FOUND: '존재하지 않는 멤버 액션이에요.',
+  MEMBER_ACTION_STATUS_INVALID: '유효하지 않은 멤버 액션 상태에요.',
+  MEMBER_NOT_EXIST: '현재 참여하고 있지 않은 인원이 존재해요',
+  MEMBER_UPDATE_MISMATCH: '업데이트 요청된 참여자 정보와 기존 행사 참여자 정보가 일치하지 않아요.',


client에서 보여줄 메세지와, dev에서 보여줄 메세지를 전체적으로 구분해도 괜찮겠다는 생각이 들어요 2.0.1에서 한번 논의해봐용

github-actions · 2024-09-26T02:37:16Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-hhezbwqner.chromatic.com/

github-actions · 2024-09-26T06:47:38Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-goimoynumr.chromatic.com/

pakxe added 3 commits September 25, 2024 15:55

feat: 서버 에러 코드와 메세지 업데이트, 그리고 상수를 사용하지 않는 부분을 사용하도록 변경

547a7d8

feat: 지출 내역 이름의 최대 길이 상수를 추가

35b677c

fix: 서버 에러 코드가 잘못 입력된 것을 수정

d83eaf9

pakxe added 🖥️ FE Frontend ⚙️ feat feature labels Sep 25, 2024

pakxe added this to the v2.0.0 milestone Sep 25, 2024

pakxe self-assigned this Sep 25, 2024

pakxe requested review from jinhokim98, soi-ha and Todari September 25, 2024 07:38

jinhokim98 requested changes Sep 26, 2024

View reviewed changes

feat: 로그인 만료 안내에 다시 로그인해달라는 문장 추가

5829772

soi-ha approved these changes Sep 26, 2024

View reviewed changes

Todari approved these changes Sep 26, 2024

View reviewed changes

feat: 상수를 사용하도록 적용

2425c6a

jinhokim98 approved these changes Sep 26, 2024

View reviewed changes

Merge branch 'fe-dev' into feature/#616

0448848

soi-ha merged commit 3b00b2a into fe-dev Sep 26, 2024
2 checks passed

soi-ha deleted the feature/#616 branch September 26, 2024 06:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] 최신의 서버 에러 코드를 프론트에 업데이트하고, 사용자에게 보여지는 에러 메세지를 이해하기 쉽도록 수정 #632

[FE] 최신의 서버 에러 코드를 프론트에 업데이트하고, 사용자에게 보여지는 에러 메세지를 이해하기 쉽도록 수정 #632

pakxe commented Sep 25, 2024 •

edited

Loading

github-actions bot commented Sep 25, 2024

jinhokim98 left a comment •

edited

Loading

jinhokim98 Sep 25, 2024

pakxe Sep 26, 2024 •

edited

Loading

jinhokim98 Sep 25, 2024

pakxe Sep 26, 2024

Todari Sep 26, 2024

pakxe Sep 26, 2024

jinhokim98 Sep 25, 2024

pakxe Sep 26, 2024

jinhokim98 Sep 26, 2024

pakxe Sep 26, 2024

jinhokim98 Sep 26, 2024

pakxe Sep 26, 2024

Todari Sep 26, 2024

pakxe Sep 26, 2024

jinhokim98 Sep 26, 2024

pakxe Sep 26, 2024

github-actions bot commented Sep 26, 2024

soi-ha left a comment

soi-ha Sep 26, 2024

soi-ha Sep 26, 2024

Todari left a comment

Todari Sep 26, 2024

Todari Sep 26, 2024

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

[FE] 최신의 서버 에러 코드를 프론트에 업데이트하고, 사용자에게 보여지는 에러 메세지를 이해하기 쉽도록 수정 #632

[FE] 최신의 서버 에러 코드를 프론트에 업데이트하고, 사용자에게 보여지는 에러 메세지를 이해하기 쉽도록 수정 #632

Conversation

pakxe commented Sep 25, 2024 • edited Loading

issue

🎾 구현 목적

🎾 구현 사항

✅ 클라이언트에서 관리하는 서버 에러 코드가 최신의 서버 에러 코드와 일치하지 않아 이를 업데이트

✅ 서버 에러 코드에 가독성을 위한 주석 추가

✅ 에러 메세지에서 상수를 재사용하도록 함

✅ SERVER_ERROR_MESSAGE를 재사용

github-actions bot commented Sep 25, 2024

jinhokim98 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pakxe Sep 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 26, 2024

soi-ha left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Todari left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 26, 2024

github-actions bot commented Sep 26, 2024

pakxe commented Sep 25, 2024 •

edited

Loading

✅ `SERVER_ERROR_MESSAGE`를 재사용

jinhokim98 left a comment •

edited

Loading

pakxe Sep 26, 2024 •

edited

Loading