탈개를 꿈꿉시다

카군입니다.

참 바쁜 주 입니다.

한화의 승전 소식이 예년 보다 잘 들리고 메르스로 인해 시끄럽기도 했지만 ....개발자는 일을 해야 하기 때문에

이런 소문은 뒤로 한채...

사실 요 근래 웹 플레이어 개발 건 때문에 정신이 없었습니다. 나름 재밌기도 했습니다.

HTML5 의 video 태그는 유레카였습니다. 동영상 웹플레이어 를 듣는 순간 HTML5 VIDEO 태그를 생각했습니다.

그것만이 길이다... 라고 생각하기도 했고...

암튼 몇일 순수 디자인에 ... 개별 이벤트에... 별에 별 기능을 생각하여 요구 분석을 해보니 ... 당췌 기간내에 개발이 불가능 하다는 빠른 판단력( 귀찮기도 했음 ) 으로 오픈 소스를 찾아 돌아다녔습니다.

그때 눈에 들어온 jPlayer 란 동영상 웹 플레이어는 정말이지 ... 제이쿼리를 처음 접했을 때처럼 우와.... 감탄만...

메인 홈페이지 입니다.

기능을 우선 볼까요.. 들어 오자 마자 살펴야 할 dev guide 개발 가이드. 다른 곳에선 API 등등 이겠죠

들어 가게 되면 온 갖 이벤트며 메소드 , css 등등 여러 가지가 있습니다. 하지만 약간 아쉬운 것은 기능 설명이 너무 간단하고 사용 방법에 대한 예제가 좀 부족해 보입니다. 검색 하며 찾은 건데 스택오버플로에 사용했던 사람들이 질문을 많이 올려 놓은 것 같더군요 .. 이런 곳에서 지식을 얻으면서 웹플레이어를 만들어 봅시다. 다운로드 탭에서는 역시 기본 플레이어 에 대한 소스가 올라와있죠. 동영상 플레이어뿐만 아니라 mp3 재생 플레이어도 가능 합니다.

이 페이지는 데모 탭에 있는 동영상 플레이어 인데 플레이어를 만지면 아래 있는 이벤트가 작동 하는 순간을 볼수 있습니다. 각자 이벤트에 대응 하는 이벤트를 심어 주고 싶다면 꼭 필요한 화면이 되겠죠?

물론... 다른 디자인이 입혀진 확장 소스는 유료더군요... 하지만 거기까진 필요없습니다. 정말 심플한 기능만 필요하기 때문입니다.

해서 소스를 받고 제일 먼저 한건 UI에 대한 개선 이었습니다. 저런 거창하게 큰 컨트롤러는 필요없고 버튼이 너무 크고 등등 ... 유투브를 모티브로 해서 개선을 했죠. 개발자 이지만... 디자이너모드로 변신 하여 플레이 버튼과 이런 저런 버튼을 직접.... 만들어 봤습니다.

 이건...전체 화면  일시정지 재생  작은 화면 전환   음소서  음소거 ㅎ

그럴싸 한가요? ㅋㅋㅋ 그림을 그릴수 없기 때문에 선과... 도형, 지우개 기능으로만 만든 볼품없는 아이콘을 생성 했습니다. 이를 도와준 사이트를 소개 할까 하는데 저는 웹 포토샵이라 부릅니다. 

http://apps.pixlr.com/editor/ 이곳에서 간단한 이미지 작업을 주로 하는데 이용해 보시면 압니다. ㅎㅎ 약간의 포토샵 기능이 대단 하다란 말을 자동으로 내밷게 해줍니다.

자 이제 데브가이드도 봣고 ... 일어나는 이벤트도 UI도 해결 됫다 치고 개발을 진행 했습니다. 사실... 지금 까지 이 작업을 좀 했습니다.

UI 작업과 API 에대한 이해와 실험 등등 으로 실직적인 개발은 진행 하면서 리뷰 하겠습니다.

그럼 이만

마침네 프로젝트에서 설계가 마무리 되고 개발 단계에 접어 들었습니다.

개발이 역시 적성에 맞습니다.

설계는 제대로 된건지.... 잘 모르겠고... 계속 찜찜한 상황입니다.

오늘 개발을 진행하면서 문제점이 생기고 해결 방법을 적겠습니다.

