본문 바로가기
etc/블록체인 뉴딜일자리사업

자바스크립트 제어문, 함수 활용 / 블록체인 이론

by vellahw 2023. 5. 11.

 

💭 서론

교육 6일차 #mood

오전은 블록체인 이론, 오후는 자바스크립트 기초 수업을 했다. 고정된 강사님이 아니다보니 강사님마다 수업 스타일과 목소리 톤 등이 다른데 이번 오전 시간은 수업을 따라가기가 ... ㅠㅠ 최대한 열심히 들었다.
오전은 비잔틴(비잔티움) 장군 문제를 시작으로 블록체인 세대 구분과 경제사회 변화에 대한 수업을 했고 오후 시간은 제어문 복습 실습 문제를 풀고 함수를 이용한 간단한 이벤트 처리 등이 진행됐다. 오후 시간은 실습 위주라 어제와 같이 쉽지만 지루하지 않게 들었다!

 
 


블록체인 이론

 

✔️ 비잔틴 장군 문제와 합의 알고리즘

비잔틴 장군 문제란 네트워크 내에 배신자가 있더라도 합의 내용에 문제가 없도록 하는 방법을 해결하고자 하는 방안이다. 비잔틴 장애 허용(BFT)이 제시되었고 이를 비동기식 네트워크 상황에서도 합의를 보장하도록 블록체인 방식(PBFT)으로 발전하였다.
 

BFT(Byzantine Fault Tolerance)

분산 시스템에서 각 노드는 다른 노드의 상황을 모르기 때문에 보낸 메세지가 정상적이라고 볼 수 없다. 일부 노드에게 잘못된 메세지를 보내는 노드를 가정한 것이 Byzantine Failure 모델인데 이 모델에서 정상적으로 작동하는 시스템을 BFT라고 한다.

 
PBFT(Practical Byzantine Fault Tolerance)

Barbara Liskov와 Miguel Castro가 90년대 후반에 도입한 합의 알고리즘이다. PBFT는 비동기식 시스템에서 효율적으로 작동하도록 설계되었으며 네트워크 내에 배신자가 있더라도 성공적으로 합의를 이룰 수 있도록 한다.
 
 

✔️ Public 블록체인과 Private 블록체인

- Public 블록체인

  • 비트코인
  • 많은 수의 노드들이 자유롭게 참여하는 만큼 노드들을 신뢰할 수 없음

 

- Private 블록체인

  • 공공기관 등에서 사용하는..
  • 허가를 받아야 참여할 수 있기 때문에 신뢰할 수 있는 소수의 노드들만 참여됨
  • 대표적으로 하이퍼레저 패브릭

👀 하이퍼레저 패브릭 
하이퍼레저 패브릭은 퍼블릭 블록체인과 다르게 합의 알고리즘을 선택해 사용할 수 있고, 참여자를 제한하고 권한을 통제하는 등의 관리 체계를 가진다. 일부 개방된 형태나 완전 폐쇄 된 형태 등 목적에 따라 다양하게 설계할 수 있다. (출처)
증명자와 이용자의 참여에 따른 무허가형 / 허가형 블록체인으로도 나눌 수 있음..
 
 

✔️ 블록체인 기술의 세대 구분 

- 1세대 2009년~2014년

  • DLT 기술 기반
  • 암호화폐인 비트코인이 등장한 이후 주로 디지털 통화의 발행, 유통 및 거래 용도로 활용됨

 

- 2세대 2015년~2019년

  • 이더리움 등의 프라이빗 블록체인 출현
  • 이더리움의 스마트 컨트랙트를 시스템에 채택하며 플랫폼 성격의 기술이 등장함
  • dApp의 확산

(참고)

 

- 3세대 2020년~ 

  • 확장성, 보안성, 상호운용성 기술적 문제를 해결
  • PoS

(참고하면 좋을 글)

 
 

