django Built-in template tags and filters 소개

django의 template 기능을 쓰면서 정리함.

1. 반복문
   template에서도 반복문을 사용할 수 있다. 기본적인 프로그래밍 언어와 마찬가지로 while문과 for문을 지원한다.

#소스코드 1
<ul>
{% for name in name_list %}
    <li>{{ name }}</li>
{% endfor %}
</ul>

django의 for문과 형태가 유사하다. 다만 django의 template에서는 {% %}블럭으로 감싸주어야 한다. jsp와 상당히 유사함.
name_list는 django의 자료형인 list나 dict, tuple등이 올 수 있다.
예를 들어,

#소스코드 2
name_list = ['jane', 'michael', 'justine']

name_list 변수에 위와 같은 리스트 자료형이 담긴 후 template에 넘겨줬을 때, 소스코드 1의 실행 결과는 다음과 같다.

<ul>
  <li>jane</li>
  <li>michael</li>
  <li>justine</li>
</ul>

template로 넘겨주는 변수(위에서는 name_list)에 list가 아닌 dict 자료형을 대입했을 때의 상황을 살펴보자.

#소스코드 3
person_dic = {"name":"jane", "addr":"earth", "gender":"female"}

#위 변수를 template에 넘겨줬을 때 person_dic을 iteration하는 경우
<ul>
{% for key, value in person_dic.items %}
 <li>{{ key }} : {{ value }}</li>
{% endfor %}
</ul>

소스코드 3의 for문 부분에서 for와 in 사이에 key, value가 설정된 것을 알 수 있다. dict는 key와 value로 이루어져있기 때문에 for문에서도 각각 쌍으로 나눠서 반복문에 설정된다.
위 코드의 실행결과는 다음과 같다.

<ul>
   <li>name : jane</li>
   <li>addr : earth</li>
   <li>gender : female</li>
</ul>

django에서 대소문자 구분하지 않고 검색하기

django에서 대소문자를 구분하지 않고 검색하는 방법에 대해서 알아본다.

기본적으로 db 자체 설정으로 대소문자를 구분하지 않는 방법도 있지만 본 여기에서는 고려하지 않는다.

from appname.models import kaka

query_list = ['ronaldo', 'pizza']
results = kaka.objects.none()

for query in query_list:
    results |= kaka.objects.filter(q__iexact=query) #q:테이블 컬럼명

1: DB와 연동되어있는 클래스를 import 한다.
3: 검색하려는 질의들. 예를 들어, db에는 RONALDO라고 입력되어 있지만 ronaldo|Ronaldo|RONALDO로 검색했을 때 모두 같은 결과를 보고 싶은 경우
4: 검색 결과 값을 저장할 변수를 선언한다.
6~7: query_list에서 질의들을 하나씩 꺼내면서 filter 함수에 파라미터로 전달한다. 이때 ‘q__iexact’는 테이블 상에서 ‘q’ 라는 컬럼에서 대소문자를 구분하지 않고 filtering 한다는 뜻이다.

위와 같은 방식으로 대소문자를 구분하지 않고 검색하게 되면 속도는 체감할 수 있을 정도로 느려진다.
sqlite3 718,000개 데이터 기준으로
대소문자 구분하는 검색은 0.000687122344971,
대소문자 구분하지 않는 검색(위 방법)은 0.00111413002014가 걸렸다.
대소문자 구분하는 검색이 1.6배 정도 빠른 것이다.

위 환경은 DB 자체의 환경설정에서 대소문자를 구분한다는 전제 하에 진행한 것이고 대소문자를 구분하지 않는 방식으로 DB를 세팅했을 때, django 코드에서 대소문자를 구분하고 싶다면 다음과 같이 하면 된다.

kaka.objects.filter(q__exact=query) #q:테이블 컬럼명

대소문자 구분 O: 컬럼명__exact,
대소문자 구분 X: 컬럼명__iexact

NHN 소프트웨어 멤버십 예비과정

2012.12.24일부터 2013.06.26 까지 총 185일간 NHN 소프트웨어 멤버십 예비과정에 참여한 후기를 올립니다.

 

2013년 소프트웨어 멤버십 예비과정(이하 소멤) 모집기간은 2012년 10월 22일부터 11월 5일까지였습니다.
당시에는 NHN의 소멤 보다는 삼성 소멤에 지원하려고 준비 중이었던 터라 사실 NHN에 소멤이라는 과정이 있는지조차 몰랐었는데 학교 복도에 포스터가 붙어있는 걸 보고 우연히 알게 되었습니다.
지금 생각하면 정말 천운이 따랐다고 할 수 있었는데 모집 기간 종료일이 며칠 남지 않았기 때문이었습니다.^^

