StudyServer
web, server, java, spring 등.. 공부한 것을 기록하는 장소 입니다. 공부하면서 정리하였기 때문에 틀린 내용이 있을 수 있습니다. 이야기 해주시면 수정하겠습니다.
HOME /About /algorithmus /db /front /git /java /ml /search /server /spring

Vue.js template

2019-04-10 00:00:00 +0000

Vue 템플릿

  • 를 사용하고 중간에 el 속성이나 자바스크립트 문법 사용
  • 간단한 문법만 사용할 것
  • if문은 사용하면 안됨.
<body>
<div id="test">
    <div></div>
    <div>1</div>
    <div>1</div>
</div>
</body>
<script>
new Vue({
  el: '#test'
})
</script>

v-html

  • 아래 예제를 실행하면 a 태그를 사용해서 링크를 걸었지만 그냥 일반텍스트로 출력된다
  • 는 일반 텍스트만 해석. 실제 html을 사용하고 싶을 땐 v-html 사용 해야한다.
<body>
<div id="test">

</div>
</body>
<script>
new Vue({
  el: '#test',
  data:{ url : "<a href='http://www.naver.com'>네이버</a>"}
})
</script>
  • el 설정이 된 하위 dom에서 v-html 태그 속성을 사용해야 url링크가 적용된다
<body>
<div id="test">
<div v-html="url"></div>
</div>
</body>
  • 그 외 v-if, v-for, v-bind, v-text, v-on 등 다양한 문법이 있다
  • v-if는 if문처럼 true, false 결과를 전달한다
  • v-on은 클릭했을 때 데이터를 갱신시킬 수 있음
  • v-for은 data를 list 형태로 보여줌
<body>
<div id="test">
<div v-if="1 == 1"> 표시됨 </div>
<div v-if="1 == 0"> 표시안됨 </div>

<div v-text="text">text</div>
<button v-on:click="text='클릭 했습니다'">클릭하면 글자가 바뀝니다</button>

<ul>
    <li v-for="value in list">
        
    </li>
</ul>
</div>
</body>
<script>
var vue = new Vue({
  el: '#test',
  data:{ text : "클릭 안했어요",
  list :["apple","banana","grape"]}
}
})
</script>

Vue.js 소개

2019-04-09 00:00:00 +0000

Vue.js란?

  • 사용자 인터페이스를 만들기 위한 프레임워크
  • ECMAScript5 기능을 사용하여 ECMAScript 5 호환 브라우저 지원(IE8 이하 버전 미지원)
  • 단일 프레임 워크와 달리 다른 라이브러리와의 통합이 쉬움
  • vue.js 한글번역문서

기본 예제

  • message가 ‘Hello Vue.js’라는 단어로 대체되었다
  • new로 Vue를 생성. message, text, study 속성을 가진다
  • el은 vue 인스턴스와 태그(id)를 연결한다
  • data는 vue 내부에서 변수처럼 사용할 수 있는 값
  • 지정한 id 안의 dom을 제어할 수 있다. id 안에 존재하지 않는다면 값을 제어할 수 없다
  • 생성될 때 있었던 변수만 반응형(예를 들어 vue 생성 시 b 속성이 없다가 후에 만들면 반응형 작동을 하지 않는다)
  • dom과 vue 인스턴스를 연결하여 템플릿, 이벤트, 디렉티브, 컴포넌트를 사용한다
<!-- 도움되는 콘솔 경고를 포함한 개발 버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
<div id="app">
  <p></p>
  <p></p>
</div>
  <p></p>
</body>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    text: 'Hi Vue.js!',
    study: 'Study Vue.js'
  }
})
</script>

Nexacro 설명

2019-04-02 00:00:00 +0000

