지난시간에는 memory타입의 tree를 출력하여봤다!!   

ajax 타입이라고 해봤자 proxy설정해주고 서버측으로 부터 json객체를 얻어오기면 하면 

memory 타입이랑 변하는건 하나두 없음....

최상단=root 이고, 자식=children이란것은 변함이 없다.

root 속성만 정의하고 ajax로 children을 뽑아보자

1. ExtJS5 세팅

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

2. ExtJS treepanel memory type 샘플예제

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!!

자바 기준으로 설명할것이라, 

spring을 이용하시는 분들은 잭슨라이브러리??로 json을 파싱하시면 될것이고

일반 jsp로 하신다면 json-simple jar 라이브러리를 등록해주자

PHP는 자체제공하는 json함수를 사용하자

json-simple-1.1.1.jar

보통은 트리별로 ajax 호출할때는 선택된 노드의 id를 가지고 db에서 조건을 주어 select를 하여 

자식노드를 json으로 파싱하여 클라이언트로  던진다.

이전 포스팅의 root속성중 children key값은 삭제하고 root의 text/id/enpanded속성만 남겨놓자

그리고 children 속성을 json으로 받기위한 proxy 설정을 잡아주자

그러면 변경된 treepanel의 코드는 다음과 같다.

Ext.create('Ext.tree.Panel',{
       		        renderTo : Ext.getBody(),
	       		store : new Ext.data.TreeStore({
	       			root : {
    					text : '최상단 부모노드',
    					id : 1,
    					expanded : false
    				}
	       		    proxy: {
	       		         type: 'ajax',
	       		     	 url : '/treeresult.jsp',
		       		     reader: {
	 			            type: 'json',
	 			            root: 'children'
	 			        }
	       		    },
				})
 }) 

위의 코드로 root노드를 클릭하게 되면 서버에서는 클릭된 노드의 값을 받아야 한다 

request값은 root 속성의 id값이 되면 서버에서 받는 name은 "node"라고 받을 수있다.

즉, 서버에서 

java기준 : request.getParameter("node") 라고 하게 되면 서버에서는 

rootNode의 id값인 1을 받을 수 있다.  

그럼 서버에서 rootNode 클릭시 children json객체를 만드는 소스는 다음과 같다.

       String node = request.getParameter("node");
	JSONObject jsonObj = new JSONObject();
	JSONObject jsonObj2 = null;
	JSONArray jsonArr= new JSONArray();
        //node는 서버에서받은 root의 id값이다.
	if(node.equals("1")) {
                        //임의의 자식노드 json객체 생성후 json array에 답는다.
			for(int i=0; i<5;i++) {
				jsonObj2 = new JSONObject();
				jsonObj2.put("text","자식노드_"+i);
	   			jsonObj2.put("leaf",true);
	   			jsonArr.add(jsonObj2);
			}
                //꼭 children이 아니여도 된다. children으로 준 이유는 proxy -> reader -> root값을 children으로 주었기때문
               //proxy -> reader -> root 값을 하단 key값과 맞춰만 주면 된다.
		jsonObj.put("children", jsonArr);
	}
	PrintWriter pw = response.getWriter();
	System.out.println(jsonObj.toString());
	pw.print(jsonObj);
	pw.flush();
	pw.close();

서버에서 넘어온 json객체구조는 다음과 같다

{
	"children" : [{
				"text" : "자식노드_0",
				"leaf" : true
			}, {
				"text" : "자식노드_1",
				"leaf" : true
			}, {
				"text" : "자식노드_2",
				"leaf" : true
			}, {
				"text" : "자식노드_3",
				"leaf" : true
			}, {
				"text" : "자식노드_4",
				"leaf" : true
			}]
}

위에 구조대로 진행만 해주게 되면 db조회후 자식노드들을 서버에서 뽑아 올 수 있을것이다.

클릭할때마다 서버에서 data를 가져오는것은 아니고 한번만 통신이 이루어진다.

children json속성중 text/leaf만 뽑았는데 

