인터넷 컴퓨터 (웹 3) 애플리케이션

1990년대 인터넷이 상용화로 누구나 쉽게 정보를 검색하고 사용하는 것이 가능해졌습니다(웹 1). 이후 소셜미디아 플랫폼의 출현으로 단순한 정보의 소비만 아니라 직접 제작한 콘텐츠를 공급까지 하는 시대(웹 2)를 거처 해당 콘텐츠의 소유권까지 가지는 웹 3의 도래를 눈앞에 두고 있습니다.

 

웹 3은 분산화된 인터넷 환경으로 기존 소수의 대기업에 의해 운영되던 인터넷을 분산, 개개인이 가진 자원을 통해 운영하는 방식으로 인터넷의 사유화라고 할 수 있습니다. 

필수개념

1. 캐니스터

캐니스터는 실행할 코드와 실행된 코드의 상태를 담고 있으며 인터넷 컴퓨터 작동의 기반이 됩니다.

2. 사이클

글로벌 환경에서 애플리케이션을 구동하려면 저장, 대역 등 많은 자원이 필요합니다. 인터넷 컴퓨터에서 사이클은 이러한 자원역할을 하며 각 캐니스터들은 애플리케이션 구동을 위해 이를 소비합니다.

구현하기

우분투설치

WSL 설치하기

노드제이에스 설치하기

검색창에서 우분투를 열고

다양한 노드제이에스 버전을 설치하고 버전변경을 도와주는 nvm을 아래 명령어로 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

우분투 터미널에서 아래 커맨드로 nvm을 활성화한 뒤

source ~/.bashrc

해당버전과 함께 아래 커맨드를 실행하고

nvm install <version>

아래처럼 버전정보가 확인이 되면 설치완료입니다.

node -v

DFX 설치하기

DFX는 로컬환경에서 인터넷 컴퓨터와 작업을 가능하게 해 주는 SDK로 검색창에서 우분투를 열고 (열려있는 경우 다시 열 필요는 없습니다)

아래 명령어를 실행합니다.

DFX_VERSION=0.11.1 sh -ci "$(curl -sSL https://internetcomputer.org/install.sh)"

설치 후 dfx의 경로를 지정해 주어야 하는데요. 설치 후 표시된 마지막 메시지의 경로를 복사하여

아래 <path> 부분에 넣고 실행 후

export PATH=$PATH:<path>

export PATH=$PATH:/home/lilijk/bin/dfx

---

※ 추가된 경로는 아래 커맨드로 확인 가능합니다.

echo "${PATH//:/$'\n'}"

---

우분투 터미널을 껐다가 다시 켜고 아래처럼 버전정보가 확인되면 설치완료입니다.

dfx -v

---

※ 터미널을 다시 실행하지 않으면 아래와 같이 dfx커맨드가 인식되지 않습니다.

---

애플리케이션 만들기

우분투를 열고 (열려있는 경우 다시 열 필요는 없습니다)

폴더를 생성하고

mkdir <projectName>

해당 폴더로 이동합니다.

cd <projectName>

아래 커맨드를 통해 애플리케이션을 생성합니다. 주의할 점은 애플리케이션 이름에 '-'는 사용할 수 없으므로 카멜케이스나 언더바로 단어를 분리합니다.

dfx new <appName>

해당 애플리케이션 폴더로 이동하고

cd <applicationName>

아래 커맨드를 통해 비주얼 스튜디오를 엽니다.

code .

---

※ 비주얼 스튜디오 코드에서 생성된 파일을 여는 방법

비주얼 스튜디오 코드를 열고 좌측하단에 리모트 창 열기 아이콘을 선택합니다.

열린 검색창에서 'New WSL Window'를 선택하면

새로운 비주얼 스튜디오 코드가 열리고 좌측하단에 우분투라고 표시됩니다.

'File' -> 'Open Folder' 선택 후 검색창에서 생성된 애플리케이셔 이름 선택

※ 컬러라이저 익스텐션 설치

익스텐션 메뉴에서 motoko를 검색 (src 아래 토큰파일인 .mo 파일의 코드 컬러라이저 익스텐션)

motoko

'Install in WSL:Ubuntu'를 누릅니다.

설치가 끝나면 아래와 같이 코드에 색이 추가되어 가시성을 향상해 줍니다.

익스텐션 설치 전

익스텐션 설치 후

---

애플리케이션 구동

아래 커맨드를 통해 로컬 인터넷 컴퓨터를 구동하면 (애플리케이션 폴더 안에서 실행해야 함)

dfx start

.dfx 폴더가 생성됩니다.

터미널 메뉴 우측에 '+'이나 스플릿 버튼으로 터미널을 추가하고

애플리케이션 폴더에서 구동 중인 로컬 인터넷 컴퓨터에 애플리케이션을 배포합니다.

dfx deploy

배포가 완료되면 아래처럼 로컬 폴더와 dist폴더가 생성됩니다.

이후 해당 터미널에 다시 아래 커맨드로 서버를 구동하면

npm start

아래와 같은 메시지가 뜨고

위 메시지를 스크롤하여 올라가 보면 아래처럼 'On Your Network:' 라인에 구동 중인 로컬서버가 표시됩니다. 해당 링크를 열면

애플리케이션 확인이 가능합니다.

이상으로 인터넷 컴퓨터를 사용하는 방법을 살펴보았습니다.

---

참고

nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions (github.com)

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

Installing the SDK | Internet Computer

Installing the SDK | Internet Computer

What is Web3 and why is it important? | ethereum.org

Home | ethereum.org

https://internetcomputer.org/docs/current/tutorials/deploy_sample_app

Deploy sample code | Internet Computer