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

자바스크립트 이벤트, 디파이 LP

by vellahw 2023. 5. 15.

 

💭 서론

교육 9일차

오전 자바스크립트 기초 수업에서는 이벤트와 DOM을 다루면서 프로그래밍 실습 비율이 훌쩍 늘었다. 수업에선 요소에 onclick 속성을 바로 이용하는 등의 기초적인 방법들을 js를 통해 이벤트 핸들러로 작성하고 화살표 함수를 이용하는 등 자체적으로 응용하여 수업에 참여했다. 오후 블록체인 이론 수업에서는 LP(유동성 공급)을 주제로 뿌리를 내려가 수업이 진행 됐다. 이런저런 이론들을 많이 들었지만... 알다가도 모르겠고 모르다가도 알겠고 뭔?솔?의 향연

 

 

자바스크립트 기초

 

✔️이벤트 다루기

마우스오버 이벤트 (mouseover)

🔗 실습 - 버튼에 마우스를 올리면 상세설명 띄우기

<!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/event.css">	
</head>
<body>
	<div id="item">
		<img src="images/flower1.jpg" alt="">
		<button class="over" id="open">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h4>민들레</h4>
			<p>
				어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다.
				톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다.
				특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.
			</p>
			<button id="close">상세 설명 닫기</button>
		</div>
	</div>	
	<script>
		const openDetailBtn = document.getElementById('open');
		const closeDetailBtn = document.getElementById('close');
		const detailArea = document.getElementById('desc');

		openDetailBtn.addEventListener('mouseover', () => {
			detailArea.style.display = 'block';
			openDetailBtn.style.display = 'none';
		});
	</script>	
</body>
</html>
  • 'mouseover' 이벤트 사용

 

완성

 

🔗 실습 - 상세 설명 닫기

closeDetailBtn.addEventListener('click', () => {
				detailArea.style.display = 'none';
				openDetailBtn.style.display = 'block';
});

위 코드의 openDetailBtn의 마우스오버 이벤트 함수 안에 클릭 이벤트를 추가해줬다.

 

완성

 

 

✔️ 문서 객체 모델(DOM) : Document Object Model

자바스크립트도 객체 지향 언어이다.

html에서 css로 상세설명을 가리고자 하는 상황에서 html에 직접적으로 <h3 style='display:none'> 이런식으로 작성하게 된다면 관리하기 번거롭고 유지보수가 어렵다.

DOM을 이용해 document.querySelector(), document.getElementById()등으로 요소에 접근한다면 객체를 각각 관리하여 유지보수에 좋은 코드를 작성할 수 있다.

 

👀 display와 visibility의 차이

위와 같은 화면이 있을 때 두 속성의 차이를 알아보자

 

 

👀 visibility

visibility는 요소가 있던 위치는 남겨두고 사라지거나 보여진다. 위처럼 원본의 '상세설명'의 내용만 보이지 않고 위치는 공백으로 남아있다.

 

 

👀 display

display는 요소가 있던 위치도 함께 사라지거나 보여진다. 위처럼 원본의 '상세설명' 부분이 아예 사라진다.

 

 

 

✔️ DOM 요소에 접근하기

1. id로 접근하기

//css
#hello {
	display: 'block';
}
//js
document.getElementById('hello').style.display = 'block';
  • 해당 태그의 id 속성으로 접근한다.
  • id 속성의 '값'은 한 문서 안에 한 번만 사용할 수 있다. (hello란 이름으로 id 속성을 중복해서 만들 수 없음!)

 

2. class로 접근하기

//css
.hi {
	display: 'none';
}
//js
document.getElementsByClassName('hi').style.display = 'none';
  • class는 id와 다르게 웹 문서 안에서 여러 번 사용할 수 있다. (hi란 이름의 class 속성 여러개일 수 있음)

 

💡 getElementsByClassName()은 배열로 선택된다.

만약 1개의 요소에 접근하고 싶다면 아래와 같이 인덱스를 사용한다.

 

 

 

✔️ HTML 태그 속성을 가져오거나 수정하는 함수

DOM 요소의 속성 노드에 접근하면 HTML 요소의 속성 값을 원하는 값으로 수정 가능하다.

 