이건... 참 골치 아픈 상황입니다.

저는 저기나온 값을 분명히 널처리와 빈칸 처리까지 한상황에서

값은 input 창에 넣어줘야 하는데 그 input 창에 언디파인이 박혀 버리니....

하지만 이것은 큰 문제가 아닙니다. 해당 변수의 타입으로 가르면 되죠

if ( typeof 변수 == "undefined" ){}

즉 저 if안의 값은 true OR false 입니다.

트루일 경우 변수 == ""

펄스일 경우 변수 == ""

원하는 값 넣어주면 되겠죠

그럼 이만

카군입니다.

개발 포스팅은 정말 오랜만이네요 ... 뭘 한건지 ...

갑자기 포스팅을 하는 이유는 html 페이지 를 메뉴별 include 하다가 대상페이지에 스크립트와 메인 페이지에 스크립트가

이상하게 꼬이는 현상이 종종 별견되어서 사용한 후로 줄곧 사용하고 있는 ;; 머라는거지 ;

저는 이미 한번 써보았습니다. 나중엔 관리가 좀 힘들긴 하더군요

제 방식으로 접근해 보겠습니다. 구글.... 구글에 jquery load 를 검색합니다.

딱 두개만 보죠

상위 3개에 링크된 문서를 봐야겠네요... 자료를 굉장히 많은가 봅니다.

오... 맨위에 링크는 제이쿼리 홈페이지로 연결 되네요

.load( url [, data ] [, complete ] )

• url
  Type: String
  A string containing the URL to which the request is sent.
• data
  Type: PlainObject or String
  A plain object or string that is sent to the server with the request.
• complete
  Type: Function( String responseText, String textStatus, jqXHR jqXHR )
  A callback function that is executed when the request completes.

로드 함수 인자는 뭐 기본 url 만있어도 되는가 봅니다.

[] 안에는 있어도 되고 없어도 된다는 뜻입니다. 선택사항이라는 얘기죠

그래도 선택 사항을 알아보면... 데이터와.... 콜백함수 같은 거라고 하네요 

즉, url과 그다음에 파라미터데이터, 콜백함수 이런식입니다.

$("#result").load("ajax/test.html") 하면 메인 페이지에 있는 result 란녀석에게 ajax/test.html 페이지를 로드 하는 겁니다.

result 가 div 라고 했을때 그 div 안에 test.html 이 찍히겠네요

제가 이 함수를 쓴 방법은 좀 다릅니다.

통째로 불러오지 않고 대상에서 한조각만 불러오는 방법인데요

$("#result").load("ajax/test.html #content")  이렇게하면 ajax/test.html 에 있는 content 라는 조각만 불러오게 됩니다.

그냥... api 를 제공 하는 메인홈으로 가도 다 알게 됫습니다.

그래도 혹시나 두번째 w3스쿨에 들어가 보죠

아! 이곳에는 제가 했던 방식을 소개 하고 있네요 

$("#div1").load("demo_text.txt #p1")

아마 텍스트 파일도 불러올수 있는 모양이네요 ... 들어와보길 잘했습니다.

$("button").click(function(){

    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){

        if(statusTxt == "success")

            alert("External content loaded successfully!");

        if(statusTxt == "error")

            alert("Error: " + xhr.status + ": " + xhr.statusText);

    });

});

예제 코드가 있네요 콜백 함수를 썻네요 로드발생이 완료 되면 성공 실패를 alert 로 나타내는가 봅니다.

문제는 여기서 시작됩니다.

load 로 불러온 엘리먼트들은 재사용이 되지 않는다는 것입니다.

예전 live 라는 함수를 기억 하실지 모르겠지만.

죽어있는 녀석에게 생명을 불어 넣어 줘야 사용이 가능 합니다. 

on 으로 바뀌었죠

$("#div1").on( "dblclick", ".selectC", function() {}

이런식으로 on 해줘야 엘리먼트를 사용 할수 있습니다. 즉 저 div1라는 녀석은 메인 페이지에 있던 엘리먼트고

그 안에 load 로 죽어있는 녀석들이 채워진 겁니다. 

통채로 내용물에 산소를 주입해 그안에 .selectC 라는 앨리먼트에 더블클릭 이벤트를 넣어준거죠.

이상합니다. 그럼 이만