주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

사전작업으로 구글 인증키를 발급 받은 후 진행해야 합니다. 예시 HTML 남산타워 위에 google API script를 추가해줍니다. 그리고 API가 로드된 후에 script가 읽혀질 수 있도록 아래에 위에 작성했던

백엔드와 작업 시 파라미터 값을 보내야 하는 일이 빈번한데, 이번에 처음 겪은 이슈가 있어 작성해둔다. 이건 내가 작성한 ajax 코드가 아니었고, 유지보수 업무였다. (ajax 옵션을 잘 몰랐던 문제가 가장 컸다) 아래와 같이 작성했던 ajax 코드가 있었다. 데이터가 전송이 안되서 문제를 찾아보던 중에 processData를 알게되었다. JS $.ajax({ url : '', processData : false, contentType : "application/json", data : { id : 'abcd' }, type : "GET", success : function(res){ //....... } }); processData 란? 기본값은 true다. ajax 통신을 통해 데이터를 전송할때, ..

input에 데이터를 입력을 받을때, 해당 코드 포맷에 맞추어 입력해줘야하는 요구가 있었다. 디테일한 요구조건 1. 숫자만 입력 2. {0000 0000} 포맷 3. max 8자 HTML 해당 코드를 입력해주세요. (EX : 1234 5678) 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;} 문자를 입력받게되면 빈값으로 치환했고 그 다..

클릭 -> 스크롤 이동을 구현해보도록 하겠다. scrollintoview()를 사용하면 간단하다. HTML 클릭하세요 box1 box2 box3 box4 box5 box6 box7 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. 박스6입니다. 박스7입니다. 클릭하여 이동할 수 있게 버튼을 만들어준다. CSS body,div{ margin:0; padding:0; } div{ display: flex; align-items: center; justify-content: center; } .box1{ background-color:red; } .box2{ background-color:orange; } .box3{ background-color:yellow; } .box4{ backg..