728x90

2025/02 9

7 - Next 기반 프로젝트 (개념)

Overview정말 간단한 DApp이라면 이전까지의 Hello, World! 수준으로 충분합니다. 그러나 보다 더 규모 있는 애플리케이션을 개발하기 위해서는 프레임워크 위에서 개발할 필요가 있습니다. 이를 통해 다양한 기능을 쉽고 빠르게 추가할 수 있습니다. 또한 기능 검수를 위해 테스트 라이브러리도 필요합니다. case4-next-ts 브랜치*에는 크게 세 가지의 변화가 있는데,* 프레임워크를 도입한 시점에 vanilla Node 프로젝트 case3을 다루는 것은 오히려 혼란을 줄 것 같아 넘어갑니다웹 프레임워크를 사용합니다. Next.js v15 프레임워크단위 테스트를 수행합니다. node:test 모듈 e2e 테스트를 수행합니다. Playwright 라이브러리이 밖에도 TypeScript의 사용이나..

Learn/UPSIDE 2025.02.28

[서평] 전문가를 위한 리액트

한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다. 이 책은 리액트의 근간이 되는 메커니즘과 고급 사용 패턴, 모범 사례를 배우고자 하는 분들을 위해 아주 상세하게 리액트를 설명합니다. 따라서 단순한 사용법을 넘어 리액트가 어떻게 동작하는지 알고 싶은 분들에게 적합합니다. 많은 리액트 서적이 최종 사용자로서 리액트를 사용하는 방법에 치중합니다. 그에 반해 이 책은 최종 사용자가 아닌 라이브러리나 프레임워크 개발자 수준으로 리액트를 이해하도록 돕습니다. "진짜"들만 모여라 - 리액트 역사부터 프레임워크 내부 원리까지늘 그래왔던 것처럼 책을 한 두 번 훑어보면서 느꼈다. 이 책은 진짜다! 책의 내용과 구성이 좋아서, 초급부터 고급 개념까지 차근차근 이해하며 읽을 수 있었다. 물론 React..

Insight/서평 2025.02.23

6 - Foundry 기반 프로젝트

Overview 5 - 스마트 컨트랙트 함수 호출Overview 4 - 스마트 컨트랙트 개발 및 배포Overview 3 - 스마트 컨트랙트 개발 환경 셋업Overview 2 - DApp 개발 환경 셋업Overview DApp 만들기: 기본 개발 환경 셋업Overview DApp은 어떻게 만들 수 있을까요?Ospems.tistory.com 이전 시간까지는 최소한의 의존성만으로 DApp을 개발하기까지의 간단한 개발 Flow를 다루었습니다. Hello, World 프로젝트를 빌드하기까지 다양한 준비 작업들이 필요했지만, 한 번 준비가 끝난 이후부터는 번거로운 작업은 줄어듭니다. 그래서 이번 시간부터는 좀 더 기능이 많고, 큰 규모의 DApp을 만들기까지의 과정을 다룰 것입니다. 그 첫 번째 시간으로, Foun..

Learn/UPSIDE 2025.02.21

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

Overview 4 - 스마트 컨트랙트 개발 및 배포Overview 3 - 스마트 컨트랙트 개발 환경 셋업Overview 2 - DApp 개발 환경 셋업Overview DApp 만들기: 기본 개발 환경 셋업Overview DApp은 어떻게 만들 수 있을까요?OverviewDApp은 기존 Web 2.0의 중앙 집중식 구spems.tistory.com이전 시간에는 로컬 체인을 구동시키고, 스마트 컨트랙트를 작성하여 배포해봤습니다. 이번 시간에는 웹 서버를 가동시키고, 클라이언트에서 스마트 컨트랙트의 함수를 호출해서, 그 결과를 화면에 출력하는 작업에 대해 알아봅시다. 들어가기 앞서, 이 프로젝트는 의존성을 최대한 제거하여 동작 원리를 보여주는 것에 목적이 있습니다. 따라서, 지금 당장 이해가 가지 않는 부분..

Learn/UPSIDE 2025.02.18

4 - 스마트 컨트랙트 개발 및 배포

Overview 3 - 스마트 컨트랙트 개발 환경 셋업Overview 2 - DApp 개발 환경 셋업Overview DApp 만들기: 기본 개발 환경 셋업Overview DApp은 어떻게 만들 수 있을까요?OverviewDApp은 기존 Web 2.0의 중앙 집중식 구조에서 벗어나, 블록체인 기반의 탈중앙화spems.tistory.com이전 시간에는 DApp의 핵심이 되는 스마트 컨트랙트를 빌드하고 배포하기 위한 준비 작업을 진행했습니다. 이번 시간에는 스마트 컨트랙트를 작성하고, 빌드하고, 배포하는 작업을 이해해보겠습니다. 우리가 이번 포스트에서 다룰 내용은 빨간 테두리로 표시하였으니 참고하세요!스마트 컨트랙트 작성SPDX-License-Identifier는 코드의 라이선스를 의미합니다.이후 pragma..