지원할 때는 NHN에서 요구하는 몇가지 양식을 채워야 합니다.학력이나 자격증은 물론이고 예비과정에 지원하는 이유와 SW 관련 과목들의 학점같은 것들도 적는 곳이 있습니다.
예비과정에 지원하는 이유에는 같은 나이 또래의 학생들과 배우면서 서로 동기부여도 하고 자극 받으며 실력을 쌓고 싶다고 적었고 관련 과목들은 원래 나의 전공 커리큘럼에 있던 과목들과 따로 컴공과에서 들었던 수업들을 적었습니다.
NHN 소멤 예비과정은 일정이 전부 끝나고 나서 본과정 후 곧바로 회사에 입사할 수 있는 학생, 즉 예비과정 종료 후 다음 년도 2월 졸업자를 대상으로 합니다. 다시 말해서 예비과정에 지원할 때는 3학년 2학기여야 하는 것입니다. 예비과정이 4학년 1학기가 끝날 즈음에 같이 종료하게 되고 여름방학 + 4학년 2학기 기간 동안 소멤 본과정에 참여한 다음 합격자에 한해 다음 년도에 곧바로 입사할 수 있기 때문이죠. 하지만 실제로 예비과정에 붙은 사람들 중에는 4학년이거나 2학년 들도 다수 있었으므로 예비과정 자체의 당락에는 졸업년도가 크게 영향을 끼치지 않는 듯합니다.

어쨌든 서류 제출 후 며칠 지나고 나서 NHN 리크루트 사이트에 합격 발표가 났습니다. 떨리는 손가락으로 비밀번호를 치고 들어가서 합격했다는 문구를 보고 나서 너무나 좋아했던 기억이 아직도 생생하네요.
서류전형에 합격하고 나면 면접을 봅니다. 면접은 분당에 있는 NHN의 본사 건물인 ‘그린 팩토리’에서 실시하는데 ‘그린 팩토리’라는 명칭에 걸맞게 내부에 들어가면 친환경적으로 디자인되어 있어서 깔끔하고 좋았습니다. 면접은 두 분의 면접관과 대략 30분 정도 진행되는데 시간은 정확하지 않으니 참고하시기 바랍니다. 면접의 질문은 기본 소양이나 서류전형 때 작성했던 것들을 참고하여 이뤄집니다. 저같은 경우 서류전형 때 제가 학교나 다른 교육기관에서 진행했던 프로젝트 결과물을 포트폴리오 형식으로 제출했기 때문에 그것과 관련된 질문들이 다수 있었습니다. ‘프로젝트를 다시 설명해달라.’, ‘프로젝트에서 본인의 포지션은?’, ‘프로젝트를 하면서 배우게 된 것은?’과 같은 질문들입니다. 면접관들이 이렇게 딱딱하게 질문하지는 않습니다. 면접을 태어나서 두 번째 보는 거여서 굉장히 겁먹고 들어갔었는데 면접관께서 제가 긴장을 풀게끔 많이 도와주셨습니다.^^

면접 후 약간의 시일이 지나고 나서 최종 합격 여부가 발표납니다. 저는 합격이 되었고 생각보다 서류전형 합격했을 때보다는 덜 기쁘더군요. 앞으로 5개월 동안 교육받을 생각을 하니 기대 반 걱정 반이었습니다.

본 교육 전 오리엔테이션 성격으로 12월 24일에 ‘그린 팩토리’에 모입니다. 소멤 예비과정 최종 합격자들이 처음으로 모인 날이었습니다. 이날에는 앞으로 교육과정이 어떻게 진행되는지 소개하고 학생들의 질문에 답변하는 시간을 가졌습니다.

크리마스 휴일을 보낸 후 12월 26일부터 본격적인 교육이 시작되었습니다.
교육은 삼성동 코엑스에 위치한 한국무역협회 아카데미 교육장에서 5개월 간 진행되었습니다. 개학하기 전까지는 주5일 오전 9시부터 오후 6시까지 교육하고 개학 후부터는 주2일(화:오후 7시~10시, 토:오전 9시~오후6시) 교육입니다.

교육 내용은 하기의 관련 자료 이미지에서 확인하시기 바랍니다.

OS, Network, C, Java, SQL, CUBRID, JSP&Servlet, Spring Framework, Javascript 등을 배울 수 있었습니다. 저같은 경우 경영정보학부 커리큘럼 상 Java와 JSP를 배웠었기 때문에 초반부에는 쉽게 따라갈 수 있었습니다. 하지만 완전 개발쪽에 문외한인 학생들은 힘들어하는 모습이 역력했습니다. 컴공을 제외한 공대생들은 기본적으로 C언어를 학교에서 배워오기 때문에 기초가 되어 있었지만 이외의 인문대생 같은 경우에는 정말 아예 모르는 상태였습니다. 하지만 훌륭하신 강사님의 지도와 같은 반 학생들끼리 서로 모르는 건 물어보고 아는 것은 가르쳐줄려고 하는 열정적인 자세 때문인지 대부분의 학생이 교육과정 끝날때까지 전부 잘 따라왔습니다. 시작할 때는 컴파일러라는 게 뭔지조차 몰랐던 우리가 끝날 때는 비동기 방식으로 통신하여 화면을 다시 구성하는 로직을 놓고 고민하는 단계까지 갔으니까요. 비동기 통신이 어렵다는 것이 아니라 그만큼 짧은 기간 동안 많은 것을 배울 수 있었다는 뜻입니다.^^

