'프로그래밍'에 해당되는 글 146건

  1. 2015.12.16 안드로이드 웹뷰에서 카카오링크 등 인텐트 안될 경우~
  2. 2015.10.20 자바스크립트와 스타일시트를 활용한 브라우저 확대 축소하기~ (1)
  3. 2015.10.16 Sitemesh에서 메타 태그로 Decorator에 값 전달하기~
  4. 2015.10.09 스프링(Spring)에서 세션(Session) 기반 로그인 처리하기
  5. 2015.09.30 자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기
  6. 2015.09.15 MySQL에서 Like 대신 전문 검색(Full Text Search)로 속도 향상~ (2)
  7. 2015.09.06 톰캣 로그 한글 깨질때~
  8. 2015.08.31 실시간 커뮤니케이션... WebRTC 기술을 주목하라!
  9. 2015.08.07 자바 객체로 구성된 리스트 정렬하기
  10. 2015.07.08 nohup 명령어 활용하기

안드로이드 웹뷰에서 카카오링크 등 인텐트 안될 경우~

|



안드로이드 웹뷰에 대해서 한번 정리했었는데요.. 

안드로이드 웹뷰(WebView) 사용하기

안드로이드 웹뷰에서 뒤로가기 버튼 처리 - 웹페이지 리다이렉트 경우

웹에서 액티비티 호출하기


웹뷰를 사용하다보면 카카오링크와 같이 인텐트로 외부 앱을 모바일에서 실행하는 경우가 있습니다. 

폰에 내장된 브라우저에서는 잘 되는데, 안드로이드 4.4. SDK부터 Chrominum 기반으로 웹뷰가 변경되면서 웹뷰에서 인텐트를 지원하지 않는 이슈가 있습니다. 



인텐트를 지원하도록 WebViewClient를 상속한 함수에서 shouldOverrideUrlLoading 메소드를 다음과 같이 수정하면 됩니다. 







Trackback 0 And Comment 0

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

|



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

<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

스프링(Spring)에서 세션(Session) 기반 로그인 처리하기

|



일반적으로 쿠키나 세션을 활용해서 로그인 처리를 많이 한다. 

스프링 기반에서 인터셉트를 통해 세션 로그인 처리를 하는 부분을 정리해 보려고 한다. 


전체적인 과정은 다음과 같다. 

로그인 체크 인터셉터를 만든 다음, applicationContext.xml에 해당 인터셉터를 설정한다. 

마지막으로 로그인 처리 중에 세션에 정보를 저장하면 된다. 

이후, 인터셉터가 지정된 URL에 접근할 때는 로그인 체크 인터셉터를 통해서 로그인 여부를 확인하게 된다. 


인터셉터를 활용한 흐름도는 다음과 같다. 



로그인 체크 인터셉터

먼저 세션 정보가 있는지 여부를 확인하는 인터셉터를 만들어 보자. 


세션이 존재하지 않거나, 사용자 정보가 세션에 없으면 다시 로그인 화면으로 이동하도록 구성한 인터셉터이다. 

이어서 위 인터셉터를 적용할 페이지를 applicationContext.xml에 다음과 같이 지정한다. 



applicationContext.xml 설정


다른 부분은 생략하고 <mvc:interceptors>로 인터셉터를 설정하는 부분만 포함했다. 

"/mini.do"와 같이 특정 페이지만 지정할 수 있고, 

"/admin/**"와 같은 형태로 특정 폴더 아래를 모드 지정할 수도 있다. 


세션 설정

이제 로그인 처리 중에 다음과 같이 세션에 정보를 등록하면 된다. 


마지막으로 사용하는 member VO 객체의 형태는 다음과 같다. 

Serializable을 구현한 부분만 참고하면 된다. 

"java.lang.IllegalArgumentException: setAttribute: Non-serializable attribute" 에러가 발생할 경우에 Serializable을 구현해 줘야 한다. 





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

MySQL에서 Like 대신 전문 검색(Full Text Search)로 속도 향상~

|



일반적으로 DB에서 특정 단어가 포함된 레코드를 찾기 위해서 LIKE 를 주로 사용한다. 

그러나 LIKE는 '%단어%'와 같이 사용할 때, 인덱스를 사용하지 않기 때문에 속도가 느려진다. 

또한 LIKE를 여러 필드 (예를 들어, title과 keyword 등)에 동시에 적용하면서 여러 단어를 검색어로 전달하면 쿼리가 복잡해지기도 한다. 


> select * from board 

> where (title like '%학교%' or body like '%학교%') 

> and (title like '%취업%' or body like '%취업%');


이를 대체하기 위해서 정규표현식을 적용할 수도 있다. 

그러나 정규표현식도 마찬가지로 인덱스를 거치지 않고 풀 스캔(Full Scan)이 일어나기 때문에 느리다. 


> select * from board 

> where (title REGEXP '학교' or body REGEXP '학교') 

> and (title REGEXP '취업' or body REGEXP '취업');


Match ~ Against 를 활용한 전문 검색 (Full-Text Search)

이런 경우, 활용할 수 있는 것이 바로 MySQL의 전문 검색(Full-Text Search)이다. 

위 예제는 다음과 같이 간단하게 쿼리할 수 있다. 


> select * from board 

> where match(title,body) against('+학교* +취업*' in boolean mode);


title과 body에 학교와 취업이 모두 포함된 레코드를 리턴해 주는 것이다. 

