프론트 엔드 개발 기록

GTM 에 youtube 관련 data를 수집할 수 있도록 기본 메뉴가 있는데, iframe이 애초에 source 내 존재하고 있어야 한다는 것이 기본 조건이다. 하지만 작업해야 하는 사이트 source 상에는 src값이 지정되어있지 않은 빈껍데기 iframe만 존재하고, 디자인된 썸네일을을 클릭하면 썸네일에 지정된 data값의 youtube영상을 호출하도록 되어있다. 사이트는 반응형으로 모바일에서는 또 썸네일 없이 바로 iframe영상이 존재한다. 현재 사이트 구조를 바꿔버리는게 제일 쉽기야 하겠지만, 주어진 문제를 해결해보고 싶은 마음이 생겨 custom으로 만들고 싶었다. 예전에 사이트에 있는 유튜브 영상을 트래킹 하기 위해서는 youtube iframe api를 사용하여 모두 맞춤 자바스크립트로 ..

naver map api 기간이 종료되면서 kakao map api로 바꾸게 되었다. 기존에 작업 되어있는 소스들이 있어서 조금만 수정했다. 기본 가이드는 공식 페이지에서 확인해서 그대로 따라하면 된다. http://apis.map.kakao.com/web/guide/ 테스트를 할때는 카카오맵 계정에 플랫폼 지정이 되어있어야 한다. 나는 웹이고, 내가 확인해야 하는 페이지는 테스트 서버이기 때문에 실서버, 테스트 서버 url을 모두 등록하였다. 원하는 곳의 지도를 center로 잡아야 하는데 그렇게 하기 위해서는 위경도 좌표가 필요하다. 구글맵을 이용한다. 아래 블로그 참고하였다. https://blog.naver.com/coding-/221409899687 이렇게 페이지 상에 카카오맵이 여러 개 들어가..

작업 사이트가 Wowza Streaming Engine 서버에 영상을 업로드하고 jplayer.js를 사용하여 플래쉬로 영상을 재생하고 있다. 이전에 새로운 영상을 추가하면서 살펴봤더니 플래쉬로 돌아가고 있길래 video태그나 iframe으로 교체하자는 제안을 했었지만, 다른 우선순위 업무들이 있어서 추후 논의하기로 했었다. 모두 iframe으로 작업하는 것이 운영 상으로 제일 좋겠지만, 유튜브에 올리지 않을 영상이 존재할 수도 있다고 해서 와우자 서버에 업로드 되어있는 영상을 video태그로 홈페이지에 삽입할 수 있냐는 문의가 있었다. 경험해 본 작업이 아니기 때문에 이렇게 저렇게 인터넷을 엄청 뒤졌다. 각종 커뮤니티에 비슷한 내용이 많이 있어서 테스트 해봤으나 되지 않았다. 결국 뒤지다가 공식 사이트..

한 사이트에서 정기 컨텐츠를 관리자 페이지에서 업로드 하는데, 어드민에서 iframe을 삽입했을 때 보안상의 이유로 게시글이 업로드 되지 않는다고 한다. 추후 업로드 게시물에는 youtube 영상을 삽입하고 싶은데 방법이 없냐는 문의가 왔다. embed나 object태그를 쓰면 안되냐는 내용이 있었고, 나도 익숙하지 않은 내용이라 검색해 보니 2015년 이후로 지원이 끊겨서 더 이상 업데이트 되고 있지 않다고 한다. https://www.w3schools.com/HTML/html_youtube.asp 그래서 해당 태그 사용으로 유튜브 로드 시 flash로 형성된다는 내용들이 있었다. 따라서 모바일 호환이 안된다. https://www.youtube.com/watch?v=vjh6z6EACqQ 유튜브가 삽입..

.startsWith() String.prototype.startsWith(searchString, position = 0) Returns true if the receiver starts with searchString; the position lets you specify where the string to be checked starts. .endsWith() String.prototype.endsWith(searchString, endPosition = searchString.length) Returns true if the receiver starts with searchString; the position lets you specify where the string to be checked s..

자바스크립트의 스코프와 클로저 목차 스코프 호이스팅 클로저(Closure) Reference Overview 기본적으로 자바스크립트는 ECMAScript 언어 명세를 따르고 있다. 이 명세 8장의 실행코드와 실행컨텍스트 부분에서 스코프에 관한 동작 방식을 확인할 수 있으며, 또 중요한 개념인 1급 객체로서의 함수는 그 특징을 명세의 전반적인 부분에서 나타내고 있다. 그리고, 클로저(Closure)에 대한 정의는 없다. 클로저는 자바스크립트가 채용하고 있는 기술적 기반 혹은 컨셉으로, 자바스크립트는 클로저를 이용하여 스코프적 특징과 일급 객체로서의 함수에 대한 명세를 구현한 것이다. 스코프 김춘수 시인의 "꽃"이라는 시를 보면, 어떤 하나의 몸짓은 이름을 통해 의미를 부여 받고 꽃이 된다. 프로그래밍도 마..

master에서 시작하기 $git init $git remote add origin {git url} $git add {file name} $git commit -m "{commit message}" $git push -u origin master 브랜치 생성하여 시작하기 $git init $git remote add origin {git url} $git add {file name} $git commit -m "{commit message}" $git checkout -b {branch name} $git push origin {branch name}

은 Definition List의 약자로, 이름 - 값의 그룹으로 이루어진 리스트이다. 이름-값은 용어-정의, 메타 데이터-값, 질문-답변 등 일 수 있다. 가능한 예시들을 확인해 보자. 형태 하나의 에 여러 개 Authors John Luke Editor Frank 형태 여러 개의 에 하나 color colour A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view. 형태 로 묶은 와 Last modified time 2004-12-23T23:33Z Recommended update inter..