작업중인 로직별로 expanded가 붙을수도있고

leaf가 false가 될수도 있고

id가 붙을수도 있다.

나머지는 본인 입맛에 알맞게 적용하시길...

출력화면은 다음과 같다.

treepanel강좌는 여기로 끝~~~

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

주말에 너무 쉬어서 오늘도 연속으로 포스팅을 하도록 하겠음.

이번에는 트리패널에 대하여 설명하도록 하겠다.

그리드 링크는 별도로 안걸고 세팅에 대한 링크만 걸도록 하겠음

세팅안되신분은 다음 페이지가서 extjs에 대한 세팅을 준비하시고 읽으시길..

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

뭐 사실 GridPanel이랑 별반 차이는 없다.. 

다만 차이가 있다면 store의 타입, json data의 구조정도일듯??

그리드에서는 Ext.data.Store

를 사용하였다면

트리에서는 Ext.data.TreeStore

로 변경이 된다.

그리드도 memory타입으로 스타트를 끊을것이다~~

memory타입으로 시작하려는 이유는 모든 ExtJS의 구조는 json구조가 기본이 되기 때문이다..

뭐 xml로 받을수도 있는거고 jsonp등등 여러타입으로 받을수 있겠지만 본인은 json이 편함 

treeStore에서 필수로 알아야 할 속성은

expanded와 leaf이다

expanded : 자동으로 자식노드를 펼침에 대한 유무를 의미한다 

       true일 경우 : 다음 depth 하위노드를 자동으로 open

       false일 경우 : 본인을 open하여야 다음 depth의 하위노드를 open

leaf : 해당 구조가 최하단인지를 의미

      true일 경우 : +/- 의 아이콘이 보이지 않으며 더이상 하위노드가 없음을 의미한다.

      false일 경우 : +/-의 아이콘을 보여주며 하위노드 존재유무랑 상관없음 하위노드 없을경우 

                         그냥 펼침이 되지만 실질적인 하위노드는 존재하지 않음

그리고 최상단 부모 노드를 default로 표출해야하므로  treeStore에 root 속성을 기술하면 되겠다.

원래는 treestore에 proxy를 설정하고 type을 memory로 해주어도 무관하나

본인은 그냥 root속성만으로 트리구조를 표출하도록 하겠다.

root : {
	text : '최상단 부모노드',
	expanded : true,
	children: 
        [
            {
                text:'자식노드(o)', 
                expanded: false,
                children:
                [
                    {
                        text:'자식노드(o)2', 
                        expanded: true,
                        children:[
                            { 
                                text:'최하단자식1', 
                                leaf:true
                            },
                            { 
                            	text:'최하단자식2', 
                                leaf:true
                            }
                        ]
                    }
                ]
            },
            {
            	text:'자식노드(x)',
            	leaf : true
            }
        ]
}

treeStore의 root 속성에 들어갈 내용이다. 

다음에 설명할 ajax type의 구조도 위 구조에서 크게 벗어나지 않을것이다.

다만 분리를 별도로 할뿐..

memory type은 샘플링으로도 충분할거라 생각한다.

Ext.onReady(function(){
	   //treepanel 생성
	   Ext.create('Ext.tree.Panel',{
		   		//body태그내에 생성한다.
       		    renderTo : Ext.getBody(),
       		    //저장소는 treestore을 이용
	       		store : new Ext.data.TreeStore({
	       			//최상단 rootNode
	       			root : {
	       				// text: 노드의 제목
    					text : '최상단 부모노드',
    					// 자동표출여부
    					expanded : true,
    					// 자식노드
    					children: 
        			        [
        			         	//자식노드 첫번째
        			            {
        			                text:'자식노드(o)',
        			                //자동표출여부
        			                expanded: false,
        			                //자식node
        			                children:
        			                [
        			                 	//자식노드
        			                    {
        			                        text:'자식노드(o)2',
        			                        //더이상의 하위노드는 없다.
        			                        leaf : true
        			                    }
        			                ]
        			            },
        			            //자식노드 두번째
        			            {
        			            	text:'자식노드(x)',
        			            	//더이상의 하위 노드는 없다
        			            	leaf : true
        			            }
        			        ]
    				}
			})
      	}) 	
})

