jQuery 1.6이전에는 attr() 함수를 이용하여 모든 태그의 속성을 제어가 가능했지만 

1.6부터는 prop()라는 함수가 추가되어 attr() 함수의 역할을 나누어 주게 되었습니다.

일반적인 태그속성의 값을 변경하고자 할때는 attr()함수를 사용하고 

태그속성에 따라서 기능이 제어되는 속성에 대해서는 prop()함수를 사용합니다.

간단하게 alert창을 띄워서 각태그 값을 비교해보도록 하겠습니다.

우선 BODY 태그내에 다음 코드를 추가해봅니다.

<input type="checkbox" checked="checked" id="check_box" class="check_class" />

attr/prop 함수를 이용하여 각 속성들의 결과값을 가져와 보겠습니다.

$(function(){
	//checkbox의 아이디속성값
	var prop_id = $(":checkbox").prop("id");
	//checkbox의 클래스속성값
	var prop_class = $(":checkbox").prop("class");
	//checkbox 체크유무(true/false)
	var prop_checked = $(":checkbox").prop("checked");
	
	//checkbox의 아이디속성값
	var attr_id = $(":checkbox").attr("id");
	//checkbox의 클래스속성값
	var attr_class = $(":checkbox").attr("class");
	//checkbox의 체크 속성값(checked/undefined)
	var attr_checked = $(":checkbox").attr("checked");
	
	alert("id값 prop : " + prop_id + " , attr : " +  attr_id);
	alert("class값 prop : " + prop_class + " , attr : " +  attr_class);
	alert("checked값 prop : " + prop_checked + " , attr : " +  attr_checked);
});

실행해보도록 하겠습니다.

체크박스id속성값비교

체크박스class속성값비교

체크박스checked속성값비교

"checked" 속성을 제외한 나머지는 prop() / attr() 함수결과가 동일하게 나왓습니다.

"checked" 속성은 기능관련 속성이라 prop 함수에서는 true/false로 출력을 시켜줍니다.

이번에는 text 태그를 한번 비교해보도록 하겠습니다.

<input type="text" id="text_field" class="text_class" readonly="readonly" disabled="disabled" />

스크립트를 작성해보도록 합니다.

$(function(){
	var prop_id = $(":text").prop("id");
	var prop_class = $(":text").prop("class");
	var prop_readonly = $(":text").prop("readonly");
	var prop_disabled = $(":text").prop("disabled");
	
	var attr_id = $(":text").attr("id");
	var attr_class = $(":text").attr("class");
	var attr_readonly = $(":text").attr("readonly");
	var attr_disabled = $(":text").attr("disabled");
	
	alert("id값 prop : " + prop_id + " , attr : " +  attr_id);
	alert("class값 prop : " + prop_class + " , attr : " +  attr_class);
	alert("readonly값 prop : " + prop_readonly + " , attr : " +  attr_readonly);
	alert("disabled값 prop : " + prop_disabled + " , attr : " +  attr_disabled);	
})

작성이 되었다면 실행을 해보도록 합니다.

텍스트id속성값비교

텍스트class속성값비교

텍스트readonly속성값비교

텍스트disabled속성값비교

위처럼 속성 값을 가져올경우에는 

$("").attr("속성명") / $("").prop("속성명") 

처럼 주면 됩니다.

이번에는 속성값을 변경 해주는 것을 알아보도록 하겠습니다.

속성값 변경은 

$("").attr("속성명","적용하고자하는값") / $("").prop("속성명","적용하고자하는값")

처럼 입력값 하나를 추가해주시면 되겠습니다.

기능에 대한 속성에 대한 값은 prop 함수를 이용하여 true/false 로 적용해주시면 되겠고

일반 속성에 대한 값은  attr함수를 이용하여 값을 적용해주시면 되겠습니다.

prop() 함수를 사용하여 속성값 변경하기

체크박스의 checked 속성을 변경해보도록 하겠습니다.

body태그에 다음 코드를 작성해봅니다.

<input type="checkbox"  />

실행을 시켜보면 그냥 체크안된 체크박스하나만 덩그러니 나타날겁니다.

그럼 prop() 함수를 적용하여 체크되게 코드를 작성해보도록 하겠습니다.

$(function(){
	$(":checkbox").prop("checked",true);
})

체크박스가 체크가 되어 화면에 출력된 것을 확인 할 수 있습니다.

