농부지기

Vue.js - 2. 기본 예제(radio, checkbox)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="app"> <!-- ----------------------------------------------------------------------- --> <!-- 1. Radio 버튼-첫번째 --> <!-- ----------------------------------------------------------------------- --> <input type="radio" value="male" v-model="ansList['gender']"> 남자 <input type="text" v-model="ansList['gender_male']"> <input type="radio" value="female" v-model="ansList['gender']"> 여자 <br> <spand>당신의 성별은 : <lable v-text="ansList['gender']"></lable> </spand> <br><br> <!-- ----------------------------------------------------------------------- --> <!-- 2. Radio 버튼-두번째 --> <!-- ----------------------------------------------------------------------- --> <input type="radio" value="seoul" v-model="ansList['area']"> 서울 <input type="radio" value="incheon" v-model="ansList['area']"> 인천 <input type="text" v-model="ansList['area_incheon']"> <br> <spand>당신이 사는곳은 : <lable v-text="ansList['area']"></lable> </spand><br> <!-- ----------------------------------------------------------------------- --> <!-- 3. checkbox - 첫번째 --> <!-- ----------------------------------------------------------------------- --> <input type="checkbox" value="mac" v-model="ansList['notebook']"> 맥북 노트북 <input type="checkbox" value="sm" v-model="ansList['notebook']"> 삼성 노트북 <input type="checkbox" value="lg" v-model="ansList['notebook']"> LG 노트북 <br> <spand>당신이 원하는 브랜드는 : <lable v-text="ansList['notebook']"></lable> </spand><br><br> <lable v-text="ansList"></lable> <br><br> </div> <script> var vm = new Vue({ el:"#app" , data: { ansList : {} } , mounted: function(){ this.init(); } , methods: { init:function() { Vue.set(this.ansList, 'notebook', []); // this.ansList['gender'] = []; //radio버튼은 정의 하면 안됨 //this.ansList['area'] = []; //console.log('init method수행'); //console.log('ansList gender->' + this.ansList['gender']); //console.log('ansList ssssss->' + this.ansList['sss']); } } }) </script>

Vue.js - 기본 예제

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="app"> <!-- ********************************************************************************** --> <!-- A. Vue값을 화면에 출력 하기 --> <!-- ********************************************************************************** --> <!-- ------------------- --> <!-- 1. 단순 컬럼값 출력 --> <!-- ------------------- --> {{message}} <span v-bind:title="message"><br> 내위에 마우스 올려봐.11<br> </span> <span v-text="message"></span><br> ======================================================<br> <!-- ----------------------------------------------------------------------- --> <!-- 3. 화면에 값을 변경 시 Vue객체에 전송하기 --> <!-- 전송이라기 보다.. 연동하기 --> <!-- v-model : 폼과 데이터를 바인딩하는 디렉티브(양방향 바인딩 형태) --> <!-- v-model : 화면에 값출력 되면서 Vue객체에 값도 연동(bind)되어 있다. --> <!-- ----------------------------------------------------------------------- --> <input v-model="message"><br> ======================================================<br> <!-- ----------------------------------------------------------------------- --> <!-- 4. Vue.객체값이 변경 되어도 .. 변경하지 않게 하기(1회성 연동) --> <!-- v-once : 1회성 연동 --> <!-- ----------------------------------------------------------------------- --> <label v-once v-text="message"></label> <- 왼쪽 내용은 위 값이 변경 되어도 message가 변경 안됨</br> ======================================================<br> <!-- ********************************************************************************** --> <!-- J. if문, for문 --> <!-- ********************************************************************************** --> <!-- ------------------- --> <!-- 2. if 문장 --> <!-- ------------------- --> <span v-if="seen==true">ok</span><br> ======================================================<br> <!-- ------------------- --> <!-- 3. for 문장 --> <!-- ------------------- --> <ol> <li v-for="one in bookList"> <span v-text="one.name"></span> </li> </ol> ======================================================<br> <!-- ********************************************************************************** --> <!-- L. Event --> <!-- ********************************************************************************** --> <!-- ------------------------ --> <!-- 4. 버튼 클릭 event수행 --> <!-- ------------------------ --> <button v-on:click="reverseMessage">메시지 뒤집기</button><br> ======================================================<br> <!-- ----------------------------------------- --> <!-- 10. 값이 변경 되면 event 호출하기 --> <!-- ----------------------------------------- --> <input v-model="message"> <- 값이 변경 되면 event가 호출 됨<br><br> <input v-model="startDate"> <- 값이 변경 되면 event가 호출 됨<br> ======================================================<br> <!-- ********************************************************************************** --> <!-- M. Method, Function 생성 및 호출하기 --> <!-- ********************************************************************************** --> <!-- ------------------------ --> <!-- 1. 버튼 클릭 event수행 --> <!-- ------------------------ --> <button v-on:click="reverseMessage">메시지 뒤집기</button><br> ======================================================<br> <!-- ----------------------------------------------------------- --> <!-- 2. input box값을 입력함과 동시에 event를 호출 해서 분리하기 --> <!-- . yourName에 대한 변수와 watch.yourName event가 필요함 --> <!-- ----------------------------------------------------------- --> 이름 입력:<input v-model="yourName"> -> 첫번째이름:[<label v-text="firstName"></label>] -> 두번재이름:[<label v-text="lastName"></label>]<br> ======================================================<br> <!-- -------------------------------- --> <!-- 3. created, mounted시 호출된 내용 --> <!-- -------------------------------- --> created시 내용 -> <lable v-text="createdMessage"></lable> <br> mounted시 내용 -> <lable v-text="mountedMessage"></lable> <br> ======================================================<br> <!-- ********************************************************************************** --> <!-- P. 객체 다르기(html tag 다루기) --> <!-- ********************************************************************************** --> <!-- ----------------------------------------- --> <!-- 1. button disabled 속성 처리 --> <!-- ----------------------------------------- --> <button v-bind:disabled="disabledFalse"> [버튼 클림 됨]</button> <button v-bind:disabled="disabledTrue"> [버튼 쿨릭 안됨]</button> <br> ======================================================<br> </div> <script> </script> <script> //a. Vue 객체 생성 var vm = new Vue({ el : "#app" ,data : { message: "hellow Vue!" , seen: true , bookList : [ {name: "vve배우기" , id: 1} , {name: "oracle 7일 완성" , id: 2} , {name: "nexa 2일 정독하기", id: 3} ] , startDate : "2019.06.26" , disabledFalse : false , disabledTrue : true , two : 2 , five : 5 , yourName: "" , fullName : "" , firstName : "" , lastName : "" , createdMessage : "" , mountedMessage : "" } ,methods: { reverseMessage: function() { //this는 vm인스턴스를 지칭함 this.message = <a href="http://this.message.split">this.message.split</a>('').reverse().join(''); alert(this.message); } ,nameSplit: function(){ var names = <a href="http://this.fullName.split">this.fullName.split</a>(' '); this.firstName = names[0]; this.lastName = names[1]; <a href="http://console.log">console.log</a>(this.firstName); <a href="http://console.log">console.log</a>(this.lastName); } } ,computed: { addFunc : function(){ return <a href="http://this.two">this.two</a> + <a href="http://this.five">this.five</a>; } //computed 에서 getter, setter 함수 사용하기 //,fullName: } //반응형 event //yourName : 값이 변경 시 호출 됨 ,watch: { yourName : function (newName){ this.fullName = newName; this.nameSplit(); } } //b. 인스턴스 라이프 사이클 //b.1 created 훅은 vm인스턴스가 생성 된 후에 호출 //b.2 this.addFunc과 같이 내부 function 호출 하기 ,created : function(){ <a href="http://console.log">console.log</a>("공부 시작일-" + this.startDate); <a href="http://console.log">console.log</a>(this.addFunc + " <- 2 + 5 에 대한 결과(계산 function호출)"); this.createdMessage = "난 created-인스턴스 라이프 사이클-시 호출 됨"; } //b.3 mounted - life cycle 참조 url : <a href="https://kr.vuejs.org">https://kr.vuejs.org</a>/v2/guide/instance.html , mounted:function (){ this.mountedMessage = "난 mounted-인스턴스 라이프 사이클-시 호출 됨"; } }); //a. 반응형 Event //-. startDate : 값이 변경 시 아래 매소드 수행 //-. 인스턴스 매소드 생성 ($watch) // Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. // 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였습니다 vm.$watch("startDate", function(newVal, oldVal){ //alert(newVal + " 일자로 변경 했군"); <a href="http://console.log">console.log</a>(newVal + " 일자로 변경 했군"); }); </script>

Vue.js - 기본개념

1. 특징

    - javacript문법이 적용가능하다.

    - 확장자 .html에서도 Vue.js 가 작동된다.

    - Vue객체에서 가지고 있는 값이 변경 되면 사용자에게 보여주는 값도 변경되어 보여준다.

      즉, Vue객체의 값과 사용자에게 보여주는 변수간에 연동(binding)되어 자동변경 되어 보여준다.

    - chrome, explorer 등 각 webrower 마다 문법이 조금씩 다르게 작동 될 수 있다.

      그래서, chrome에서 적상작동되는 문법이 explorer에서 오류가 발생할 수 있다.

[ 4. slf4j - 예제 ]

1. console창 log에 - class명 출력 방법

    - 단축명,  package full 명으로  2가지 방법 존재

2. console창 log에 - sql 만 조회하기

1. console창 log에 class명 출력 방법

<!-- class 단축명으로 console창에 출력 --> <appender name="console" class="ch.qos.logback.core.ConsoleAppender"> <encoder> <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%X{GUID}][%X{SVC_ID}][%X{USER_ID}] %-5level %logger{0} - %msg%n </pattern> </encoder> </appender> <!-- class 전체(full path)명으로 console창에 출력 --> <appender name="console" class="ch.qos.logback.core.ConsoleAppender"> <encoder> <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%X{GUID}][%X{SVC_ID}][%X{USER_ID}] %-5level %logger - %msg%n </pattern> </encoder> </appender>

2. console창 log에 - sql 만 조회하기

[ myBatis - 사용가능한 jdbcType ]

[ myBatis. Sql WHERE문에서 in 처리(2) ]

1. 참고

    - myBatis 기능인  <foreach>를 사용할 경우 상당한 overhead가 발생한다.

   그렇다고 $(문장 그대로 대입)형으로 넘기면 차후에  sql injection에서 추출된다.

2. 방법1

  - cdList = "111,222,333,444"; 와 같이 넘긴다.

       SELECT * FROM TABLE_NAME WHERE CD IN (SELECT TRIM(REGEXP_SUBSTR(#{cdList}, '[^,]+', 1, LEVEL)) FROM DUAL ONNECT BY LEVEL <= REGEXP_COUNT(#{cdList}, ',') + 1) ;

3. 방법2

    - DB FUNCTION  : 위 방법1의 SQL을  DB FUNCTION으로 만들어서 결과를 Record를 RETURN

    - 방법1보다 간단 하지만  아주 미세하게 속도는 느림 (고려할만한 수준의 속도 저하는 아님)

    - SQL

       SELECT * FROM TABLE_NAME WHERE CD IN (SELECT DB_FUNCTION_NAME(#{cdList}, ',') FROM DUAL );   

     - FUNCTION

       --1. ROW 변환 TYPE CREATE OR REPLACE TYPE TP_ZZ_SPLIT_STR_OTYPE AS OBJECT ( SPLITED VARCHAR2(200) ); --2. TABLE반환 TYPE CREATE OR REPLACE TYPE TP_ZZ_SPLIT_STR_TTYPE OR TP_ZZ_SPLIT_STR_OTYPE; --3. 함수 CREATE OR REPLACE FUNCTION FN_ZZ_SPLIT_STR(STR VARCAHR2, DELIMITER VARCHAR2 := ',') RETURN TP_ZZ_SPLIT_STR_TTYPE IS V_RETURN TP_ZZ_SPLIT_STR_TTYPE; BEGIN SELECT TP_ZZ_SPLIT_STR_OTYPE(SPLITED_ROW) BULK COLLECT INTO V_RETURN FROM ( SELECT TRIM(REGEXP_SUBSTR(STR, '[^'||DELIMITER|| ']+', 1, LEVEL)) SPLITED_ROW FROM DUAL CONNECT BY LEVEL <= REGEXP_COUNT(STR, DELIMITER) + 1 ); RETURN V_RETURN; END FN_ZZ_SPLIT_STR

4. 방법3

    1. 개발방법(설명)

       - IN 절에서 사용할 IN_테이블 하나 생성

       - java 단에서 in절에 적용될 code에 대해서 insert처리 한다.

       - IN_테이블을 이용해서  SQL문장 완성  

    2. 실 개발방법

       - (테이블)

          CREATE TABLE IN_TABLE

                     (  GUBN  VARCHAR2(20)    NOT NULL

                     ,  CODE   VARCAHR2(100) NOT NULL

                     )

       - (java)

          . 코드값이 : 111,222,333,444 와 같이 4개가 존재 시

          . IN_TABLE에  [GUBN='partCd'], [CODE='1111', CODE='2222', ... ] 와 같이 Insert한다.

       - (sql)

          SELECT * FROM TABLE_NAME WHERE CD IN (SELECT CODE FROM IN_TABLE WHERE GUBN='partCd');

[ jenkis설치 ]

1. 정의
   - Build Automation (빌드 자동화)
   - 웹 어플리케이션이다.
   - 서블릿 컨테이너가 필요하다.
   - 약 400개 이상의 플러그인을 확장할 수 있다.
   - 애자일방법론 기법으로 jenkins Release
2. 기능
   - 저장소와 통합관리 (Integrate with repository)
   - 소스코드 체크아웃 (Checkout the codes)
   - 분산 빌드 (Distributed Builds)
   - CI 서버는 소스 저장소에 새로게 체크인된 소스코드를 지속적으로 통합하여 빌드한다.
   - 단위 테스트를 수행하고 실패하면 빌드를 취소한다. (선택적)
   - 테스트 보고서 생성 (Generate test report)
   - 실행결과 통보 (Notification)
   - 산출물 저장소에 산출결과를 저장 (Archive and store in artifact repository)
   - 빌드 결과를 다른 서버로 배포(Deploy)한다. (선택적)
 
3. 종류
   - LTS Release : 12주마다 선정되는 안정적인 릴리즈 버전 (추천)
   - Weekly Release : 매주 업데이트 되는 다소 불안정적일 수 있는 버전
4. download
   - https://jenkins.io
   - LTS > Windows 버전 download
5. 파일명
   - 다운로드 파일 : jenkins-2.89.1.zip
   - 압축해제 파일 : jenkins.msi
6. 설치 요구사항
   - 웹 어플리케이션 버서 (Tomcat, JBoss, ..)
   - 빌드 도구 (Maven, Ant)
   - 소스 버전관리 도구 (CVS, SVN, Git, ...)
7. 설치
    - 설치파일 : jenkiins.mis
    - Folder : C:\Jenkins\
8. jenkins 설정
    - port 변경
       . default가 8080인데, tomcat과 충돌발생으로 8086으로 변경
       . 파일 : C:\Jenkins\jenkins.xml
    -
9. jenkins 서비스 start
    - 첫 설치 후 jenkins가 자동 start되지 않는다.
    - 제어판 > 관리도구 > 서비스 > Jenkins 존재 > [시작]

10. Git 설치
    - url : https://www.git-scm.com/
    - 파일 : Git-2.15.1.2-32-bit.exe
    - 설치폴더 : C:\Git
 
10. jenkins 접속 (첫번째 방법) - 자체 접속
    - http://localhost:8086
    - Admin pw :
      . 첫 Login화면에서 [C:\Jenkins\secrets\initialAdminPassword]이 라인이 보인다.
        이 문자열을 복사 후 explore 주소란에 붙여넣고 enter를 치면 password를 볼 수 있다.
      . [Continue]
      . 읍스 난 접속 불가
        그래서 tomcat연동으로 전환

11. jenkins 접속 (두번째 방법) - Tomcat과 연동
     * Tomcat과 연동
     - tomcat 설치(64bit)    : apache-tomcat-8.5.12_64
     - C:\Jenkins\jenkins.war 파일을 -> \apache-tomcat-8.5.12_64\webapps\  밑으로 붙여넣는다.
     - jdk, jre 설치(64bit)    : jdk1.8.0_121, jre1.8.0_121
     - 환경변수 추가 : JRE_HOME  -> C:\Java(x86)\jre1.8.0_121
     - tomcat start  (cmd를 이용해서 '\apache-tomcat-8.5.12_64\bin\startup.bat' 실행
     - jenkins접속 url : http://localhost:8080/jenkins
     - pw : C:\Users\farmerkyh\.jenkins\secrets\initialAdminPassword
     - pw입력 후 [continue]
     - [Customize Jenkins] - 아래 버튼 2개 존재
       . Install suggested plugins : 권장설치
       . Select plugins to install : 사용자설치
        (권장설치)버튼 클릭
     - 여러가지 plugin 기능이 설치 됨
     - Create First Admin User
        계정명 : jenkins
        암호    : jenkins
        이메일주소 : 입력필수(차후 언제 필요할지 몰라서)

12. jenkins - Maven으로 빌드하여 Tomcat으로 배포 설정
     - Main화면.좌측메뉴 > Jenkins관리 클릭
       . 정의 : jenkins의 모든 설정을 관리하는 페이지
     - [Global Tool Configuration] 클릭
       . JDK -> [Add JDK]
          - [ ] Install automatically : 체크 해제
          - Name : jdk1.8.0_121
          - JAVA_HOME : C:\Java(x86)\jdk1.8.0_121
       . Maven
         - Name : hrMaven
         - [v] Install automatically : 자동설치 됨
         - Install from Apache. Version[3.5.2]
       . [Save]

       .
       .
       .
       .
       .

12. jenkins - 새로운 job만들기
     - Main화면.좌측메뉴 > 새로운 Item 클릭
       . name [ newHR ]
       . [Freestyle project] 버튼 클릭
       . [OK] 버튼 클릭
     - [General]
       .
       .
       .
       .
       .
       .
       .

[ myBatis. Sql WHERE문에서 in 처리 ]

[ 방법 1 ] - List이용

1. java단 - List객체 만들기

    - 콤마를 구분으로 해서 넘어온 문자열을

       myBatis에서 필요한 List 객체로 만들기

    public static List<String> makeForeach(String code){ String gb = ","; return makeForeach(code, gb); } public static List<String> makeForeach(String code, String gb){ if (code == null || "".equals(code)) { return null; } List<String> codeList = new ArrayList<String>(); String[] aCode = code.split(gb); for(int i=0; i< aCode.length; i++){ codeList.add(aCode[i].toString()); } return codeList; }    

2. java단 - mybatis호출

    - foreach문 설명

       . collection : java단에 collection객체명

       . item          : mybatis에서 사용할 명칭 (새로 지정가능)

3. mybatis - in 처리

    <select id="selectEmpList" resultType="gdmimap"> SELECT * FROM 사원테이블 WHERE EMP_NO IN <foreach collection="empNoList" item="code" index="index" separator="," open="(" close=")"> #{code} </foreach> </select>

[ 방법 2 ] - dynamic 이용

1. java단 - mybatis호출

2. mybatis - in 처리

    <select id="selectEmpList" resultType="gdmimap"> SELECT * FROM 사원테이블 WHERE EMP_NO IN (${empNoList}) <-- empNoList에 항상 값이 존재 할 경우 또는 WHERE EMP_NO IN ('' ${empNoList}) <-- empNoList에 값이 안들어 올수도 있는 경우. (단, 존재 시 맨 앞쪽에 콤마 필요) </select>

[ 방법 3 ] - dynamic 이용  (테스트하지 않았음. 안될 확율이 100%) - 잘 연구해서 적용 ^^

1. java단 - List<Map<String, Object>> 객체 만들기

2. java단 - mybatis호출

    List<Map<String, Object>> listMap = convertToMapList("1001,1002,1003,1004,1005", "A01,B21,D03,F04"); Map<String, Object> search_map = new Map<String, Object>(); search_map.put("codeListMap", listMap);

3. mybatis

[ myBatis - isEmpty, isNull ]

* ibatis에서 <isEmpty> <isNull>등이 사용가능 했지만 Mybatis에서는 불가.

[ myBatis. if. case 문 ]

1. 대소문자 무시

2. and, or

3. 한글자만 비교 할때는 반드시 .toString()을 해줘야 됨

    <if test="getAllYn == null or getAllYn != 'Y'.toString()"> ... </if>

    또는 case문장에서

   <when test="s_keyword.equalsIgnoreCase('W')"> 하거나
   <when test='s_keyword.equals("W")'> 이렇게 처리한다.

4. in, or를 여러개

    <if test="변수명 in {'A', 'B', 'C'}"> 쿼리 </if> ... </if>

5. case 문