DEVLOG

제목처럼 Ajax통신과 동시에 링크 이동이 이루어지는 경우를 세팅할 때 주의해야할 점이 있다!! 간단하게 생각해보면 그냥 Ajax통신하는 동시에 링크이동을 해주면 되겠지!하겠지만 다른 동작들과 달리 링크이동이 포함되어 있기 때문에 조금 더 까다롭게 생각할 필요가 있다. 문제점 urlBtn.addEventListener('click', urlMove); function urlMove(){ CountCheck('버튼클릭');//Ajax통신 window.open('!!urlurl!!', '_blank');// 링크이동 } 처음에는 위에서 했던 것 처럼 Ajax통신 후에 링크이동을 해라! 하는 식으로 써줬지만... 지금 생각하면 차례대로 시작을 하더라도 Ajax연결이 다끝날때까지 기다려주지 않으니까ㅠ,ㅠ... ..

URL뒤 물음표 뒤에 들어오는 파라미터들을 활용해서 페이지별로 다른 세팅을 할 수 있다. 기본적으로 자바스크립트의 내장 함수인 location.search 를 이용하여 URL에 물음표 뒤에 있는 파라미터들을 가져올수 있다. 엥... 티스토리에서 개발자도구는 처음 들어와본것같은데 콘솔을 되게 예쁘게 찍어놨넹 ㅎㅎ 암튼 위 사진처럼 location.search를 검색하면 url뒤에 붙은 파라미터들을 출력해준다! 이제 여기서 원하는 정보만을 뽑아와서 사용해주어야 하는데 이 부분에 대해서는 따로 내장되어 있는 함수는 없고 선언을 해주어야 한다. (이미 많은 사람들이 사용하고 있기 때문에 그냥 스윽 긁어와서 사용하면된다) 직접 선언을 해야하는 함수이기때문에 굉장히 다양한 방법으로 함수가 만들어져있는데 나는 정규식..

세팅을 하다보면 쿠키를 이용해 작업이 진행되어야하는 경우가 있다! 지금 하고 있는 이벤트의 경우 참여여부를 확인한다던지 뭐 그런경우..?! API접근전 상태를 체크해야할 때 주로 사용해주고 있다. 이벤트를 예로 들어 설명해보자! 쿠키 저장 setCookie 이벤트 참여가 완료되면 setCookie함수를 이용해 브라우저 쿠키에 저장 function setCookie(name, value, exp) { var date = new Date(); date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000); document.cookie = name + '=' + escape(value) + ';expires=' + date.toUTCString() + ';path=/';..

Youtube API를 사용해 데이터를 뽑아오는 과정은 다음과 같다 Youtube API KEY 발급받기 (사전준비) params 설정 url에 연결 (get) 출력된 data속에서 필요한 정보만 골라오기 기본적으로 데이터를 가져오는 원리는 GET방식으로 url뒤에 파라미터를 붙여 필요한 정보를 조회하는 것이다. https://www.googleapis.com/youtube/v3/search? 그래서 위와 같은 주소 뒤에 조건들을 주룰룩 붙여서 통신하면 되는 아주 간단한 것이다!! 조건들은 Youtube API 공식문서에서 필요한 것만 골라서 쓰면된다. Params 가장 기본적으로 쓰이는 파라미터들을 정리해보면 다음과 같다. ○ key(필수) : string; - 발급받은 키 ○ part : string..