attr() 함수를 사용하여 속성값 변경하기

attr함수를 이용하여 class속성을 추가해보도록 하겠습니다.

class를 추가/삭제 하는 함수가 별도로 존재하지만 이 함수는 이후에 설명하도록 하겠습니다.

style태그에 클래스를 작성해주도록 합니다.

.large_checkbox {
	width: 100px;
	height: 100px;
}

다음처럼 스크립트 호출을 해보도록 합니다.

$(function(){
	$(":checkbox").attr("class","large_checkbox");
})

결과를 한번 보도록 해보겠습니다.

위처럼 체크박스의 가로세로 사이즈 변경하는 클래스가 정상적으로 적용되어 

체크박스 사이크가 커진것을 확인 할 수 있었습니다.

prop 속성만을 사용할수도 있겠지만 각 속성에 따라 지원유무에 대한 차이가 있을수 있으므로 

prop가 안되면 attr로 적용해보시면 되실거 같습니다 ^^;;

by 개발로짜

"ExtJS_OS" 님께서 질문주신 ExtJS 4.X버전으로 DATAVIEW 응용내용에 대한 답변 샘플입니다.

질문1)  DataView를 사용시 동적으로 tpl을 변경할 수 있을 까요? el에서 변경을 해야할지요..?

답변 : 네 동적으로 TPL속성을 이용하여 템플릿 변경이 가능합니다.

패널 툴바에 버튼 클릭시 tpl 타입변경은 다음과 같습니다.

데이터스토어에 대한 데이터는 동일하다 가정하고 템플릿을 변경하게끔 예를 들었습니다.

Style 코드 정의

div.item {
	background-color: blue;
	color: white;
}
span.item {
	background-color: red;
	color: white;
}

memory 타입의 데이터 스토어를 이용한 ExtJS 코드

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '동적 TPL 생성예제',
		width : 200,
		height : 200,
		items:[{
	              xtype : 'dataview',
	              id : 'dynamic_dataview',
            	  tpl: new Ext.XTemplate(
	                      '<tpl for=".">',
	                           '<div class="item">',
	                                   '{title}',
	                           '</div>',
	                       '</tpl>'),
	              itemSelector: '.item',
	              store : Ext.create('Ext.data.Store',{
	                              fields : ['title'],
	                              data: [
	                                   {title:'EXTJS_DATAVIEW내용1'},
	                                   {title:'EXTJS_DATAVIEW내용2'},
	                                   {title:'EXTJS_DATAVIEW내용3'},
	                                   {title:'EXTJS_DATAVIEW내용4'}
	                              ],
	                              proxy: {
	                                   type: 'memory'
	                              }
	                       })
        }],
		fbar : [{
			text : '동적 TPL 변경하기',
			handler : function(btn) {
				//dataview컴포넌트.tpl 속성에 새로운 XTemplate 적용
				Ext.getCmp("dynamic_dataview").tpl = new Ext.XTemplate('<tpl for=".">',
								                          					'<span class="item">',
								                                  				'{title}',
								                          					'</span>',
								                  	  					'</tpl>');
				//dataview컴포넌트객체.refresh()를 통해 화면 재정의
				Ext.getCmp("dynamic_dataview").refresh();
			}
		}]
	})
})

동적 템플릿의 핵심은 dataview의 tbl에 새로운 템플릿을 담아 주신 다음 

dataview refresh() 함수를 적용해시면 되겠습니다.

질문2)  DataView의 Store를 원하는 시점에 호출이 가능한가요?

답변 : 네 동적호출 가능합니다. 

         단, proxy type이 'ajax'일 경우이거나 'memory' 타입의 data내에 값이 존재하지 않는상태에서 

         이벤트 발생시 store에 add로 작업해주셔야 합니다. 

         이유는 Store가 autoLoad되는 시점은 데이터스토어 공간내에 data에 데이터가 존재하면 

          autoLoad 속성을 무시하고 자동 호출이 됩니다.

동적으로 Store 호출을 위한 샘플 코드 입니다

