[멋쟁이 사자처럼 블록체인 스쿨 3기] 23-03-22

임형석·2023년 3월 22일
0

기초암호학


방향성

단방향 암호화

암호문에서 평문으로 복호화 할 수 없는 방법이다.

Hash 함수는 대표적인 단방향성 암호화 방식이다.

특정 문자를 Hash 함수의 입력값으로 넣고 결과물을 받으면 결과물(암호문)을 입력값(평문)

으로 역추적이 불가능하다.

비밀번호나 비트코인등에 사용된다.

양방향 암호화

양방향 암호화는 평문으로 복호화 할 수 있는 방법이다.

대칭키와 비대칭키 방법이 있다.

대칭키 방법은 비공개키라고도 불림. 암호화와 복호화에 같은 키를 사용.
대칭키 방법은 한개의 키로 암호화, 복호화가 모두 가능

비대칭키 방법은 공개키라고도 불림. 암호화와 복호화에 다른 키를 사용.
공개키는 언제나 공개되어있음. 수신자의 공개키로 평문을 암호화 한다.
비대칭키는 공개키로 키로 암호화,비공개키로 복호화 가능

암호문은 수신자의 비공개키로만 복호화 할 수 있다.

암호화와 복호화 방법 실습


JS

=오른쪽 내용을 왼쪽에 대입함.
== 스트링 같은 타입도 같다고 나오고 좀더 유연함.
=== 엄격해서 타입도 같아야 함.

IF 문

x가 A 라면, B를 실행해라 라는 식으로 만약~ 하는 문법이다.
if 아래에 else if, else 를 사용할 수 있다.
else if 란, if문 안에서 한번 더 if 문을 사용할때,
else 란, 모든 if문에도 해당되지 않을 때 사용한다.

const alpha = 1
if (alpha === "1") {
	console.log("false")
}   else if (alpha == "1") {
	console.log("true")
}	
	else {console.log("?")}

클래스 알파에 1 대입
만약 알파가 스트링 1 이라면,
콘솔에 false 스트링 출력.
그게 아니라면, 알파가 스트링 1 또는 인트 1 이라면,
콘솔에 true 스트링 출력.
그 외의 경우 콘솔에 ? 스트링 출력.

위처럼 해석할 수 있다.

이걸 여러번 꼬아서 알고리즘 문제로 만들 수 있다.


호출할때

.class
#id
tag

이렇게 사용.


JS 이용해서 시계 만들기

function getTime() {
	const time = document.querySelector(".time")    >>> .time 클래스를 지정
   
   const newDate = new Date();     >>> newDate 클래스에 현재시간 대입
   
   const hours = newDate.getHours();
   const minutes = newDate.getMinutes();
   const seconds = newDate.getSeconds();      >>> 현재시간의 시간,분,초 추출
   
   time.innerText = hours + ":" + minutes + ":" + seconds;
}

getTime();         >>> 함수 호출
setInterval(getTime, 1000);        >>> 1000ms 마다 시간을 업데이트 함
   

이렇게 사용하게 된다.

그런데 이렇게 사용한다면, 1시 1분 1초는 (1:1:1) 로 보여진다.

그래서 아래 처럼 쓴다면,

const hours = String(newDate.getHours()).padStart(2,"0");

00:00:00 으로 보여지게 된다.

padStart , String 두개를 사용하면 된다.

.padStart(maxLength, fillString) 

maxLength 만큼 숫자가 채워지지 않는다면 fillString 으로 앞을 채워준다.

그래서 2,"0" 을 넣어준다면, 1시일때는 길이가 1 이므로 "0"을 앞에 채워서 01시로,

11시일때는 그대로 11시로 출력된다.


animate

Animate.css 사이트

위 사이트에서 각종 애니메이트를 확인하고 적용할 수 있다.

<div class="animate__animated animate__fadeInDown">
  <div class="time">Time</div>
</div>

시계에도 움직임을 적용 가능.

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
<div class="animate__animated animate__bounce animate__faster">Example</div>

repeating, faster 등 여러가지 적용가능하다.

0개의 댓글