<input type="text" ~ required>
위의 코드처럼 required로 프론트에서 validation 하는 것과 백에서 validation 하는 것에 대해서 어떤 점이 다른지 자세히 알아보고 싶었다.
사실 프론트 or 백에서 하는데 왜 백 or 프론트에서 검증을 또 해야할까? 라는 의문이 생겼다
💡 먼저, 프론트엔드와 백엔드에 대한 개념 정리를 해봅시다
프론트엔드란?
사용자가 웹 페이지를 열었을 때 볼 수 있는 화면을 만드는 작업입니다.
즉, 프론트엔드는 사용자가 1차적으로 보는 인터페이스이기 때문에 사용하기 쉽고 보기 편해야하므로 사용자 경험을 핵심 가치로 삼아 직관적이고 사용하기 쉬운 UI(User Interface)를 구축해야 합니다.
백엔드는?
사용자가 웹 페이지를 사용하면서 필요한 비즈니스 로직을 만드는 작업입니다.
즉, 프론트에서 받은 사용자들의 데이터들을 저장 및 관리하고, 서버를 담당합니다.
예를 들어 기본적인 데이터의 저장뿐만 아니라 데이터 처리 시간을 10초에서 1초로 줄이고, 100명을 감당할 수 있는 서버를 1000명이 감당할 수 있게 하는 것입니다.
💡 그러면 프론트엔드 데이터 검증과 백엔드 유효성 검증에 대한 차이에 대해서 알아봅시다
프론트엔드 유효성 검증이란?
프론트엔드에서 데이터 검증은 사용자 입력을 실시간으로 검증하여 사용자 경험을 향상시킬 수 있습니다.
예를 들어, 사용자가 폼을 제출하기 전에 입력된 데이터가 유효한지 확인할 수 있습니다.
이는 사용자 경험을 향상시키고, 잘못된 데이터가 서버로 전송되는 것을 방지할 수 있습니다.
백엔드 유효성 검증이란?
백엔드에서 데이터 검증은 데이터베이스에 저장되기 전에 데이터를 검증하여 데이터의 무결성을 유지할 수 있습니다.
이는 잘못된 데이터가 데이터베이스에 저장되는 것을 방지할 수 있습니다.
💡 그럼 왜 프론트와 백 둘 다 유효성 검사를 해줘야할까요?
먼저 프론트에서만 유효성 검사를 하게 된다면 브라우저의 개발자 도구에서 값 변조를 한다면 변조된 값 그대로 서버에 요청하게 됩니다.
즉, 프론트의 검증 코드는 언제든지 회피할 수 있습니다.
백에서만 유효성 검사를 하게 된다면 잘못된 데이터를 서버에 무분별하게 요청된다면 응답이 느려지는 등의 문제가 생길 수도 있고, 사용자가 불편해질 수 있다.
즉, 프론트에서 최대한 성공 케이스만 서버로 보내주는 것 만으로 서버가 받아야할 콜 수를 줄일 수 있습니다.
그렇기 때문에 가장 좋은 검증 방식은 아래와도 같습니다.
프론트엔드에서 먼저 값 검증을 하여 빠른 사용자 경험을 제공한다.
백엔드에서 다시 한 번 더 검증을 거쳐 상황에 적절한 응답 코드를 내려준다.
프론트엔드는 상황에 맞게 적절한 UX와 메시지를 보낸다.
📝 결론
이렇게 프론트와 백에서 유효성 검증을 함으로써 장점을 극대화 시킬 수 있습니다.
프론트에서"만"하는 유효성 검증은 너무 위험하다는 것을 기억합시다.
📚 참고
https://www.elancer.co.kr/blog/view?seq=205
프론트엔드 VS 백엔드, 역할부터 기능까지 모두 알려드립니다!
프론트엔드와 백엔드의 차이점과 특징에 대해 이랜서에서 알려드립니다. I 프론트 엔드 포트폴리오, 프론트 엔드 백엔드, 백엔드 프론트 엔드, 프론트 엔드 개발자, 프론트 엔드 로드랩, 프론트
www.elancer.co.kr
프론트엔드 개발자, 백엔드 개발자 차이점은? - 코드스테이츠 공식 블로그
나도 개발자 될 수 있을까? 하는 마음에 여기저기 찾아보아도, 이해할 수 없는 프로그래밍 용어 때문에 막막한 느낌, 경험해 보셨을 거예요. 개발자 커리어를 시작할 수 있는 대표 포지션인 프론
www.codestates.com
https://f-lab.kr/insight/frontend-backend-validation-20240627
프론트엔드와 백엔드 밸리데이션: 효율적인 데이터 검증 방법
이 글에서는 프론트엔드와 백엔드에서 데이터 검증을 효율적으로 수행하는 방법에 대해 다룹니다. 프론트엔드와 백엔드 데이터 검증을 통합하여 데이터 검증의 일관성을 유지하는 방법과 베스
f-lab.kr
[개발인턴] Validation에 대한 고민
안녕하세요. R&D 개발그룹 인턴 허덕형입니다. 클라이언트 단, 서버 단에서 유효성 검증을 통해 얻고자 하는 바가 무엇인지 알아보는 시간을 가지고자 합니다.
blog.barogo.io
https://jojoldu.tistory.com/157
프론트엔드에서"만" 유효성 검사가 문제인 이유
안녕하세요? 이번 시간엔 프론트엔드에서 유효성 검사가 문제인 이유에 대해 간단한 예제를 통해 소개하려고 합니다. 모든 코드는 Github에 있기 때문에 함께 보시면 더 이해하기 쉬우실 것 같습
jojoldu.tistory.com
https://www.theteams.kr/teams/1092/post/67641
신입 개발자를 위한 코드의 정석 by 주식회사 브랜디
Overview대학을 수석으로 졸업했지만, 정작 회사에서는 A부터 Z까지 제대로 할 줄 아는 게 없었습니다. 실수를 남발할 때마다 느꼈던 좌절감은 아직도 생생하지만 되돌아보면 그때의 삽질이 소중
www.theteams.kr
https://code-anthropoid.tistory.com/141
유효성 검사는 백에서? 프론트에서?
이번에 리액트와 노드를 사용해서 간단한 블로그를 구현했는데 하면서 한 가지 의문점을 느꼈다 서버쪽 개발을 할 때 분명히 로그인이나 회원가입 폼에서 들어오는 입력에 유효성 검사를 해서
code-anthropoid.tistory.com
☺️ 수정이 필요한 부분이나 보충할 부분이 있다면 댓글 부탁드립니다. ☺️
'개발 일지 > 개인 프로젝트' 카테고리의 다른 글
| 솔로 개발자도 CI를 적용해야할까? (1) | 2024.07.01 |
|---|---|
| 왜 자원 풀은 싱글톤 패턴을 사용하는가? (0) | 2024.06.29 |