2월까지 주5일 교육을 하고 3월 부터는 주2일 교육 체제로 전환되었습니다. 그리고 3월에는 프로젝트를 같이 할 팀을 짜게 됩니다.
팀을 짜는 방식은 강사님 성향에 따라서 갈리는 듯합니다. 제가 속했던 반의 경우는 먼저 팀장 명단을 뽑고 해당 팀장과 같이 팀을 해보고 싶은 나머지 반원들에게 투표하게 하는 방식으로 진행하였습니다.
팀장 명단은 지원하거나 추천받았는데 저는 누군가가 추천해서 얼떨결에 팀장 명단에 들어가게 되었습니다.
팀장 명단을 다 뽑고 나서 한 명씩 호명하며 이 사람과 팀을 같이 하고 싶은 사람을 손 들게 했는데 예상외로 저와 같이 팀을 하겠다는 사람들이 많아서 놀라면서도 기분이 좋았습니다.

여차저차해서 팀을 정하고 나면 이제 나머지 기간 동안 어떤 프로젝트를 할 것인지 주제를 정합니다. 주제를 정하고 나면 3월 한 달 동안은 ‘코딩’은 전혀 배제한 상태에서 주제에 대한 요구사항 분석 및 설계 작업을 진행합니다. 주제에 대한 명확한 정의와 Use Case들을 정립하고 나머지 개발 문서 작업을 하게 되는데 사실 이때는 재미있기 보다는 굉장히 지루합니다. 결과물이 보이기 보다는 전부 수치와 그래프를 갖고서 하기 때문입니다. 하지만 이 단계가 정말 중요합니다. 애매한 정의와 잘못된 설계 후에 구현 작업에 들어가게 되면 나중에는 정말 대참사가 일어나기 때문입니다. 요구사항을 구현 단계에서 변경할 때의 그 혼란스러움과 에러 덩어리들을 피하려면 초기 단계의 분석 및 설계 작업이 매우 중요합니다.

3월의 문서 작업을 지나고 나서 4월 부터는 본격적으로 구현 작업에 착수합니다. 4월에서 5월까지는 정말 신나게 코딩만 했던 기억이 납니다. 하루에 4시간 정도만 자고 나머지 시간은 학업+프로젝트에 열중하느라 몸이 만신창이가 되어갔습니다. 하지만 분명 보람찬 시간입니다. 꼭 소멤 본과정에 합격하기 위해서라기 보다는 좀 더 좋은 프로젝트 결과물을 도출해내기 위해서 노력하는 기간이었습니다. 하지만 어느 팀 프로젝트가 다 그렇듯이 팀원 전체가 전부 한마음이 되어서 노력하는 것은 아닙니다. 공부를 게을리하고 노력을 하지 않는 사람도 분명 있습니다만 거의 대부분의 학생들은 열심히 합니다.

어쨌든 프로젝트가 완성되고 6월 15일에 최종 발표를 하게 됩니다. 발표는 ‘그린 팩토리’에서 진행합니다. 6개월 동안 내가 해왔던 것들이 단 15분 이내의 발표로 사람들에게 평가받게 됩니다.
발표 후 2주 정도 있다가 최종 면접을 보게 됩니다. 면접관은 역시 두 명이 들어오며 본과정에서 배운 것들과 프로젝트를 진행하면서 맡았던 역할, 무엇을 배웠는지, 어떤 기술을 사용했고 왜 그 기술을 선택했는지에 대한 질문들을 받았습니다.

면접을 끝으로 185일간의 기나긴 소멤 예비과정이 끝나게 되었습니다.
소멤 예비과정에서 제가 얻었던 것은 총 세 가지입니다.
첫 번째는 사람입니다. 정말 좋은 사람들을 만났고 과정이 종료된 후에도 앞으로 계속 만나고 싶은 사람들도 다수 있었습니다. 혼자 공부했으면 절대로 이루지 못했을 공부량은 사실 이 과정을 같이 진행했던 사람들로부터 비롯된 것이었습니다. 그들로부터 자극받고 또는 자극을 주며 서로가 서로에게 동기부여하는 방식이었습니다.
두 번째는 개발 관련 지식입니다. 너무나 뛰어나신 강사님을 만나서 제대로 교육받을 수 있었습니다. 앞으로 있을 저의 개발 여정에 밑거름이 되리라 생각합니다.
세 번째는 NHN의 입사 기회입니다. 소멤 예비과정을 우수하게 마치게 되면 소멤 본과정에 합격할 수 있습니다. 소멤 본과정은 NHN의 정식 인턴 과정입니다. NHN의 직원들과 같이 일할 수 있기때문에 정말 저에게는 소중한 기회입니다.

