[TIL] 2023-03-20 DAY4
블록체인 기초
- 블록체인의 주요 섹터 3가지 -> 발행 거래 검증
- 합의 알고리즘이 등장한 이유 -> 탈중앙화된 익명의 불특정 다수를 제어하기 위한 검증 시스템(SHA256 - 문제를 푸는 사람이 보상을 가져가는 게임)
- 풀노드
Trade Off : 효율 <-> 안전
-
해쉬 값 : 16진수인 64자리의 숫자(SHA256)
-
머클 루트 : 블록내의 포함되어 있는 모든 거래의 정보를 담고있음
-
블록체인 구조 : 이전 해쉬(previous Hash) 값을 가지고 서로 연결됨
-
공개키
계좌번호 역할
개인키로부터 형성
받을 때 필요 -
개인키
비밀번호 역할
보낼 때 필요 -
채굴
컴퓨팅 파워를 사용하여(논스를 바꾸며 -> 논스가 바뀌면 해쉬 값이 바뀜) 문제를 푸는 과정(블록 생성 과정)
블록 생성 보상+거래 수수료
풀노드(체인을 갖고 있는 사람)는 보상을 안받는다 -> 채굴자들만 보상을 얻는다
target 값을 조정하여 난이도를 조절하며 블록 평균 생성시간을 맞춘다
- 51% 공격
컴퓨팅 파워를 51%이상 차지하여 체인의 길이를 기존 길이보다 길게 만든 다음, 자신이 만든 체인으로 교체
HTML CSS SCSS
-
세트
max-width + margin:auto -
이미지 크게 하기
.contentsCardImg img {
display: block;
width: 290px;
/* hover 애니메이션 */
transition: all 0.5s;
}
/* 줌 효과 주기 */
.contentsCardImg img:hover {
transform: scale(1.1);
}- 블록과 inline블록 차이점
블록 -> 라인전체 차지
inline -> 컨텐츠 크기만큼 라인 차지
inline블록 -> 블록의 특성과 inline의 특성을 모두 가짐(블록을 한줄에 배치)
ex)
- node.js
JavaScript 실행기
npm -> nodejs 진영의 앱
node --version //버전 확인
npm --version //버전 확인
npm install -g sass //sass 설치- scss
input.scss에서 편하게 css파일을 업데이트 할 수 있음
sass --watch input.scss style.css // style.css 생성후 실시간 반영 시작- scss 문법
// 변수 설정 가능
$offBlack: #253342;
h1 {
color: $offBlack;
}
// 중괄호 사용 가능
div {
h1 {
color: $offBlack;
}
}효과적인 코드 관리법
Modules
// input.scss 파일
@use "color";
div {
h1 {
background-color: color.$offBlack;
}
}
// color.scss 파일
$offBlack: #253342;-> 중괄호 사용가능, 함수화 가능(@use), 변수 불러오기 가능(@import)
Mixins
// input.scss 파일
@import "button";
.info {
@include btnStyle;
}
.alert {
@include btnStyle($color: darkred);
}
.success {
@include btnStyle($color: darkgreen);
}
// index.html
<body>
<button class="info">조회</button>
<button class="alert">취소</button>
<button class="success">확인</button>
</body>
// button.scss 파일
@mixin btnStyle($color: darkgray) {
background-color: $color;
color: whitesmoke;
border: 0;
border-radius: 12px;
padding: 12px;
}-> 공통되는 속성을 모아놓고 변화가 필요한 부분만 변경하면 되므로 효율적인 코딩이 가능해짐
Extend
// input.scss 파일
@import "button";
.info {
@extend %btnStyle;
background-color: darkgray;
}
.alert {
@extend %btnStyle;
background-color: darkred;
}
.success {
@extend %btnStyle;
background-color: darkgreen;
}
// index.html
<body>
<button class="info">조회</button>
<button class="alert">취소</button>
<button class="success">확인</button>
</body>
// button.scss 파일
%btnStyle {
color: whitesmoke;
border: 0;
border-radius: 12px;
padding: 12px;
}
-> mixins 보다 직관적임
HELLO!