이벤트 발생시 데이터스토어 load하여 dataview에 출력시키는 샘플스크립트

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '동적으로 데이터스토어 호출',
		width : 200,
		height : 200,
		items:[{
	              xtype : 'dataview',
	              id : 'dynamic_dataview',
            	  tpl: new Ext.XTemplate(
	                      '<tpl for=".">',
	                           '<div class="item">',
	                                   '{title}',
	                           '</div>',
	                       '</tpl>'),
	              itemSelector: '.item',
	              store : Ext.create('Ext.data.Store',{
	                              fields : ['title'],
	                              proxy : {
	      							type : 'ajax',
	      							api : {
	      								read : '/dynamic.json'
	      							},
	      							reader : {
	      								type : 'json',
	      								success : "success",
	      								root : 'items'
	      							}
	      						}
	                       })
        }],
		fbar : [{
			text : '데이터스토어 호출',
			handler : function(btn) {
				Ext.getCmp("dynamic_dataview").getStore().load();
			}
		}]
	})
})

Ajax Call에서 response 받고자 하는 JSON 페이지내 샘플코드

{
	"items" : [{"title" : "동적데이터1" },{"title" : "동적데이터2" },{"title" : "동적데이터3" }],
	"success" : true
}

json 파일대신 db조회후 동적 데이터 생성할시,

 php / jsp 등 해당 json 파싱을 사용하셔서  규격에 맞춰서 작업하시면 되겠습니다.

by 개발로짜

이번 포스팅은 Mybatis 기본 연동법에 추가로 트랜잭션 설정을 잡아주고자 합니다.

MySQL 기준으로 설명합니다.

테이블은 각 DBMS에 맞추어 CREATE 해보시면 되겠습니다.

테이블을 생성해보도록 하겠습니다.

