BlockChain

깃 이란 용어는 개발을 하면서 가장 많이 듣는 용어중 하나이다. 컴퓨터공학과에서 깃을 여러번 써 보았지만, 완벽한 이해없이 당연시하게 사용했던 경우가 많았다. 이를 보충하기 위해 깃을 왜 쓰고 깃을 어떻게 쓰는 지 공부하였다. 오늘은 깃을 설치하는 과정에 대해 알아 보겠다. 

1. 깃 설치하기 

 1-1) WINDOW 기준 :

GIT 공식홈페이지 접속 : https://gitscm.com

설치과정중 Git Bash를 반드시 포함!!

git --version

명령어가 실행 될 시 git 설치완료 / 안될 시 재설치

1-2) 리눅스 깃 설치하기 :

$ sudo apt install git
$ git --version

깃 설치 완료시 git --version을 치면 깃의 버전을 확인할 수 있다.

job 이란 객체가 어떤 식으로 할당되고 저장되는지 생각해 보자. 

const job = {
  job: "senior developer",
  career: "10",
  ageGroup: {
    group: 30,
    person: {
      name: "ingoo",
      id: "web7722",
    },
  },
};

위와 같이

1. job 객체 내부에는 job, career, agerGroup의 키값으로 프로퍼티들이 저장돼있다. 

2. ageGroup 안에는 키 값으로 group 과 person으로 프로퍼티들이 저장돼있다.

3. person 안에는 키 값으로 name과 id 가 프로퍼티로 저장돼있다. 

이때 어떠한 방식으로 데이터가 저장되는지 확인해 보자. 

첫 번째로 job 객체가 생성되면 job 객체는 영역을 할당하고 영역은 키값으로 job, career, ageGroup 으로 나뉜다. 각각의 키값들은 각각의 키에 대한 value 값을 저장하기 위해 값을 저장한 주소를 가리키는데 원시타입 job의 데이터는 senior developer로 원시타입 String, career는 10으로 원시타입 Number 데이터를 가지고 있기 때문에 할당된 주소에 값들을 저장한다. 

 둘째로 ageGroup의 경우 데이터를 할당하기 위해 0x4번지에 객체를 할당하고 그 객체의 내부는 또 키값인 group과 person으로 나뉘고, group의 경우 원시타입 Number로 30을 저장하기 때문에 0x5번지에 30을 저장하고, person의 경우 또 객체를 저장하고 있기 때문에 0x6번지에 객체를 저장하게 된다. 객체의 내부에는 name, id 의 키값을 가지고 있고, 최종적으로 ingoo와 web7722 의 String 원시데이터 타입을 가지고 있기때문에 더 이상 주소할당을 하지 않게 된다. 이 처럼 자바 스크립트는 객체가 생성될 때 프로퍼티의 타입에 따라 할당되는 값과 번지수 들이 다르고 원시타입의 데이터 이외의 타입들은 참조 타입이라 불리고 위와 같이 객체와 같은 참조 타입들은 어떠한 데이터를 넣느냐에 따라 동적으로 데이터의 크기가 변할 수 있다. 

이로써 알 수 있는 것은 원시타입 데이터를 저장하는 것은 데이터의 크기가 변하지 않고, 이와 반대로 참조타입의 데이터들은 동적으로 크기가 변할 수 있다는 것이다. 또한 참조타입의 데이터의 경우 참조될 주소값으로 저장되기 때문에 주소값을 참조하여 타고 들어가 데이터 값들을 가져올 수 있다. 

위와 같이 변수 안에 직접값을 넣지 않고, 데이터값을 참조하는 참조주소값을 넣는 이유는 메모리를 효율적으로 사용하기 위해서 이다. 만일 0x3번지의  데이터값이  10이라는 숫자에서 객체로 바뀐다면 할당되는 공간의 크기가 바뀌기 때문에 이를 찾아서 재할당하기 위해 크기를 늘리는 작업을 해야하지만, 0x3번의 참조 주소값을 지우고, 0x9번지에 객체데이터를 넣게 되면 참조되는 주소값을 바꿈으로써 쉽게 할당할 수 있다.  이때 0x3 번지의 주소가 끊기고 이는 자바스크립트의 가비지 컬렉터가 자동적으로 메모리 할당을 해제 시킨다. 이처럼 변하는 데이터타입에 따라 할당 공간과 크기가 달라지기 때문에 자바스크립트는 직접적으로 값을 저장하지 않고 참조값형태로 데이터를 저장한다.

서울시에서 주관하는 서울 웹 3 페스티벌을 관람하러 갔다. 많은 팀들이 본선에 진출하여, 해커톤에서 2박 3일 동안 개발한 프로젝트들을 발표하고 그에 대해 투표하고 시상하였다. 서울시에서 주관한 web3 해커톤이어서 그런지 주제들도  아래와 같았다. 

