AngularJS와 NodeJS간 HTTP 통신 예제(GET/POST 방식)

HTTP

얼마 전에 AngularJS와 NodeJS 간 통신하는

예제에 관한 포스팅을 했었습니다. 단순히

AngularJS 기반으로 개발된 HTML 페이지

에서 NodeJS를 호출하는 예제였는데

앵귤러JS의 $http를 이용한 HTTP 통신

예제였습니다. 단순히 호출만 하는 예제였지요

>AngularJS와 Node 간 통신<

오늘도 이 작업을 계속 했는데

작업을 하다 보니 HTML 페이지에서

NodeJS로 단순히 호출하는 것에서

끝나지 않고 파라미터를 보내야 되는

상황이 생겨서 또 이 거에 대해 오늘

하루종일 삽질 했습니다.

웹 페이지에서 노드JS로 호출할 때

파라미터를 줄 수 있을 거라 생각하고

찾아 봤지만 생각처럼 쉽게 방법을

찾지는 못했지만 결국은 찾았습니다.

HTML

화면 소스입니다.

CreateTopic 버튼을 누르면

createTopic() 함수가 호출되는 부분이

제가 작업한 부분에 해당합니다.

Controller

그럼 해당 페이지의 controller에 선언된

createTopic 함수가 호출됩니다.

위에 캡처 화면을 보시면 제일 마지막 라인에

$http.get('create', {params: parameters});

이 부분이 있는데 이 라인에서 NodeJS의

함수를 create라는 값을 key로 호출하게

됩니다. 그리고 그 뒤에 있는

{params: parameters} 가 NodeJS로

보내려는 파라미터에 해당합니다.

params라는 키고 parameters 라는

변수가 값으로 Json 형태로 노드JS로

파라미터를 보내주고 있습니다.

이 때 Parameters 라는 변수의 값은

그 위에 선언된 것처럼 amount와

description 이라는 키 값으로 각각

123,l 'test' 값이 json 형태로 선언

되어 있습니다. AngularJS나 json

형태에 익숙하지 않으신 분들은

이해 하기가 좀 난해할 거란 생각이 드네요

NodeJS

그리고 최종적으로 호출을 받는

노드JS 소스입니다.

위에 controller에서 create 라는 키로

요청을 보냈고, 위에 보시는 것처럼

NodeJS에 create라는 값을 받아

화면의 요청을 받게 됩니다.

그리고 안에 내용은 화면으로부터

받은 parameter의 값을 빼오는 부분입니다.

req 변수에 요청에 대한 정보가 담겨있고,

당연히 그 안에 파라미터도 담겨 있는데

가지고 올 때 req.query 를 통해 파라미터

전체를 받아온 후 화면에서 설정해준

키 값으로 amount와 descript 값을

읽어 왔습니다. 그 후 확인을 위해

console로 찍은 거구요~

이렇게 화면 화면에서 보내준 값을

받아왔구요 res.send 함수를 통해

화면에 응답을 보내주고 있습니다.

아직도 할 게 많지만 일단 또 어렵게

어렵게 한 고비를 넘었습니다. 물론

아직 남은 고비가 훨씬 많습니다 ㅋ

Android 어플 개발 시 안드로이드 스튜디오와 이클립스 중 하나 선택하는 방법/기준

안드로이드 어플 개발

제가 처음으로 안드로이드 어플

개발이라는 것을 해본 게 대학교

졸업 직전 학기였으니깐 거의

4~5년 전이 아닌가 싶습니다.

그 때 막 아이폰이라는 스마트폰이

세상에 처음 나타났었고, 안드로이드폰이

나오면서 여기 저기서 어플을 만들고,

누가 어플을 만들어서 학교 등록금을 냈네,

뭐가 대박이 났네 하면서 어플 개발자들도

몸 값이 엄청 높았다고 하는 시절이었습니다.

이클립스

그리고 그 당시에 안드로이드 어플 개발을

한다고 하면 열이면 열 이클립스를 사용해서

개발을 하였습니다. 솔직히 그 당시에는

이클립스 말고 다른 안드로이드 개발 툴이

있긴 했는지도 의문입니다.

이클립스 용 안드로이드 플러그인을

구글에서 제공을 했었고, 또 안드로이드

버전이 없그레이드가 되면 이클립스에서도

업데이트 된 버전의 안드로이드 플러그인을

내려 받을 수 있도록 구글에서 제공을

해줬습니다. 그래서 계속 이클립스만을

사용해서 안드로이드 개발을 했었고,

그렇게 학교를 졸업하고 취업을 했습니다.

그 후 부터는 어플 개발을 거의 안했습니다.

