개발자

프론트엔드에서 서버 데이터를 검증하기에 적합한 방법이 어떤 것이 있을까요?

2024년 09월 20일조회 72

BFF 레이어를 가지고 있으나, 종종 백엔드에서 명세의 요청과 무관한 BFF로 데이터가 들어오거나, 데이터 모델이 수정되는 일이 있어 어플리케이션이 오류로 깨지는 경우가 있습니다. 프론트엔드에서 이런 일을 미연에 예방할 수 있는 방법이 어떤 것이 있을지 조언 부탁드려봅니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

포크코딩님의 프로필 사진

1.zod everywhere. 말 그대로 외부 통신 데이터가 들어오는 '모든 곳'에 zod 같은 라이브러리로 검증을 하는 방법 2. try, catch 구문보다 effect ts 같은 라이브러리를 사용해서 복구 불가능한 에러 처리를 아예 로직에서 없애기.(엣지케이스를 포함하여 예측 가능한 모든 에러 타입에 대해 로직을 산정하는 방법 중 하나)

상현님의 프로필 사진

상현

작성자

프론트엔드 개발자2024년 09월 24일

effect ts는 처음 접하네요. 답변 감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 09월 20일

프론트엔드에서 데이터를 검증하는 여러 방법들이 있습니다: 1. **타입스크립트(TypeScript) 사용:** 타입스크립트는 정적 타입 체크를 제공하여 컴파일 타임에 오류를 발견하고 수정할 수 있게 도와줍니다. 이는 백엔드 서버에서 받아온 데이터의 구조가 기대한 것과 일치하는지 확인하는 데 효과적입니다. 2. **스키마 검증 라이브러리 사용:** 예를 들어, Joi나 Yup 같은 라이브러리로 API 응답을 스키마로 검증할 수 있습니다. 이런 라이브러리들은 API 응답에 대해 기대했던 것과 다르게 나올 경우 오류를 줍니다. 3. **단위 테스트 작성:** 각 컴포넌트나 서비스 함수에 대해 단위 테스트를 작성하여 예상치 못한 데이터 변경으로부터 코드를 보호할 수 있습니다. 4. **API 문서화와 명세 업데이트 유지:** 프론트엔드와 백엔드 팀 모두가 참고할 수 있는 업-to-date 상태의 API 문서와 명세가 유지되면, 백엔드에서 변화가 생길 때 프론트엔드도 적절히 대응할 수 있습니다. 5. **서버와의 커뮤니케이션 강화:** 중요한 변경 사항이 있을 때마다 서로에게 알릴 수 있는 메커니즘이 필요합니다. 이렇게 하면 미리 대응해 경미한 버그를 예방할 수 있습니다. 6. **검증 로직 추가:** 데이터를 받아올 때 기대했던 데이터 형태가 맞는지 확인하는 로직을 추가합니다. 유효하지 않은 데이터는 거부하고 적절한 오류 메시지를 사용자에게 보여줄 수 있습니다. 이러한 방법들을 적절히 혼합하고 맞춤화해서 사용하면 프론트엔드에서 더 안정적인 어플리케이션을 제공하는 데 도움이 될 것입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!