Nexacro

  • 넥스크로 플랫폼은 비즈니스 UI/UX 플랫폼
  • UI/UX를 쉽게 편집할 수 있는 강력한 도구이다
  • 화면을 배치하는 부분은 XML기반으로 컴포넌트 등의 정보를 저장
  • 빌드과정을 거쳐 자바스크립트 기반의 코드로 변환됨
  • xprj 확장자는 Project 정보 파일
  • *.xfdl 확장자는 화면, 컴포넌트, 스크립트 등의 파일
  • 공식 메뉴얼 : http://docs.tobesoft.com/getting_started_nexacro_17_ko

단축키

  • CTRL+SHIFT+N : 새로운 프로젝트 만들기
  • Ctrl+N : 새로운 폼 만들기(width:800 height:600)
  • Crtl+F6 : 실행

프로젝트 설명

  • 오브젝트의 세부창에 번개모양 아이콘을 글릭하면 기본함수명, 사용자 함수명을 정의할 수 있다
  • 기본 함수명은 event 옆에 더블클릭, 사용자 함수명은 그냥 작성
  • 실행버튼은 돋보기+번개모양 아이콘. 설정으로 웹으로 올릴수도 있으나 라이센스가 필요함
  • Service는 이미지 소스,스크립트,서버경로 등을 편집하는 곳

기본예제

  • 버튼 아이콘을 눌러서 버튼을 생성한다. 그리고 그 버튼을 더블 클릭한다.
  • 임의의 이름을 가진 클릭 이벤트가 생성된다. 클릭 시 동작할 코드를 작성한다.
  • 아래처럼 알람을 추가한다. 실행 후 버튼을 클릭하면 알람창이 뜬다.
arelt("hello world");

ControllerAdvice

2019-04-01 00:00:00 +0000

ControllerAdvice

  • @ControllerAdvice는 스프링 프레임워크 3.2부터 사용 가능
  • 예외 상황은 @ExceptionHandler와 @ControllerAdvice를 사용해서 처리할 수 있다(다른 방법으로 @ResponseEntity를 사용할 수 있다)
  • AOP를 이용하는 방식(공통사항은 따로 분리하는 방식)
  • 기존 방식으로 예외를 처리하면 예외 처리가 있을 때 마다 중복작성된다. 하지만 AOP 개념을 도입하면 한곳에서만 처리하면 된다.(if문으로 체크하지 않고 예외를 발생시키는 이유)
  • 체계적으로 로직검사를 하여 유지보수가 쉬워진다
  • @Valid를 사용하여 Setter 호출 시 형식체크를 해서 값을 넣지 않을 수도 있다)

설정

  • CommonExceptionAdvice java 파일 생성
  • 예외를 처리하는 클래스
  • 먼저 pom.xml에서 버전 등을 알맞게 세팅한다
<java-version>1.8</java-version>
<org.springframework-version>5.0.7.RELEASE</org.springframework-version>
<org.aspectj-version>1.6.10</org.aspectj-version>
<org.slf4j-version>1.6.6</org.slf4j-version>

ControllerAdvice 처리 클래스 추가

  • @ControllerAdvice는 해당 객체가 스프링의 컨트롤러에서 발생하는 예외를 처리하는 존재임을 명시
  • @ExceptionHandler는 해당 메서드가 괄호에 들어가는 예외를 처리한다는 의미
package test.exam.advice;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import lombok.extern.log4j.Log4j;
@ControllerAdvice
@Log4j
public class CommonExceptionAdvice {
       @ExceptionHandler(Exception.class)
       public String except(Exception ex, Model model){
              log.error("Exception"+ex.getMessage());
              model.addAttribute("exception", ex);
              log.error(model);
              return "error";
       }
}

패키지 추가

  • ControllerAdvice 어노테이션 클래스를 알 수 있도록 scan
<context:component-scan base-package="test.exam.advice" />

에러화면 추가

  • jsp를 추가하고 아래 코드를 작성해서 view 단을 만든다
  • 그리고 일부러 예외가 발생하는 코드를 만든다(ex. 4/0 같은..)
  • 그리고 그 에러가 나는 코드가 있는 url로 접속해서 예외를 강제로 발생시킨다.
  • 그러면 ExceptionHandler 어노테이션이 발생했으므로 해당 함수가 호출되어 error 페이지로 이동한다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
       <h4><c:out value="${exception.getMessage()}"></c:out></h4>
