Overview이번 시간에는 온체인 상호작용을 포함시키고, 본격적으로 프로젝트의 규모를 키우기 위한 구조적 개선을 설명합니다. case5-onchain-sepolia 브랜치에는 많은 작은 변화들이 있지만, 이번 포스트에서는 큰 변화 세 가지만 설명합니다.모노레포 구조로 전환했습니다.스마트 컨트랙트를 실체 체인에 배포합니다.작업 결과를 GitHub Pages로 배포합니다.이 결과로 여러분들은 다음과 유사한 페이지 결과를 GitHub Pages로 배포하는 결과를 얻게 됩니다. 물론 더 다양한 상호작용을 위해서는 AWS, Vercel 같은 PaaS를 사용해볼 수 있겠지만, 본 시리즈에서는 정적인 사이트 안에서 구현 가능한 수준만 다루고자 합니다. (SWR 등의 라이브러리까지 활용하면 정적 사이트에서도 충분히 ..

6월 12일 목요일 오후 2시, 서울 강남 빅플레이스에서 업사이드 2기 성과 공유회가 진행되었다. 평소에 2기 업사이더 분들께서 어떤 프로젝트를 진행하셨을까 정말 궁금했는데, 이번 기회로 궁금증을 해소할 수 있어서 좋았다. 처음에는 현장 사진도 간간히 찍었는데, 발표가 시작된 이후에는 경청하며 발표 내용을 필기하다보니 나중에는 사진 생각을 못하고 발표만 계속 듣게 되었다 😂 그래서 자칫하면 텍스트만 있는, 지루한 후기가 될 수도 있었지만, 정말 감사하게도 업사이드 운영진 분들께서 고품질의 현장 스틸컷을 제공해주셨다!! 덕분에 발표가 어떠했는지에 대한 회고 외에도, 보유한 사진들을 최대한 활용해서 당시의 분위기와 열기가 어떠했는지 작성해보려 한다.행사 시작 전30분 일찍 행사장에 도착해서 낯익은 분들께 ..

업사이드 아카데미 OT오늘 OT는 6월 13일 한 통의 이메일로부터 시작됐다. 습도가 높은, 다소 더운 날이었지만 혹시라도 늦을까봐 1시간 일찍 출발했다.(너무 도착한 탓에 오히려 카페에서 기다렸지만 후회하지는 않spems.tistory.com 업사이드 1기의 시작은 정확히 작년 이맘 때였다.Web3는 당시 내게 미지의 영역이었고, 설렘 반 긴장 반으로 과정을 시작했던 기억이 난다.지난 1년을 돌아보며 업사이드가 내게 어떤 영향을 미쳤는지 후기를 남긴다. 업사이드 수료생 후기난 정말 운이 좋았다. 운좋게도 보안 분야의 대단한 능력자들에게 가르침을 받고, 또 함께 교육을 받을 수 있었다. 그리고 다른 유능한 사람들에 비해 내 능력이 너무 부족했다는 생각도 든다. 내가 좀 더 준비된 상태였다면 더 많은 것들..

어라? 일일 평균 조회수 30회 정도였던 내 블로그에 이런 조회수가?아아 돌아온 것인가... 그 시즌바로 업사이드 아카데미 3기 모집 시즌!! 😎 (두둥) 현재 지원 기한까지 약 한 달이라는 시간이 남아있다. 업사이드 아카데미는 최고 수준의 몰입을 지원하고, 또 요구하기 때문에 본인의 목표와 열정에 맞게 현명한 선택이 필요하다.이번 포스팅을 통해 2기와 동일한 점은 무엇인지, 또 3기에서 바뀌는 점은 무엇인지 알아보고,내가 업사이드 아카데미에 지원해도 괜찮을까 🤔 하는 고민들을 모두 해결해보자!! 🤔 업사이드 아카데미 ?업사이드 아카데미는 국내 최초이자 국내에 유일한 Web3 사이버보안 교육 과정이다.심지어 Web3 뿐만 아니라 Web2 영역에서도 뛰어난 역량을 가진 전문가 분들께 배울 수 있다...

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