+는 AND를 나타내고 -는 OR를 나타내므로, 더 많은 결과를 원할 경우, '+학교* - 취업*'  형태로 사용할 수도 있다. 


MySQL의 Full-Text Search는 자연어 처리 모드도 제공하고 있다. 

그래서 다음과 같은 쿼리도 가능하다. 


> select * from board 

> where match(title,body) against('대학생 취업 문제는 무엇일까요?')




Match ~ Against 활용을 위한 설정

Full-Text Search를 위해서 테이블 생성시나 alter table로 전문 검색할 필드를 지정해 줘야 한다. 


crate table board (

 id int not null primary key,

 title varchar(200),

 body text,

 fulltext (title,body));


그리고 full-text search는 mysql 버전 5.5 이하는 MyISAM에서만 사용할 수 있다. 

5.6 이상 버전은 InnoDB에서도 사용할 수 있다. 


마지막으로 match against를 사용할 때, 처음에는 위와 같은 2글자 검색에 대한 결과는 나오지 않는다. 

기본적으로 full-text search가 4글자 이상에서만 검색되도록 설정되어 있기 때문이다. 

한글에서는 두글자 검색도 자주 일어나므로 위 설정을 2로 변경해야 보다 의미가 있다. 

다음 명령어로 확인해 보자. 


> show variables like 'ft_min_word_len';


이 값을 수정하기 위해서는 my.ini(윈도우), my.cnf(리눅스) 파일을 수정해야 한다. 

[mysqld]

ft_min_word_len = 2


설정 파일을 수정한 후, mysql 서버를 재시작하고 ft_min_word_len 값을 확인하면 2로 수정되었을 것이다. 


이상으로 mysql의 전문 검색 기능을 살펴봤다. 

속도 측면에서는 분명히 장점이 있는 듯하다. 

그리고 자연어 처리가 되는 것으로 봐서 내부적으로 형태소 분석이 포함되어 있는 것 같다.  

다만 검색 품질이 얼마나 괜찮은지는 좀 더 테스트를 해봐야 할 것으로 보인다. 





Trackback 0 And Comment 2

톰캣 로그 한글 깨질때~

|



톰캣(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

자바 객체로 구성된 리스트 정렬하기

|



자바에서 리스트의 정렬은 Collections.sort() 메소드를 이용해서 쉽게 수행할 수 있다. 

리스트의 값이 기본 타입일 경우에는 바로 Collection.sort(list)를 적용하면 된다. 


만약 리스트의 값의 자체적으로 만든 객체(Object)일 경우, 어떻게 처리해야 할까? 

우선 Comparator 인터페이스를 구현해서 내부에 compare 메소드로 정렬할 방식을 정한다. 

그리고 Collection.sort를 호출할 때 Comparator 인터페이스를 구현한 클래스의 객체를 전달하면 된다. 


예제를 통해서 살펴보도록 하자~

먼저 name과 volume의 멤버 변수를 가진 MiniVo 객체를 다음과 같이 만든다. 


volume을 기준으로 정렬을 해 볼 예정이며, 좀 더 다양한 경우를 고려해서 실제값은 숫자형이지만 String으로 선언했다. 


이어서 정렬을 위한 리스트를 다음과 같이 구성한다. 

ArrayList를 활용해서 3개의 데이터를 입력하고 순서대로 출력하는 부분까지 포함했다. 


그리고 Comparator 인터페이스를 구현한 클래스의 객체를 생성하고, Collections.sort를 통해 정렬한 뒤 결과 값을 확인하는 소스다.



마지막으로 MiniComparator 클래스를 구현한 부분을 살펴보자. 

여기서 중요한 부분은 compare 메소드를 처리하는 부분이다. 


compare 메소드는 MiniVo 객체를 두개 받아서 voulme 값을 Double 형으로 변환하고 

두 수를 비교해서 결과값을 0, 1, -1로 리턴하는 함수이다. 

이 예제에서는 내림차순으로 정렬했다. 오름차순이 필요하면 1과 -1의 리턴값을 바꾸면 될 것이다. 


실행 결과를 살펴보면 다음과 같이 내림차순으로 객체들이 정렬된 것을 확인할 수 있다. 


실행하기 위한 전체 소스는 다음과 같다. 






Trackback 0 And Comment 0

nohup 명령어 활용하기

|



터미널로 접속해서 명령어를 실행한 후, 해당 터미널을 종료해도 계속 명령어가 실행되도록 유지하고 싶을 때 nohup 명령어를 사용한다. 



만약 mini.sh을 nohup으로 실행할 경우 다음과 같이 사용하면 된다. 

> nohup ./mini.sh &

nohup: ignoring input and appending output to ‘nohup.out’


&는 백그라운드로 명령어를 실행하라는 것이다. 

만약 &를 빼고 해서 실행했을 경우, Ctrl+Z를 눌러 백그라운드로 돌릴 수 있다. 


그리고 nohup으로 실행할 경우, 화면에 출력될 내용이 기본적으로 nohup.out 파일로 리다이렉트 된다. 

다음 명령어로 쉘 프로그래밍이 제대로 진행되는지 결과를 확인할 수 있다. 

> cat nohup.out


참고로 실행중인 백그라운드 명령어나 실행중인 작업은 다음 명령어로 확인하면 된다. 

> bg

[1]+ nohup ./mini.sh &

> jobs

[1]+  Running                 nohup ./mini.sh &





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