현재 버전

react typescript

Query String 유효성 검증하기 모듈 구현 (demo 첨부)


개요

1. 기존 문제

2. 해결할 목표 3가지

3. 테스트한 예제


작년 10월에 해결하고싶었지만 해결못한 문제가 있었습니다.

그래서, 총 3가지 기존문제를 해결한 모듈을 소개하고자 글을 작성할게요.


기존 문제

https://section.blog.naver.com/Search/Post.nhn?pageNo=1&rangeType=ALL&orderBy=sim&keyword=hello


이건 네이버 블로그 검색결과의 URL인대요,

이걸로 예를 든다면


주소창에,

https://section.blog.naver.com/Search/Post.nhn?unknownKey=saddasddasd 라는 이상한 경로로

사이트에 접속하면,


API요청도 

https://section.blog.naver.com/ajax/SearchList.nhn?unknownKey=saddasddasd


이렇게 하고있었습니다.

(네이버 블로그 API경로에는 ajax가있네요?)


물론 사용자가 주소창 직접 건들지않고

네이버에서 만든 링크를 누르거나

네이버에서 만든 검색버튼을 누르거나

네이버에서 만든 정렬버튼을 누를경우, 저런일은 안생기지만


그럼에도, 사용자가 주소창을 마음대로 고칠 수 있기 때문에

저는 쿼리스트링을 유효성검증할 필요성을 느꼈습니다.


그래서, 아래의 3가지를 해결했습니다.


해결할 목표 3가지


1. 유효하지않은 key가 있는 경우

?unknownKey=123같은게있다면 이부분 없애고 요청보낼거구요,


2. 유효하지않은 value가 있는경우


유효한 검색종류는 저렇게 3가지인데

쿼리스트링에 ?searchType=bug 이런 주소가 있으면 이것도 제거하고 요청을 보내고싶었어요.


3, 셋트 쿼리스트링이 없는경우 전부 제거

쿼리스트링 제일 흔한경우가 검색과 정렬이에요.

하지만 검색과 정렬은, 대체로 쿼리스트링이 2개씩 필요한경우가 많아요.


?searchText=hello&searchType=title

검색에 대한 쿼리스트링은 이 2개가 같이 있어야하고,

만약 둘중 하나라도 없거나 유효하지않으면, 2개가 둘다 없어야해요.


?searchText=hello 처럼 쿼리스트링에 검색관련된게 하나밖에 없거나,

?searchText=hello&searchType=bug 처럼 검색관련된것중 하나이상이 유효하지않은경우,

API 요청경로에는 searchText와 searchType을 둘 다 들어가면 안되요.


정렬도 정렬기준, 정렬값(오름차순, 내림차순) 2개가 서로 셋트로 유효해야하는 거구요.


데모페이지 링크

핵심 모듈파일 링크


그래서, 제가 제작한 모듈은 위와같은 케이스로 테스트가 진행됬어요.


1. 상황 : 회원목록을 조회하는 사이트 + 검색 + 정렬이 있음.

2. 검색, 정렬에 대해 유효한 key는 searchText, searchType, orderby, direction 4개라고 가정

3. 정렬값에 대해 유효한 value는 asc, desc 2개라고 가정

4. 검색종류에 대한 유효한key는 회원이름(name), 회원이메일 (email)라고 가정

5. 정렬에 대해 유효한 값은 last-login-date, signup-date (마지막 로그인날짜, 회원가입날짜) 2개라고 가정


음..열심히 그림을 그려보면 이런느낌입니다.


그리고,

직접 주소창에 이상한거 막 입력하며 제 모듈 기능을 확인해보시라고 하기가 뭐해서


이런식으로 테스트링크를 나열했어요.

사용자가 주소창에 이상한 key를 입력했다고 생각하고 저런 링크를 만들었거든요.


ㅡㅡㅡ


예제설명


검색에 대해 검색어, 검색종류 2가지가 정상인 경우, 옆과같이 API호출을 할 때 정상적으로 추가됩니다.


유효하지않은 key가 있다면 API요청보낼때는 제거하고 보냅니다.



key가 searchType으로 오타가 났거나

검색종류에 유효한 값은 email name 2개인데 nme같은 값이 들어있다거나

아예 searchType 쿼리스트링 자체가없다면

검색 쿼리스트링 2개 둘 다 요청에 보내지않습니다. (실제라면 결과는 일반 회원목록 API를 호출하겠네요)


나머지도 비슷한 맥락입니다.


유효하지않은 key가 있거나 value가 있다면 삭제하고 요청보내는데,

셋트로 필요한 key가 없다면 그 셋트 전부 다 제거하고 요청보냅니다.


ㅡㅡㅡㅡ


최근 회사에서 구현중인 사이트가 관리자 사이트인데,

특성상 검색과 정렬을 되게 여러 웹페이지에 넣어야하는 상황이 있었어요.

위 모듈을 적용한 덕분에 중복코드부터 안전성까지 많이 나아졌습니다.


제가 먼저 집에서 개발했고 이후에 회사 프로젝트에 적용한거니

소스는 오픈해도 문제없을거라고 생각해요.