✔️ 블록체인 혁명과 경제사회 변화

https://youtu.be/Pl8OlkkwRpc

추천해주신 발표 영상..
 

 
 


자바스크립트 기초

 

✔️ 제어문 - 실습을 통한 복습

1. 숫자 0~10 중 짝수끼리만 더하기 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>짝수 더하기</title>
	<link rel="stylesheet" href="css/even.css">
</head>
<body>
	<h1>짝수끼리 더하기</h1>
	<script>
		var i = 10;
		var sum = 0;

		for(j=0; j<=i; j++){
			if(j % 2 == 1) { //홀수 감별
				continue; //for문 다시 시작
			} else {
				sum += j;
				document.write(j + ' ------ ' + sum + '<br/>');
			}
		}
	</script>
</body>
</html>

출력 화면

 

2. 사용자가 입력한 숫자가 짝수인지 홀수인지 구분하는 프로그램

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>짝수일까, 홀수일까</title>
</head>
<body>
	<h2>짝수일까, 홀수일까</h2>

	<script>
		var num = prompt('숫자를 입력하세요.');

		if(num % 2 == 1) {
			document.write(num + '은/는 홀수입니다.');
		} else {
			document.write(num + '은/는 짝수입니다.');
		}
	</script>
</body>
</html>

 

출력화면

 

3. 1부터 100까지 숫자 중 3의 배수를 모두 표시하고 몇 개인지 개수도 표시

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>3의 배수 찾기</title>
	<style>
		body {
			font-size:1.2em;
			text-align:center;
		}
	</style>
</head>
<body>
	<h2>3의 배수 찾기</h2>

	<script>
		var count = 0;
		
		for(i=1; i<=100; i++){
			if(i % 3 == 0) {
				document.write(i + ', ');
				count += 1;
			}
		}
		document.write('<p>3의 배수의 갯수: ' + count + '</p>');
	</script>
</body>
</html>

출력화면

 

4. 나이가 20세 초과, 40세 미만인 사이 값만 입장을 환영, 그 외에는 입장을 허락하지 않는 출력문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if문</title>
</head>
<body>

    <script>
       var age = prompt('나이를 입력해주세요.');

       if(20 < age && age < 40){
        alert('입장을 환영합니다.');
    } else {
           alert('입장이 허락되지 않았습니다.');
       }
    </script>
</body>
</html>
  • && 비교연산자는 모든 조건이 만족해야만 한다. 하나라도 만족하지 않으면 제어문 통과하지 않음

 
 
출력 결과▼

 

 

5. 변수로 학년 값을 입력 받아 학년 별 각 교실로 안내하는 프로그램

  • switch–case문, break문 사용
  • 1학년 : 1, 2학년 : 2.. 입력받기
  •  
    1학년=> “1”, 2학년 => “3”, 3학년 => “별관”, 기타 => “1안내실로 안내 후 해당 프로그램 빠져나오기
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제어문 : switch문</title>
</head>
<body>
    <script>
        var grade = prompt('학년을 입력하세요.', '1학년: 1, 2학년: 2, 3학년: 3, 기타: 4');
        
        switch(grade) {
            case '1': 
               document.write('<p>1층으로 가세요.</p>');
                break;
            case '2':
                document.write('<p>3층으로 가세요.</p>');
                break;
            case '3':
                document.write('<p>별관으로 가세요.</p>');
                break;
            default:
                document.write('<p>1층 안내실로 가세요.</p>');
                break;
        }
    </script>
</body>
</html>
  • prompt로 받은 숫자는 문자이기 때문에 case문엔 따옴표를 붙여 작성!

 
 

✔️ 함수

//함수의 기본 형태
function addNumber(){
    var sum = 10+20;
    console.log(sum);
}

addNumber() //함수 호출

함수를 생성하고 간단하게 이벤트를 연결하는식으로 수업이 진행 됐는데 이미 기초를 알고있으니 나는 ES6 문법인 화살표 함수로 작성해보고자 했다.
 