Learn/UPSIDE 2025.02.10

3 - 스마트 컨트랙트 개발 환경 셋업

Overview 2 - DApp 개발 환경 셋업Overview DApp 만들기: 기본 개발 환경 셋업Overview DApp은 어떻게 만들 수 있을까요?OverviewDApp은 기존 Web 2.0의 중앙 집중식 구조에서 벗어나, 블록체인 기반의 탈중앙화된 방식으로 동작하는 애플리spems.tistory.com이전 시간에는 Foundry와 Node.js를 설치하며 기본적인 DApp 개발 환경을 구축했습니다. 이번 시간에는 DApp의 핵심이 되는 스마트 컨트랙트를 빌드하고 배포하기 위한 필요한 작업에 대해 알아봅시다.브랜치 변경 GitHub - ooMia/hands-on-dapp: 블로그 연재 중인 DApp 제작 가이드 레포블로그 연재 중인 DApp 제작 가이드 레포. Contribute to ooMia/h..

Learn/UPSIDE 2025.02.10

2 - DApp 개발 환경 셋업

Overview DApp 만들기: 기본 개발 환경 셋업Overview DApp은 어떻게 만들 수 있을까요?OverviewDApp은 기존 Web 2.0의 중앙 집중식 구조에서 벗어나, 블록체인 기반의 탈중앙화된 방식으로 동작하는 애플리케이션을 의미합니다. 본 포스트에서는spems.tistory.com이전 시간에는 git, GitHub, VS Code를 설치하며 기본적인 개발 환경을 구축했습니다. 이번 시간에는 본격적인 DApp 개발에 앞서, 이를 위해 필요한 도구를 설치하는 작업을 수행해봅시다.DApp 개발 환경 셋업1. Foundry파운드리(Foundry)는 러스트(Rust) 언어 기반 스마트 컨트랙트 개발 도구입니다.따라서, 먼저 Rust 컴파일러와 패키지매니저를 설치합니다. curl https://s..

Learn/UPSIDE 2025.02.09

1 - 기본 개발 환경 셋업

Overview DApp은 어떻게 만들 수 있을까요?OverviewDApp은 기존 Web 2.0의 중앙 집중식 구조에서 벗어나, 블록체인 기반의 탈중앙화된 방식으로 동작하는 애플리케이션을 의미합니다. 본 포스트에서는 이론과 개념보다는, '그래서 어떻게 만spems.tistory.com이전 시간에는 DApp을 만드는 간단한 과정에 대해 살펴보았습니다. 이번 시간에는 개발을 위한 최소한의 개발 환경 설치 과정을 다룹니다. 개발을 처음 시작하는 이들을 위한 가이드인 만큼, 하나부터 열까지 모두 모른다고 가정하고 진행하겠습니다. 개발 환경 셋업이 가이드는 기본적으로 MacOS를 사용하는 유저를 대상으로 기획되었으며 Homebrew로 대부분의 설치를 진행합니다. 따라서, Linux 사용자는 Homebrew-on..

Learn/UPSIDE 2025.02.05

0 - DApp은 어떻게 만들 수 있을까요?

OverviewDApp은 기존 Web 2.0의 중앙 집중식 구조에서 벗어나, 블록체인 기반의 탈중앙화된 방식으로 동작하는 애플리케이션을 의미합니다. 본 포스트에서는 이론과 개념보다는, '그래서 어떻게 만드는지'에 집중하고자 합니다. 우선, 가볍게 느낌만 참고하면서 따라오세요! 😉1. 어떤 체인 위에서 구동시킬지 선택하세요각각의 블록체인에는 핵심적인 특징과 장단점이 존재합니다. 따라서, 실제 운영 시에는 목적에 맞는 체인을 선택하는 것이 좋지만, 여기서는 가장 보편적으로 사용되는 체인 '이더리움(Ethereum)'을 사용하겠습니다. 이더리움의 종합 안내서이더리움은 디지털 화폐와 새로운 형태의 애플리케이션을 위한 글로벌 분산형 플랫폼입니다. 이더리움에서는 디지털 화폐를 제어하는 코드를 작성할 수 있고, ..

Learn/UPSIDE 2025.02.04
728x90