그래도 틈틈이 간단한 어플들을 이클립스로

개발해서 블로그나 카페에 올려 놓는 등

그냥 재미로  간단한 어플을 만들곤 했습니다.

신문기사 검색하는 android 어플

블루투스 통신을 통한 스마트폰 간 채팅

안드로이드 구글맵 어플 예제

안드로이드 그림판 어플

메모어플 - 메모장,손글씨 저장/로드/수정/공유 기능

안드로이드 미로 게임

만보기 앱

기억력 테스트 어플

영문번역 어플

영어 단어 맞추기 게임

mp3 player

제가 만든 간단한 안드로이드 어플들 중에

몇 개만 올려 봅니다~

어찌 되었든 이클립스로 안드로이드

어플 개발을 해왔고, 지금도 하고 있고(스튜디오와 병행)

제가 작업한 모든 안드로이드 어플의

프로젝트들도 대부분 이클립스 프로젝트입니다.

뭐...이 쯤 되면 이클립스로 개발을 하는게

더 편한게 사실이고, 개발하는데 지장은 '아직'

보이지 않습니다.

안드로이드 스튜디오

어라 그런데 어느 순간부터 구글에서

이클립스 디벨로퍼라는 안드로이드 개발 툴을

제공한다더니 그 후에는 안드로이드 스튜디오라는게

나왔습니다. 그런데 대박이 어느 시점부터는

안드로이드 플러그인을 더이상 이클립스에서 제공하지

않겠다는 발표를 하는 겁니다. 위에서도 말씀드렸 듯이

이클립스를 통해 안드로이드 버전 업데이트가

가능합니다. 그런데 더이상 업데이트를 안시켜

줄거라는 겁니다... 결국 자신들이 제공하는

안드로이드 스튜디오를 사용하라는 거죠....

그런데 이클립스에서 안드로이드 버전업이

되지않는다고 해도 기존 버전으로 계속

안드로이드 개발이 가능할 뿐더러 아직까지도

안드로이드 업데이트는 해주고 있다는 사실!

(거짓말을 한 걸까요????)

그리고 무엇보다도 지금까지 사용해온

이클립스가 너무 익숙하다는 사실은

이클립스를 떠나기 힘들게 하는 요소들 중

하나입니다.  하지만 개발자 입장에서 새로운 게 나왔는데

기존 것만 고수하고 있을 수는 없고, 언젠가는

스튜디오롤 갈 수 밖에 없을 거 같아서

대세를 따르기로 했습니다. 정확히 언제일지는

모르지만 정말 이클립스에 대한 안드로이드

업데이트 제공이 되지 않을 거라면 결국

언젠가는 안드로이드 스튜디오로 갈아 타야

된다는 소리이니 하루라도 빨리 갈아타는게

좋겠다라는 결론을 내린 거지요....

그런데 막상 안드로이드 스튜디오를

사용해보니 장점도 많이 보이기 시작했습니다.

일단 이클립스에서는 여러 프로젝트를

동시에 불러와서 보여주기 때문에

처음 로딩 속도가 너무 느렸는데

스튜디오에서는 최근의 작업한

안드로이드 프로젝트 하나만 보여주기

때문에 초기 부팅 속도는 스튜디오가 확실히 빠릅니다~

<스튜디오 프로젝트>

<이클립스 프로젝트>

위에서 보시는 것 처럼 이클립스 프로젝트에서는

작업한 모든 프로젝를 불러오기 때문에

로딩 속도가 느릴 수 밖에 없겠죠....

그리고 안드로이드 스튜디오 프로젝트와

안드로이드 이클립스 프로젝트는 그 구조가

서로 달라서 서로 간의 프로젝트 전환이

안될 거라 생각할 수 있겠지만 다행히

이 기능을 안드로이드 스튜디오에서 제공

해주고 있습니다~ (역시 구글!!!!!)

이클립스에서 안드로이드 스튜디오로

프로젝트 import 하는 방법

방법은 링크된 링크의 글을 참고해 보세요~

하지만 스튜디오에서도 분명 불편한거 있습니다

바로 디버깅과 에러 검색 기능이

안드로이드 스튜디오에서는 좀 많이

불편하고, 에러 표시도 이클립스만큼

직관적이지 않습니다.

스튜디오 vs 이클립스

제가 지금 생각하기에는 이제 안드로이드

개발을 처음 시작하시는 분들은 오히려

이클립스를 사용할 것이냐, 스튜디오를

사용할 것이냐를 고민할 필요가 없다고

생각했습니다. 이유는 최근게 스튜디오이고,

어차피 처음이라 잘 모르면 이클립스로 하나

