우리 고양이, 치매일까요?

작성자: -






댓글

댓글 쓰기

주간 인기글

SPA(Sigle Page Applications) 란 무엇인가?

작성자: -
이미지
먼저 SPA (Single Page Application)가 필요한 이유부터 살펴 보면, 단일 페이지 응용 프로그램은 수년간 사용되어 왔지만 일반적인 웹상에서는 찾아보기가 어렵습니다.

그렇지만, 앞으로 많은 웹사이트가 SPA로 개발될 아주 좋은 계기가 있습니다.

SPA는 SaaS (Software as a Service) 플랫폼 또는 인터넷 서비스의 상황판 같은 대시보드 부분을 구축하고 기업의 데이터 기반 및 폼 기반 애플리케이션을 구축하기 위해 지난 몇 년 동안 많이 채택되어  왔으며, 추후에 개발될 웹 어플리케이션에서 우선적으로 고려될 것으로 예상되어 집니다.



그러면 Angular2(이하 Angular)로 개발하는 어플리케이션은 SPA로 개발해야 하는 건가요?

처음 Angular2를 접하게 되면 당연히 SPA로 개발 된다고 생각할수 있지만, 다르게 구축할 수도 있습니다.



SPA는 단순하게 다음과 같이 정의해 볼 수 있습니다.

1개의 페이지만 있는 어플리케이션

