## [베이직 3] LEO 프로그램 웹앱 만들기 모듈 설명 웹앱 만들기 모듈은 프론트엔드를 갖춰 실질적으로 사용 가능한 어플리케이션을 만들기 위한 이해와 실습을 포함한다. Aleo SDK를 사용해서 create aleo app을 생성하고 지갑 연결, 어플리케이션 제작과 같은 프로그램을 활용한 가장 기본적인 기능 구현을 실현한다. 더 나아가 온체인 데이터를 불러오거나 오프체인 데이터를 연동해 어플리케이션을 제작하는 방법에 대한 이해를 포함할 수 있다. ## 모듈의 구성 | | 정의 | 포함 내용 | 비고 | | --- | --- | ----- | --- | | 아티클 | 특정 개념 및 현상을 설명하는 자료 |

정의: 현재 상황과 한계를 기반으로 “왜(why)” 개념이 중요한지 설명한다. 출현 배경과 역사와 같은 맥락과 개념이 해결하고 있는 문제점을 설명한다.
구성 요소: 개념이 문제를 해결하기 위해 “무엇(what)”으로 구성되어 있는지 설명한다. 구성 요소에 대한 상세 설명을 기반으로 추가 자료 작성 가능하다.
구동 원리: 실제로 개념이 “어떻게(How)” 작동하는지 설명한다. 사용자의 진입부터 결과물 도출까지의 유저 플로우의 형태로 설명 가능하다
특장점: 개념을 적용했을 때 발생하는 "이점(Benefit)”을 중심으로 설명한다. 유사 개념과의 비교를 통한 설명 가능하다
활용 방안: “어디에서(Where)” 개념이 적용되고 있는지 사례를 통한 설명한다

아티클은 개념을 최대한 단순화해서 표현한다. [예를 들어 IBM에서 작성한 블록체이란 무엇인가 자료](https://www.ibm.com/topics/blockchain)처럼 개념을 이해하기 위한 도식을 포함한다.
30분 이내에 읽을 수 있는 자료 구성을 목표로 한다. 30분 이내에 이해하기 어려운 자료는 상세 내용을 포함한 자료로 나눈다.
중간중간에 적절한 예시 배치와 도표, 그림 설명 포함 추구한다. 예를 들어 [Hedera Docs](https://github.com/hashgraph/hedera-docs/blob/master/README.md)는 도표와 그림을 통해 체인의 기본 개념을 상세하게 설명한다.

| | 미션 | 참여자가 수행 및 제출을 통해 개념을 실습할 수 있는 자료 |

배경: 미션 수행이 “왜(Why)” 중요한지 미션을 수행하면 “어떤(What)” 결과물을 얻는지 설명한다
사전 준비: 미션 수행을 위한 알아야할 “사전 지식(Previous Knowledge)”과 "환경 설정(Environment Setup)" 방법을 포함한다.
수행 방법: “어떤 방법(How to)”으로 미션을 수행하는지 설명한다. 설치 화면과 코드 베이스, 설명 적극 활용한다.
제출 내용: 미션을 완수하기 위해 제출해야할 "최종 결과물(End Result)"을 설명한다. 제출을 위한 수행 절차를 포함한다.
추가 활용법: 제출한 미션을 발전시키기 위한 "추가 자료(Additional Reference)"와 "다음 미션(Next Step)"을 설명한다.

특정 미션은 수행을 위한 상세 가이드와 구현 방식, 설명을 포함한다.
미션 수행 과정에서 필요한 소스 코드와 구현 화면, 설계 도면 적절하게 활용한다.
최종 결과물 예시 소스 코드(ex. 깃헙)를 제공한다.

| 아티클과 미션은 모듈의 전체 구성과 자료의 유형에 따라 다양한 형식으로 배치가 가능하다. 예를 들어 [LearnWeb3 DAO는 자료 중간 중간에 퀴즈를 삽입하는 방식](https://learnweb3.io/lessons/what-is-ethereum)으로 이론과 미션을 구성한다. 반면에 [Alchemy University는](https://university.alchemy.com/home) 특정 모듈에 다수의 이론 자료와 최소 1개의 코딩 실습 제출을 유도한다. 루디움의 모듈은 미션 배치에 따라 변동이 가능하지만 루디움의 모듈은 미션 배치에 따라 변동이 가능하지만 루디움의 모듈은 미션 배치에 따라 변동이 가능하지만 **LEO 프로그램 웹앱 만들기 모듈은 최소 2개의 아티클과 4개의 미션 제작을 원칙**으로 한다. ## **모듈 구성 예시** | 유형 | 주제 / 설명 | 레퍼런스 | | --- | ------- | ---- | | 아티클1 | 주제: Aleo SDK와 프라이빗 디앱 제작 개요
설명: LEO 프로그램 기반 프론트엔드 연결 프로그램 제작 개요 | [Create Aleo App](https://developer.aleo.org/sdk/create-aleo-app/installation) | | 미션1 | 주제: 지갑 연결하기
설명: LEO 지갑 연결이 가능한 프론트엔드 제작 실습 | [LEO Wallet Integration](https://docs.leo.app/aleo-wallet-adapter/)
[Aleo Wallet Adapter](https://github.com/demox-labs/aleo-wallet-adapter) | | 미션2 | 주제: 토큰 전송 어플리케이션
설명: 알레오 크레딧과 배포한 프로그램 전송이 가능한 어플리케이션 제작 실습 | | | 아티클2 | 주제: 통합 어플리케이션 제작
설명: 온체인 프로그램과 데이터의 상호작용, 오프체인 데이터를 연결하는 통합 어플리케이션 제작 기본 개요.
프로그램 보안의 중요성과 통합 / 유닛 테스트 방식 설명 | [Aleo Fungible Token](https://www.youtube.com/watch?v=DFWTB52KRLw) | | 미션3 | 주제: 프로그램 대시보드 만들기
설명: 알레오 블록 / 프로그램 데이터를 불러오고 특정 프로그램의 현황을 조회할 수 있는 어플리케이션 제작 실습 | [Aleo Program Dashboard](https://explorer.hamp.app/programs) | | 미션4 | 주제: 알레오 프라이빗 스토어 어플리케이션
설명: 알레오 스토어 프로그램을 활용하여 프론트엔드 상호 작용기 가능한 어플리케이션 제작 실습 | [Aleo Private Store](https://github.com/ZKCamp/aleo-store-assignment)
[Aleo Private Store Example](https://github.com/ZKCamp/aleo-store-assignment/blob/solution/src/main.leo) | 실제 모듈은 제작자의 기획 의도와 방향성에 따라 수정이 가능하다. 제작 희망자는 신청서 작성 과정에서 자신의 제작 의도와 작성 예정 아티클, 미션을 포함한 기획서를 제출한다.

작업

[베이직 3] LEO 프로그램 웹앱 만들기

작업물 목록

토큰 전송앱 만들기

프라이빗 스토어 웹앱 만들기

알레오 디앱 제작 개요

지갑 연결 페이지 만들기