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

자바스크립트 조건문, 반복문 / 블록체인 게임

by vellahw 2023. 5. 9.

 

💭 서론

교육 5일차

오늘도 오전은 자바스크립트 기초, 오후는 블록체인 이론 수업을 받았다. 자바스크립트 기초를 배우는 만큼 이미 알고있는 내용이었지만 실습시간을 많이 주셔서 지루하지 않게 들었다. 초심 찾는 기분이기도.. ㅎㅎ 오후 시간은 사실 여태까지 강의 속도 따라가는데 급급했었는데 오늘은 뭔가 머리에 들어오는 느낌을 받았다. 재미있기도 했다!

 

 


자바스크립트 기초

 

✔️ 지역변수와 전역변수

  • 지역변수: 함수 내에 선언된 변수
  • 전역변수: 함수 밖에 선언되어 자바스크립트 코드 내 어디서나 접근할 수 있는 변수

 

 

✔️ 복습문제 

1. 사용자로부터 숫자를 입력 받아 cminch 단위로 출력하는 프로그램 만들기

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 숫자를 입력받습니다.
      var number = prompt('cm 단위의 숫자를 입력해주세요.');

      // 입력을 숫자로 변경하고 cm 단위로 변경합니다.
      var cm = Number(number);
      var result = cm * 0.393701;

      // 출력합니다.
     alert(cm + 'cm는 ' + result + 'inch입니다.');
    </script>
  </head> 
  <body>  
  </body>
</html>

 

결과 ▼

 

 

2. 사용자로부터 원의 반지름을 입력 받아 원의 넓이와 둘레를 구하는 프로그램 만들기

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      // 숫자를 입력받습니다.
      var radius = prompt('원의 반지름을 입력해주세요.');

      var area = 3.14 * radius * radius;
      var round = 2 * 3.14 * radius;

      alert('원의 둘레는 ' + area + '이고 원의 넓이는 ' + round + '입니다.');
    </script>
  </head> 
  <body>  
  </body>
</html>

 

결과 

 

 

 

✔️ 조건문

👀 if

 

참일 때만 블록 내용 실행 후 블록을 빠져나감 

 

 

👀 if-else

0을 입력한 결과

 

2를 입력한 결과

 

👀 조건연산자 ?, :

  • 만약 조건이 하나이고 참과 거짓일 때, 결과를 다르게 나오고 하고 싶을 때 사용 
  • if-else 대신 사용
  • (조건) ? 참인 결과 : 거짓인 결과

 

 

💡 조건문은 참이 나올 확률이 더 많은 조건을 먼저 쓰는 것이 효율이 좋다.

if(input == null) {
 alert('값을 입력해주세요!');
} else {
}

만약 사용자의 입력값을 받는 상황에서 위와 같이 코드를 작성했다고 가정 해보자.

우선 실제로 입력하지 않는 사람보다 입력하는 사람이 더 많을 것이다. (필수로 입력해야한다는 가정하에)

위처럼 값을 입력하지 않은 경우를 먼저 작성하게 된다면 불필요하게 무조건 이 조건을 거치게 된다.

따라서 값을 입력 받은 경우 즉, 참이 나올 확률이 더 많은 조건을 먼저 쓰는 것이 효율성이 좋을 것이다.

 

 

 

✔️ 조건문 실습 예제

1. 3의 배수 검사기 

  • 프롬프트 창에서 취소버튼을 누르면 입력이 취소되었다는 메시지 표시
  • 프롬프트 창에 아무 숫자를 입력하면 3의 배수인지 아닌지 확인해서 알려주도록 구현

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>3의 배수인지 확인</title>
	<link rel="stylesheet" href="css/multi3.css">