'블록체인 기술을 활용하여 사회적 약자(특히 디지털 소외계층)가 쉽게 활용할 수 있는 솔루션을 만드는 것이 본 주제의 목적입니다' 이와 같은 주제를 기준으로 첫 번째디지털 소외계층과 관련된 다양한 서울시 정책을 참고하여 정책 활용도를 높이는 다양한 형태의 솔루션 두 번째  사회적 약자의 불편을 최소화하기 위한 다른 형태의 솔루션 완성도를 평가합니다.

 이 두가지를 기준으로 해커톤을 진행하였다. 프로젝트들은 디지털 약자들이 어떻게 소프트웨어를 사용하고 , 이에 대한 완성도를 평가하였다. 프로젝트들은 인상 깊었고, 기부 플랫폼들이 가장 많았고, 첫 번째 발표의 경우 어른들이 it에 사용하는 애플리케이션을 개발하였고, 짧은 시간에도 좋은 아이디어와 좋은 퀄리티의 애플리케이션이 개발되었다. 하지만, web3 페스티벌 해커톤을 보면서 일반인 관람객이자 개발자를 희망하고, web3를 지향하는 사람으로서 의아했던 부분은 대부분의 프로젝트들이 왜 블록체인을 사용하는 것이냐는 것이다. web3를 지향하는 사람들은 결국 탈중앙화 중앙화된 서버 없이 블록체인 프로토콜 내에서 컨트랙트를 통해서 서로 간의 합의가 이뤄지는 것인데, 현재 개발되고 있는 프로젝트들이 과연 꼭 필요한가 의문이 들었고, 블록체인 기술을 사용하는 것은 좋지만, 왜 토큰을 사용하여 개발하는 가라는 원론적인 질문에 대한 답변들이 해결되지 않았다. 블록체인을 공부하면서 굳이 블록체인을 써야 하는 것들이 굉장히 많았고, 대부분의 페스티벌 참가자들은 단지 해커톤에 참여하기 위해 web3 페스티벌에 참여하였고, 블록체인에 대한 것들은 거의 없다는 것이 아쉬웠다. 또한 블록체인이 아닌 그냥 사용하거나 이용하는 것들이 편리한 서비스들도 많을 것 같았다. 이러한 면에서 나 또한 어떠한 프로젝트들이 디지털 사회적 약자들이 쉽게 활용할 수 있는 설루션이 있을까 라는 생각이 들었고, 현실적으론 사회적인 약자와 블록체인 네트워크, 토큰을 이용한 프로젝트들을 개발하는 것은 굉장히 힘들다는 생각이 들었다. 블록체인을 사용하게 된다면 이더리움을 기준으로 하나의 트렌잭션당 1.5달러의 fee 가 발생하고, 양쪽에서 작용한다면 3달러의 fee가 기본적으로 든다. 아무리 싼 네트워크라도 전자서명이 발생하면 fee를 지불해야 하고, 또한 프로젝트를 지속하려면 개발자와 프로젝트 기획자들에 임금이 들기 때문에 막대한 회사 유지비에 대한 이야기는 없었다. 이러한 면에선 해결한 팀이 없어서 굉장히 아쉬웠던 것 같다. 하지만, 대부분의 프로젝트들이 사회적 약자에 대한 주제를 블록체인을 이용하여 개발하고 기록한 것들은 인상 깊었고, 빠른 시간에 개발한 부분이 대단하다고 생각되었다. 이러한 면에서 더 공부를 많이 해야 할 것 같고, 더더욱 블록체인이 정확한 분야에 사용되야 하고, 투명해야 하며, 탈중앙화 하려면 서로의 데이터를 어떻게 이용할 것인지 고민해야겠다. 

1. UI 레이아웃 설계 

2. 로그인 UI - HOBIT 화면, Flex 적용

코인마켓캡에서 아직 중간의 슬라이드 애니메이션을 주는 아이템박스와 아래에 자바스크립트 코드를 이용해서 코인들의 데이터 객체들을 넣어주는 작업을 진행하지 않았다. 아직 공부할 부분이 많기 때문에 이 부분을 제외하고 현재 만들 수 있는 로그인 UI를 만들어 오늘 배운 정규표현식을 적용하는 코드를 작성하였다. 아직 정규 표현식을 적용하지는 않았지만, 기본적인 UI 구조와 이를 바탕으로 로그인 화면을 구현하는 것을 진행하였다. 

1. UI 레이아웃 설계 

빗썸에 있는 로그인 화면을 보고 대략의 레이아웃을 결정하였다. 박스들은 대부분 div로 감싸서 모든 요소들에게 flex를 이용하여 웹이 작아져도 반응형으로 줄 수 있는 웹 UI를 구현하였다.

2. 로그인 UI - HOBIT 화면, Flex 적용

