6 - Foundry 기반 프로젝트

Overview

5 - 스마트 컨트랙트 함수 호출

 

이전 시간까지는 최소한의 의존성만으로 DApp을 개발하기까지의 간단한 개발 Flow를 다루었습니다. Hello, World 프로젝트를 빌드하기까지 다양한 준비 작업들이 필요했지만, 한 번 준비가 끝난 이후부터는 번거로운 작업은 줄어듭니다. 그래서 이번 시간부터는 좀 더 기능이 많고, 큰 규모의 DApp을 만들기까지의 과정을 다룰 것입니다. 그 첫 번째 시간으로, Foundry 프레임워크를 프로젝트 안에 내장시키고, 스마트 컨트랙트에 대한 자동 배포 및 테스트를 진행하는 방법에 대해 알아봅시다.

---

case2-setup-foundry

본 포스트에서는 프로젝트가 설정된 상태에서, 각 설정을 이해하고 활용하기 위한 설명에 집중합니다. 이해한 내용을 바탕으로 자신의 필요에 따라 구조 또는 설정을 변경할 수 있다면 충분합니다.

 

두 번째 프로젝트를 위해 git checkout origin/case2-setup-foundry 명령으로 브랜치를 변경합시다. 직접 Forge 프로젝트를 생성하는 방법은 해당 공식 문서 - forge/#getting-started 를 참조하면 됩니다. 프로젝트 셋업을 희망하는 디렉토리 이름으로 forge init <DIR_NAME>를 실행하세요. ⚠️ 주의사항: 혹시라도 이미 초기화된 Git 저장소에 셋업을 진행하려면, 워크트리에 반영되지 않은 변경 사항이 없어야 합니다. 변경 사항을 모두 커밋하거나, git stash를 통해 임시 보관해두세요. 

프로젝트 폴더 구조

원래 우리의 Hello, World 프로젝트는 src 내부에 node와 sol 폴더로 구분된 파일들을 활용했습니다. 이제 별도의 프레임워크를 내장시키면서 최상위 레벨의 foundry 폴더에 스마트 컨트랙트 개발과 관련된 모든 내용이 담깁니다. 또한 이를 하위 workspace로 선언하여, 관련 스크립트 명령들도 우리의 기존 웹 애플리케이션 프로젝트와의 작업 편의성을 위해, 명령들을 수행하게 됩니다.

 

지금부터 foundry 폴더를 톺아보며, 각 요소가 어떤 역할을 수행하는지 하나씩 살펴봅시다. 

/Users/mia/hands-on-dapp
├── LICENSE
├── README.md
├── foundry
│   ├── README.md
│   ├── foundry.toml
│   ├── lib
│   │   └── forge-std
│   ├── package-lock.json
│   ├── package.json
│   ├── script
│   │   └── HelloWorld.s.sol
│   ├── src
│   │   └── HelloWorld.sol
│   └── test
│       └── HelloWorld.t.sol
├── node_modules
│   ├── (dependencies...)
│   └── foundry -> ../foundry
├── package-lock.json
├── package.json
└── src
    ├── index.html
    └── index.js

 

 

src 폴더

src 폴더는 우리가 작성한 컨트랙트 소스가 존재하는 곳입니다. 일반적으로 컨트랙트 이름을 파일명으로 하여, 한 파일에 하나의 컨트랙트를 작성하는 것이 권고됩니다. HelloWorld.sol 파일 내용을 살펴봅시다. 이전 컨트랙트와 비교했을 떄 달라진 점은 각각의 계정이 자신만의 이름을 설정할 수 있도록 setter/getter가 존재한다는 것입니다. 등록하지 않은 상태에서 조회하려고 하면 오류가 발생합니다. setter는 names라는 이름의 스토리지를 수정하기 때문에, 이벤트를 emit하여 변경 사항을 전파합니다. 이러한 기능을 어떻게 구현했는지 이해하기 위해서는 Solditiy 언어에 대한 이해가 필요합니다. 다만, 본 포스트에서는 우선 컨셉을 소개하는 것에 집중하므로 자세히 다루지 않습니다. 궁금하다면 우선은 공식 문서를 참고하세요! 구현 방법에 대해서는 나중에 자세히 다루도록 하겠습니다. 

src/HelloWorld.sol

test 폴더