</body>
</html>

404 에러 페이지 추가

  • 스프링 MVC의 요청은 DispatcherServlet을 이용해서 처리되므로 404 에러도 같이 처리되도록 web.xml 수정
<servlet>
              <servlet-name>appServlet</servlet-name>
              <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
              <init-param>
                     <param-name>contextConfigLocation</param-name>
                     <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
              </init-param>
              <init-param>
                     <param-name>throwExceptionIfNoHandlerFound</param-name>
                     <param-value>true</param-value>
              </init-param>
              <load-on-startup>1</load-on-startup>
</servlet>
  • 404 에러 시 호출 될 함수 추가
@ExceptionHandler(NoHandlerFoundException.class)
@ResponseStatus(HttpStatus.NOT_FOUND)
public String error404(NoHandlerFoundException ex){
    return "error404";
}
  • jsp 추가 후 404 페이지 처리
  • 없는 페이지 url 을 입력하면 해당 jsp 출력
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>해당 페이지를 찾을 수 없습니다</h1>
</body>
</html>

Batch

2019-04-01 00:00:00 +0000

Batch

  • 대용량의 데이터를 추가나 수정하는 경우 MyBatis에서 쿼리를 하나하나씩 실행하면 느리다.
  • 이 때 Batch를 사용할 수 있다. Batch는 MyBatis를 사용하지 않고 여러개의 쿼리를 한번에 실행할 수 있기 때문에 빠르게 데이터 수정이 가능하다.
  • addBatch함수는 쿼리문을 실행하지 않고 저장하는 역활을 한다.
  • executeBatch함수는 저장된 쿼리문을 한번에 실행한다.
  • 1만건 데이터를 5000개 씩 2번 insert 했을 때는 0.149287886초 걸림
  • Batch를 사용하지 않고 하나씩 insert 했을 때는 0.757761344초 걸림
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
public class Test {
       public static void main(String[] args) {
              
              // 1만건 데이터 넣기
              List<String> list = new ArrayList<String>();
              for(int i = 0; i < 10000; ++i) {
                     list.add(""+i);
              }
              
              Connection conn = null;
              PreparedStatement ps = null;
              
              String sql = "INSERT INTO TEST(NAME, AGE) VALUES (?, ?)";
              
              try {
                     
                     Class.forName("oracle.jdbc.OracleDriver");
                     conn =  DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe", "id",  "pass");
                     conn.setAutoCommit(false);
                     ps = conn.prepareStatement(sql.toString());
                     
                     int i = 0;
                 long startTime=System.nanoTime();
                     for(String str:list) {
                           ps.setString(1, str);
                           ps.setString(2, "100");
                           ps.addBatch();                           // 쿼리문 저장
                           ps.clearParameters();             // 파라메터 초기화
                           ++i;
                           
                           if(0 == (i%5000)) {               // 500개 단위로  끊어서 전달
                                  i = 0;
                                  ps.executeBatch();         // 누적된 batch 실행
                                  ps.clearBatch();           // 누적된 batch  초기화
                                  conn.commit();
                           }
                     }
                     long endTime=System.nanoTime();
                     double elapsedTime=(endTime-startTime)/1000000000.0;   //  나노초를 초로 변환
                     System.out.println(elapsedTime+"초");

              }catch(Exception e) {
                     e.printStackTrace();
                     try {
                           conn.rollback();
                     } catch (SQLException e1) {
                           // TODO Auto-generated catch block
                           e1.printStackTrace();
                     }
              }finally {
                     try {
                           ps.close();
                           conn.close();
                     } catch (SQLException e) {
                           // TODO Auto-generated catch block
                           e.printStackTrace();
                     }
              }
       }
}

Posts

subscribe via RSS