국비지원 98일차 - Spring JSON데이터 생성, AOP VueJS dynamic, v-for

JSON데이터 생성
스프링에서 JSON데이터를 생성해야 하는 경우
아래와 같이 @ResponseBody어노테이션을 사용하고 

[1] pom.xml에 Jasckson-databind라이브러리를 추가해야 한다.

     <!-- JSON lib -->
      <dependency>
         <groupId>com.fasterxml.jackson.core</groupId>
         <artifactId>jackson-databind</artifactId>
         <version>2.9.6</version>
      </dependency>

      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
      <dependency>
         <groupId>com.fasterxml.jackson.dataformat</groupId>
         <artifactId>jackson-dataformat-xml</artifactId>
         <version>2.9.6</version>
      </dependency>

[2] 컨트롤러에서 json데이터를 생성하기 위해
    @ResponseBody를 붙인 자료유형을 Map또는 VO 등의
    적절한 객체를 반환타입으로 주면, 위 라이브러리가 알아서
    json형태로 변환해준다. 

AOP (Aspect Oriented Programming)
문제를 바라보는 관점을 기준으로 프로그래밍 하는 기법

Application을 아래의 두가지 관점에 따라 구현
- 핵심 관심 사항
- 공통 관심 사항

기존 OOP - 공통관심사항을 여러 모듈에서 적용하는데 불편함
AOP는 핵심 관심 사항과 공통관심 사항 분리하여 구분

Joinpoint 공통관심사항이 적용 될 수 있는 지점
Pointcut 여러 개의 JoinPoint를 하나로 결합한 것
Advice 포인트에 삽입되어져 동작할 수 있는 공통관심 사항 코드로 실제로 그 기능을 구현한 객체

Weaving Advice를 핵심 로직 코드에 적용하는 것을 weaving
Aspect 공통 관심사항에 대한 추상적인 명칭으로 여러 객체에 공통으로 적용되는 기능
Target 핵심 로직을 구현하는 클래스
Advisor Advice와 Pointcut를 하나로 묶어 취급한 것

MAVEN
maven 변경되었으면 maven update 꼭 해주기
mvnrepository.com을 이용하면 필요한 라이브러리를 가져와서 사용할 수 있다.

▣ XML 스키마 기반 AOP 예제
◆ 순서
1. 스프링 AOP를 사용하기 위한 의존 추가
2. 공통 기능을 제공한 클래스 구현
3. 핵심 로직을 갖는 Target클래스 구현
4. XML설정 파일에 를 이용해 Aspect를 설정한다. Advice를 어떤 Pointcut에 적용할지를 지 정하게 된다.
5. TEST 클래스 작성

메소드 성능검사할때 사용 가능
aop.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<!-- Aspect -->
	<bean id="common" class="ex01.CommonAspect"/>

	<!-- Target -->
	<bean id="obj" class="ex01.ServiceImpl"/>
	
	<!-- aop:config -->
	<aop:config>
		<aop:aspect ref="common">
			<aop:pointcut expression="execution(* ex01.ServiceImpl.insertData(..))" id="point1"/>
			<!-- <aop:before method="trace1" pointcut-ref="point1"/>-->
			<!-- <aop:after method="trace2" pointcut-ref="point1"/> --> 
			<!-- <aop:after-returning method="trace3" pointcut-ref="point1" returning="result"/> -->
			<!-- <aop:after-throwing method="trace4" pointcut-ref="point1" throwing="ex"/> -->
			<aop:around method="trace5" pointcut-ref="point1"/>
		</aop:aspect>
	</aop:config>
	
	
</beans>

CommonApect.java

package ex01;

import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.ProceedingJoinPoint;
import org.aspectj.lang.Signature;

public class CommonAspect {

	public void trace1(JoinPoint p) {
		Signature sign = p.getSignature();
		System.out.println("====before====["+sign.toLongString()+"]=====");
	}
	
	public void trace2(JoinPoint p) {
		Signature sign = p.getSignature();
		System.out.println("====after====["+sign.toLongString()+"]=====");
	}
	
	public void trace3(JoinPoint p,Integer result) {
		Signature sign = p.getSignature();
		System.out.println("====after returning====["+sign.toLongString()+"]=====반환값: "+result);
	}
	
	public void trace4(JoinPoint p,Exception ex) {
		Signature sign = p.getSignature();
		System.out.println("====after throwing====["+sign.toLongString()+"]=====예외: "+ex);
	}
	
	public Integer trace5(ProceedingJoinPoint jp) {
		Signature sign = jp.getSignature();
		System.out.println("====around(before)====["+sign.toShortString()+"] start=====");
		Integer n=0;
		try {
			n = (Integer)jp.proceed(); //ServiceImpl의 insertData()호출
			return n;
		} catch (Throwable e) {
			e.printStackTrace();
			return null;
		}finally {
			System.out.println("====around(after)====["+sign.toShortString()+"] end=====");
		}
	}
}

SpringAOPTest

package ex01;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class SpringAOPTest {

	public static void main(String[] args) {
		
		ApplicationContext ctx = new ClassPathXmlApplicationContext("ex01/aop.xml");
		Service svc = ctx.getBean("obj",Service.class);
		svc.insertData("게시글을 등록합니다..");
	}

}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
VueJS

dynamic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
    <style>
        #app{
            width:150px;
            height:150px;
            text-align: center;
            margin: 20px;
            padding: 10px;
        }
        #app.ready{
            background-color: chartreuse;
            color:darkblue;
            font-size: 2em;
        }
        #app.active{
            background-color: darkorange;
            color:darkred;
            font-size: 2em;
            border-radius: 30%;
        }
        #app.done{
            background-color: yellow;
            color:green;
            font-size: 2em;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- div#app을 클릭하면 msg값을 변경하는 메소드를 작성-->
    <div id="app" :class="msg" @click="change">
        {{msg}}
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'ready'
            }
            ,
            methods:{
                change:function(){
                    switch(this.msg){
                        case 'ready' : this.msg='active';break;
                        case 'active' : this.msg='done';break;
                        case 'done' : this.msg='ready';break;
                        default : this.msg='ready';
                    }
                }
            }
        })
    </script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <h1>directive: v-for 사용</h1>
        <h2 style="color:red" v-for="val in arr">arr에 저장된 숫자: {{val}}</h2>
        <hr color="blue">
        <ul>
            <li v-for="(val,index) in arr" :key="index">
                {{index}} => {{val}}
            </li>
        </ul>
        <hr color="tomato">
        <h3>속성명 : 속성값</h3>
        <ul>
            <li v-for="(val,key,index) in regions" :key="key">
                {{key}} => {{val}} ==> {{index}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            data:{
                arr:[10,20,30],//index로 관리되는 자료구조
                regions:{//key : value하고 mapping
                    "A":"Asia",
                    "B":"America",
                    "C":"Europe",
                    "D":"Africa"
                }
            }
        }).$mount("#app");
    </script>
</body>
</html>

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <template v-for="(idol,index) in idols" :key="idol.no" v-if="index > 0">
        <h1>{{idol.name}}</h1>
        <img :src="idol.img" :height="imgH" :width="imgW" :title="idol.title">
        </template>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                idols:[
                    {no:1, name:'BTS',title:'멋진 BTS',img:"./images/bts.jpg"},
                    {no:2, name:'IOI',title:'예쁜 AOA',img:"./images/ioi.png"},
                    {no:3, name:'Black Pink',title:'간지 블핑',img:"./images/bp.png"}
                ],
                imgW:200,
                imgH:100
            }
        })
    </script>
</body>
</html>