'프로그래밍/Web'에 해당되는 글 35건

  1. 2015.10.20 자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~ (1)
  2. 2015.10.16 Sitemesh에서 메타 태그로 Decorator에 값 전달하기~
  3. 2015.09.30 자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기
  4. 2015.09.06 톰캣 로그 한글 깨질때~
  5. 2015.08.31 실시간 커뮤니케이션... WebRTC 기술을 주목하라!
  6. 2015.07.06 JSP에서 Gson을 활용해 RecordSet을 JSON으로 변환하기~
  7. 2015.07.03 구글 지메일(Gmail) 백업하기~ (1)
  8. 2015.06.25 HighChart 그래프에서 로컬 시간대 설정~
  9. 2015.06.19 Sitemesh 활용시 하단의 자바스크립트 처리하기
  10. 2015.06.12 반응형 웹을 위한 부트스트랩 활용하기

자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~

|



자바스크립트를 통해서 브라우저를 확대 축소하는 방법을 정리해 보려고 한다. 

<body> 태그의 style  속성 중 하나인 zoom을 활용하면 쉽게 구현할 수 있다. 


브라우저 확대 축소 자바스크립트 구현

20%씩 확대하고 축소하는 자바스크립트 구문은 다음과 같다. 


scale 값을 기본값인 1로 설정하고, 확대의 경우 20%를 곱하고 축소는 20%로 나누어서 계산하도록 했다. 

그리고 document.body.style.zoom 값을 변경해서 확대 축소를 구현할 수 있다. 



다양한 브라우저 지원

그러나 위 예제는 인터넷 익스플로러, 구글 크롬, 사파리에서만 동작한다. 

파이어폭스나 오페라 등을 지원하기 위해서는 CSS3의 Transform을 활용해야 한다. 

이 부분까지 적용한 전체 소스는 다음과 같다. 


실제로 적용한 화면은 http://www.word.pe.kr/zoom/zoom.html 에서 확인할 수 있다. 







Trackback 0 And Comment 1

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~

|



Sitemesh를 사용하다보면 웹 페이지에서 Decorator 파일에 현재의 위치를 전달해야 할 경우가 있다. 

예를 들어 네비게이션 메뉴가 있다면, 현재 선택한 페이지를 다르게 표시할 때 주로 사용한다. 


다음과 같은 화면을 구성한다고 생각해 보자. 



Sitemesh를 사용해서 상단 네비게이션까지 공통영역으로 처리했는데, 

세번째 메뉴 선택시 상단의 네비게이션을 각 페이지에 맞춰서 선택한 형태로 변경할 때 바로 이 기능을 사용하면 된다. 


메타 태그 넣기 

먼저 각 페이지에 다음과 같이 메타 태그를 삽입한다. 


5번째 줄에 이름이 "selection"이고, 값이 "mini1"인 메타 태그를 추가한 것을 볼 수 있다. 

다른 페이지에도 각각의 고유한 값을 가진 메타 태그를 추가하면 된다. 


<meta name="selection" content="mini1" />



decorator.jsp 파일 수정하기 

이제 decorator.jsp 파일에서 위에서 작성한 메타 태그를 어떻게 인식하는 지 살펴보자. 


<decorator:usePage id="thePage" />
<% String selection = thePage.getProperty("meta.selection"); %>


decorator:usePage로 thePage를 선택한 다음, getProperty를 통해서 메타 태그의 이름이 "selection"인 것의 값을 읽어온다. 

그리고 메뉴를 표시하는 곳에서 selction 변수의 값을 체크하면 된다. 


<% if(selection != null && "mini1".equals(selection)){ %>
   <li class="active"><a href="../site/mini1.jsp">미니 메뉴 #1</a></li>
<% } else { %>
   <li><a href="../site/mini1.jsp">미니 메뉴 #1</a></li>
<% } %>


해당 메뉴가 선택되었다면 class="active"를 통해 선택 되었음을 나타내도록 구성했다. 

최종적으로 적용된 화면은 다음과 같다. 



해당 소스가 적용된 decorator.jsp의 전체 소스는 다음과 같다. 


Sitemesh 더 알아보기...

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

Sitemesh 활용시 하단의 자바스크립트 처리하기

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~