구현된 화면이다.

한번 expanded속성/text속성/leaf속성들을 변경해보고 children속성도 붙여보면서 test하면서 

이해를 해보도록 권유한다.

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

원래는 ExtJS 게시판 샘플링때 글을 올리려 하였으나, 

'한줄기빛이내려왔다'  님께서 페이징 관련 요청해주셔서 올리게 되었다.

* 포스팅에 관심가져주셔서 감사합니다 ^^ㅋ

CRUD를 작성하기에는 분량이 많고 접근하는 방법도 다양하여서 오늘은  그리드에서 페이징하는 

방법을 소개하려 한다!

이번시간 역시 심플하게 진행을 하고자 전에 설명했던 그리드에 대한 모든 내용을 이해한 후 진행

하길 희망한다.

1. 개발세팅에 필요한 내용

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

2. GridPanel에 대한 기본세팅 

2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!

3. GridPanel에 대한 Ajax 처리

2014/06/23 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!

해당 3번째까지 모두 진행이 완료되었다는 가정하에~ 진행 하도록 해보자!! 

기본적으로 이글을 읽는 대부분의 개발자분들 혹은 ExtJS로 개발을 하시는 분들은 본인들이 가지고 있는 페이징 기법들이 있을것이다.

jsp 페이징 , Spring paging, Struts2 paging, PHP paging 등등...

서버단에 대한 로직 설명은 별도로 하지 않을것이다..

본인이 편한 페이징 처리로 작업을 진행하자..

자~ 그럼 저번시간에 이은 소스에 추가적으로 페이징처리를 해보자!! 

부족하지만, 내 포스팅을 읽어주시는 분들이 계시고 방명록및 댓글에 글을 남겨주시는 분들을 위하여 열심히 진행을 해보자 ㅎㅎㅎ

기본적으로 페이징에 필요한 임시 테이블 하나를 만들어보자 

MySQL기준으로 테이블을 생성해보도록 하겠음..

DB는 알아서들 하시고...

본인이 테스트를 위해 만든 테이블은 이전에 임시로 AJAX 호출한 컬럼 2개만 생성하면 만들어 보았다.

CREATE TABLE grid_sample(
title1 VARCHAR(100),
title2 VARCHAR(100)
)

뭐 없어보이긴 하나.. 이전 시간 이어서 진행하는 설명이 제일 깔끔한거 같음!

insert할 임의의 데이터

INSERT INTO grid_sample
VALUES('타이틀1','타이틀1');
INSERT INTO grid_sample
VALUES('타이틀2','타이틀2');
INSERT INTO grid_sample
VALUES('타이틀3','타이틀3');
INSERT INTO grid_sample
VALUES('타이틀4','타이틀4');
INSERT INTO grid_sample
VALUES('타이틀5','타이틀5');
INSERT INTO grid_sample
VALUES('타이틀6','타이틀6');
INSERT INTO grid_sample
VALUES('타이틀7','타이틀7');
INSERT INTO grid_sample
VALUES('타이틀8','타이틀8');
INSERT INTO grid_sample
VALUES('타이틀9','타이틀9');
INSERT INTO grid_sample
VALUES('타이틀10','타이틀10');

우선 10개만 넣어보자 

[현재 리팩토링중인 GkSQL로 데이터 뽑은 샘플화면]

다음같은 데이터 컬럼 2개의 데이터 10개가 정상적으로 들어갔다면 이제 실질적인 소스 부분을 

진행해보도록 하자.

페이징은 크게 검색을 제외하면 대부분 2가지가 필요하다

1. 한페이지에 몇개의 데이터를 뽑을지

2. 1페이지/2페이지 클릭할때마다의 페이지 넘버값(1페이지,2페이지,3페이지....)

