data-id ...넌 누구니..?

진짜 오래간만에 작성하는 게시글이다

 

오늘은 주소에서 파라미터를 추출하여 그 아이디를 기반으로 

 

클래스 이름을 부여하는 방법을 알아보자 

 

이걸 왜 작성하는지 궁금하다면 

 

미래의 나에게 말하고싶다

 

이런식으로 진행이 될까봐 무서워서 내 기억을 보존하려고 작성하는 게시글이니 

 

재미없으면 넘겨되된다.

 

자 본론으로 들어가 코드를 살펴보자.

 

새로운 프로젝트를 진행하는중 

 

백앤드 개발자분이 작업을 하면서 

 

색이 변하질 않아여 변하게 해주세요!

 

라는 요청을 하게되어서 혹시 그게 ajax로 변경되는 부분만 변경되나요 아님 리로드 되나요?!

 

라고 여쭤봤는데 리로드가 된다고해서 그럼 로컬스토리지나 쿠키를 사용해서 마지막 값을 저장시키고 

 

다시 뿌려주면 되겠네요?! 하니 

 

굳이 그렇게요..?

 

라고 말씀하셨다.. 그렇다 나는 멍청이다 

 

코드를 작성하며 왜 그런생각을 했는지 모르겠다.

 

그냥 규식이형을 다시 만나서 마지막 파라미터 값만 가져오면 되는것이였다

 

이 코드를 작성하기전엔 

작성하는 방법이 떠오르지않았다

 

집가면서 곰곰히 생각해봤는데 그 data-id 라는것이 하나의 고유의 "키" 값이기 때문에

 

그 키값을 통해 class를 부여하면 되겠구나 했다!! 집와서 해봤는데 바로성공!

 

   function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            let regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

 

이 정규식 코드를 사용해 마지막 글자 즉

이것을딸건데="요고"

"=" 이 같다 표시전까지 다 잘라버리는것이다

 

const getDataIdOfBtn = getParameterByName('파라미터네임')
const addDataIdOfClass = document.querySelector(`[data-id="${getDataIdOfBtn}"]`)
addDataIdOfClass.classList.add("원하는 클래스네임")

 

이런식으로 작성하면 된다.

 

queryselector 로 dataid 그리고 저번에 공부했던 템플릿 리터럴을 사용하여  getDataIdOfBtn 안에

 

들어있는 데이터 값을 data-id안에 넣어주는것이다.

 

그리고 그값이 들어있는 addDataIdOfClass

 

이것을 핸들링 하여 클래스를 추가하는 부분이다!

 

자 여기서 문제점이 있다 만약 get방식이 아닌 post 방식으로 전달 받는다면

 

파라미터 값이 보이지않기 때문에 저 코드는 사용하지 못한다

 

애초에 post로 받는다면 ajax으로 작업하는게 맞겠즤

 

<GET 방식

입력한 데이터를 URL에 붙여서 전송한다. 데이터가 다 보이므로 보안에 취약하다.

전송할 수 있는 데이터는 256바이트를 넘을 수 없다.

전송속도는 POST방식 보다 빠르다.

 

<POST방식>

입력한 데이터를 본문안에 포함해서 전송한다.

입력한 데이터가 URL에 보이지 않으므로 GET방식 보다 보안에 우수하다.

전송할 데이터의 길이에 제한이 없다.

복잡한 형태의 데이터를 전송할 때 유용하다.

 

으로 설명할수있다 말 그대로 겟방식은 파라미터값이 보이지만

 

포스트 방식은 본문안에 넣어서 전달하기때문에 

 

파라미터가지고 놀수가 없다.(놀라면 놀겠G)

 

이걸 가지고 뭐 datepicker 작업도 있는데 이렇게 작업하면 될거같다

 

다음엔 post 방식으론 어떻게 해결할지 생각해봐야겠다.