Trackback 0 And Comment 0

자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기

|



모바일 웹을 하다보면 SNS 공유 버튼 기능이 필요할 때가 있다. 

간단하게 카카오톡, 페이스북, 트위터 공유 기능을 자바스크립트로 구현하는 것을 정리해 보도록 한다. 


카카오톡 링크 공유하기 

카카오톡 공유하기를 위해서는 먼저 카카오톡에 개발자 계정 등록을 해야 하고, 

개발한 사이트의 URL도 앱 생성후 등록해야만 한다. 


http://developers.kakao.com 에서  기존  카카오톡 계정으로 설정하면 된다. 



내 어플리케이션으로 이동해서 신규 어플리케이션을 웹으로 만든 다음, 

"설정 > 일반"에서 Javascript 키 (빨간색으로 표시)를 사용해서 카카오톡 링크를 구현할 수 있다. 

그리고 카카오톡으로 공유하기를 보내기 위해서는 반드시 플랫폼이 등록되어야 한다. 

위와 같이 사이트 도메인을 추가하고 저장하면 된다. 

만약 플랫폼이 등록되어 있지 않으면 공유하기 시 에러가 나타난다. 


카카오톡 링크 공유하기는 공식 개발자 가이드에 잘 설명되어 있다.

간략히 옮겨보면 최종적으로 사용자에게 보여지는 카카오톡은 다음과 같다. 



여기에 보이는 라벨, 이미지, 버튼 아이콘 및 텍스트 등을 모두 수정할 수 있다. 

참고로 버튼 아이콘은 관리자 화면(맨 처음 그림에서 Mini 왼쪽의 아이콘 수정)에서 바꿀 수 있다. 


카카오톡 개발자 가이드에 나와 있는 소스는 다음과 같으니 참고하기 바란다.  



페이스북 공유하기 

페이스북이나 트위터는 URL 패턴으로 되어 있어 상대적으로 간편하다. 

다만, 페이스북은 메타 태그를 통해서 더 많은 정보를 제공할 수 있어 해당 메타태그를 잘 작성하는 것이 필요하다. 


페이스북의 공유를 위한 메타 태그의 정보는 다음과 같다. 


그리고 다음 URL로 글을 보내면 된다. 

http://www.facebook.com/sharer/sharer.php?u=공유할 글의 URL


최종적으로 현재 글의 공유하기 버튼을 만든다면 다음과 같이 할 수 있다. 


참고로 페이스북의 경우에는 캐싱을 하기 때문에 내용이 바뀌었을 때 바로 적용되지 않는다. 

이럴 경우에는 다음 디버깅 URL로 이동해서 "Fetch new scrape information" 버튼을 클릭해 다시 불러오기를 한 후 실행하면 된다. 


트위터 공유하기

트위터 공유는 메타 태그 등이 필요없이 URL 패턴으로만 전송하면 되므로 간단하다. 

https://twitter.com/intent/tweet?text=글 제목&url=공유할 글의 URL


자바스크립트로 구현하면 다음과 같이 할 수 있다. 


실행하면 다음과 같이 트위터에 공유할 수 있는 화면이 나타난다. 





Trackback 0 And Comment 0

톰캣 로그 한글 깨질때~

|



톰캣(Tomcat)을 설치하고 난 후, catalina.out 로그 파일에서 한글이 깨질 경우, 

tocmat 설치 디렉토리/bin/catalina.sh 파일의 톰캣 실행 명령에 다음 빨간색으로 표시한 인코딩 정보를 추가하면 된다. 


exec "$_RUNJAVA" "$LOGGING_CONFIG" $JAVA_OPTS $CATALINA_OPTS \

-Djava.endorsed.dirs="$JAVA_ENDORSED_DIRS" -classpath "$CLASSPATH" \

-Dcatalina.base="$CATALINA_BASE" \

-Dcatalina.home="$CATALINA_HOME" \

-Djava.io.tmpdir="$CATALINA_TMPDIR" \

-Dfile.encoding="utf-8" \

org.apache.catalina.startup.Bootstrap "$@" start


catalina.sh에는 톰캣을 실행하는 부분이 여러군데 있기 때문에 

"$_RUNJAVA"로 검색해 보거나 

