웹 서비스의 논리적인 구조

프로그래머와 의사 소통을 위해서 수만은 솔루션들을 기억 할 수는 없었다.
비 프로그래머 입장에서는 논리적인 구조를 통해서 대화를 풀어보자.

본문은 웹 서비스의 논리적인 계층에 대한 이해를 목표로 한다.
각 계층를 대변하는 솔루션들은 그들 중의 하나로 예기 할 수 있을 것이다.

프로그래머가 바라보는 웹 구조는 어떨까?

프로그래머 관점에서 보는 레이어(계층) 구조이다.



파이썬 Flask 웹 프레임워크의 구조 예제이다.
Presentation Layer : Jinja
Business Layer : flask
Data Access Layer : SQLAlchemy
Persistence Layer : py-postgresql

중요한 것은 데이터를 다루는 일이다.



잘 만들어진 아키 그림은 코멘트가 가비지 일 수 있다.
읽지 않고 보는 것으로 충분해 보인다.

References

이미지 조회
http://www.teradatamagazine.com/v09n01/Tech2Tech/DAOs-enable-active-integration/

Read More

페이스북 로그인 구현 과정 소개

사이트 별로 관리되는 계정 정보는 효율이 많이 떨어진다. 다수의 사람들이 사용하고 있는 SNS 계정을 통해서 맴버를 관리 한다면, 사용자 입장에서는 간편 가입이 가능하고, 사이트 입장에서는 정보 네트워크를 확대할  수 있는 이점이 있다.

대표적인 SNS인 페이스북 로그인 구현 과정을 소개한다.

개발 페이지에서 My APP 생성하기

URL : https://developers.facebook.com/apps/

Site URL에 로그인을 구현하는 페이지 주소를 입력한다. 응답 값을 받아야하니 정확하게 입력 한다.

예제 스크립트 조금 수정 하기

가이드 URL : https://developers.facebook.com/docs/facebook-login/web

작성하는 시점에서 최신 버전인 Facebook API v2.4 기준으로 예제 코드를 수정한다.
A. fields 변수를 통해 호출할 때, 응답 받을 값의 필드를 명시한다.
    /me?fields=id,name,email .... // 콤마(,)로 필드 구분
B. 결과 수신이 잘 되었는지 확인하기 위해, 응답 값의 키(Key)를 나열하는 코드를 추가한다.
   Object.keys(response).join('<br/> * ')

필자가 수정한 코드는 다음과 같다.
URL : https://bitbucket.org/snippets/juhoon26/r984L

브라우저를 통해서 로그인 절차 소개하기

로그인 버튼을 누르면, 개인정보 제공에 동의를 구한다. 기본적으로 제공되는 정보와, 예제 스크립트에서 scope을 통해서 지정된 정보 요청에 동의를 구하는 과정이다.

동의를 하면 다음과 같이 개인정보를 넘겨 준다.

넘겨 받은 정보를 통해서 가입 폼을 만들거나, 로그인 처리가 가능하다.

Read More

SNS 공유 버튼에 대한 성능 고민

정보의 범람에 노아의 방주라 불릴만한 다양한 네트워크(SNS)가 믿음을 요구하는 세상이다.

인스타그램(instagram)은 태그(tag)를 통해 정보를 구분짓는 방법을 제공하고, 출처의 제약을 통해서 쓰레기 데이터들을 막아내고 있다. 핀터레스트(pinterest)는 보드이라는 사탕을 주면서 정보를 구분짓을 일을 유저에게 일임한다. 각각 자신만의 스타일로 방주를 자처하고 있지만 혼란한 시기에는 지켜보는 것이 현명해 보인다.

오늘은 컨텐츠를 여러 방주로 흘려 보내는 방법을 간략히 정리해 봅니다.

대표적인 SNS의 공유버튼(SHARE BUTTON) API 가이드 페이지입니다.

* 페이스북 - https://developers.facebook.com/docs/plugins?locale=ko_KR

* 트윗터 - https://about.twitter.com/ko/resources/buttons

* 구글플러스 - https://developers.google.com/+/web/share/

* 핀터레스트 - https://business.pinterest.com/ko/widget-builder#do_pin_it_button

* 링크드인- https://www.linkedin.com/publishers

제공되는 코드는 자바스크립트(Javascript)를 100% 활용한 코드들로, 개선 할 수 있는 방법을 찾아서 비교해 봅니다.

포인트는 "상품을 보는 사용자 대비 공유 버튼을 누르는 사용자는 매우 제한적일 것이다"라는 것에서, 불필요하게 로딩되는 자바스크립트는 브라우저에 부담 줄 것이라는 생각입니다.

왼편 이미지는 custom 한 방식으로 사용자가 원하는 스타일로 제작할 수 있습니다. 추가적으로 스타일시트(CSS)와 가볍고 멋진 이미지만 붙이면 됩니다.

오른편 이미지는 official하게 제공되는 코드를 사용해서, 편하게 쓸 수 있지만 성능 개선과 스타일을  꾸미는데 제약이 있습니다.

웹 성능 측정 페이지(http://tools.pingdom.com/fpt/)를 통해서 로딩 테스트를 해 보았습니다.

로딩 시간은 여러번의 샘플링 중에서 중간 정도를 선택했습니다. 오피셜(offical)한 방식은 로딩시간이 상황에 따라 1~3초 사이로 편차가 꽤 있었습니다. 각 SNS의 서비스 제공 지역이 흩어져 있고, 상대적으로 복잡한 자바스크립트 코드의 영향으로 판단됩니다. 중요한 부분은 요청횟수(Requests) 부분으로 보입니다. custom 방식으로 실제 코드를 완성 후에 비교해보면 흥미로울 듯 합니다.

본문에서 사용한 코드는 비트버켓(bitbucket)을 통해서 공유합니다.

https://bitbucket.org/snippets/juhoon26/RoxbG/sns-share-buttons

Read More