</head>
<body>
	<div id="result"></div>

	<script>
		var inputNum = prompt('숫자를 입력하세요.');
		var displayArea = document.getElementById('result');

		if(inputNum != null) {
			var calc = inputNum % 3;
			if(calc != 0) {
				displayArea.innerHTML = inputNum + '은/는 3의 배수가 아닙니다.';
			} else {
				displayArea.innerHTML = inputNum + '은/는 3의 배수입니다.';
			}
		} else {
			alert('입력이 취소됐습니다.');
		}
	</script>
</body>
</html>

 

결과 

 

 

 

 

✔️ 복잡한 if-else의 해결 switch~case문 

조건문을 체크하여 다음에 처리할 문장의 위치를 파악한 후 해당 문장으로 가서 바로 처리함

switch~case문의 구조는 다음과 같다.

switch(x) {
  case value1:
    실행코드1;
    break;
  case value2:
    실행코드2;
    break;
  ...
  default:
    실행코드3;
}
  • 변수 x의 값(value)에 따라 그에 맞는 실행코드가 실행된다.
  • 위와 같은 경우 x의 값으로 value1이 들어오면 실행코드1이 실행되고 break를 통해 조건문을 빠져나온다.
  • default문은 생략할 수 있으며 값과 일치하는 case문이 없다면 defualt문의 실행코드3이 실행된다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>세션 선택</title>
	<link rel="stylesheet" href="css/switch.css">
</head>
<body>
	<script>
		var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인", "1");
		
		switch(session) {
			case '1':
				document.write('<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>');
				break; 
			case '2':
				document.write('<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>');
				break; 
			case '3':
				document.write('<p>마케팅 세션은 <strong>205호</strong>에서 진행됩니다.</p>');
				break; 
			default: alert('잘못 입력했습니다.');
		}
	</script>
</body>
</html>

prompt로 각각 1, 2, 3을 입력하면 해당 문구가 화면에 출력된다.

 

💡위 코드의 경우

숫자를 입력 받게 했지만 실질적으로는 문자이기 때문에 위처럼 case 문 값 부분에 따옴표를 붙여주어야 한다.  

 

 

 

✔️ for 반복문

for(초기식 조건식 증감식) { }

for문은 위와 같은 구성이다.

 

 

👀 1부터 100 더하기

<script>
    var sum = 0;
    
    for(i=1; i < 101; i++) {
        sum += i;
    }

    document.write('1부터 100까지 더하면 ' + sum + '입니다.');
</script>

 

 

👀 구구단 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>구구단 - for문</title>
	<link rel="stylesheet" href="css/gugudan.css">
</head>
<body>
	<h1>구구단</h1>

	<script>
		for(dan=2; dan<10; dan++) {
			document.write('<div id="area"><h3>' + dan + '단' + '</h3><br/>');
			for(i=1; i<10; i++) {
				result = dan * i;
					
				document.write(dan + ' X ' + i + ' = ' + result + '<br/>');
			}
			document.write('</div>');
		}
	</script>
</body>
</html>
  1. 중첩반복문을 사용
  2. 1부터 10 미만까지의 반복문을 생성하고 1부터 10을 곱한 값을 담는 변수를 생성한다.
  3. 2번의 반복문을 감싸는 반목문을 생성, 2~9단을 반복한다.
  4. 화면 구현: 1부터 9까지의 곱셈이 끝나면 <div> 닫히는 구성이기 때문에 '몇 단인지 생성되는 반복문'에서 div를 열어주고 곱셉 반복문 블럭 후에 div를 닫아준다.

 

출력 화면

 

 

 

✔️ break & continue

- break : 반복문을 종료시킴 

i가 10보다 작을 때까지 반복문을 돌게 되어있지만 break문으로 인해 별은 하나만 출력되고 반복문이 종료된다.

 

- continue : 이후의 문장은 실행되지 않고 continue 위 문장만 실행됨

실행결과와 같이 별만 출력된다.

 

 

 

 


블록체인 이론

 

🧠 복습

디파이에만 있는 상품 파밍

파밍의 의미: 은행이 하는 일을 개인이나 개인 투자자들이 하게 됨 거기서 발생하는 수수료를 기업이 아닌 개인에게 주는 것!