- getAttribute('속성 이름') : 해당 요소의 해당 속성에 지정된 값을 가져옴
- setAttribute('속성 이름', '속성값') : 해당 요소의 해당 속성 값을 설정

 

🔗 실습 - 작은 이미지를 클릭하면 큰 이미지 변경

<!DOCTYPE html>
<html lang="ko">
<head>
	<title>DOM</title>
	<link rel="stylesheet" href="css/product.css">
</head>
<body>
	<div id="container">
			<h1 id="heading">에디오피아 게뎁</h1>
			<div id="prod-pic">
				<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
				<div id="small-pic">
					<img src="images/coffee-pink.jpg" class="small">
					<img src="images/coffee-blue.jpg" class="small">
					<img src="images/coffee-gray.jpg" class="small">
				</div>
			</div>			
			<div id="desc">
				<ul>
					<li>상품명 : 에디오피아 게뎁</li>
					<li class="bluetext">판매가 : 9,000원</li>
					<li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
					<li>적립금 : 180원(2%)</li>
					<li>로스팅 : 2019.06.17</li>
					<button>장바구니 담기</button>
				</ul>				
				<a href="#" id="view">상세 설명 보기</a>				
			</div>
			
			<div id="detail">									
					<hr>
					<h2>상품 상세 정보</h2>
					<ul>
						<li>원산지 : 에디오피아</li>
						<li>지 역 : 이르가체프 코체레</li>
						<li>농 장 : 게뎁</li>
						<li>고 도 : 1,950 ~ 2,000 m</li>
						<li>품 종 : 지역 토착종</li>
						<li>가공법 : 워시드</li>
					</ul>
					<h3>Information</h3>
					<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
					<h3>Flavor Note</h3>
					<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
			</div>
	</div>
	<script src="js/showBig.js"></script>
</body>
</html>

▲ html

 

const bigPicture = document.getElementById('cup');
let smallPics = document.querySelectorAll('.small');

//smallPics은 배열이기 때문에 반복문 사용
for(i=0; i<smallPics.length; i++) {
    smallPics[i].addEventListener('click', showBig);
}

function showBig() {
    let newPic = this.src; //선택된 이미지 속성 가져오기
    bigPicture.setAttribute('src', newPic);
}

▲ js

 

완성

 

 

블록체인 이론

 

🧠 복습

디파이: 탈중앙화 금융, 중앙화 금융에 반대함

  • 예치, 대출, 환전, 유동성 공급(Farming), 4가지 상품이 존재
  • Farm 회사가 하는 일이다. (Web2) <----- > Web3에선 유동성 공급자(개인)가 함
  • 탈중앙화 거래소(대표적으로 유니스왑)

 

 

✔️ LP 공급(=유동성 공급)은 어떻게 하나?

LP: Liquidity Provider: A와 B를 묶어 LP를 생성한다.

예) $50 A 토큰과 $50 B 토큰을 묶어 A-B: 유니스왑에 유동성 공급 -> 유동성 공급은 '바구니'를 만드는 것

이전에 기록한 유동성 공급 '바구니'

 

왜 2가지 토큰/코인이 필요할까?

바구니는 CPMM 매커니즘이다. 즉, 사과와 바나나가 없으면 안 됨. 둘을 하나로 묶어야만!

 

💡 유동성 공급의 규칙

1. 두 가지 토큰을 하나로 생성해야 한다.

2. 묶인 토큰의 가치는 항상  동등해야 한다.

3. A 토큰의 가치가 B 토큰보다 높으면 CPMM가 자동으로 AB 가치를 매수와 매도를 통해 맞춘다.

- LP가 묶일 때는 동등 가치만 묶일 수 있다! 50불 만큼의 토큰 A는 그만큼의 토큰 B가 있어야만

- 둘 중 하나가 적으면 많은쪽을 매도해서 적은 쪽을 매수

 

* 가격은 항상 움직이는데 이로인해 '바구니'의 가치가 움직인다.

   왜? 토큰의 가격 피드를 참조하는 오라클 때문에... 손실이 날 수 밖에 없는데 이것을 impairment Loss

   가격 변동이 변동되면 사람들은 유동성 공급을 철회하고자 한다.

 