실제 SPA 확인해보고 싶으시면 남도패스 사이트(https://m.namdopass.co.kr)를  방문해보면 알수 있습니다.

하단의 홈/지역별/로그인/남도패스 각각 메뉴를 이동해 보면 실제 하나의 페이지에서 내용만 바뀌는 것을 확인할 수 있습니다.

웹사이트를 둘러보기를 시작하면 페이지가 완전히 다시 로드되지 않는다는 것을 알 수 있습니다. 화면 전환 시마다 REST API 서버를 통해 데이터를 바인딩하고 있습니다.

그럼 SPA 구축 할 때의 장점은 무엇이며 어떻게 작동하는지 살펴보면

남도패스 사이트(https://m.namdopass.co.kr) 첫화면을 소스보기 해보면

자세한 내용 보기

[부트스트랩] 소개와 사용 방법

작성자: -
이미지
부트스트랩 소개  부트스트랩은 웹 디자인을 어떻게 하며 편리하게 할 수 있을까하는 목적에서 나온 프레임워크입니다.  실제로 부트스트랩을 활용하면 웹 디자인에 쏟아야 하는 노력을 절반이하로 줄일수 있으며, 특히 반응형 웹에 대한 고민을 혁신적으로 해결해 줄 수 있습니다.

 부트스트랩은 Mark Otto와 Jacob Thornton에 의해 Twitter에서 개발되었으며, GitHub에서 2011 년 8 월 오픈 소스 제품으로 출시되었습니다.



부트스트랩 설치  부트스트랩 설치는 부트스트랩 사이트에서 다운로드 받은 후 크게 3가지 방법으로 사용할 수 있습니다.
웹서버에 올려서 사용하는 방법CDN(Contents Delivery Network)을 이용하는 방법Bower라는 패키지를 이용하는 방법
 가장 많이 이용하는 방법은 웹서버에 이용하는 방법이며, 2번째 방법은 CDN 상황에 종속적으로 되어 간혹 느려지는 경우가 발생될 수 있습니다. bower는 별도의 패키지관리 도구이며, 자세한 내용은 http://bower.io를 참고하시면 됩니다.

자세한 내용 보기

[MySQL] DB Time Zone 변경

작성자: -
이미지
간혹 MySQL DB 작업 완료 후 DB 시간이 UTC 로 표시되는 현상이 발생하는 경우가 있습니다.
이런 경우 KST 로 표시 되도록 변경하는 방법을 확인해 보도록 하겠습니다.

우선 DB 접속에 접속 합니다.

DB 의 Time Zone 설정이 되어 있는지 아래와 같이 확인 합니다.
Time Zone 설정이 되어 있지 않다면 아래와 같이 표시됩니다 .

mysql> select count(*) from mysql.time_zone;








Time Zone 설정을 위해 리눅스 환경으로 돌아와  아래와 같이 입력합니다.

$ mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root -p mysql




다시 DB 로 접속 합니다.



DB Time Zone 정보를 확인해 보면 아래와 같이 표출 됩니다.
저같은 경우에는 Time Zone 정보가 SYSTEM 으로 표시되네요

mysql> SELECT @@global.time_zone, @@session.time_zone;









이제 Time_Zone 정보를 Seoul 기준으로 변경해 줍니다.

mysql> SET GLOBAL time_zone='Asia/Seoul';
mysql> SET time_zone = 'Asia/Seoul';








정상적으로 변경이 완료 되었는지 다시 Time Zone 정보를 확인해 보겠습니다.

mysql> SELECT @@global.time_zone, @@session.time_zone;


정상적으로 변경 된것을 확인 할 수 있습니다.







DB 내 시간정보를 확인해 보면 로컬 시간이 표시되는 것을 확인할 수 있습니다.

mysql> SELECT NOW();






아래와 같이 Time Zone 정보를 다시 한번 확인해 보면 정상 적용된 것을 확인 할 수 있습니다.

mysql> select @@time_zone;



자세한 내용 보기

구글 애널리틱스에서 API 로 데이터 받아오기

작성자: -
이미지
남도패스 대시보드를 만들면서 구글 애널리틱스에서 데이터를 API 로 받아오는 부분을 알아보았는데 팀내 인수인계 문서 겸 블로그로 올립니다.

* 전제조건
구글 애널리틱스 계정이 있어야 합니다.
가입하기 > https://www.google.co.kr/intl/ko/analytics/

목적은 남도패스에 접속하는 회원이 무슨 키워드로 어느 소스/매체를 통해 접속하는지 일일세션 수를 구글 통계 API 를 통해 호출해서 화면에 뿌려주는 부분입니다.

자세한 항목/사용법은 https://developers.google.com/analytics/devguides/reporting/core/v3/reference#metrics 여기서 알 수 있습니다.


1. 먼저 https://ga-dev-tools.appspot.com/query-explorer/ 에 접속합니다.

로그인한 상태가 아니라면 아래 화면은 block 되어 있습니다. 주황색 부분을 누르고 구글 통계를 쓰고있는 계정으로 로그인하시면 됩니다.



2. 로그인 후에, Account 메뉴를 열어보면 해당 구글 계정에서 쓰고있는 구글 통계 웹사이트/앱 목록이 뜹니다. 그 중 API 로 데이터를 얻어오려는 계정을 선택합니다.



3. start-date, end-date: 계정을 선택한 후 해당 데이터의 기간 범위를 선택합니다. 남도패스는 일일 통계를 얻어야 하기 때문에 start-date, end-date 를 같은 날로 설정합니다.



4. metrics: 구글통계에서 최종적으로 어떤 데이터를 얻어올지 항목을 선택합니다. 남도패스에서는 세션, 페이지뷰를 선택했습니다.



5. dimensions: 데이터를 뽑아올 조건 항목들을 선택합니다. 남도패스 대시보드의 경우에는유입 검색 키워드와 소스를 선택합니다.



6. 마지막으로 Run Query 버튼을 누르면 해당 데이터를 뽑아올 쿼리문이 완성됩니다. 여기서 Include current access_token in the Query URI 값을 체크해줍니다.



7. 그렇게 나온 쿼리를 Post…
자세한 내용 보기

Nodejs 날짜 관련 유용한 moment.js

작성자: -
안녕하세요. 남산돈가스입니다.

오늘은 제가 개인적으로 Node JS를 개발하면서 굉장히 유용하게 사용하는 모듈을 소개드리려고 합니다.

데이터들을 처리하는 과정에서 꼭 빠지지않는 것들이 날짜 데이터들이죠.

이 날짜 데이터들을 아주 유연하게 변경 및 비교, 계산까지 해줄 수 있는 것이 이 moment.js라고 할 수 있습니다.

지금부터 moment.js를 설치하고 사용하는 방법에 대해서 간단하게 소개드리겠습니다.

먼저 moment.js 모듈을 설치하기 위해서 npm 명령어를 실행합니다.

npm install --save moment
moment가 설치되었다면 이제 간단하게 사용법을 익혀보겠습니다.


◆ moment 선언

let moment = require('moment'); ◆ 현재 시각

console.log(`moment => ${moment()}`)//moment => Mon Jan 15 2018 10:50:08 GMT+0900
◆ Date 객체로부터 초기화 *month는 -1 값 지정

console.log(`Date to moment => ${moment(new Date(2018,0,15))}`);//Date to moment => Mon Jan 15 2018 00:00:00 GMT+0900
◆ 포맷을 지정하여 출력

console.log(`포맷 지정 출력 => ${moment().format("YYYY년 MM월 DD일")}`)//포맷 지정 출력 => 2018년 01월 15일 console.log(`포맷 지정 출력 => ${moment().format("YYYY-MM-DD HH:mm:ss")}`)//포맷 지정 출력 => 2018-01-15 11:01:16
◆ 단위 별 출력

console.log(`연도 => ${moment().year()}`)//연도 => 2018 console.log(`월 (※ 0〜11의 값)=> ${moment().month()}`)//월…
자세한 내용 보기