수익률은 비현실적이었는데 그 이유는 거래 수수료+거바넌스 토큰(쉽게 말해 의견 표출 권한..)이기 때문이다.

토큰은 시장에 따라 변동성이 컸기 때문에 안정성이 없었고 사용자 유치를 위해 높은 수익률을 줬어야 했다. 그래서 토큰을 발행했는데 너무나 많은 토큰이 발행되었고 이것은 부채가 돼 결국 시장이 하락하게 되었다.

 

21년에 있던 문제점을 23년까지 개발자들이 해결하고자 노력했다.

노력 🤜 사용자에게 제공하는 이자 수익률이 발생되는 구조가 기업과 비슷해졌는데 이것을 Real Yield (서비스를 제공한 댓가로 받는 수입)

대표적으로 이더리움이 발행하는 상품들이 대부분 Real Yield를 창출함

이더리움은 네트워크 운영 능력만 있다면 벨리데이터로 활동 가능하고 4.9% 수익을 얻을 수 있는 구조를 가진다.

이더리움을 운영하는 조각투자 플랫폼 Lido, Rocket Pool, 코인베이스 등으로 시장이 커질 수 있었다.

 

4.9% 수익

이더리움 2.0의 수입은 Execution 레이어(3.8% 고정된 수입 같은)와 Consensus 레이어의 합(성과금 같은)이다.

이것이 리얼 일드

 

매커니즘

MemPool 맴풀 -> Searcher -> 빌더 -> Relayer 릴레이어 -> 벨리데이터 -> 블록체인

 

stETH(예금증서)

개발자들은 비효율적이라고 생각했다. 그래서 아이겐레이어라는 곳이 미들웨어 서비스 제공자들을 대상으로 보안과 검증 서비스를 제공

대표적인 미들웨어 서비스 오라클

체인링크라는 곳이 자체적인 노드를 생성해서 오프체인을 온 체인으로 올렸는데 이것은 효율적으로 보이지만 사용자들은 불안정한 서비스를 받는 것이고 제공자들은 비싼값을 내고 제공하는 것이었다.

아이겐레이어가 stETH를 사용하여 검증하기 시작했는데 검증을 통해 수수료(서비스 사용료)가 발생했다. 서비스 사용료를 사용자들에게 돌려주었는데 이것이 디파이의 하나의 트렌드가 됨..

 

 

 

✔️ 블록체인 게임 AXIE인피니티

21년도 초, 코로나의 여파로 동남아시아권(베트남, 필리핀) 관광산업이 무너지게 됐다. 자연스럽게 해당국가 사람들은 일자리를 잃게 되었고 게임으로 돈을 벌 수 있다는 입소문을 타 온국민이 플레이를 하게 되었다. 이에 투자사들이 대거 투자하게 되었고 사람들에게 알려지게 되었다.

 

🕹️ P2E(Play to Earn)

게임을 하는데 돈을 번다! 플레이어가 게임을 통해 토큰을 벌 수 있음

 

엑시인피니티의 게임 캐릭터들은 NFT이다.

플레이어가 많아지자 NFT가 부족하게 되고 가격이 상승하게 됐다. 이러한 시장의 문제점을 해결하고자 등장한 프로젝트, YGG

YGG는 NFT를 빌려주고 게임을 플레이해서 수익을 서로 공유하는 플랫폼을 만들었고 게임이 굉장히 활성화 되었다.

이러한 형태를 스콜라쉽(장학금) 제도라고 부르게 되었고 블록체인 게임을 개발할 때 항상 고려해야할 기능으로 진화하게 되었다.

 

하지만 엑시인피니티의 흥행은 오래가진 못했다.

그 이유는 엑시인피니티의 구조는 NFT끼리 교배가 가능하기 때문이었다. 인플레이션이 심화됨 즉, 토큰이 무한 발행되어 1년 후 큰 하락을 맞게 된 것이다.

 

 

 