개발자를 꿈꾸지만 비전공자라 어떻게 해야할 지 모르는 분들은 NHN 소프트웨어 멤버십에 도전해보세요.
다양한 사람들과 만날 수 있고 6개월 동안 머리 터지도록 배워볼 수 있는(그것도 무료로!) 시간입니다~^^

이상을 끝으로 NHN 소프트웨어 멤버십 예비과정 후기를 마칩니다.
예비과정 멤버십에 지원하려는 분들 중 따로 궁금한 게 있으신 분들은 이곳에 댓글을 달아주세요. 제가 아는 범위내에서 답변해드리겠습니다.^^

Java에서도 Node.js를 사용해보자 – Vert.x(1)

Vert.x라는 서버 프레임워크를 톰캣으로 구동되는 자바 웹애플리케이션에 적용하는 프로젝트를 진행중에 있습니다.

프로젝트를 간략하게 설명하자면 즐겨찾기를 관리해주는 웹 서비스입니다. 사용자가 로그인해서 특정 페이지를 즐겨찾기하면 어느 브라우저, 어느 디바이스 환경에서도 나만의 즐겨찾기 페이지에 접근할 수 있게 하는 게 주요 골자입니다.

Vert.x가 사용되는 부분은 사실 이 프로젝트의 메인하고는 그닥 상관이 없습니다. 로그인 한 사용자는 다른 사용자와 친구 관계를 맺을 수 있는데 친구끼리 서로 쪽지를 주고받을 수 있습니다. 친구에게 쪽지를 보냈을 때 상대방이 로그인 중에 있다면 쪽지 도착을 실시간 웹 기술을 이용해서 Notification해주기 위함입니다.

실시간 웹을 프로젝트에 적용해보기 위해 여기저기 알아보다가 검색된 게 사실 처음에는 Node.js였습니다. Node.js의 Socket.io가 실시간 웹을 구현하기 쉽게끔 해주는 모듈이었고 사용법을 살펴보니 크게 어렵지는 않아서 그쪽으로 공부를 진행했습니다. 그런데 문제는 프로젝트의 웹 애플리케이션 서버가 톰캣이라는 점이었습니다.

저와 같은 생각을 하는(톰캣과 Node.js를 같이 사용하려는) 외쿡의 개발자들이 제법 있더군요.

1. http://stackoverflow.com/questions/11172351/how-to-put-nodejs-and-apache-in-the-same-port-80

2. http://stackoverflow.com/questions/11354966/adding-a-node-js-applications-as-an-apache-alias

3. http://stackoverflow.com/questions/11172351/how-to-put-nodejs-and-apache-in-the-same-port-80

해답은 아파치 톰캣의 mod_proxy라는 모듈(링크)을 사용하는 것이었습니다. 그래서 어차피 자바로 웹 애플리케이션을 개발하려면 아파치 톰캣에 대해 심도있는 공부가 필요할테니 배워두자라고 마음먹고 mod_proxy에 대해서 공부하려던 찰나에 아래의 세미나 동영상을 보게 되었습니다.

Vert.x&Socket.IO 이해 및 활용 | Devon 2012 from Daum DNA

동영상 보기

설마 자바로 socket.io를 사용할 수 있을까 의심도 안하고 있다가 무심코 ‘자바 + socket.io’로 검색을 해보니 제일 처음에 나오는 검색 결과였습니다.

NHN Business Platform에 근무하는 백기선님이 Node.js의 socket.io 모듈을 자바 형식의 Vert.x 버전으로 포팅한 것입니다.

지난 포스팅에서도 살짝 소개했었던

Vert.x의 mod-socket.io입니다.

mod-socket.io는 자바스크립트의 socket.io를 그대로 가져다 쓸 수 있습니다. 즉, 클라이언트 측에서는 자바스크립트 버전의 socket.io를 사용하고 서버 측에서는 Vert.x의 socket.io를 쓰는 형식입니다. Node.js의 socket.io 모듈을 포팅했기 때문에 사용법이 크게 다르지 않습니다. 물론 자바스크립트와 자바의 구조적인 차이때문에 어쩔 수 없는 부분도 있습니다만 수박 겉핥기 형식으로나마 사용해본 결과 그렇게까지 크게 다르다는 느낌을 받을 수 없었습니다.

이번 포스팅에서는 Vert.x를 자바 웹 애플리케이션에 Embedded 모드로 사용하는 방식에 대해서 알아보겠습니다.

