Set을 활용한 체크리스트 담기

고객의 요청으로 해당 글자를 클릭시 검색 옵션값으로 반영되어 재검색이 이루어지고 해당 옵션버튼의 X를 누를시 

옵션을 제거할 수 있어야 한다는 요청을 받았다.

 

구조는 다음과 같다.

서비스 작동 구조

Why Set?

Set을 사용한이유는 각 검색 옵션이 중복될 수 없다는 조건이 있기때문에

굳이 내가 검색옵션을 조건문을 첨하여 일일히 계산을 늘릴 필요 없으므로 Set을 선택하게 되었다.

 

Set 과 Set분류별 Set을 불러올수있는 객체 생성

 

callSet을 왜 생성하였는지는 다음 사진을 보면 알 수 있다.

 

데이터 입력 및 화면 리페인팅 함수

html 커스텀 속성을 이용하여 해당 html태그에 setname과 codevalue 속성을 부과하여 각각 검색 분류와 코드값을

넣어줬다.

 

그 값들을 이용하여 화면에 리페인팅을 해주는 함수를 호출 해주었고,

 

앞서 선언한 callSet을 이용하여 해당 set을 호출해 값을 집어넣어줫다.

 

해당 검색 옵션 삭제 함수

위와 거의 비슷한 로직이기때문에 설명을 생략한다.

 

화면에 옵션 페인팅

화면에 해당 옵션을 보여주기 위해서 만든 함수이다.

해당 Set에 codeValue가 존재하지 않을경우만 생성해주며, 모바일 환경과 PC환경에서의 화면이 달라서 다르게

보내는걸로 했다.

 

Set => Object Array 함수

set을 Object Array로 변환하기 위해 만든 함수이다.

Object Array를 만들기 위해서는 key : value 쌍으로 만들어줘야 하기 때문에 colName을 통해 key값을 만들어주고

codeValue를 집어넣어준다.

 

---------------------------------------------------------------------------------------

 

예전에 학원에서 한 쇼핑몰 프로젝트에서 가격대를 옵션으로 추가하는 일이 있었는데, 

이때는 parameter로 모든 code값을 넘겨주어  모든 페이지를 이동할때마다 계속 code값을 넘겨줘야해서 지저분해졌다. 

 

페이지 이동시에도 이 codeValue들을 가져가려면 JsonString화 해서 가져가보는 것을 고려해보고있다.