Stablecoin은 유동성 공급이 많다

잡코인은 적음 (신뢰가 적기 때문에..)

 

아비트라지 Arbitrage : 재정거래. 차익거래

탈중앙화 거래소 GMX는 바이낸스 선물 옵션 파생 거래를 제공했다.

0% 슬리피지(0% loss)를 주장함 외부 가격 참조한 오라클을 사용했기 때문에..?

 

 

✔️ 탈중앙화 거래소 거래시 어떤 비용이 드나?

1. 슬리피지 Slippage

탈중앙화 거래소에서 도지 코인을 담고 있는 바구니는 수 백개가 되는데 서로 다른 거래소에서 서로 다른 가격을 갖고 있다. 합의 가격을 수렴하는데 A거래소에서 도지를 교환할 때 바구니에 도지 개수가 비정상일 수 있다. 예를 들어 내가 산게 비싼 가격이라면 손해가 발생하는데 이 손해가 슬리피지이다. 거래 당시 수요와 공급에 따라 달라지기 때문에 발생함 (가격 차이 손해라고 보면 될듯한... 탈중앙화 거래소 말고도 언제나 존재하는!)

 

탈중앙화 거래소에서는 슬리피지를 어떻게하면 최적화할 수 있을까?라는 고민

가장 잘하고 있는 곳 => 1인치 (유니스왑 다음으로 최고의 DEX)

슬리피지를 어떻게 줄였을까? 수 백개의 바구니를 자체적으로 비교해 최적의 루트를 찾아줌 (=가격이 가장 좋은 바구니를 찾아줌)

 

2. 유니스왑의 v3

탈중앙화 거래소를 발표하고 '집중화된 유동성 Concentrated Liquidity'을 발표(?) 

사과와 바나나 즉, 바구니 참여자들은 매우 많을 수 있다. 거래수수료(0.3%)가 발생하는데 이 수수료를 바구니 유동성을 공급한 모든이에게 1/n 해서 제공했는데 당연히 수익이 낮았다.

바구니 안에 사과와 바나나가 매우 많은데 이 바구니 속 바나나 1프로만 사용되고 있다. 그 나머지 99%는 잉여, 아무 소용이 없는 것이었다.

==> 사용된 자본을 공급한 유동성 공급자에게만! 수수료 줄게~~

v3도 오픈소스였으나 라이센싱함 (근데 다시 오픈소스가 된듯한..?)

 

유니스왑의 v3도 Curve Finance의 매커니즘을 가져온 것임

스테이블 코인의 Hub(허브)인데 거래 수수료가 많이 창출되는 디파이 인프라 성격을 갖고 있는 프로토콜이다. 누구나 유동성 공급을 할 수 있고 누구나 원하는 바구니를 만들 수 있다.

다만, Pool에서 나오는 수수료를 오래전부터 허브 Finance의 거버넌스 토큰 $veCRV를 갖고 있는 투자자들의 투표를 받아 분배함

=> CRV 토큰에 대한 수요 증가 및 투표권 행사/유치하기 위한 것들이 탄생함

 

 

탈중앙화 거래소의 발전

비트코인 마켓 (2010) -> 이더델타 (2018) -> 유니스왑 (2020) -> 유니스왑 v3 (2022-2023)

 

 

거버넌스

web2에서의 거버넌스: 회사의 주요 주주는 누구?  실 소유자가 있음(삼성..)

web3 에서의 거버넌스: 시장 참여자들 모두. 소유자가 없다. 유니스왑을 개발한 회사는 있는데 의사결정은 거버넌스가 한다. 

 

 

저작자표시 비영리 변경금지

'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글

스마트 컨트랙트 찍먹  (0) 2023.05.17
자바스크립트 노드 다루기, 이벤트 핸들러  (0) 2023.05.16
자바스크립트 기초: 디데이 계산, 배열 / NFT 역사  (0) 2023.05.12
자바스크립트 조건문, 객체, 생성자 함수 / 토크노믹스 분석법  (0) 2023.05.11
자바스크립트 제어문, 함수 활용 / 블록체인 이론  (1) 2023.05.11

관련글

댓글

티스토리툴바