-Djava.io.tmpdir="$CATALINA_TMPDIR" \ 을 검색해서 그 아래에 파일 인코딩 정보를 추가해 주면 된다. 






Trackback 0 And Comment 0

실시간 커뮤니케이션... WebRTC 기술을 주목하라!

|



휴대폰 뿐만 아니라 TV, 컴퓨터가 상호간 실시간 대화를 한다고 상상해보자. 

영상 통화를 하면서 동시에 채팅과 P2P 데이터 공유까지 가능하다면... 

이것이 현재 떠오르고 있는 WebRTC 기술의 비전이다. 


WebRTC를 활용한 아자르

국내 업체 하이퍼커넥트가 만든 영상 채팅으로 전세계 친구를 찾는 앱 "아자르(Azar)"도 WebRTC 기술을 활용한다. 

아자르는 2013년 앱 론칭 후, 6개월만에 500만 다운로드, 11개월만에 1,000만 다운로드를 달성했다. (현재 2,000만 가입자 수...)

2011년 발표된 WebRTC 기술과 영상 채팅 서비스를 잘 결합한 성공 모델이라 할 수 있을 듯 하다. 


WebRTC란?

WebRTC는 웹을 위한 실시간 통신 규격을 의미한다. 

오디오나 비디오 스트림을 P2P로 주고 받는 것 뿐만 아니라 데이터 전달을 위한 매커니즘도 포함하고 있다. 

서버 중계 없이 클라이언트간 데이터를 빠르게 송수신하기 위해 WebRTC를 사용할 수 있다. 


구글이 2008년 지메일에 영상 채팅을 서비스하고, 2011년 행아웃을 발표하면서

실시간 통신 기술을 보유한 GIPS 회사를 인수하고, 관련 기술을 오픈소스화 했다. 

그리고 2011년 5월 에릭슨(Ericson)이 첫번째 WebRTC 데모를 개발하게 된다. 


