Peep

구글 API KEY생성하는 법

*google api 사용은 하루에 2,500건, 초당 10건의 요청에 한해서만 무료라고 합니다.

그 이상 사용하려면 유료로 전환해야 한다고 합니다.

백엔드와 작업 시 파라미터 값을 보내야 하는 일이 빈번한데, 이번에 처음 겪은 이슈가 있어 작성해둔다.

이건 내가 작성한 ajax 코드가 아니었고, 유지보수 업무였다.

(ajax 옵션을 잘 몰랐던 문제가 가장 컸다)

아래와 같이 작성했던 ajax 코드가 있었다.

데이터가 전송이 안되서 문제를 찾아보던 중에 processData를 알게되었다.

JS

$.ajax({
  url : '',
  processData : false,
  contentType : "application/json",
  data : {
    id : 'abcd'
  },
  type : "GET",
  success : function(res){
    //.......    
  }
});

processData 란?

기본값은 true다.

ajax 통신을 통해 데이터를 전송할때, 기본적으로 key와 value값을 Query String으로 변환해서 보낸다. 

데이터 값에 따라 (key=value&key=value) 또는 (key:value, key:value) 이런 식으로 보내게되는데,

이때 이 processData가 false로 되어 있으면 Query String으로 설정하지 않는다.

processData는 파일 전송 시에 사용한다고 한다.

그래서 processData를 false하고 데이터를 보낸 후 피들러를 확인해보면 [object object]로 찍힌다.

processData값을 지워서 해결했다.

input에 데이터를 입력을 받을때, 해당 코드 포맷에 맞추어 입력해줘야하는 요구가 있었다.

디테일한 요구조건

1. 숫자만 입력

2. {0000 0000} 포맷

3. max 8자

HTML

<label for="code"> 
  해당 코드를 입력해주세요.<br> 
  <span style="font-size:12px;">(EX : 1234 5678)</span><br>
</label> 

<input id="code" type="text">

JS

$('#code').on('input', function(){ 
  var thisVal = $(this).val().replace(/\s|\D/g, '');
  thisVal = thisVal.replace(/(\d{4})\B/g, '$1 ');
  thisVal = thisVal.substr(0,9); 

  $(this).val(thisVal); 
});	

CSS

#code{margin-top:10px; display:block;}

문자를 입력받게되면 빈값으로 치환했고 그 다음 한칸 스페이스와 포맷에 맞춰 삽입했다.

그리고 마지막으로 스페이스 포함 9자 이상일 경우 노출되지 않도록 9자까지만 subStr로 잘라서 해당 input에 넣어줬다.

예제

See the Pen accesscode input format example by leeyoonseo (@okayoon) on CodePen.