CREATE TABLE mybatis_table (
  title VARCHAR(100) NOT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8

※ MySQL은 트랜잭션적용을 해주기 위해서는 engine 을 INNODB로 설정을 잡아주셔야 트랜잭션 처리가 가능합니다.

트랜잭션은 여러개 데이터에대한 CRUD 처리 시 하나라도 실패하면 이전에 등록,수정,삭제된 데이터를 모두 롤백 시켜주는 기능입니다.

"나는 그냥 실패직전에 데이터는 그냥 처리하고 실패된 데이터는 수정해서 다시 DB처리할껀대?"

라고 생각하시는분들은 이번 포스팅을 그냥 넘어가주셔도 되겠습니다.

소규모 프로젝트에서 프레임워크 설정을 보면 트랜잭션 설정을 해주지 않은 프로젝트가 꽤 있었습니다.

이럴경우 데이터가 꼬이거나 직접 db에 접속해서 일일이 수정/삭제 해주는 작업을 하니 

일관성있게 트랜잭션 설정을 필수로 해주어야 한다고 본인은 생각합니다.

이전 코드에 이어서 Mybatis 트랜잭션 설정을 잡아주도록 해보겠습니다.

2014/11/14 - [개발에필요한연동법/스프링연동] - Spring3 + MyBatis 기본설정 + 연동테스트 후 쿼리로그 확인해보기

service 영역에 "@Transactional" 어노테이션을 적용하여 트랜잭션처리를 해주는 방법이 있던대

 이방법에 대해서는 코드를 작성해줄때마다 필요한 메서드에 설정을 해주어야 합니다.

하지만 저는 어노테이션을 이용한 트랜잭션 설정은 하지 않고 

직접 application-config.xml 파일에 트랜잭션 설정을 잡아주도록 하겠습니다.

pom.xml에 다음 라이브러리를 추가해주도록 하겠습니다.

<dependency>
	<groupId>org.aspectj</groupId>
	<artifactId>aspectjweaver</artifactId>
	<version>1.8.4</version>
</dependency>
<dependency>
	<groupId>cglib</groupId>
	<artifactId>cglib-nodep</artifactId>
	<version>3.1</version>
</dependency>

mvc-config.xml 파일내에 "context:component-scan" 태그를 다음처럼 재작성해주세요

<context:component-scan base-package="com.spring" use-default-filters="false">
    <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" />
</context:component-scan>

 application-config.xml 파일내에 "beans" 태그에 다음 속성을 추가해줍니다.

xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"

beans 태그 속성중 xsi:schemaLocation 속성값내에 다음 URL을 추가 작성해주도록 합니다.

http://www.springframework.org/schema/aop 
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx 
http://www.springframework.org/schema/tx/spring-tx.xsd

beans 태그 내에 다음 태그를 추가해주도록 합니다.

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
       <property name="dataSource" ref="dataSource"/>
</bean>
	
<aop:config proxy-target-class="true">
	<aop:pointcut id="serviceOperation" expression="execution(public * com.spring..service.*Service.*(..))" />
	<aop:advisor id="transactionAdvisor" pointcut-ref="serviceOperation" advice-ref="txAdvice"/>
</aop:config>
		
<tx:advice id="txAdvice" transaction-manager="transactionManager">
	<tx:attributes>
		<tx:method name="save*" rollback-for="Exception"/>
		<tx:method name="update*" rollback-for="Exception"/>
		<tx:method name="delete*" rollback-for="Exception"/>
	</tx:attributes>
</tx:advice>

상단 "tx:advice" 태그내 "tx:method"태그의 name은 

service영역내에 트랜잭션을 처리하고자 하는 메서드명을 정의해주는 겁니다.

인터셉터 URL 지정해주는 것과 비슷한 개념입니다.

2014/11/12 - [개발에필요한연동법/스프링연동] - Spring3 인터셉터와 세션을이용하여 로그인 처리해보기

Service 패키지를 생성 후 다음 템플릿 코드를 작성해주도록 합니다.

StudyService.java 샘플코드

public interface StudyService {	
	public void saveTest() throws SQLException;
}

StudyServiceImpl.java 샘플코드

@Service
public class StudyServiceImpl implements StudyService {
	@Autowired
	private StudyDao dao;

	@Override
	public void saveTest() throws SQLException {
		dao.saveTest("글등록테스트1");
		dao.saveTest(null);
	}
}

※ DAO 클래스에 "@Repository" 어노테이션이 필수선언이라면 

Service 클래스에는 "@Service" 어노테이션을 필수로 설정해주셔야 합니다.

이어서 컨트롤러에 다음 코드를 추가 작성합니다.

@Autowired
private StudyService studyService;

@RequestMapping("/saveTest")
public void saveTest(){
	try {
		studyService.saveTest();	
	} catch (Exception e) {
		e.printStackTrace();
	}
}

전에 생성했던 Dao/DaoImpl 에 다음코드를 추가합니다.

StudyDao.java 추가 코드

public void saveTest(String value) throws SQLException;

StudyDaoImpl.java 추가 코드

@Override
public void saveTest(String value) throws SQLException {
	query.insert("query.saveTest",value);
}

이어서 query.xml에 insert 쿼리문을 작성합니다.

query.xml 추가코드

<insert id="saveTest" parameterType = "String">
	INSERT INTO mybatis_table(title)
	VALUES(#{value})
</insert>

이전 DB연동 포스팅과 다른점이 있다면 이전에는 Controller -> Dao를 바로 호출 하는 형식이었는데 

트랜잭션을 Service단에 묶어서 재작성하였습니다.

Conroller -> Service -> Dao 이러한 구조로 진행이 되는데 

트랜잭션 처리를 위해 Service부분에 같은 Dao메소드를 2번 호출해주었습니다.

하나는 제대로된 값을 set, 나머지는 NULL값을 INSERT하도록 진행하였습니다.

샘플테이블 제작한 TITLE 컬럼을 확인하면 NOT NULL이므로 

마지막 NULL값이 INSERT될시 에러를 출력시키면서 롤백이 되어야합니다.

정상적으로 롤백이 될지 컨트롤러 호출을 브라우저로 해보도록 하겠습니다.

다음과같이 "Column 'title' cannot be null" Exception을 발생 시켰습니다.

한번 DB에 데이터가 등록되어있나 확인해보도록 하겠습니다.

우선 트랜잭션이 처리되었는지 데이터가 들어가지 않았습니다.

그럼 Service의 메서드명을 변경하여 트랜잭션 설정을 적용시켜보지 않도록 하겠습니다.

기존 StudyService / StudyServiceImpl 에 정의한 saveTest() 메소드를 insertTest() 로 변경해주고 

컨트롤러의 saveTest() 메소드 내에 정의한 

"studyService.saveTest();" -> "studyService.insertTest();"

로 변경을 해주고 서버재시작 후 , 

컨트롤러를 재실행 해보도록 합니다.

같은 Exception이 발생이 되고 DB의 데이터는 다음처럼 Exception 발생전 insert된 데이터가 추가된 것을 확인 할 수 있습니다.

※  insertTest 메서드에 트랜잭션을 적용하고 싶다면 tx:method에 name명을 등록해주면 되겠습니다.

by 개발로짜