입력 검증#

사용자가 웹 애플리케이션에서 입력하는 데이터의 유효성과 정확성을 확인하기 위한 과정이에요.
잘못 입력된 데이터는 예상치 못한 오류, 시스템 오류, 보안 취약점으로 이어질 수 있어요.
앞단과 뒷단에 입력 검증을 통해 데이터의 신뢰성을 확보하는 것은 필수적이에요.

검증의 중요성#

입력 검증을 하는 가장 큰 이유는 잘못된 입력 데이터를 차단하여 예상치 못한 오류를 방지하는 것이에요.
또한 유효하지 않은 입력을 사용자에게 알려주어 올바른 입력을 안내할 수 있어요. 이는 사용자 경험 향상과 이어져요.
입력 검증의 취약점을 아는 사용자가 악의적인 입력 데이터를 차단해 XSS 공격, SQL 인젝션과 같은 공격을 막을 수 있어요.

프론트엔드 입력 검증 방법#

자바스크립트를 사용해 element에 접근한 뒤, 사용자 입력 데이터의 유효성을 직접 검사해요.
아니면 입력 검증 라이브러리를 사용하면 훨씬 더 간편하게 검사할 수 있어요.
HTML5의 required, pattern, min, max, type 등과 같은 입력 속성을 사용하여 기본적인 입력 검증을 수행해도 좋아요.
요즘은 React, Vue.js, Angular와 같은 프레임워크를 사용해 입력 검증 기능을 활용해요.

프론트엔드와 백엔드에서 입력 검증하는 이유#

프론트엔드에서 검증을 해도 많은 서비스들은 백엔드에서도 검증해요.
교차 검증을 통해 혹시라도 프론트엔드 유효성 검사를 피해서 악의적인 요청을 보냈을 경우를 생각해서 백엔드에서도 입력 검증을 하는 것으로 알고 있어요.

프론트엔드에서의 검증은 입력 형식, 필수 입력 여부 등 기본적인 오류를 포착하고, 백엔드에서는 데이터 범위, 논리적 오류, 데이터베이스 제약 조건 위반 등 더 복잡한 오류를 포착해요.

또한 두 곳에서 검증을 하면 책임 분산 및 협업을 강화할 수 있어요.
프론트엔드 개발자: 사용자 입력 데이터의 유효성을 검사하고 사용자 경험을 고려한 에러 메시지 제공에 책임을 져요.
백엔드 개발자: 시스템 보안, 데이터 무결성, 비즈니스 로직을 고려한 데이터 검증에 책임을 져요.

Do more than dream: work.

— William Arthur Ward