데이터 과학자의 꿈

Overview이번 시간에는 우리의 Hello, World!가 어떤 식으로 화면에 출력되는지, 프로젝트 구조의 관점에서 알아봅시다. 자세한 원리보다는 요소들의 상호작용에 집중할테니, 대강 "그렇구나~" 하고 다음에 이어질 프레임워크 위에서의 작업에 대한 감각을 익혀두는 정도면 충분합니다.Hello, World!최종 사용자가 마주하는 결과에서부터 차례대로 거슬러 올라가봅시다. 먼저, 새롭게 개편된 우리의 랜딩 페이지입니다. 단순히 텍스트만 있던 이전 단계보다 더 발전되었죠? 하지만 "World" 문자열은 여전히 이전과 동일하게 GET /api/name 요청을 통해 전달받습니다. 이러한 내용이 어디에 어떻게 구현되었는지 살펴봅시다.  src/app/page.tsx가장 먼저 tsx라는 확장자가 눈에 들어옵니다..

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

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

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

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

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..

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..

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

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

UDC 2024 Conference 후기 (1)업사이드 아카데미의 마지막 공식 일정은 Upbit Developer Conference (이하 UDC) 에서 막을 내렸다! 재밌고 신기했던 신라호텔에서의 UDC 후기, 지금 바로 시작합니다 😊11월 13일 수요일 (D - 1)   이 날spems.tistory.com이전 포스트에 이어 발표 내용에 대한 후기를 정리합니다.1️⃣ 제타체인 ZetaChain: The First Universal Blockchain | Build Interoperable dApps with the Universal EVMWith its Universal EVM, ZetaChain is an L1 blockchain for chain abstraction. Build simple,..