일단 가장 먼저 해야할 일은 당연히 개발 환경을 구축하는 것입니다.
여기를 열어서 Vert.x 웹 페이지로 이동합니다.
상당히 Bootstrap스러운 UI의 웹 페이지가 우릴 맞이할 겁니다.
상단의 메뉴 탭 중에서 ‘download’를 클릭합니다. 그러면 버전 별, 압축 포맷 별 링크가 나오게 되는데 취향에 맞게 클릭해주세요.
참고로 본 포스팅에서는 vert.x-1.3.1.final 버전을 사용합니다.

다운로드받은 파일의 압축을 풀어서 열어보면 다음과 같은 디렉토리 구조를 갖습니다.

api-docs: Vert.x에서 지원하는 여러 언어들의 문서들이 들어있습니다.
bin: Vert.x의 실행파일이 들어있습니다. 본 포스팅에서는 Vert.x를 Embedded하여 사용하므로 필요없습니다.
lib: 가장 중요한 폴더입니다. Vert.x와 관련된 모든 라이브러리들이 들어있습니다.

lib 폴더에 있는 jar 파일들을 전부 WEB-INF/lib 폴더에 복사합니다.
여기까지 진행하시면 일단 Vert.x의 개발환경 구축은 어느 정도 끝이 난 것입니다.

Planet X 댓글 플러그인 서비스 – 2

저번 포스팅 Planet X 댓글 플러그인 서비스에서는 서비스를 이용하기 위해 계정을 생성하는 방법과 가장 단순한 방식으로 댓글을 구현하는 것을 알아보았습니다.

이번 포스팅에서는 SK Planet X에서 제공하는 댓글 플러그인 서비스 API의 구체적인 사용 방법에 대해서 알아보겠습니다.

댓글 서비스를 구현하는 가장 간단한 코드는 다음과 같습니다.

<div id="comments_plugin1"></div> 
<script src="http://comments.skplanetx.com/script/plugin.js"></script> 
<script type="text/javascript"> 
	SKP.commentsPlugin({ 
	    // id of DOM element where you want to display comments 
	    target_id: 'comments_plugin1', 
	    op_app_key: '1000cfcc-93aa-38ab-adad-c1909318b1c3' ,
	}); 
</script>

코드를 라인 별로 설명하겠습니다.
1: div 태그를 선언함과 동시에 여기에 id를 부여합니다. 최종적으로 요 div 태그 내부에 댓글 서비스가 구현됩니다.
2: SK Planet X측의 댓글 플러그인 자바스크립트를 import합니다.
3~9: 댓글에 관한 설정부분이 들어가는 자바스크립트입니다.
6: target_id. 첫번째 줄에서 선언했던 div 태그의 id와 대응하는 속성입니다. 예제에서는 ‘comments_plugin1’으로 되어있습니다.
7: op_app_key. 이전 포스팅에서 앱을 등록하면서 발급 받았던 식별 키를 적어줍니다. 서비스 프로바이더 측에서는 이 키를 기준으로 식별하기 때문에 제대로 적어주셔야 합니다.

이렇게만 코딩하고 웹 브라우저에서 돌리게 되면 댓글 서비스를 이용할 수 있습니다.
하지만, SK Planet X에서 제공하는 댓글 플러그인 서비스의 API를 살펴보시면 좀 더 다양하게 댓글 서비스를 커스터마이징할 수 있습니다.
여기를 눌러서 해당 페이지의 step8] 정식 설치 부분으로 이동해보세요.

위 표는 댓글 서비스를 구현하면서 속성으로 설정할 수 있는 것들을 보기좋게 표로 작성한 것입니다.
맨 위 코드에서 6,7번째 줄에서는 두 개의 속성만을 지정했지만 이것에 더 추가하여 여러가지 속성들을 설정할 수가 있는 것입니다.
여기에서 주목해야 할 속성은 ‘page_id’와 ‘is_responsive’입니다.

먼저 page_id 속성에 대해 알아보겠습니다.
댓글 플러그인 서비스는 댓글 데이터 자체를 url로 구분합니다.
즉, board/table.html과 board/table2.html의 댓글 데이터는 서로 달라지게 됩니다.
http://iamapark.cafe24.com/Blog/categories/web/reply.html
http://iamapark.cafe24.com/Blog/categories/web/reply2.html
위 두 개의 링크는 서로 다른 url을 가지고 있습니다. 따라서 내부에 댓글 데이터가 달라지는 것입니다.

하지만 url이 달라도 같은 댓글 데이터를 지니고 싶다면 어떻게 해야 할까요?
이때 사용하는 속성이 바로 ‘page_id’입니다.
page_id 속성의 값을 동일하게 지정하면 다른 url을 갖고 있는 페이지라 할지라도 같은 댓글 데이터를 화면에 보여줍니다.

