개발길에서 살아남기

세션 스토리지를 리스트 유지에 많이 쓰이고는 하는데

세션스토리지에 리스트를 그리는용 데이터를 많이 던져두고는 하는데 여기서 최소한의 보안을 신경쓴 코드다

해당함수를 사용하기 위해서는 필수적으로 crypto-js가 설치 되어야한다

https://www.npmjs.com/package/crypto-js

셀렉 박스를 사용하다보면 
요구사항에 따라 기본 셀렉박스를 쓰면될거같은데
디자인의 통일성을 위해서 커스텀하게 사용하기를 원한다
이럴때 예전에는 justselect 라이브러리를 사용해서 쭉 써오다가
여기에서 더욱더 커스텀하게 사용하기를 원했다


그래서 라이브러리중 많은 부분을 뜯어 고쳤다

https://www.jqueryscript.net/form/dropdown-replacement-just-select.html

다운받아서 min.js 파일을 열어보면 이런 코드로 짜여있다. 

개인적으로 별로 안좋아하는
 createElement 를 남발하면서 짜여있는데
성능 측면으로는 효율적인지 아닌지는 잘모르겠지만
가독성 측에서는 읽기가 너무 불편해서 우선 이부분부터 수정했다.

그리고 커스텀하게 쓰기 위해서는 클래스명을 내맘대로 지정할 수 있어야 한다.
그리고 기본으로 적용되어서 커스텀하게 사용하지 못하는 부분은
입맛대로 원하는 대로 min.css 를 수정하면 된다.

수정한 결과물을 공유하면 이렇게 수정했다.

makeClassName 매개변수로 셀렉박스 별로 모양을 여러개 만들어서 돌려서 사용할 수 있도록 의도했다.

여기서 조금더 커스텀 하고싶다 한다면 매개변수를 추가하고 클래스를 직접 지정하면 된다.

HTML

selected 는 초기 셀렉박스 제목지정을 위해서 필수로 입력해야한다.

css

load 함수를 모달 불러오는 곳에서 사용해서

모달정보를 불러오기전에 컨트롤러를 거쳐서 모달을 띄울지말지 정해야 하는데

컨트롤러에 애초에 뿌릴때 data- 태그에 값을 넣어서 구분할 수 있지만

모달에 대한 예외처리가 부족한거 같아서 조금 더 파보았다

이렇게 사용했지만 function 에서

불러온 데이터, 요청 결과 상태 (200, 404 등), xmlhttpRequest 객체

이렇게 3가지를 받아올 수 있지만 의도한대로 풀기위해서는 첫번째만으로 충분했다

이전글에서 추가 기능은 동일하지만 삭제 기능은 ajax를 사용해서 삭제하고 html 해당 부분을 지워주는 처리를 했다.

그리고 지우는 옵션이 마지막 옵션일경우 옵션 박스를 지워주는 코드도 추가했다.

선택 옵션의 데이터를 기준으로 데이터를 불러온다. 이렇게 부르면 이전글을 참고하면 카메라의 데이터가 각각의 0123의 데이터에 담긴채 하나의 배열로 들고온다.

저장된 옵션데이터를 조회해서 순차적으로 넣어주기만 하면된다고 생각했다 이미 앞전에서 데이터를 순차적으로 넣는게 가능했기 때문이다. 하지만 순차적으로 입력, 수정이 된다해도 삭제만하고 수정동작을 통해 정렬을 다시 해주지 않았다면 여기서 로직이 더 추가된다.

isOption 변수는 다음 옵션박스로 넘어갔는지 체크한다 넘어갔으면 옵션박스를 그리고 넘어간 번호를 변수에 저장하고

생성할 옵션박스의 순서를 optionNum 에 저장한다. 

이번에는 상품관리 페이지를 구현하던중 코드를 어떻게 구성할지 고민을 많이 했다

등록할때는 아래와 같은 형식으로 작성하면 된다

여기서 핵심 로직구성은 이렇다

0 

  0

  1

  2

  4 (3번이 생성되었다 삭제 되었다 다시 만든경우)

2 (상품박스를 중간에 삭제한 경우)

  0

3

  1

  3

이런식으로 셀렉트 박스가 구성되었다고 한다면 0번째 상품에 0 1 2 4 의 선택 할 수 있는 옵션이있고

예를들어 0번째 상품(카메라) 0 1 2 4 의 옵션 (각 다른 카메라 모델) 이런식으로 구성할 수 있다

여기서 데이터를 저장할때 일관성있게 저장하고 싶을때 어떻게 해야할까

이미 셀렉트 박스의 일관성은 무너졌고 셀렉트박스 안에 소속된 옵션의 순서도 순차적이다 라는 조건이 무너졌다

삭제가 일어날때마다 변수의 카운트를 줄여서 해결한다 -> 이방법은 사용할 수 없다

예를들어 01234 까지 생성하고 4번을 삭제하고 다시 생성해서 사용하면 카운트를 줄이고 늘리는 방식으로 해결이 가능하다. 하지만 3번을 지웠다면 예외처리를 한다하더라도 순차적이지 않다 

그래서 이렇게 접근했다 0 2 3 번이 생성되었고 여기 번호에 접근해야한다는것을 알리는 정보를 담은 input name="arrVal[]" 의 정보와 0번째에 접근해서 값을 받으면 0 1 2 4 번이 데이터를 보냈다는 정보를 앞과 같이 보냈다

이렇게 하면 foreach 문을 돌며 데이터의 순번과 접근해야하는 데이터 정보까지 얻을 수 있다

<div class="" name="saleOptionBox" id="saleOptionBox"  style="background-color: lightsteelblue; height: auto; padding: 20px; margin: 50px 0; border-radius: 20px;">
</div>
<div class="" style="display: flex;">
	<button type="button" class="btn btn-default optionAdd" id="optionAdd" >큰박스 추가</button>
</div>

<script>
		optionAdd();
        optionValAdd("saleOptionBox"+(contOp-1), contOp-1)
        
        $('body').on('click', '.optionAdd', function(e) {
            optionAdd();
            optionValAdd("saleOptionBox"+(contOp-1), contOp-1)
        });

<!-- 큰박스 추가 함수 -->
    let contOp = 0;
    function optionAdd() {
		let htmlTag = "";
        htmlTag += `<button type="button" class="btn btn-default" onclick='optionValAdd("saleOptionBox${contOp}", ${contOp})'>작은박스 추가</button>`;
   		contOp++;
        $('#saleOptionBox').append(htmlTag);
    }

    let contOpVal = 0;
    function optionValAdd(addTargetId, optionI) {
    	let htmlTag = "";
		contOpVal++;
        $(`#${addTargetId}`).append(htmlTag);
    }
    
    
</script>