✔️  보완하기 위한 고민, Treasure

슬로건: 게임 플랫폼을 만들어 여러가지 게임을 할 수 있게끔 만들었다! 우린 블록체인의 닌텐도다! 

트레져는 블록체인 게임의 문제점을 해결했다.

  1. 게임끼리의 연관성, 일관성이 없어 플랫폼으로써의 역할을 하지 못했음
  2. 토큰, NFT가 게임마다 다 달랐음
  3. 인플레이션 과다

하지만 트레져는 NFT(아이템)을 통일시켰다. MAGIC이라는 화폐로.. 이로인해 게임 플랫폼의 의미를 살렸다는 평가를 받았다.

트레져는 토큰 무한 발행 방식이 아닌 MAGIC을 채굴하는 방식이었는데 (게임을 해서 NFT를 얻어야하는) 결국 채굴기가 중요해져 P2E가 아니라 PoW라는 평가를 받기도 했다.

 

 

 

✔️  뜻밖의 성공, STEPN 스테픈

2021년의 엑시인피니티와 2023년 The Treasure의 성공 사이에는 아무것도 없었을까?

2022년 미국 게임사에서 블록체인 게임이 나오기도 했다. 하지만 모두 성공하진 못했는데 그이유는 AAA(트리플 A)게임이었기 때문이다. AAA 게임이란 3년 이상의 시간이 소요되고 고사양 게임인 와우, 디아블로. 닌텐도 같은 게임을 말한다.

 

엑시인피니티의 성공은 코로나의 여파가 컸는데 22년도에 출시된 게임들은 기업입장에서 단지 소비자가 게임을 재밌어 하기만 한다면 성공할 것이라고 생각했기 때문이라고..

그러나 STEPN 스테픈이라는 게임이 등장했고 M2E라는 개념이 생겨났다.

 

M2E Move to Earn

  • 움직이면서 돈 번다! 생활 밀접형
  • 캐시슬라이드와 비슷한 구조
  • 바이낸스가 토큰을 상장하며 주목받게 됨

 M2E 시장 규모가 커진 것은 생활 밀접형 App의 시대라고 볼 수 있다.

 

스테픈을 많이 이용한 국가는 일본, 프랑스, 중국이었다는데 이 세 국가는 조깅 문화가 잡혀있는 국가였기에 스테픈이 주목 받을 수 있었다. 게다가 자본이 있는 국가였던 만큼 수익을 낼 수 있었던 것

 

🧷 리서치 실습

1. 스테픈이 얼마나 많은 유저를 확보 했는지 

10,951명? 너무 작아서 진짠가 싶었다..

 

2. 얼마나 많은 수익을 벌었는지

하루에 40억을 벌었었다고

 

3. 왜 하락했는지?

이용자가 몰리며 채굴되는 토큰이 너무 많아졌다. 수요 대비 공급 과도 <= 인플레이션이 심화됨.

GST는 게임 내부에서 신발을 수리하는 등 제한적인 곳에만 사용됐기에 시장에 너무 많은 물량이 풀렸고 결국 수요 없는 공급에 GST 토큰 가격이 곤두박질쳤다. 결국 8달러에 육박했던 GST의 가격은 6개월도 안돼 폭락했고, 현재는 개당 0.02달러에 거래되고 있다. (출처)

 

다시 상승할 수 있을까?

글쎄... 1일 사용자가 40명 정도 밖에 되지 않음. 게임으로서의 가치가 과연 여전한가

 

유저들이 돈을 빼는 비율이 월등히 높음

 

 

 

💭 마치며

오후 시간에 트레져다오에 메타마스크 지갑을 연동하여 The Beacon이라는 게임을 가입하고 맵을 돌아다녀봤다. 넘나리 신기한 것! ㅋㅋㅋ 블록체인 게임 만들기 재밌을 것 같다..

 

 


 

댓글