Ext.data.Store에서 속성값 하나가 필요하다 

뭐 없어도 되지만 ...

바로 pageSize 라는 속성값인대

이 속성을 빼고 작업을 하면 한페이지당 default 25개의 리스트를 뿌려준다.

우리는 데이터가 꼴랑 10개뿐이므로... 한페이지당 3개정도로 뿌리도록 해보자

pageSize : 3 

이라고 추가 지정해주었다.

그리도 그리드 페이징을 하려면 pagingtoolbar 라는 xtype이 필요한대 여기서도 같은 store를 

사용할 것이므로 gridpanel에 store속성에 ext.create 해주었던 store 객체를 변수로 별도로 빼자 

var str = Ext.create('Ext.data.Store',{
					fields : [
			 			{
			 				name : 'title1'
			 			},
			 			{
			 				name : 'title2'
			 			}
		 			],
		 		    autoLoad: true,
		 		    pageSize: 3,
		 		    proxy: {
		 		        type: 'ajax',
		 		        api: {
		 		        	read: '/list.jsp'
		 		        },
		 		        reader: {
		 		            type: 'json', 
                                            //있어도 그만 없어도그만
		 		            successProperty: 'success',
		 		            root: 'items',
                                            totalProperty: 'totalCount'
		 		        }
		 		    }
		 			
		 		})

저렇게 뺏다면 다음은 페이징툴바를 생성해보도록 하자 

gridpanel에 dockedItems라는 것이 있는데 extjs demo에서 쓰인다. 

dockedItems 배열속성에 페이징툴바를 넣어준다.

dockedItems : [
              {
           	   xtype : 'pagingtoolbar',
           	   dock : 'bottom',
           	   store : str,
           	   displayInfo : true,
           	   displayMsg: '현재데이터수 : {0} - {1} / 총 데이터수 : {2}',
                  emptyMsg: "데이터가 존재하지 않습니다."
              }
       ]

위와같이 주면 페이징 툴바가 생성이 된다. 

위와같이 작성을 하였다면 그리드 패널에 대한 코드는 다음과 같다.

Ext.create('Ext.grid.Panel',{
 		renderTo : Ext.getBody(),
 		columns : [
 			{
 				text : '제목1',
 				flex : 1,
 				dataIndex : 'title1'
 			},
 			{
 				text : '제목2',
 				flex : 1,
 				dataIndex : 'title2'
 			}
 		],
 		store : str,
 		dockedItems : [
              {
               //페이징 툴바
           	   xtype : 'pagingtoolbar',
           	   //그리드로부터 툴바생성위치
           	   dock : 'bottom',
           	   //store
           	   store : str,
           	   //정보 보여주기 false일 경우 하단속성은 필요없음
           	   displayInfo : true,
           	   //보여주기 메시지(데이터 존재할때)
           	   displayMsg: '현재데이터수 : {0} - {1} / 총 데이터수 : {2}',
           	   //데이터 존재하지 않을경우
               emptyMsg: "데이터가 존재하지 않습니다."
              }
       ]
 	});

여기에서 서버에서 받는 파라미터명은 다음과 같다

start -> 시작번호 (현재 3개씩 뿌려지므로 1페이지 : 0 / 2페이지 : 3/ 3페이지 6 으로 출력)

limit -> 몇개를 뿌려줄지 (store의 pageSize속성에 정의한 값을 서버에서는 limit로 받는다)

java에서는 request.getParameter("start") / request.getParameter("limit")

로받으면 각각의 값을 받을 수 있을 것이다.

php경우는 $.GET, $_POST 형식으로 받아주면 될것이다,

혹시 몰라 총카운트 구하는 샘플쿼리랑 list출력하는 샘플링 쿼리임

sql query

--총 카운트 구하는 쿼리
select count(*) cnt from grid_sample
--리스트 뽑는 쿼리
select title1, title2 from grid_sample limit "+Integer.parseInt(request.getParameter("start"))+" , "+Integer.parseInt(request.getParameter("limit"))

