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

Spring 기본설정(pom.xml, web.xml, encoding)

2019-04-19 00:00:00 +0000

최소한의 Spring 기본 설정

프로젝트 기본 설정

  • File - New - Spring Legacy Project - Spring MVC 프로젝트 선택
  • Spring Verison 5.0.7로 변경
<properties>
           <java-version>1.6</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>
</properties>

pom.xml 설정

  • Java Version 변경
  • 스프링 5.x 버전을 사용할 때 JDK 1.8을 사용하는 것이 가장 좋다
  • maven-compiler-plugin 내용을 1.6에서 1.8로 수정(version도 바꿨다)
<groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.5.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                     <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
</configuration>
  • lombok 설정
  • lombok 공식 사이트
  • lombok 공식 사이트에서 lombok 다운로드하여 설치한 후 pom.xml에 설정 추가
<!-- lombok -->
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-test</artifactId>
	<version>${org.springframework-version}</version>
</dependency>
<dependency>
	<groupId>org.projectlombok</groupId>
	<artifactId>lombok</artifactId>
	<version>1.18.0</version>
	<scope>provided</scope>
</dependency>
  • junit 설정 추가
<dependency>
	<groupId>junit</groupId>
	<artifactId>junit</artifactId>
	<version>4.12</version>
	<scope>test</scope>
</dependency>