스튜디오로 개발을 하나 모르기는 마찬가지이므로

최신 거인 스튜디오로 하는게 더 좋다고 생각했기

때문입니다. 게다가 스튜디오 서적들도 많이

나오고 있을 테니 공부하기도 쉬울 거고...

그런데 pdReport 카페나 블로그를 통해

문의 주시는 분들 중에 이클립스와 스튜디오 중에

어떤 걸 사용해야 되는지 문의를 많이 하시더라구요

어제도 그 질문을 받고 아래와 같은 내용의

답변을 드렸었습니다.

현 시점에서 스튜디오와 이클립스 중 어느 것을

사용할 것인지에 대한 고민은 할 필요가 없다고

봅니다. 아직까지는 스튜디오에서 만들 수 있는

어플은 이클립스에서도 똑같이 만들 수 있고,

이클립스에서 만들 수 있는 어플은 스튜디오에서도

개발할 수 있습니다. 방법과 구성에 차이지

어떤 걸 사용하느냐에 따라 개발이 확연하게

쉽거나 어려워 지지는 않습니다.

더욱이 안드로이드 개발이 처음이고,

자바도 해보신 적이 없으시다면 더더욱

개발 툴에 대한 고민을 하실 필요가 없습니다.

둘 중에 아무 거나 하나 잡고 공부를 하시는게

제일 급하고 중요한 사항이라고 봅니다.

[AngularJS] 앵귤러JS 프로그래밍 교육내용 및 예제 정리 - 커스텀필터(Custom Filter)

FILTER

AngularJS의 Controller 안에 $scope.변수명

형태로 선언데 변수들은 View 단에서 {{변수}} 

형태로 해당 변수 값을 출력할 수 있습니다.

binding 한다고 하더라구요~ 그런데 이 때

{{변수 | 필터명:옵션....}}

이런 형태로 변수명에 특정 필터를 걸어 주어

출력되는 값에 대한 조절이 가능합니다.

{{money | currency : 'won'}}

위와 같이 주면 money 라는 변수에

담긴 값이 화면에 출력될 때 환율표시가

자동으로 됩니다. 기본은 달러 표시이기

때문에 우리나라 화폐 단위인 won 으로

표시해 주기 위해 currency의 옵셥으로

'won' 을 줬습니다.사용하는 필터 뒤에

: 를 붙여줘서 옵셥을 줄 수 있습니다.

{{today | date : 'medium'}}

이런 식으로 날짜/시간 정보도

필터로 줄 수 있는데 저희가 흔히

알고 있는 yyyyMMdd 형태도

제공하고 별도로 AngularJS에서는

아래와 같은 옵션도 제공합니다.

단축형

전체날짜시간 : medium, short

전체날짜 : fullDate, longDate, 

mediumDate,shortDate

전체시각 : mediumTime, shortTime

위에가 실제 예제입니다.

위에 예제를 실행한 결과는

아래와 같습니다.

자바에서 substring과 같이 값을 자르는

기능도 필터로 구현할 수 있습니다.

$scope.val = '12345689';

위와 같이 controller에 값이 선언하고,

view를 아래와 같이 코딩했습니다.

<input type='number' step='1' ng-model='num'><br>

{{val | limitTo:num}}

limitTo 필터가 val의 일부분을 가지고 오는데

0자리에서 옵셥으로 준 num 자리까지의

숫자만 자릅니다.

예를 들면 만약 num=2 라면

{{'123456789' | ㅣlimitTo : 2}}

가 되는 것이므로 결과는 12 가 됩니다.

Custom Filter

지금까지는 AngularJS에서 제공하는

필터를 단순하게 사용한 예제였습니다.

컼스텀 필터는 사용자가 직접 자신이

필요한 filter를 만들어서 위와 같이 사용

하는 데 목적이 있습니다. 똑같이

바인딩 시킬 수 있고, 옵션도 주겠죠~

커스텀 필터 예제 pdReport 카페에서

받으시면 됩니다~

>받으러 가기<

주석 부분이 선명하지 않으니

예제를 다운 받아서 보시길

권해 드립니다... 죄송합니다 ㅠ

대략적으로 설명을 드리면

일단 filter 를 구현할 모듈을 생성했고,

해당 모듈의 이름은 demo입니다.

그리고 그 demo 모듈 안에서

커스텀 필터를 구현했습니다.

아 먼저 이 필터는 어떤 기능을 하는지

설명을 드리자면 위에 소스에서 body를

보시면 중괄호 안에 각각 0, 1, 2 값을

필터를 태우려고 하고 있고, 필터명은

ox입니다. 값이 0이면 결과로 x.