그렇다면 JSON result값으로 넘겨줘야 하는것은 다음과 같다.

{
	 	"items":[
	 	         {"title1":"타이틀1","title2":"타이틀1"}
	 	         ,{"title1":"타이틀2","title2":"타이틀2"}
	 	         ,{"title1":"타이틀3","title2":"타이틀3"}
	 	        ]
               ,"totalCount":10
 }

success는 없어도 그만이고... return 해주는 json 데이터는 다음과 같이만 넘겨주면 잘 동작한다.

store에서 지정해준

root key값의 value = 'items'라고 주었었다.

이부분이 그리드 한페이지에 뿌려줄 데이터이고

totalProperty가 그리드 내에서 자체적으로 페이징을 계산하기 위한 총카운트 속성값 같다.. 

(이거는 서버측에서 totalcount 때린 데이터를 json으로 넘겨주면 될것임!!)

우와~ 오늘은 엄청 길게 썻다 ;;; 

뭐 아무튼 오늘시간은 이정도면 어느정도 이해들 하실거라 믿는다...

위의 모든 내용을 요약하자면 다음과 같다.

1. 그리드 페이징은 gridpanel에 pagingtoolbar라는 xtype이 필요하다.

2. pagingtoolbar의 store = gridpanel의 store처럼 같아야함

3. store proxy에서 reader로 받는 json 명칭중 root의 value값과 totalProperty의 value값을 

   가진 json을 서버에서 가공하여 넘겨주어야 한다.

이거처럼만 작성이 완료되었다면 다음 화면처럼 잘 나올것이다!!

한페이지씩 넘기면서 화면을 봐보자 -_-ㅋ

이전다음

01234

GkSQL도 리팩토링기간이라 글올릴 시간이 적은거 같다 후아후아 

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

이번시간에는 ajax 통신으로 콤보박스에 option 리스트를 담아보도록 하겠슴돠..

아직 기존 extJS 연동준비가 안되어 있으시다면 해당 링크로 세팅을 하신후 

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

이번에는 지난 시간 소스를 변경하여 ajax 타입으로 별도 URL에서 json을 생성후 받아서 combobox의 option list를 출력해보도록 하겠다.

지난소스관련해서는 다음 링크를 참고하시길...

2014/06/24 - [자바스크립트이야기/Ext JS] - [ExtJS강좌10] 폼을 화면에 출력하기 (2) - 콤보박스1

ajax로 json을 파싱하기 위해서는 Grid에서 ajax로 서버호출하여 json을 받아온 jsp 링크페이지를 참고하고 연동을 하자

2014/06/23 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!

그리드패널에서 ajax으로 호출한 jsp 페이지의 json 파싱하는 로직은 같고 

다만 다른점이 있다면 json object의 key값을 name/value라고만 변경하였다.

json-simple 라이브러리를 사용한것도 그대로고  서버에서 json 넘겨주는 페이지의 로직은 모두 

같다!

이제 서버 호출용 json 파싱하는 jsp 페이지는 만들어 주었으니 html소스일부를 수정해보자

원래의 comboData변수는 필요가 없다! 과감히 삭제!!

store에서의 data  : comboData역시 필요 없다 삭제!!

대신~ proxy라는 걸 이용하여 ajax 호출관련 코드를 삽입하자

그럼 store부분은 다음과 같이 코드가 짜여질 것이다.

 //json 배열객체
	   var combostore = Ext.create('Ext.data.Store', {
	 	     //comboData의 key/value 구분
	 	    fields: ['name','value'],
		    //key/value값이 들어간 comboData 변수가 목록이 된다.
		    proxy: {
		    	//ajax type
	            type: 'ajax',
	            // 호출 URL
	            url: '/comboResult.jsp',
	            //목록 조회시 서버로부터 넘어오는 json read
	            reader: {
	            	// return type 지정
	                type: 'json',
	                // root json key값
	                root: 'item'
	            }
	        }
  })

아참! 그리고 콤보박스 수정중, value : 'value1', <<< 이놈도 지워버리자!!