피드백 주시면 감사합니다.


수정 이력

2021-01-03 16:05:07 에 아래 내용에서 변경 됨 #1

개요

1. 기존 문제

2. 해결할 목표 3가지

3. 테스트한 예제


작년 10월에 해결하고싶었지만 해결못한 문제가 있었습니다.

그래서, 총 3가지 기존문제를 해결한 모듈을 소개하고자 글을 작성할게요.


기존 문제

https://section.blog.naver.com/Search/Post.nhn?pageNo=1&rangeType=ALL&orderBy=sim&keyword=hello


이건 네이버 블로그 검색결과의 URL인대요,

이걸로 예를 든다면


주소창에,

https://section.blog.naver.com/Search/Post.nhn?unknownKey=saddasddasd 라는 이상한 경로로

사이트에 접속하면,


API요청도 

https://section.blog.naver.com/ajax/SearchList.nhn?unknownKey=saddasddasd


이렇게 하고있었습니다.

(네이버 블로그 API경로에는 ajax가있네요?)


물론 사용자가 주소창 직접 건들지않고

네이버에서 만든 링크를 누르거나

네이버에서 만든 검색버튼을 누르거나

네이버에서 만든 정렬버튼을 누를경우, 저런일은 안생기지만


그럼에도, 사용자가 주소창을 마음대로 고칠 수 있기 때문에

저는 쿼리스트링을 유효성검증할 필요성을 느꼈습니다.


그래서, 아래의 3가지를 해결했습니다.


해결할 목표 3가지


1. 유효하지않은 key가 있는 경우

?unknownKey=123같은게있다면 이부분 없애고 요청보낼거구요,


2. 유효하지않은 value가 있는경우


유효한 검색종류는 저렇게 3가지인데

쿼리스트링에 ?searchType=bug 이런 주소가 있으면 이것도 제거하고 요청을 보내고싶었어요.


3, 셋트 쿼리스트링이 없는경우 전부 제거

쿼리스트링 제일 흔한경우가 검색과 정렬이에요.

하지만 검색과 정렬은, 대체로 쿼리스트링이 2개씩 필요한경우가 많아요.


?searchText=hello&searchType=title

검색에 대한 쿼리스트링은 이 2개가 같이 있어야하고,

만약 둘중 하나라도 없거나 유효하지않으면, 2개가 둘다 없어야해요.


?searchText=hello 처럼 쿼리스트링에 검색관련된게 하나밖에 없거나,

?searchText=hello&searchType=bug 처럼 검색관련된것중 하나이상이 유효하지않은경우,

API 요청경로에는 searchText와 searchType을 둘 다 들어가면 안되요.


정렬도 정렬기준, 정렬값(오름차순, 내림차순) 2개가 서로 셋트로 유효해야하는 거구요.


데모페이지 링크

핵심 모듈파일 링크


그래서, 제가 제작한 모듈은 위와같은 케이스로 테스트가 진행됬어요.


1. 상황 : 회원목록을 조회하는 사이트 + 검색 + 정렬이 있음.

2. 검색, 정렬에 대해 유효한 key는 searchText, searchType, orderby, direction 4개라고 가정

3. 정렬값에 대해 유효한 value는 asc, desc 2개라고 가정

4. 검색종류에 대한 유효한key는 회원이름(name), 회원이메일 (email)라고 가정

5. 정렬에 대해 유효한 값은 last-login-date, signup-date (마지막 로그인날짜, 회원가입날짜) 2개라고 가정


그리고,

직접 주소창에 이상한거 막 입력하며 제 모듈 기능을 확인해보시라고 하기가 뭐해서


이런식으로 테스트링크를 나열했어요.

사용자가 주소창에 이상한 key를 입력했다고 생각하고 저런 링크를 만들었거든요.


ㅡㅡㅡ


예제설명


검색에 대해 검색어, 검색종류 2가지가 정상인 경우, 옆과같이 API호출을 할 때 정상적으로 추가됩니다.


유효하지않은 key가 있다면 API요청보낼때는 제거하고 보냅니다.



key가 searchType으로 오타가 났거나

검색종류에 유효한 값은 email name 2개인데 nme같은 값이 들어있다거나

아예 searchType 쿼리스트링 자체가없다면

검색 쿼리스트링 2개 둘 다 요청에 보내지않습니다. (실제라면 결과는 일반 회원목록 API를 호출하겠네요)


나머지도 비슷한 맥락입니다.


유효하지않은 key가 있거나 value가 있다면 삭제하고 요청보내는데,

셋트로 필요한 key가 없다면 그 셋트 전부 다 제거하고 요청보냅니다.


ㅡㅡㅡㅡ


최근 회사에서 구현중인 사이트가 관리자 사이트인데,

특성상 검색과 정렬을 되게 여러 웹페이지에 넣어야하는 상황이 있었어요.

위 모듈을 적용한 덕분에 중복코드부터 안전성까지 많이 나아졌습니다.


제가 먼저 집에서 개발했고 이후에 회사 프로젝트에 적용한거니

소스는 오픈해도 문제없을거라고 생각해요.

피드백 주시면 감사합니다.