한글 설정

  • web.xml에 한글 인코딩을 하도록 utf-8 filter를 설정한다
    <!-- 한글 인코딩 설정 -->
     <filter>
           <filter-name>encodingFilter</filter-name>
          <filter-class>org.springframework.web.filter.CharacterEncodingFilter
           </filter-class>
           <init-param>
                <param-name>encoding</param-name>
                <param-value>UTF-8</param-value>
           </init-param>
     </filter>
     <filter-mapping>
           <filter-name>encodingFilter</filter-name>
           <url-pattern>/*</url-pattern>
     </filter-mapping>
  • tomcat server.xml에서 Connector에 Encoding 설정을 추가한다
<Connector connectionTimeout="20000" port="60000"  protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8" />
<Connector port="8009" protocol="AJP/1.3"  redirectPort="8443" URIEncoding="UTF-8"/>
  • View단에서도 Encoding 설정을 추가한다
<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">

<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html;  charset=UTF-8">
     <title>Home</title>
</head>
<body>
<h1>
     Hello world!  
</h1>
<P>  The time on the server is ${serverTime}. </P>
</body>
</html>

Vue.js computed, methods, watch

2019-04-15 00:00:00 +0000

Vue.js computed, methods, watch

computed 속성

  • 템플릿 안에 간단한 코드를 넣는 것이 좋다
  • 20 이 소스는 복잡하다. 간단하게 표현할 수 있는 Computed 속성을 사용해야 한다
  • computed 속성에 함수를 정의한 후 안에 호출하면 된다
<div id="test">
  
</body>
<script>
new Vue({
  el: '#test',
  computed: {
    checkEvenNumber: function(){
        return 20 % 2 == 0 ? '짝수' : '홀수';
    }
  }
})
</script>
  • computed는 캐싱을 사용하여 저장된 곳에 변경사항이 있을 때만 함수를 실행.
  • method는 렌더링을 다시 할 때 마다 함수를 실행

vue.js 메소드

  • method 속성에 사용자 정의 함수를 선언하는 것
<div id="test">
    <h1>  더하기 는  입니다</h>
    <h1>  빼기 는  입니다</h>
</div>
</div>
</body>
<script>
var memberData = {
    firstNum : 10,
    secondNum : 20
};
var memberMethod = {
    addNum : function(num1, num2){
        return num1 + num2;
    },
    MinusNum : function(num1, num2){
        return num1 - num2;
    }
}
var option = {
    el : '#test',
    data : memberData,
    methods : memberMethod
};

var vue = new Vue({
    el : '#test',
    data : memberData,
    methods : memberMethod
});

watch

  • 변경을 감시하고 변경됨에 따라 실행할 동작을 정의
  • computed는 호출한 함수를 실행하는 것이고 watch는 어떤 동작을 감시하여 변경될 때 동작을 실행함(트리거)
  • 멤버변수를 더하는 것은 행위를 실행하는 함수이므로 computed를 사용한다
  • 더한 결과값이 바뀔 때마다 추가적인 동작을 하고 싶다면 watch를 사용한다
<div id="test">
제 이름은  입니다 <br>
<input v-model="myName">
</div>
</body>
<script>
var vm = new Vue({
  el: '#test',
  data: {
    myName: 'wwwwww',
    text: '변경 전입니다'
  },
  watch: {
    myName: function (val) {
        text = '이름이'+this.myName+'으로 변경되었습니다';
    }
}
})
</script>

javascript onkeyup

2019-04-15 00:00:00 +0000

javascript onkeyup

onkeyup

  • 보통 사용자가 로그인을 하기 위해서 id나 password를 적은 후 엔터키를 누르면 로그인이 된다
  • 키를 눌렀는지 여부는 onkeyup 이벤트를 호출하면 알 수 있다.
  • onkeyup 이벤트는 key를 누른 후 땠을 때 호출된다.
  • Enterkey는 window.event.keyCode 값이 13이다

onkeydown Example

  • 아래 소스를 실행하면 input text 상자안에서 enter 키를 입력할 때마다 console 창에 글자가 출력된다
<script>
function requestLogin(){
    if(13 == window.event.keyCode){
        console.log('enterKey누름');
    }
}
</script>
</head>
<body>
<input onkeyup="requestLogin();" type="text" value="" />

Maria DB Incorrect string value Error

2019-04-12 00:00:00 +0000

상황

  • 회원가입 구현 중 이름에 영어를 넣으면 성공적으로 회원가입이 되지만 한글을 넣으면 회원가입 실패가 뜸.
  • 서버에서 아래 에러 발생
  • Incorrect string value: ‘\xED\x85\x8C\xEC\x8A\xA4…
[ERROR][][2019-04-12][16:35:46.145] c.a.d.m.d.controller.UserController - [exceptionHandler] [org.springframework.dao.DataIntegrityViolationException] [999] [UNKNOWN_ERROR] [
Error updating database.  Cause: java.sql.SQLDataException: (conn:19) Incorrect string value: '\xED\x85\x8C\xEC\x8A\xA4...' for column 'NAME' at row 1
Query is: INSERT INTO user
    (
            user_seq
           , id
           , password
           , name
    )
    VALUES
    (
        ?
        ,?
        ,?
        ,?
    ), parameters [<null>,'test','MDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjY=','테스트']
The error may involve user.createUserVO-Inline
The error occurred while setting parameters
SQL: INSERT INTO user  (    user_seq      , id      , password      , name  )  VALUES  (   ?   ,?   ,?   ,?  )
Cause: java.sql.SQLDataException: (conn:19) Incorrect string value: '\xED\x85\x8C\xEC\x8A\xA4...' for column 'NAME' at row 1

해결방법

  • 테이블 Charset이 utf8이 아니기 때문에 변환이 실패하여 한글을 넣지 못하는 것으로 추측
  • 테이블 생성 시 기본 CHARSET을 utf8로 설정해준다
  • 한글 데이터가 잘 들어가는 것을 확인
CREATE TABLE `user` (
  `USER_SEQ` bigint(20) NOT NULL AUTO_INCREMENT,
  `ID` varchar(20) NOT NULL,
  `password` varchar(50) DEFAULT NULL,
  `NAME` varchar(30) DEFAULT '',
  PRIMARY KEY (`USER_SEQ`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8

javascript 암호화(md5, base64)

2019-04-11 00:00:00 +0000

암호화(MD5, Base64)

Hash(MD5)

  • Hash함수는 text를 고정길이의 hash값으로 바꿔주는 역활을 한다.
  • 같은 입력에 대해 같은 값이 나온다.
  • 암호화 알고리즘이 공개되어 있어서 보안이 취약하다. 그렇기 때문에 Hash 후 다시 암호화를 해야한다.

Encryption(base64)

  • 정보의 형태나 형식을 보안을 위해 다른 형태로 변경하는 것.
  • Base64란 Binary Date를 Text로 바꾸는 Encoding이다.
  • 둘의 차이는 Hash는 암호화 기능만 있고, Encryption은 암호화, 복호화 기능을 가지고 있다.

Javascript Example

  • CryptoJS 라이브러리
  • CryptoJS.MD5 함수로 쉽게 MD5, Base64를 사용할 수 있다
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script>
$(document).ready(function(){
    // encode
    var hash = CryptoJS.MD5("hello");
    var key = CryptoJS.enc.Utf8.parse(hash);               // hex로 변환
    var base64 = CryptoJS.enc.Base64.stringify(key);  // hex를 원래 포멧으로 변환

    console.log("hash:"+hash);
    console.log("base64:"+base64);
    
    // decrypt
    var decrypt = CryptoJS.enc.Base64.parse(base64);
    var hashData = decrypt.toString(CryptoJS.enc.Utf8);
    console.log("decrypt hash:", hashData);
});
</script>
</head>
</html>

Posts

subscribe via RSS