🧷 버튼 클릭하면 숫자 입력 받아 더한 값 출력하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>함수</title>
	<link rel="stylesheet" href="css/add.css">
</head>
<body>
	<button onclick="addNumber()">덧셈 계산하기</button>
</body>
<script src="./js/add.js"></script>
</html>

 

const addNumber = () => {
    var num = prompt('1. 숫자를 입력하세요.');
    var num2 = prompt('2. 숫자를 입력하세요.');
    var sum = Number(num) + Number(num2);
    alert(sum);
}

△ add.js
 
 

익명함수

//형태
var add = function (a, b){
    return a + b;
}

//사용
var sum = add(3, 4);

//호출
console.log(sum) //값: 7

 
즉시 실행 함수

//함수 선언시 소괄호에 묶어 선언하면 바로 실행됨
var result = (function (){
    return 10+20;
}());

 
 
 
 

✔️ 화살표 함수

  • 익명함수에서만 사용할 수 있다.

 

//기본 함수 선언 방식
const hi = function() {
   return "안녕하세요?";
}
        
//화살표 함수로 표현  
const hi = () => {return "안녕하세요?"};

//중괄호와 리턴 생략 가능
const hi = () => "안녕하세요?";
        
//호출        
alert(hi());

 

매개변수를 사용

let hi = (user) => { document.write (user + "님, 안녕하세요?"); }
        
//매개변수 하나일 때 괄호 생략 가능
let hi = user => { document.write (user + "님, 안녕하세요?"); }

//함수 호출+매개변수 넣기
hi("경희");

 

매개변수 2개

let sum = (a, b) => { return a + b }

//중괄호와 리턴 생랼 가능
let sum = (a, b) => a + b;
        
//함수 사용
document.write("두 수의 합 : " + sum(10, 20));

 
 

✔️ let 변수

  • ES6에서 변수 선언시 사용할 예약어로 권장함
  • 값을 재할당할 수는 있지만 재선언은 불가능
  • 선언하기 전 사용할 경우 오류 메세지 발생

 

재선언 불가 오류

 

var x = 100;

test();

function test() { 			
	document.write("x is " + x + ", y is " + y);
  let y = 200;
}

변수 선언하기 전 사용 오류

 

 

🧠 실습문제

1. 매개변수 두 개를 받아 두 값이 같다면 두 변수를 곱하고, 값이 같지 않다면 두 수를 더하는 함수 sumMulti를 작성.

  • 값 5와 10을 sumMulti 함수로 넘겨 실행했을 때와 10과 10을 sumMulti 함수로 넘겨 실행했을 때 결과 값을 출력
<script>
function sumMulti(a, b) {
	if(a == b) {
		var result = a * b;
		return result;
	} else {
		var result = a + b;
		return result;
	}
}

document.write('<p><strong>변수 5와 10: '+ sumMulti(5, 10) +'</strong></p>');
document.write('<p><strong>변수 10과 10: '+ sumMulti(10, 10) +'</strong></p>');
</script>

결과

 

//화살표 함수로 표현!
let sumMulti2 = (a, b) => {
	if(a == b) {
		var result = a * b;
		return result;
	} else {
		var result = a + b;
		return result;
	}
}

 
 

2. 프롬프트 창에서 입력받은 두 숫자의 크기를 비교해 더 큰 숫자를 알림 창에 표시하는 함수를 작성하고 실행

<script>
		var num1 = prompt('첫 번째 숫자를 입력하세요.');		
		var num2 = prompt('두 번째 숫자를 입력하세요.');	
		
		function compare(first, second) {
			if(first > second) {
				alert(first + '이(가) ' + second +'보다 큽니다');
			} else {
				alert(second + '이(가) ' + first +'보다 큽니다');
			}
		}
		
		compare(num1, num2);
	</script>

댓글