http://iamapark.cafe24.com/Blog/categories/web/reply3.html
http://iamapark.cafe24.com/Blog/categories/web/reply4.html
위 두 링크는 서로 다른 url을 갖고 있지만 같은 댓글 데이터를 보유하고 있습니다.
reply3.html에서 작성한 댓글이 reply4.html 페이지에서도 동일하게 볼 수 있는 것입니다.

다음은 is_responsive 속성에 대해 알아보겠습니다.
위 표에서 is_responsive 속성에 대한 설명을 살펴보면,
‘반응형(Responsive Design) 페이지 서비스 여부. PC에서 접속하면 PC 버전이 보이고 모바일에서 접속하면 모바일 버전이 보인다. 기본값: false’
즉, 서로 다른 화면 크기를 가진 PC와 모바일 디바이스에서 동일한 UI를 화면에 뿌리게 되면 사용자 입장에서는 사용하기 까다롭게 됩니다.
모바일에서 PC버전의 UI를 사용하면 댓글을 확인하는 게 상당히 까다롭습니다. 화면을 확대한 후, 스크롤을 좌우로 이동해가면서 읽어야 합니다. 댓글이 짧으면 모를까 장문일 경우 글자들이 모바일 디바이스의 기본 폭을 넘어가버리기 때문입니다.
responsive web, 보통 반응형 웹이라 칭하는 개념은 이런 사용자의 불편함을 해소하기 위해 나온 개념입니다.
사용자의 디바이스의 화면 폭에 맞추어 디자인 자체가 대응하는 식으로 바뀌는 방식입니다.
반응형 웹에 관한 설명은 여기까지 하고 자세한 정보는 여기에서 확인해보세요.

그럼 댓글 플러그인 서비스에서 is_responsive 속성을 ‘true’로 줄 경우 어떻게 되는지 확인해보겠습니다.
http://iamapark.cafe24.com/Blog/categories/web/reply.html
위 링크를 PC와 모바일 기기에서 각각 접속해보세요. 지금 모바일 기기로 확인할 수 없는 분들을 위해서 스샷을 찍어봤습니다.

모바일 디바이스의 폭에 맞추어서 디자인이 대응하는 것을 볼 수 있습니다.
여러분들이 사용할 댓글 플러그인 서비스가 모바일에서도 접속하는 사용자가 많다면 이 속성을 ‘true’로 줘야만 합니다.
여기에 덧붙여서 ‘is_mobile’이라는 속성도 있습니다. 이 속성의 기본값은 ‘false’인데, ‘true’로 주면 PC에서 접속을 해도 모바일 기기에서 보여지는 디자인처럼 보여줍니다. 즉, 댓글 서비스를 무조건 모바일에서만 하겠다 하시는 분들은 이 속성을 ‘true’로 주시면 되겠죠~!!

이상으로 SK Planet X에서 제공하는 댓글 플러그인 서비스에 관한 포스팅을 마치겠습니다.
조금이라도 도움이 되었으면 좋겠네요.^^
즐코하세요~~!!

Planet X 댓글 플러그인 서비스

SK Planet에서 개발자들을 위한 여러가지 서비스들을 Open API 형식으로 제공해주고 있습니다.
제공 서비스 목록은 다음과 같습니다.

• SK Planet One ID
• 싸이월드
• 네이트온
• 11번가
• 멜론
• T map
• hopping
• T Cloud
• Smart Touch Tag
• 소셜 컴포넌트
• 커뮤니케이션 컴포넌트
• 제휴 서비스
• 댓글 플러그인

이 중에서 댓글 플러그인 서비스에 대해서 알아보겠습니다. 다른 서비스들에 관심이 있으신 분들은 링크를 눌러서 관련 정보에 접근하시기 바랍니다.

자신의 웹 사이트 또는 앱에 댓글 기능을 달고 싶은 개발자들에게 희소식일 이 서비스의 기능은 꽤나 다양합니다.
– 기본적인 댓글 기능
– 소셜 미디어 계정으로 댓글 달기
– 자신의 댓글에 누군가가 답글을 달 경우 실시간으로 알림 받는 기능
– ‘좋아요’, ‘싫어요’ 버튼
– 실시간 댓글 업데이트
– 이미지, 동영상, 링크 첨부 기능

아래 사진을 보시면 UI 역시 꽤나 깔끔하게 제공해주기 때문에 디자인 감각이 없는 개발자분들이 더 좋아할만한 서비스입니다.

그럼 지금부터 본격적으로 댓글 플러그인 서비스를 이용하는 방법에 대해서 알아보겠습니다.