성공적으로 기능을 구현했음을 확인하는 방법 중 하나는 그냥 실제 서비스를 이용하는 것입니다. 우리의 경우에는 화면에 Hello, World!가 정상적으로 출력되는지, 브라우저로 서빙중인 웹 페이지에 접근해보는 것이겠죠? 다만, 이 방법은 소스 작성, 빌드, 배포 등 모든 작업을 다 진행한 뒤에 이루어지므로, 혹시라도 기능이 잘못 구현되거나 변경이 필요할 때, 그 모든 작업을 다시 수행해야 한다는 매우 큰 단점이 있습니다. 따라서, 우리는 소스를 작성하는 시점과 최대한 가까운 시점에 이러한 기능의 동작을 확인할 필요가 있습니다. 이 때 테스트를 활용한다면 개발 효율 및 소요 시간을 줄여 생산성을 높일 수 있습니다.

 

우리가 src에 작성한 소스가 예상한대로 동작하는지 확인하기 위해, 다양한 메서드를 활용할 수 있습니다. 역시나 구체적인 구현 방법에 대해서는 여기서 다루지 않습니다. 우선 Foundry에서 제공하는 Tests/CheatCodes를 참고하고, 나중에 좀 더 자세히 다루도록 하겠습니다.

test/HelloWorld.t.sol

script 폴더

이전에 작성했던 build.sh 파일의 내용을 기억하시나요? 프레임워크를 활용하여, 여러 번의 트랜잭션이 필요한 작업을 하나의 트랜잭션 스코프 안에 묶어 처리할 수 있습니다. 다음 스크립트는 L#11-18 vm.startBroadcast / vm.stopBroadcast 스코프 안에서 컨트랙트를 생성하고, 이후 배포자의 계정의 이름을 "World"로 설정합니다. 또한, getName을 호출하고, 우리의 설정 값과 동일한지 확인합니다. 만약 값이 다르다면 트랜잭션 내 모든 요청이 취소됩니다. ⚠️ 이 과정 중에 환경변수가 정의된 .env 파일을 참조하여, 배포에 활용할 개인키를 불러옵니다. 오류가 발생한다면 .env example 파일이 .env로 이름이 변경되어 있는지 확인해보세요!

script/HelloWorld.s.sol

 

이외에도 foundry.toml 설정, 외부 lib 설치로 다양한 설정 및 기능 확장이 가능합니다. 이번 프로젝트에서는 특별히 참고할만한 내용이 없으므로, 다음에 좀 더 자세히 다루도록 하겠습니다.

mono-repo

하나의 레포에서 다양한 프레임워크를 사용한다면, 이를 모두 연결하여 관리하는 것이 더욱 편리합니다. 이를 위해 Foundry 프로젝트에 package.json 파일을 생성하고, 이를 하위 workspace로 선언했습니다. forge의 다양한 명령은 현재 디렉토리 위치를 기반으로 실행되기 때문에, 이렇게 하지 않으면 옵션을 통해 명시적으로 설정해야 하는 경우가 많아져 DX를 해치게 됩니다.

package.json 그리고 foundry/package.json

 

이렇게 workspace 설정을 하면, 우리가 이전에 solc를 하위 모듈로 설치한 것처럼, 우리의 foundry 폴더 내용 또한 하위 모듈로 설정됩니다. 직접 확인해보고 싶다면 npm install 설치 후, node_modules 폴더에서 foundry 폴더를 찾아보세요!

---

마치며

이번 시간에는 foundry 프로젝트를 mono-repo 스타일로 내장시키는 방법에 대해 알아보았습니다. 앞으로 Solidity 개발에 대한 부분을 자주 다루게 될텐데, Visual Studio Code 확장으로 (1 JuanBlanco.solidity) 또는 (2 NomicFoundation.hardhat-solidity)를 설치하는 것을 추천드립니다. IDE 내 자동 정렬과 syntax 하이라이트 기능을 제공하니, 앞으로의 개발에 도움이 될 것이라 생각해요! 

 

이번에 스마트 컨트랙트의 테스트를 수행해보았으니, 이제 웹 애플리케이션의 테스트도 해봐야겠죠? 다음 시간에는 playwright를 활용해서 페이지에 Hello, World가 정상 출력되는 것을 확인해보고, 스마트 컨트랙트 배포 과정과 연결하여 엔드투엔드(e2e) 테스트까지 작성해보도록 하겠습니다 🤗