오랜만에 포스팅합니다.

포탈 관리자 작업하다가 아래와 같은 에러가 발생하여....

outerHTML 이 뭐지....???????  하는 궁금증이 생겨 알아보았습니다.

outerHTML을 설명하기위해 innerHTML과 비교하여 설명하겠습니다.

 * (html element).outerHTML : 현재 요소를 포함한 내부 html 전체를 반환한다.

###html

<div class="exampleTB">

<table class="useYN">

<tr>

<td>

<input type="radio" value="use">사용<br>

<input type="radio" value="unused">사용 안함

</td>

</tr>

</table>

<table class="job">

<tr>

<td>

<input type="radio" value="use">학생<br>

<input type="radio" value="unused">직장인

</td>

</tr>

</table>

</div> 

위의 예제 코드에서 현재 "useYN"을 기준으로 outerHTML을 적용하면,

 * (html element).innerHTML : 현재 요소는 제외하고 내부 html 전체를 반환한다.

위의 예제 소스를 이용하여

현재 "useYN"을 기준으로 innerHTML을 적용하면,

결과 useYN 요소를 제외하고 내부 html이 모두 반환된다.

상계동 큰언니, 대구 의료원 선배님!

지난번에 팀플 게시판 관리에서 포커싱 이슈 처리할 때 생각 나시나요??

그때 왜 트리거 건 후 focus() 함수가 안먹혔는지 이유를 찾아내서 포스팅합니닷!!

1. EDA (Event Driven Architecture) 란?

EDA를 보다 쉽게 설명하기위해 SOA와 비교하여 설명하겠습니다.

- SOA (Service Oriented Architecture) : 동기식 요청/응답 방식, 순차적 처리

- EDA (Event Driven Architecture) : 비동기식 배포/구독 방식, 비순차적 처리

다시말해서, SOA는 1.이벤트를 요청하고 2.요청에 대한 응답을 처리한 후 3.순차적 처리하는 방식이고

EDA는 이벤트를 만나 요청을 보내도 이벤트 처리에 대한 내용은 발송자가 전혀 관여하지 않는다. 즉 이벤트 발송자와 수신자는 서로 독립적으로 수행되며 보다 향상된 유연성을 제공한다.

구조가 자주 바뀌는 환경에서는 EDA를 사용하는 것이 좋고 순차적인 처리가 보장되어야 하는 경우에는 SOA가 적합하다.

저희 프로젝트에서 클라이언트 사이드 JS는 EDA방식이므로 트리거 문장 이후에 focus() 함수가 작동하지 않았었고,

트리거 한 함수 안에 sucess 이후에 focus() 함수를 넣어야 정상 작동 했던 것이었습니다!

문제해결 짝짝짝!!

출처: http://bigstory.tistory.com/116

 html 태그에 있는 정보들를 한번에 받아와 리스트 만드는 방법!

제목 붙이기가 어렵네요...

<예제 html>

### html

<ul class="list_org revertEnabled">

<li class="template" data-external-key="#externalKey#" data-name="#name#" data-email="#email#" data-type-code="#typeCode#" data-master-key = "${userindex}">

<div class="_eddrViewWrap">

<div class="eddrWrap">

<span class="eddrView" title="#email#">#name#&nbsp;</span>

<a href="#" class="btn_del"><img src="${url.context}/images/swp/common/b.gif" width="8" height="8" alt="삭제"></a>

</div>

</div>

</li>

</ul>

위의 태그에서 name, email, typeCode, externalKey 의 값을 받아와 map으로 만들려고한다.

원래 하던 방법은 jQuery를 이용해 해당 값들을 받아온 후 map으로 만들어야한다.

하지만 값을 받아오는 동시에 map으로 return하는 방법이 있다!!

바로 [selector].map(function() {...}).get() 을 사용하면된다.

### js

//  필요한 정보만으로 리스트 만들기

var $inviteMember = $('.list_org');

var _memberList = $inviteMember.map(function() {

var $this = $(this);

return {

name: $this.data('name'),

email: $this.data('email'),

typeCode: $this.data('typeCode'),

externalKey: '' + $this.data('externalKey') // int -> string

};

}).get();

위와 같이 사용하면 한번에 필요한 정보를 리스트로 만들어 사용할 수 있다!

그럼 다들 불금!