실질적으로 웹의 사이즈를 줄이고 늘렸을 때 사이즈가 안정적으로 줄었다. 웹 UI의 로고는 포토샵을 통해 아발란체 글꼴을 이용하여 만들었고, 호날두를 생각하면서 호빗 로그인 창을 만들었다. 

이를 이용하여 코인마켓캡의 클론 화면과 연결을 시키려고 javascript의 버튼 이벤트를 이용하여 코인 마켓캡의 로그인 버튼 클릭 시 이동하는 웹을 구현하였다. 

const btn = document.querySelector(".login");

btn.addEventListener("click", clickHandler);

function clickHandler() {
  // ... 작업 로직 ...  //
  window.location.href = "./login.html";
}

자바 스크립트 코드를 이용하여 로그인 화면시 코인마켓캡에서 호빗으로 넘어가는 화면을 구현하였다. 이를 바탕으로 웹사이트의 서버없이 로컬 로그인 화면을 구현하였고, 추가적으로 코인마켓캡 클론과 가입하기 화면을 구현할 예정이다.

1. 코인마켓캡 사이트

2. 어제 구현한 코인마켓캡 

3. 현재 클론 중인 웹사이트 

 오늘 특별하게 한 것도 없는데 시간이 빨리 간 느낌이었다. 오전엔 scroll 애니메이션을 짜는 것을 구현하였고, 9기 블록체인 발표를 본 이후에 어제 하던 클론 코딩을 진행하였다. 진척 사항은 많이 없었지만,  로고들의 이미지와 반응형 웹으로 구현하기 위한 고민을 하였다. 또한 코인마켓캡 로고 옆 버튼들에 드롭바를 주기 위해 고민하였다. 드로바를 이미 해보아서 어떤 식으로 구현할지는 알고 있었지만, 초반에 a 태그를 이용하여 구조를 짜서 시간을 많이 날려 먹었다. 또한 막상 flex 안에서 드롭바 구현과 마진 및 패딩을 줘 적절한 위치에 배치하는 것이 까다로운 부분이 있었다. 이러한 부분을 고민하였고, 이를 바탕으로 드로바를 구현하였다. 하지만, 아직 맨 위 header 부분의 flex와 드롭바에서 위치를 넘어가면 드롭바 내용이 사라지는 에러들이 있어 이 부분을 수정하여야 한다. 또한 hr 태그를 전체 flex 내부에 주니 전체 부분을 차지하는 것이 아닌 다른 영역들과 마찬가지로 잘리는 부분이 생겼다. 이 오류에 대해 고민해 보아서 고쳐야겠다. 아이템 부분엔 적절히 자산들을 배치하고, 인기 커뮤니 계정엔 애니메이션을 이용하여 세 가지 내용이 자연스럽게 이동하는 애니메이션을 주어야겠다. 또한 최종 암호화폐 자산 출력 부분은 암호화폐들을 객체에 담아두고 반복문을 이용하여 append 하여 주었는데, 이를 append 하는 부분에 표(td, th)를 이용하여 추가하여 각각의 객체들에 대한 정보를 가져가는 방식을 선택해야 할 것 같다.

1. 코인마켓캡 사이트

2. 어제 구현한 코인마켓캡 

3. 현재 클론 중인 웹사이트 

1. 코인마켓캡 홈페이지

2. 예상 레이아웃 구성도

3. 현재 구현된 상태

 경일게임 아카데미에서 공부한 지 6주 차 벌써 자바스크립트까지 끝나고 한 달이란 시간이 뚝딱 지나갔다. 짧은 시간이었지만, 한 달 만에 html, css, javascript 까지 공부하였고, 기본적인 스킬들은 모두 공부하였다. 이를 바탕으로 요번 주에 시험을 본결과.. 자바스크립트에선 어느 정도 이해도가 있었지만, html, css 구조를 짜는 부분에 있어서 아쉬운 부분이 많았다. 이를 보충하기 위해 오늘은 공부한 것들을 바탕으로 웹을 구현하는 연습을 하였다.

1. 코인마켓캡 홈페이지

2. 예상 레이아웃 구성도

레이아웃을 아래와 같이 나누어 각각의 html 요소들과 배치들을 하였다. 

3. 현재 구현된 상태

기본적인 레이아웃을 바탕으로 큰 틀을 구현하였다. 전반적으로 flex를 이용하여 사이즈를 조절할 수 있게하였다. 

가상자산추가 부분은 for문으로 div 들을 추가였는데 실제 코인마켓캡에는 여러 요소들을 추가하여야 하기 때문에 th, td를 추가하여 사용하여 표 형식으로 데이터를 추가할 예정이다. 또한 가운데 아이템에는 애니메이션 이동을 추가하여 세 가지 화면을 애니메이션 화 하는 작업을 진행할 예정이다.