1) 서비스 신청 방법
Open API를 사용해 보신 분들은 어느 정도 아시겠지만, 서비스 프로바이더(SK Planet, Google, Naver, Daum 등등) 측의 API를 사용하는 것에는 제한이 있습니다.
주로 API 호출 횟수를 몇 회 이하로만 할 수 있도록 하는 방식으로 서비스가 진행되고 있습니다.
무한정 호출하는 것은 서비스 프로바이더 측에서도 상당한 부담이 될 테니까요.
그래서 서비스 프로바이더 측에서는 API를 호출하는 주체(여기서는 Open API를 이용해서 새로운 서비스를 제공하려는 웹앱 or 앱)를 식별할 수 있어야 합니다.
따라서 우리가 댓글 플러그인 서비스를 이용하기 위해서는 SK Planet에 계정을 등록하고 식별 키를 받아야 합니다. 여기서 받은 키를 기준으로 서비스 프로바이더가 구별하게 되는 것입니다.

1. 계정 신청

계정을 신청합니다.
여기를 눌러서 회원가입을 진행합니다.
SK Planet에서는 One ID라는 서비스를 제공합니다. 여기서는 다른 SK 사의 서비스들(Nate, Cyworld 등등)의 계정으로 가입할 수 있도록 해주고 있습니다. 이미 다른 계정이 있으신 분들은 따로 회원가입하지 않고 One ID 서비스만 신청하시면 서비스를 바로 이용할 수 있습니다.

2. 앱 등록

회원 가입이 끝나면 로그인하신 후, 앱 등록을 하셔야 합니다.
여기를 눌러서 앱 등록 페이지로 이동합니다.
약관에 동의하시면 다음과 같은 화면이 나옵니다.

여기서 ‘앱 이름’과 ‘앱 설명’은 알맞게 작성해주시고 ‘서비스 타입’은 사용하시려는 서비스에 알맞게 체크해주시면 됩니다. 저는 웹 페이지에서 사용할 것이기 때문에 Web에 체크하였습니다. ‘서비스 타입’을 체크하고 나면 Service URL과 Redirect URL을 설정해주어야 합니다.
저는 cafe24.com에 호스팅하고 있는 계정으로 등록하였고 Redirect URL은 Blog/web 으로 지정하였습니다. Redirect URL은 댓글 플러그인 서비스에서는 필요하지 않습니다만 필수 입력 요소이기 때문에 알맞게 적어주시면 됩니다.

‘확인’ 버튼을 누르면 다음 단계(‘인증 키 발급’)로 넘어갑니다. 여기서 ‘인증 키 발급 받기’ 버튼을 누르면 다음과 같은 화면이 나오면서 앱 등록이 마무리 됩니다.


여기서 스크롤을 내리면 등록한 앱으로 사용할 서비스를 선택하는 화면이 나옵니다.

저는 댓글 플러그인만 사용할 것이기 때문에 이것만 체크하겠습니다. 기타 다른 서비스에도 관심이 있으신 분들은 해당 서비스에 체크한 후 진행하도 상관 없습니다.(선택한 서비스는 나중에 추가하거나 삭제할 수도 있으니 너무 신중하게 안 하셔도 됩니다.^^)

2) 서비스 사용
앱도 등록했고, 키도 발급 받았으니 이제부터 진짜 댓글 서비스를 사용해보도록 하겠습니다.

최상단 메뉴에서 ‘내 정보’ 탭을 클릭합니다. 그러면 왼쪽에 다음과 같은 세로 목록 메뉴가 나옵니다.

여기서 ‘댓글 플러그인 관리’ 탭을 눌러주세요

‘댓글 플러그인 관리’ 탭을 누르면 아래와 같은 화면이 나옵니다.

계정으로 등록한 앱의 목록이 나오게 됩니다. 저는 두 개의 앱을 등록했기 때문에 두 개가 나오고 있습니다. 여기서 사용하려는 앱을 클릭해주세요.

앱 이름을 클릭했을 때의 화면입니다.
‘관리’, ‘댓글’, ‘금칙어 관리’, ‘통계’, ‘설정’, ‘설치 가이드’, ‘테마’ 탭들이 보이실 겁니다. 여기서 ‘설치 가이드’ 탭을 눌러주세요(아마도 기본 설정이 이 탭일 겁니다.)

화면에 보이는 것처럼 두 개의 코드가 보이실 겁니다.
위에 것은 댓글 기능을 넣기 위한 최소한의 코드를 보여주고 있으며, 아래는 댓글 기능에 여러가지 설정을 할 수 있는 코드를 보이고 있습니다.
코드 중에서 ‘op_app_key’ 키에 들어가는 값이 방금 전에 발급받았던 ‘식별 키’ 입니다.
이 식별 키는 정확히 입력해주셔야 합니다.

우선은 가장 간단하게 사용해보기 위해 위 코드를 복사합니다.
그 다음 Html 파일(또는 jsp, php 등 상관없습니다.)의 body 태그 내부에 붙여넣기 해주세요. 그리고 웹 브라우저에서 실행하면 가장 간단한 댓글 기능이 구현된 것을 볼 수 있습니다.