최초 호출시 comboData 변수로 처리했을때와 다르게 combobx 초창기 값은 빈값으로만 나와있을 것이다. 뭐이곳에 값을 넣을 선택여부는 다음에 생각나면 포스팅 하겠음!!

실행을 해보자~~

1. 최초 load된  화면

2. select 클릭시 aajx 호출하려는 loading bar

3, ajax 호출은 지정된 key/value형식에 따른 json data list

4. select box option에 마우스 오버하여 focus 이동된 상태

5. option 값 select!!

콤보박스 ajax 호출 끝~ 

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!

지난번에는 ExtJS에서 제공하는 입력 폼들을 띄워보았슴돠

이번장에서는 지난번에 언급했던!!!

html태그에서 select 태그와 유사한 combobox를 진행하도록 하겠음!!

아직 기존 extJS 연동준비가 안되어 있으시다면 해당 링크로 세팅을 하신후 

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

콤보박스는 이전 form태그들과 다른점이 있다면 store로 값을 받아와 key/value를 뿌려주는 

형식이다.  일반적으로,

<select>

<option value="1">값</option>

</select>

에서 store(ExtJS의 저장소!!)가 option태그에 해당하는 리스트 들을 의미한다.

demo화면의 소스를 보면 tpl형식으로 콤보박스 목록을 뿌리는게 있던대..

본인은 그냥 store에 받아서 key/value 세팅만 하도록 하겠다 ㅎㅎㅎ

뿌려주는 방식은 그리드 시간에 했던방식처럼 

1. data를 임의의 json array객체에 값을 넣어서 combobox 리스트에 뿌려주는 방식

2. ajax를 통하여 json객체를 combobox 리스트에 뿌려주는 방식

이 두가지를 다루도록 하겠다.

이번장에는 1.에 해당하는 부분을 다루도록 하겠다.

첫째로 필요한것은 가상의 데이터이다. 

select option의 value에 해당하는 값과 option이 보여줄 text 부분을 json array 변수로 만들어 보겠다.

//json 배열객체
	   var comboData = [
		                    {
		               			"name" : "콤보1",
		               			"value" : "value1"
		                    },
		                    {
		               			"name" : "콤보2",
		               			"value" : "value2"
		                    }
	                    ]

위의 데이터로 combobx의 <option></option> 값으로 출력을 할것이다!!

다음은 <option></option> 리스트를 만들어서 담아주어야 할 store 변수를 만들어 보자 

var combostore = Ext.create('Ext.data.Store', {
 	     //comboData의 key/value 구분
 	    fields: ['name','value'],
	    //key/value값이 들어간 comboData 변수가 목록이 된다.
	    data: comboData
   })

마지막으로 formpanel안에다가 xtype 이 콤보박스를 생성하면서~ 실제로 화면에 표출해야할 store를 combostore로 선언을 해야한다.

          //폼패널
	   Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - 콤보박스 출력',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					//<select></select> Ext.form.field.ComboBox로 create가능
					xtype : 'combo',
					//label
					fieldLable : '콤보박스예제',
					//combo width
					width : 300,
					//화면에 보여질 값
					displayField: 'name',
					//실제 선택값
			        valueField: 'value',
			        //초기 선택 value값
			        value : 'value1',
			        //상단에 만들어놓은 comboData json 배열객체를 담기위한 store
					store : combostore 
				}
			]
	   })

위와같이 작성을 해보았다면 실행하여 option을 변경해보자

위의 combobx 예제는 sencha에서 제공하는 example combo랑 약간은 틀릴것이다.

화면 출력에 의미없는 속성들은 우선 제거 하였다.

물론 이벤트 발생시 필요한 속성이 있을 수 있겠지만,

단순 화면에 option list를 출력하기위해서는 의미 없는것으로 판단되어 제외해버렸다.

부분부분 필요한 것은 추후 MVC 강좌 시간에 추가적으로 넣어서 작업을 해보도록 하겠다!!

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!