2013년 구글 I/O에서 발표한 WebRTC 영상은 다음과 같다.  (http://io13webrtc.appspot.com/#1)


WebRTC의 주요 기능

WebRTC는 비디오, 오디오 데이터를 획득할 수 있고, 네트워크 정보를 파악해 WebRTC 클라이언트들과 정보 교환할 수 있다. 

세션 초기화, 종료 및 에러 처리와 같은 시그널 통신 관리도 가능하다. 

그리고 스트리밍 비디오, 오디오, 데이터의 송수신이 가능한 구조다. 


음성 통신을 위한 VoIP의 SIP와 RTP를 오디오 뿐만 아니라 비디오, 데이터까지 확장하면서 

플러그인 없이 웹 기반으로 확대한 개념 같기도 하다. 


기본적으로 제공하는 API는 다음과 같다. 

  • MediaStream - 카메라, 마이크 등 접근 
  • RTCPeerConnection - 비디오, 오디오 연결 및 대역폭 관리, 암호화 처리 
  • RTCDataChannel - 데이터 통신 채널 



SKT의 PlayRTC

국내에서는 SKT에서 webRTC 기반의 표준 서비스 플랫폼으로 PlayRTC라는 플랫폼과 API를 제공하고 있다. 

 


 2014년 T Developer에서 발표된 내용을 살펴보기 바란다. 


 




Trackback 0 And Comment 0

JSP에서 Gson을 활용해 RecordSet을 JSON으로 변환하기~

|



PHP에서 JSON을 리턴하는 예제를 지난번에 살펴봤는데 이번에는 JSP를 활용해 보기로 한다. 

스프링 프레임워크를 활용할 경우, 컨트롤러에서 @ResponseBody 어노테이션을 활용해서 바로 JSON을 리턴할 수 있다. 

그러나 JSP에서 직접 DB에 접속해 데이터를 가져온 후, JSON으로 리턴할 경우도 있다. 


DB 구조

DB의 테이블 구조는 PHP 예제와 동일하게 이름, 나이, 중간점수, 기말점수로 구성했다. 



Gson으로 JSON 만들기 

먼저 생각해 봐야 하는 부분은 레코드셋으로 가져온 데이터를 Gson으로 JSON 타입으로 변환하는 것이다. 

Gson의 toJson() 메소드를 실행하기 위해서 레코드셋으로 가져온 데이터를 List 타입으로 변경했다. 

List 타입에는 Key, Value 쌍으로 구성된 Map을 포함시켰다. 



해당 부분의 소스를 먼저 살펴보자. 


1번째 줄에서 리스트를 선언하고, 3~11번째 줄까지 레코드셋을 돌면서 해쉬맵을 먼저 만들고 리스트에 추가한다. 


DB 연결 부분까지 포함한 전체 소스는 다음과 같다. 

contentType을 application/json으로 설정해 JSON 타입으로 리턴된 값을 바로 사용할 수 있도록 했다. 


위 예제를 적용하기 위해서는 gson 라이브러리와 mysql-connector-java 라이브러리가 필요하다. 

gson-2.2.1.jar

mysql-connector-java-5.1.7-bin.jar


jar 파일을 톰캣의 경우, WEB-INF/lib 폴더에 넣으면 된다. 




Trackback 0 And Comment 0

구글 지메일(Gmail) 백업하기~

|



구글 지메일(Gmail)은 기본 용량으로 1.5G를 제공한다. 

메일 용량으로는 크기 때문에 아무 생각없이 몇 년 사용하다보면 1.5G를 넘기게 된다. 


1년 정도 매월 1.99 달러를 결제해서 125G 용량으로 늘려서 사용해봤지만, 

계속 메일 용량이 증가할 것이고 과거 메일은 한번씩 검색하는 용도 이외에는 필요하지 않아서 

최근 구글에서 제공하는 백업 기능을 활용해 보기로 했다. 


지메일(Gmail) 백업

의외로 지메일을 백업하는 곳을 찾는게 쉽지 않았다. 

지메일로 로그인 후, 우측의 본인 사진 아이콘을 클릭하고 "내계정"으로 들어가야 한다. 

내 계정에서 중간에 있는 "콘텐츠 설정"을 클릭한다. 


콘텐츠 설정에 들어가서 "보관 파일 만들기" 버튼을 클릭한다. 


포함할 데이터에서 다른 것을 모두 선택 취소하고 지메일만 선택한다. 


 하단의 다음 버튼을 클릭하면 지메일을 Zip 파일 형태의 MBOX로 압축한다고 나오고 이메일을 통해 다운로드 링크를 전송한다고 나온다. 

"보관 파일 만들기" 버튼을 클릭하면 지메일 보관 파일을 생성할 수 있다. 


실제 보관 파일 만드는데 시간이 오래 걸리기도 한다. 

보관 파일 생성이 완료되면 이메일로 해당 작업 완료와 다운로드 링크가 전달된다. 


이메일에서 다운로드를 직접하거나 보관 파일 관리를 클릭해서 살펴볼 수도 있다. 

대략 일주일 정도 보관해 주는 듯 하다. 


이렇게 생성된 지메일 압축 파일은 MBOX 형태로 아웃룩이나 애플 맥 메일에 가져오기(Import) 할 수 있다. 

다음에는 애플 맥 메일로 가져오려면 "파일" 메뉴에서 "메일상자 가져오기..."를 선택하면 된다. 








Trackback 0 And Comment 1

HighChart 그래프에서 로컬 시간대 설정~

|



지난번 하이차트(HighChart)의 설치와 활용에 대해서는 정리를 했었다. 

최근 그래프를 보여주는데 하이차트를 많이 사용하고 있는 듯해서 한가지 팁을 더 올려보려고 한다. 


하이차트 시간대 설정

하이차트는 글로벌로 만들어졌기 때문에 x축이나 y축에 시간 정보를 적용하면 UTC +0로 보여주게 된다. 

처음에는 시간이 잘못 들어갔는지 여기저기 체크해 봤었는데

결론은 하이차트 그래프에서 UTC +0인 협정 세계시가 아닌 로컬 시간대로 보여주는 설정이 필요했던 것이었다. 


하이차트에서 시간대를 UTC +0를 사용하지 않도록 하려면, 

그래프 개별적으로 설정하는 것이 아니라 전체적으로 지정해 줘야 한다. 


간단하게 자바스크립트에서 다음과 같이 옵션을 지정해 주면 된다. 


해당 옵션에 대한 더 자세한 사항은 하이차트의 API 문서를 참고하기 바란다. 






Trackback 0 And Comment 0

Sitemesh 활용시 하단의 자바스크립트 처리하기

|



웹 페이지 레이아웃 설정을 위해 Sitemesh를 많이 사용한다. 

하지만 최근 웹페이지 속도 향상을 위해 자바스크립트를 <head>가 아닌 <body> 하단에 포함하면서 조금 애매한 부분이 발생했다. 


Sitemesh 하단 자바스크립트 처리 이슈 

보통 Sitemesh의 decorator.jsp 파일을 살펴보면 다음과 같이 생성하게 된다. 

스타일시트는 <head> 태그에 배치했지만, JQuery와 부트스트랩을 위한 자바스크립트는 하단에 배치했다. 

Sitemesh의 decorator를 이렇게 만든 다음, 실제 웹페이지에서 하단에 JQuery 함수를 사용하면 

당연히 에러가 발생한다. 



Jquery.js 파일이 앞에서 로딩되어 있지 않기 때문이다. 


물론 자바스크립트를 <head> 태그 내로 옮기면 쉽게 해결할 수도 있다. 

하지만 부트스트랩 등의 최근 자바스크립트를 보면 속도 이슈 때문에 전체 페이지가 로딩된 다음 자바스크립트를 실행하라는 주석이 포함되어 있다. 

<!-- Placed at the end of the document so the pages load faster -->


Sitemesh  하단 자바스크립트 처리 방법

해결책은 decorator의 getProperty를 활용하면 된다. 

decorator.jsp 파일에 다음과 같이 작성한다. 

<decorator:getProperty property="page.local_script">


위 소스가 반영된 decorator.jsp 파일은 다음과 같다. 


23번째 줄에 page.local_script라는 프로퍼티를 선언했다. 

이제 다른 페이지들에서는 다음과 같이 사용하면 된다. 


혹시 Sitemesh를 사용하면서 어쩔 수 없이 <head> 영역에 자바스크립트를 넣었었다면, 이 해결책이 도움이 될 것이다. 

참고로 decorator에서 title을 페이지마다 바꾸는 것은 다음과 같이 사용하면 된다. 

<title><decorator:title default="미니의 프로그래밍 이야기" /></title>


Sitemesh 더 알아보기...

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

Sitemesh 활용시 하단의 자바스크립트 처리하기

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~





Trackback 0 And Comment 0

반응형 웹을 위한 부트스트랩 활용하기

|



반응형 웹을 만드는데 부트스트랩 (bootstrap)을 가장 많이 사용한다. 

스타일시트(CSS)와 자바스크립트(Javascript)로 구성되어 있기 때문에 적용하기도 쉽다. 


실시간 검색어를 이미지로 보여주는 웹화면을 다음과 같이 모바일 서비스를 위한 부트스트랩으로 구성해봤다. 


부트스트랩 활용

부트스트랩 홈페이지에 가면 관련 설명들이 잘 되어 있다. 

시작하기에 보면 Grunt라는 빌드시스템을 활용하기도 하지만, 개인적으로 사용해 보면 그냥 필요한 CSS를 포함해서 쓰는게 더 편한 것 같다. 


HTML의 <head> 태그 영역에 다음과 같이 스타일시트와 자바스크립트를 적용하면 부트스트랩을 쓸 수 있다.


위 예제처럼 스타일시트와 자바스크립트의 CDN URL을 적용해도 되고, 

부트스트랩 시작하기에서 "Download Bootstrap"으로 다음과 같은 파일을 받아서 사용할 수도 있다. 


부트스트랩 참고 사이트

부트스트랩과 관련하여 자주 사용하는 사이트는 다음과 같다. 

부트스트랩 컴포넌트 : 버튼, 패널, 라벨 등 다양한 컴포넌트 예제를 보여준다. 

부트스트랩 테마 예제: 부트스트랩 컴포넌트와 일부 중복되기는 하지만 테이블 등 참고할 만한 부분이 있다. 

부트스트랩 튜토리얼: w3schools에서 제공하는 부트스트랩 강좌 사이트로서 직접 테스트해볼 수 있는 기능까지 제공한다. 







Trackback 0 And Comment 0
prev | 1 | 2 | 3 | 4 | next