값이 1이면 결과로 o를 출력하는

정말 별 의미 없는 filter인데,

커스텀 필터를 직접 만들어 보는데

의미가 있는 것이므로 어떻게 커스텀필터를

만드는지만 보시면 될 거 같습니다.

demo모듈 안에 filter 구현부를 보시면

제일 처음에 map이 있는데 0이라는 키는

x라는 값을 갖고, 1이라는 키는 o라는

값을 가지고 있습니다.

그리고 이 map을 사용하는 function을

최종적으로 return해주고 있는데

이 function에 파라미터 data가

존재하는데 이 data로는 body에서

중괄호 안에 입력한 0, 1, 2,가

들어오게 됩니다. 그래서 이 값을 보고

filter 안에 function에서 o나 x를

최종적으로 리턴해주게 되고, 그 값이

view에 출력이 되는 겁니다.

AngularJS(앵귤러JS) 서비스(Service)와 팩토리(Factory)의 차이와 관련 예제

AngularJS

멀티캠퍼스 AnnularJS 교육 3일차 입니다.

앵귤러JS 관련 예제로 빠르게 8시간을

진행하다 보니 교육이 끝나면 진이 좀

빠지지만 그래도 회사에서 AngularJS

프로젝트를 하고 있는 상태에서 듣는

교육이라 내용 이해하는 데 많이

도움이 되고 있습니다.

개인적인 생각이지만... 이렇게 단기간

속성 교육은 어느 정도 알고 들어야

도움이 되는 거 같습니다. 아예 모르는

상태에서 처음부터 배우겠다는 생각으로

갔다가는 시간만 낭비하기 딱 좋은거 같습니다.

오늘도 AngularJS 교육에서도 많은 내용이

나왔는데 그 중에서 흥미를 끄는 내용이

있어서 올려 보겠습니다.

서비스와 팩토리 관련 내용입니다.

AngularJS로 프로젝트를 하면서 factory를

특히 많이 사용했습니다. 하지만 service,

directive, constant 등 인터넷에서 검색해서

사용하기는 하지만 도대체 각각의 정확한

용도와 차이를 아직까지도 모르고 있어서

이걸 맞게 사용하고 있는 건지가 의문이었는데

오늘 그 중 서비스와 팩토리를 설명해 주는

부분이 있어서 귀가 번뜩했습니다.

Factory

일단 어제 강의에서도 Factory에 대한 내용이

잠깐 나왔던게 있어서 정리해 보겠습니다.

$scope 을 이용해서 View와 Controller를

연결을 해줍니다. 그리고 실질적인 화면 작업은

Controller에서 해주는데 이 때 기능 구현 시

하나의 controller에서가 아닌 다른 controller에서도

사용될 수 있는 기능적인 부분을 factory로 따로

빼서 관리를 한다고 합니다. 그리고 이를 위해

factory에서는 변수나 함수를 return을 해주는데

이 return 되는 값에 한해서만 다른 module에서

사용하는 것이 바람직하다. 그리고 이렇게 return을

해주는 이유는 팩토리는 내부는 변수나 함수를

var 타입으로 선언해서 외부에서는 해당 변수나

함수에 접근하지 못하도록 하는게 바람직하기

때문이라고 합니다. 대신 외부에 제공할 변수나

함수에 대해서만 return 형태로 전달해서

사용할 수 있게 하는 겁니다.

위에서 보시면 factory 내부의 변수와 함수는

모두 var 타입으로 선언이 되었습니다.

그러므로 위에 factory를 의존성 주입한

다른 module에서도 위에 변수나 함수에는

직접 접근을 할 수가 없습니다.

대신 factory에 마지막에서 return을 해주는

값들이 있는데 이 거에 대해서는 팩토리

의존성 주입이 된 다른 변수에서 접근할 수

있습니다.

Service

팩토리와 달리 service에서는 return 되는

값이나 변수가 없습니다. 그럼 이 때 생각해

봐야 될 게... 만약 서비스 내부도 팩토리처럼

var 타입의 변수/함수만 있다면 해당 service를

의존성 주입 받은 다른 module에서는 이 서비스에서

얻을 수 있는 값이 하나도 없게 됩니다. 팩토리는

return을 통해서 var 타입의 변수/함수를 외부에서도

사용할 수 있게 할 수 있는데 반해 return 형태가

없는 service는 외부에서 접근 자체가 불가능합니다.

그러므로 service는 외부에서 접근할 수 있도록

변수/함수는 this를 사용해서 선언해 줍니다.

위에 serivce를 보시면 this.변수/함수 형태로 선언이

되고 있습니다. 이러한 값들은 해당 서비스의 의존성을