위와 같은 화면이 출력된다면 성공적으로 댓글 플러그인 서비스를 사용하게 되신 겁니다.
SK Planet 에서 제공하는 댓글 플러그인 서비스에서 댓글을 달려면 SNS 계정에 로그인 해야 합니다.
SNS계정으로 댓글을 관리하기 때문에 따로 회원가입할 필요가 없다는 장점이 있습니다. 그리고 내가 단 댓글을 곧바로 페이스북이나 트위터에 연동하여 내 계정에 올릴 수도 있습니다.

댓글을 한 번 달아보세요. 글이나 이미지, 동영상, 링크를 삽입한 후 오른쪽 하단의 ‘로그인 후 댓글 남기기’의 여러 SNS 중에서 하나를 골라 로그인 하면 댓글이 달리게 됩니다.

위 사진을 눌러보세요. 제가 두 개의 댓글을 단 것을 보실 수 있을 겁니다.
첫 번째 댓글은 페이스북 계정으로 달았고, 두 번째 댓글을 트위터 계정으로 달았습니다. 특히 두 번째 댓글은 댓글을 달면서 동시에 저의 트위터 계정에 같은 내용으로 트윗을 해보았습니다.

트윗이 된 것을 볼 수 있습니다.

댓글을 몇 개 달아본 후, SK Planet 페이지로 다시 돌아가 ‘댓글’ 탭을 눌러보세요.

어떤 댓글이 달렸는지 이 탭에서 확인할 수 있습니다.

그리고 ‘통계’탭을 눌러보세요.

시간대별, 기간별, 사용자별 댓글 통계 자료를 확인할 수 있습니다.

‘테마’탭을 누르게 되면,

다음과 같이 여러가지 테마를 선택할 수 있습니다.
저는 ‘Black’ 테마를 선택하고 나서 방금 전 댓글 페이지를 새로고침 해보겠습니다.

배경화면이 검정색으로 변했고 아이콘 배치가 조금씩 달라진 것을 확인할 수 있습니다.

완성된 댓글 서비스는 여기에서 확인할 수 있습니다.

이번 포스팅에서 살펴본 댓글 플러그인 서비스는 상당히 유용한 기능이라고 볼 수 있습니다.
SNS 계정과 연동하여 댓글을 달 수 있고, 디자인 자체도 상당히 깔끔하게 제공되기 때문에 굳이 댓글과 관련된 디자인 작업을 하지 않아도 되기 때문입니다. 제공되는 디자인을 수정하고 싶다면 따로 CSS를 추가하여 커스터마이징 할 수도 있습니다.

댓글 플러그인 서비스를 내가 개발하고 있는 웹 페이지나 모바일 앱에 삽입할 때 커스터마이징하여 넣을 수 있는 방법들을 다음 포스팅에서 알아보도록 하겠습니다.

Java에서도 Node.js를 사용해보자 – Vert.x(0)

Vert.x는 자바스크립트로 서버를 구축할 수 있는 Node.js와 상당히 유사한 서버 프레임워크입니다.
Node.js와 다른 점은 자바스크립트 뿐만 아니라 Java를 비롯한 다른 언어들(Ruby, Python, Groovy)도 지원한다는 점입니다.
Vert.x 개발진들이 공공연히 Node.js와 자신의 프레임워크를 비교할뿐만 아니라 사용법 또한 상당히 유사하죠.

몇몇 성능 분석가들은 Node.js보다 Vert.x가 더 빠르다는 분석 결과들을 내놓기도 했습니다. 분석 자료

Node.js가 아직 정식 버전조차 내놓고 있지 못하는 단계(현재 v0.10.4)이지만 수많은 모듈들을 보유하여 유용성 측면에서는 Vert.x보다는 더 나은 듯 합니다.
하지만 Node.js의 모듈을 Vert.x 버전으로 옮기는 작업이 현재 활발히 진행중에 있어서 앞으로 어떻게 될지는 장담할 수 없을 것 같습니다. ex)소스 보기

자바스크립트로 서버 사이드 개발을 진행할 수 있는 Node.js의 장점을 대부분 흡수하면서도 일부 존재하는 단점들을 제거했다는 Vert.x 개발진들의 장담이 사실이라면 앞으로 Vert.x라는 프레임워크가 꽤나 대세가 될 듯 합니다.
Node.js와 성능면에서 앞서면서 기능은 동일하고 지원하는 언어가 5가지나 된다는 것은 정말 엄청난 장점이니까요.

Vert.x 프레임워크를 공부하고 이를 프로젝트에 적용해보는 과정을 거치면서, Vert.x와 관련된 여러가지 이슈들을 맞닥뜨렸고 그것들을 최대한 상세하게 Vert.x 포스팅에 담아낼 예정입니다.

블로그 시작

열심히 해야지