개발자의 끄적끄적

[JavaScript] 시간 지연 함수, 일정 시간 뒤 실행시키기, SetTimeout() [펌] 자바스크립트 함수중에서 자주 사용되는 타이머 함수가 있습니다. 바로 setTimeout()이죠! 아래는 어떻게 동작하고 사용하는지 자세히 알아보고자 합니다. # setTimeout()이란?일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수로 setTimeout()을 사용합니다. 앞에서도 말했지만 자바스크립트 함수 중에서도 특히 자주 사용되는 함수 중 하나입니다. 먼저 간단한 문법, 사용방법은 아래와 같습니다. setTimeout(function() { // Code here }, delay); 위 함수는 보통 두 개의 인자를 설정하여 사용합니다. i. 호출될 콜백함수 i..

[jQuery] Ajax 기초 [펌] Ajax 기초 Ajax란? Asynchronous JavaScript and XML 의 약자 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다. 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미. 선행지식 폼 $.ajax(settings) jQuery를 이용한 ajax통신의 가장 기본적인 API 주요속성 data : 서버에 전송할 데이터, key/value 형식의 객체 dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) type : 서버로 전송하는 데이터의 타..

[javascript/api] 네이버 지도 api 연동 시작하기 [펌] 회사 프로젝트에서 네이버 맵을 연동하게 되었습니다. 아직은 기획단계인지라 갑 회사님께서 네이버 맵 말고도 다른 맵을 사용하게 될 것 같은 기분도 듭니다. 이번 글에서는 네이버 맵 api의 가격 정책, 연동 과정 등을 정리해보고자 합니다. 네이버 개발자 센터에 맵 api를 사용하려 접속해보니 API 서버도 변경되었고, 가격 정책도 2020년 부터는 어찌될지 모르는 상태인듯 합니다. 그리고, 기존 V2 API를 쓰던 분들은 기존에 쓰던 서비스를 변경하셔야 할듯 해보입니다. https://developers.naver.com/notice/article/10000000000030663434 위 url 을 접속해서 확인해보시면 많은 내용들 중..

[javascript/api] 다음 카카오 지도 API 연동 [펌] 다음지도 API에서 자동으로 알아낸 후, 좌표값의 정보가 담긴 Scaffold 게시글을 등록하면 메인 홈페이지 등에 보여지는 지도에 모든 좌표가 보여지게 하는 원리의 지도를 소개하고자 합니다. Chapter 1 다음 카카오 지도 API 준비단계 " https://developers.kakao.com/apps " 1. 다음 카카오 개발자센터[클릭]로 가서 로그인 혹은 회원가입을 진행합니다. 처음 시작하시는 분이라면 좌측메뉴에 보이는 '앱 만들기' 버튼을 클릭해서 새로운 앱을 만들어주세요. 2. 자신의 앱에 들어간 후, 좌측메뉴에 보이는 메뉴에서 설정 - 일반 에 가신 뒤, Javascript API Key를 획득합니다. 3. 이어서 바로 ..

[JavaScript] 부모창과 자식창의 값 전달 [펌] window.open()을 이용하면 팝업창을 띄울 수 있다. 이때 팝업창은 자식창, 팝업을 띄우는 창은 부모창이 된다. 자식창과 부모창간에는 서로 값을 주고받을 수 있다. 부모창에서 자식창에 접근하려면 팝업창을 특정 변수에 담아서 그 변수를 통해 접근하면 된다. 반대로 자식창에서 부모창에 접근하려면 opener를 이용해서 접근을 하면 된다. 부모창에서 자식창으로 값 전달하기 ■ Parent.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 Parent var openWin; function openChild() { //..

[javascript] fetch api 사용법 개요 그 동안 WEB에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았다. 이를 보완하기 위해서 Fetch API를 도입하였는데 이는 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화 되어 있고 Promise를 기반으로 되어 있기때문에 상태에 따른 로직을 추가하고 처리하는데에 최적화 되어 있다. Baisc Use fetch('http://hanur.me/users') .then(res => res.j..

[javascript] youtube api 로 리스트 가져오기 function getYouTube() { $.ajax({ type : "GET", dataType : "JSON", url : "https://www.googleapis.com/youtube/v3/search?channelId=채널아이디값&part=snippet&maxResults=6&key=키값", contentType : "application/json", success : function(jsonData) { for (var i = 0; i < jsonData.items.length; i++) { var items = jsonData.items[i]; console.log(items); } }, complete : function(d..

[javascript / jquery] disabled 속성 제어 매번 할때마다 헤깔리는거 같아서 참고용으로 찾아왔습니다! $( elem ).attr( 'disabled', true ); $( elem ).attr( 'disabled', false ); 이건, 3항 연산자를 이용한 예 입니다. $( elem ).attr( 'disabled', condition ? true : false ); 출처 : https://qvil.github.io/jquery/jquery-attribute-disabled/