받은 다른 외부 모듈에서 접근이 가능합니다.

그렇다고 service 내부의 모든 함수나 변수를 this로

선언할 필요는 없습니다. 외부접근을 막을 건 var로

선언해서 막고, 외부에 공유할 것만 this로 선언하면

되는 겁니다.

서비스와 팩토리의 용도

이 쯤 되면 그럼 서비스를 써야 되나?

팩토리를 써야 되나? 하는 의문 하나가

먼저 생기고, 또 이런 차이는 도대체

왜 존재하고, 어떻게 써먹어야 되는거지?

란 구금증도 생기게 됩니다.

여기서부터는 교육을 듣고 블로그에

정리하면서 든 제 생각 위주로 작성을

해보도록 하겠습니다. 판단은 읽으시는

분들께서 해주세요 ㅠㅠ 저도 오늘 처음

교육 듣고, 복습 하면서 곱씹어 보는 겁니다.

일단 controller라는 놈은 view와 연결되어

view 와 관련된 구현을 하는 놈이라고

보면 될 거 같습니다. 그럼 controller에서

화면을 구현하다 보면 단순하게 보이는 것만

구현하는 게 아니라 필연적으로 기능적인 개발도

수반되게 됩니다. 그런 이 화면 구현과

기능 개발을 controller에서만 하게 되면

화면의 구현과 비즈니스 로직 개발이

서로 뒤섞이게 됩니다. 즉 화면 구현이 아닌

부분(기능)을 view단과 분리를 시키기 위해

서비스나 팩토리가 존재하는게 아닌가 싶습니다.

결국 function 형태로 그 부분을 외부로 뺄건데...

이 때 그 function 내용에 특성에 따라

AngularJS에서는 service로 분리해낼 수도 있고,

factory로 분리해낼 수도 있는 겁니다.

위에서 말했 듯이 만약 해당 부분의 내용 중

일부만을 외부에 보여주고 싶다면 해당 변수나

함수는 var 타입으로 선언하면 되고, 외부로

공유하고 싶은 건 this로 선언해 주면 됩니다.

그런데 앵귤러JS의 팩토리에 경우 return하는

형태로 외부 모듈에서 접근할 수 있게 해주므로

일부만 외부에 제공하려면 factory를 사용하면

된다는 결론을 내릴 수 있지 않나 싶습니다.

또 다른 관점에서 만약 외부로 뺄 내용이

외부에서 저급해도 상관이 없다면 굳이

일부만 return해서 제공해주는 factory가 아닌

service를 사용하면 되는 거겠죠~~~

결국 factory나 service나 공통 부분을

외부로 빼서 관리를 하고 외부에서

접근하는 형태로 특정 기능이나 값을 제공하는

역할을 한다는 것은 다르지 않다는 겁니다.

접근권한, 객체지향

이렇게 주저리주저리 이야기를 하다보니

어라?? 어디서 많이 들었던 얘기들인데?

이런 생각이 갑자기 듭니다.

처음 전자과에서 소프트웨어 쪽으로

전향 한답시고 프로그램 관련 수업만

들었을 때 수업에서 줄기차게 들었던

자바의 특성들과 크게 다르지 않다라는

생각이 들었습니다. C와 같이 폭포수 코딩을

하면 가독성/관리/효율적인 면에서 많은

문제가 생겼고, 그렇게 때문에 객체지향의

언어가 부각 되었으며, 그 객체지향의

특성 중에는 재사용이 있었습니다.

따로 선언만 해놓으면 언제든 그 기능을

가져다 사용할 수 있다!!! 란 개념은

제가 오늘 얘기한 angularJS의 서비스나

팩토리의 용도와 크게 다르지 않다라는

생각이 듭니다. 또 자바에서는 public,

private 등과 같은 선언자를 사용해서

변수나 메서드접근에 제한을 주고 있습니다.

AngularJS에서도 var나 this를 이용해

외부 module에서의 접근을 제한하고 있구요~

이렇게 생각을 하니 오늘 AngularJS에 대한

이해도가 조금은 더 올라가서 친숙도가

조금은 상승한 거 같네요~~~

뭐 제 설명이 맞는지 틀린지는 모르겠지만

적어도 저 자신은 오늘 교육에 대해 납득을

시킨 거 같아 뿌듯합니다 ㅋㅋㅋㅋㅋㅋㅋ

ㅎㅎ 오늘 설명한 내용은 오늘 교육 중

한 시간 분량도 안되는 내용인데 ㅋㅋ

저도 정리가 필요하므로 시간 날 때마다

계속 블로그에 올려 놓도록 하겠습니다!