나도개발자

아스키

영문숫자공백 1바이트 한글 2바이트,

utf-8

영문숫자공백 1바이트 한글 3바이트

utf-16

영문숫자공백한글 모두 2바이트

256비트 (= 32바이트)의 키 값을 가짐.

AES는 키 값의 길이와 무관하게 128비트(= 16바이트)의 블록 단위로 암호화를 수행함.

** 코드상으로 보면 subString(0,16)을 한다!

만약 128비트보다 작은 블록이 발생하면 패딩 작업을 통해 부족한 부분을 특정값으로 채움.

** 패딩 작업엔 (PKCS5, PKCS7 방식이 있음)

** "AES/CBC/PKCS5Padding" 식으로 작성

코드

public class AES256 {
    public static String alg = "AES/CBC/PKCS5Padding";
    private final String key = "hyeryunsKeyMyKeyMyEncryptedKey==";
    private final String iv = key.substring(0, 16); // 16byte

    public String encrypt(String text) throws Exception {
        Cipher cipher = Cipher.getInstance(alg);
        SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
        IvParameterSpec ivParamSpec = new IvParameterSpec(iv.getBytes());
        cipher.init(Cipher.ENCRYPT_MODE, keySpec, ivParamSpec);

        byte[] encrypted = cipher.doFinal(text.getBytes("UTF-8"));
        return Base64.getEncoder().encodeToString(encrypted);
    }

    public String decrypt(String cipherText) throws Exception {
        Cipher cipher = Cipher.getInstance(alg);
        SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
        IvParameterSpec ivParamSpec = new IvParameterSpec(iv.getBytes());
        cipher.init(Cipher.DECRYPT_MODE, keySpec, ivParamSpec);

        byte[] decodedBytes = Base64.getDecoder().decode(cipherText);
        byte[] decrypted = cipher.doFinal(decodedBytes);
        return new String(decrypted, "UTF-8");
    }
}

뷰 및 axios 설치. 실행

npm init
npm i
npm i -g npm@latest
npm i -g @vue/cli
npm i axios

npm run serve

- axios를 통해 서버단 다녀오기 axios.get(url)~~~

axios.get(url).then((res) => {
	console.log(res)  
}).catch((err)=>{
	console.log(err)
})

- axios를 통해 데이터도 함께 보내기 axios.post(url,{data})~~~

axios.post(url,{
    A: 'dataA',
    B: 'dataB'
}).then((res) => {
	console.log(res)  
}).catch((err)=>{
	console.log(err)
})

methods: {}로 서버단으로 전송,

mounted(){}는 페이지 로딩과 동시에 실행될 수 있게 해줌.

data(){}를 통해 값을 화면으로 보여줄 수 있음.

<script>
import axios from 'axios'

export default {
	name: 'App',
	data(){
		return {
			name: ''
		}
	},
	methods: {
		test(){
			const url = '/api/test'
			axios.get(url).then((res) => {
				this.name = res.data.name
			}).catch((err) => {
				console.log(err)
			})
		}
	},
	mounted(){
		this.test()
	}
}
</script>

뷰단에 데이터 보이도록!

<template>
	<div>
		{{ name }}
	</div>
</template>

뷰단에서 입력한 값 서버단으로 보내기!

v-model을 이용하면 scripte단에서 this.____으로 입력값을 가져올 수 있다.

클릭이벤트 거는 방법. href="javascript:;" @click.prevent='메서드명'

<template>
	<div>
		<input type="text" v-model="name">
	</div>
	<div>
		<button href="javascript:;" @click.prevent="test">버튼클릭</button>
	</div>
</template>

<script>
import axios from 'axios'

export default {
	name: 'App',
	methods: {
		test(){
			axios.post('/api/test',{
				name: this.name
			}).then(res) => {
				console.log(res)
			}).catch((err) => {
				console.log(err)
			})
		}
	}
}
</script>