개발자의 끄적끄적

[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/

[javascript] sort 함수 요약(Summary) 배열을 정렬한다. 문법(Syntax) 1 array.sort(sortfunc) 인자(Parameters) 인자명데이터형필수/옵션설명 sortfunc function 옵션 원소들 간에 무엇이 우선인지를 판단한다 반환값(Return) array, 정렬된 배열, 자기 자신에 대한 레퍼런스 값 임 설명(Description) 배열을 정렬한다. 알파벳 순서로 정렬한다. 숫자의 경우 암시적으로 문자열로 형변환 하기 때문에 숫자 1이 숫자 10보다 먼저 나온다. (예제 참고) sortfunc 로 비교 대상인 두개의 인자를 전달하는데, 리턴 값에 따라서 선후를 판단한다. (예제 참고) 예제(Example) 1 2 3 4 5 6 7 8 var numbers = ..

[javascript] concat 함수 요약 문자열과 문자열을 합친 값을 리턴한다. 문법 1 string1.concat(string2, string3[,..., stringN]) 인자 string2....stringN - 필수, string1과 합칠 문자열들 설명 string1과 stingN을 합친 값을 리턴한다. 문자열들 값은 변경되지 않는다. concatenation(접합)의 줄임말 예제 1 2 3 4 5 6 7 s1="생활" s2="코딩" s3="-" s4="자바스크립트로 배우는 프로그래밍" s5=s1.concat(s2,s3,s4) // returns "생활코딩-자바스크립트로 배우는 프로그래밍" alert(s5); alert(s1+','+s2+','+s3+','+s4) // 인자로 전달된 변수들의..

[javascript] charAt 함수 요약 문자열에서 인자로 주어진 값에 해당하는 문자를 리턴한다. 문법 1 charAt(index) 인자 index - 필수, 0보다 큰 정수 설명 문자열에 속하는 문자는 왼쪽부터 오른쪽까지 0부터 인덱싱되어 있다. charAt은 index로 주어진 값에 해당하는 문자를 리턴한다. 인덱스는 0부터 시작하기 때문에 index로 들어갈 수 있는 가장 큰 수는 (문자열.legnth-1)이다. 존재하지 않는 index를 인자로 전달하면 공백이 출력된다. charAt 는 index에 해당하는 문자를 리턴하고, chartCodeAt은 유니코드 값을 리턴하는 차이가 있다. 예제 1 2 3 4 var stringName = 'coding everybody'; alert(string..