HTML textarea 속성 - 자동 높이 조절(auto resize) 예제

<textarea>

집이 멀어서 금요일에 칼퇴를

해본들 고속도로에서 보내는

시간이 더 많기 때문에 퇴근을

안하다가 지금까지 회사에 있네요.

퇴근하기 전에 정말 간단한 예제나

하나 올리고 퇴근하렵니다~

내일 강화도로 놀러가서 이틀동안

블로그 포스팅을 할 수 없으니

짜잘한 내용으로 얼른 포스팅 하나

하고 집에 가서 내일 갈 준비해야죠~

아 참고로 이 포스팅은 전에 올린

modal에 연장된 글입니다~

모달창 예제

위에 캡처화면은 모달을 띄워서

textarea에 특정 값을 보여주는

창인데;;;; 대괄호, 중괄호 두 개만

보이고 정작 중요할 것 같은 부분은

아예 보이질 않네요... 생각 같아서는

resize 어트리뷰트 하나 주면 되지

않을까 생각해보지만 제 생각대로

되는게 세상에 몇 가지나 있겠습니까?ㅋ

위에 띄운 modal 창에 있는

textarea 태그입니다. 보시면

onfocus="resize(this)" 

라는 부분이 보이는데 텍스트 영역

(textarea)에 포커스가 맞춰지면

자동으로 안에 내용에 맞게 textzrea의

높이를 조절해주는 resize 함수를

호출하고 있습니다.

resize 함수는 아래와 같습니다.

함수 밖에 있는 elasticModal 어쩌고

저쩌고 하는 부분은 모달창을 띄우는

부분이니 무시하시면 됩니다

강화도 여행 끝나고 와서 포스팅

남겨 놓겠습니다^^

AngularJS와 NodeJS간 호출(통신)하는 예제(KAFKA)

NodeJS

본사에서 프로젝트를 하다 보니 화면 작업을

하고 있고, 어느 순간 AngularJS라는 것을

사용하고 있고, 또 그렇게 작업을 하다가

막히는게 있어서 찾아보니 AngularJS가

NodeJS를 기반으로 돌아가고 있다고 하네요.

전 뭐 AngularJS와 NodeJS를 같이 사용해야

되는 건가 보네.. 라고 막연하게만 생각하고

있었는데 그렇지는 않다고 하네요 ㅋㅋㅋ

또 오늘 마침 NodeJS 관련 기사가 있길래

읽어 보니 NodeJS가 주목 받는 이유 중에

하나가 프론트엔드와 백엔드 작업을 할 때

화면과 같이 눈에 보이는 부분은 JavaScript

로 작업을 하고, 눈에 보이지 않는 서버 관련

작업은 JavaScript로 하지 않아 이 두 작업이

서로 다른 기술을 필요로 했으나 NodeJS에서는

프론트엔드건 백엔드건 모두 JavaScript로

작업을 할 수 있게 해서라고 합니다.

기존 자바스크립트 개발자들은 물론 저와 같이

자바스크립트를 해보지 않은 개발자들까지

관심을 가질 수 밖에 없게 되는 것이죠~

어찌 되었든 이러한 이유로 AngularJS로

개발을 하고 있고 위에서 말한 것처럼 화면,

서버 둘 다 JavaScript로 개발을 하고 있습니다.

정확히는 AngularJS로 개발을 하고 있죠.

(AngularJS 자체가 JavaScript 기반)

닥치는 데로 하다 보니 오늘 하루종일 삽질을

하다가 저녁 먹고 와서 해결한 게 있어서

푸념 삼아 블로그에 올려 봅니다.

AngularJS로 개발하고

구동은 NodeJS로...

아직도 개념이 정확히 잡히지 않은 상태라

표현이 길고 투박합니다;;;;

화면 개발을 AngularJS로 하고 있지만

그 바닥에는 NodeJS가 있는게 당연한 거지만

막상 제가 개발하고 있는 프로젝트에 NodeJS

문법이 사용되고 있다는 건 오늘 알게 되었답니다;

 

프로젝트를 구동할 때에 위에

파일로 실행을 하는데 전 이유도

모르고 그렇게 저 파일을 NodeJS로

실행하면 된다고 하니 실행만 했죠..

그러다가 오늘 이 파일에서 문제를

해결해야 되는 case가 생겨서 

기존AngularJS 방식대로 작업을

하려고 하는데 아무리 해도 안되는

겁니다. 나용을 간단히 설명하자면

기존에 Controller나 $scope, factory 로

개발한 화면 부분과 저 위에 실행하는

파일 간 통신을 할 필요가 생긴 겁니다.

그런데 아무리 해도 이 두 개가 연결이

안되는 겁니다... 계속 찾다 보니 이 실행

파일은 NodeJS 문법으로 작성된 소스이고,

화면 부분은 AngularJS 부분이니 서로 

다른 언어 간 통신을 하겠다고 둘 다

AngularJS 관점으로만 접근을 하니

NodeJS 부분이 제대로 돌아갈 리가

없는 거죠.....  결국 30분 전에

방법을 찾았습니다. 결과 내용은

다음과 같습니다.

AngularJS의 Controller에서 버튼을 눌러

NodeJS 의 특정 함수를 호출한다!

참 이 거 할려고 정말 오늘 하루 종일

엄청난 시간을 할애 했습니다...

<View>

 

<controller>

<NodeJS 소스>

소스 내용도 길지 않고, 내용도 별거 없지만

그건 알았을 때 이야기이죠... 몰랐던 거

알게된 걸로 전 오늘 만족할랍니다~

아 간단하게 설명을 드리자면 View 부분에

html 소스에서는 버튼을 누르면 test()라는

함수를 호출하고 test() 함수는 controller에

구현되어 있습니다. 호출된 test() 함수에서는

/performbatch 라는 값으로 nodeJS 부분을

호출하고 있고, 제일 밑에 NodeJS의 소스를

보시면 /performbatch라는 글자를 찾으실 수

있으실 겁니다. 그 값 옆에 function이 호출된

겁니다. 이로써 JavaScript 기반의 화면에서

NodeJS 부분을 호출에 성공을 한 겁니다 ㅠ

앵귤러JS(AngularJS) 필터(filter) 예제 및 소스

AngularJS

회사에서 AngularJS로 프로젝트를 진행한지도

반 년이 넘어 가고 있습니다. 그 동안 앵귤러2.0이

나와서 1.0에서 2.0으로 넘어가야 되나 고민도

했었지만 아직 AngularJS 내부에서도 문제가

많은 거 같고, 예제도 적어 기존의 버전을

유지하기로 했고, 검색을 함에 있어 구글의

위대함을 알게 되었으며, 이래저래 책도

보면서 지금은 어느 정도 작업이 진행되고

있는 상태입니다...

현재까지는 AngularJS 선택에 큰

후회는 없는 상태이며, 개인적으로는

참 좋은 기술 하나 익히고 있다라는

생각을 가지고 있습니다 ㅎㅎ

이번에 멀티캠퍼스에서 AngularJS

교육을 듣고 있는데 복습 겸 공부 겸

블로그에 주저리 주저리 생각나는 데로

좀 적어 놓으려고 합니다 ㅎㅎㅎ

시간 날 때마다 올려 놓으려고 합니다.

시간에 쫓기는 교육이고, 단체 교육이라

아시는 분들께는 기초적인 내용이

될 수도 있겠다는 생각이 듭니다.

필터($Filter)

전체 예제 소스는 pdReport 카페에

올려 놓았으니 가셔서 받으세요~

예제 받기

$scope.value = 1000;

{{ value | currency }} : $1,000

/*

화폐 단위를 바꾸기 위해서는 각 나라 별로 js 파일이 존재하는 데 

경로를 불러오면 된다(수업이 너무 빨라서 풀경로를 모르겠습니다 ㅠㅠ

*/

$scope.jObj = '{name : 'Mike'}';

{{ jObj | json }} : {"name" : "Mike"}

$scope.str = 'AbCdEfGh';

{{ str | lowercase }} : abcdefgh

$scope.int = 3.333333333333;

{{ int | number : 5 }} : 3.3333

<div>

<input type="text" ng-model=search.id>

</div>

<ul>

<li ng-repeat="user in users" | filter:search>

<p>{{ user.id}} | {{user.name}} | {{user.email}} </p>

</li>

</ul>

/*

search 값에 따라 테이블의 값이 조회 되어 해당 값들로만 재정렬 된다.

*/

 ng-repeat="user in userList" | orderBy:order:reverse">

/*

테이블의 값들이 order 에 해당하는 필드 순으로 정렬 되는데

reverse에  값이 true/false 이냐에 따라 정렬/역정렬 된다

*/

<tr ng-repeat="obj in objs" | filter : q : strict>

/*

objs 안에 있던 배열의 값들이 테이블로 표현되는 q 변수 안에 담긴 값에 따라 검색이 되는데

이 때 strict의 값이 true이면 q 값과 정확히 일치하는 행만 화면에 출력된다.

*/

{{ 123456789 | limitTo : 2}} : 12

/*

123456789의 첫 두자리 값만 출력

*/

{{ 123456789 | -2 }} : 89

/*

끝 두 자리 값만 출력

*/

{{ 123.4455 | number:2 }} : 123.45

/*

소수점 두 째 자리까지 출력(그 밑으로 소수자리가 더 있으면 셋 째 자리에서 반올림)

*/

{{123.4455 | number:-2 }} : 100

/*

십의 자리에서 반올림

*/

/*

날짜 표현 방식이 yyyy-MM-dd 말고도 angularJS에서는 위와 같이도 제공한다

*/

<select ng-model="arrCountry" ng-options="country.name group by country.continent for country in countryList" ng-request="true">

/*

아래와 같이 selectbox가 생성되는데 country 배열 안에 있는 continent 값으로 group이 지어진다.

그리고 repeat를 사용했으므로 countryList 안에 있는 배열들이 총 세개가 찍히는데 이 때 값은

continet에 매핑되는 name 값으로 화면에 출력된다.​

*/

음 소스까지 손으로 다 직접 칠려고 했는데

점점 귀찮아져서 캡처해서 올렸습니다 ㅎ

여기까지 올린게 다는 아니지만 filter

부분에 대해서 간단하게나마 올려 봤습니다.

다음에는 Form 관련 예제 올려 보겠습니다

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에 대한

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

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

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

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

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

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

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

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

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