전송
+``` + +이것은 구성 요소의 HTML(더 정확하게는 [JSX](https://react.dev/learn/writing-markup-with-jsx)) 형식입니다. + +#### `server/noir/src/main.nr` {#server-noir-src-main-nr} + +[이 파일](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/src/main.nr)은 실제 영지식 코드입니다. + +``` +use std::hash::pedersen_hash; +``` + +[페더슨 해시](https://rya-sge.github.io/access-denied/2024/05/07/pedersen-hash-function/)는 [Noir 표준 라이브러리](https://noir-lang.org/docs/noir/standard_library/cryptographic_primitives/hashes#pedersen_hash)와 함께 제공됩니다. 영지식 증명은 일반적으로 이 해시 함수를 사용합니다. 표준 해시 함수에 비해 [산술 회로](https://rareskills.io/post/arithmetic-circuit) 내부에서 계산하기가 훨씬 쉽습니다. + +``` +use keccak256::keccak256; +use dep::ecrecover; +``` + +이 두 함수는 [`Nargo.toml`](https://github.com/qbzzt/250911-zk-bank/blob/01-manual-zk/server/noir/Nargo.toml)에 정의된 외부 라이브러리입니다. 이름 그대로 [keccak256 해시](https://emn178.github.io/online-tools/keccak_256.html)를 계산하는 함수와 이더리움 서명을 확인하고 서명자의 이더리움 주소를 복구하는 함수입니다. + +``` +global ACCOUNT_NUMBER : u32 = 5; +``` + +Noir는 [Rust](https://www.rust-lang.org/)에서 영감을 받았습니다. 변수는 기본적으로 상수입니다. 이것이 전역 구성 상수를 정의하는 방법입니다. 특히 `ACCOUNT_NUMBER`는 우리가 저장하는 계정의 수입니다. + +`uGreeter
+Greeter
+ { + !readResults.isError && !readResults.isLoading && ++``` + +`ShowGreeting` 컴포넌트(아래 설명)를 만들지만, 인사말이 블록체인에서 성공적으로 읽혔을 경우에만 만듭니다. + +```tsx + +``` + +이것은 사용자가 새 인사말을 설정할 수 있는 입력 텍스트 필드입니다. 사용자가 키를 누를 때마다 `greetingChange`를 호출하고, 이는 `setNewGreeting`을 호출합니다. `setNewGreeting`은 `useState` 훅에서 나오므로 `Greeter` 컴포넌트가 다시 렌더링되게 합니다. 이것은 다음을 의미합니다. + +- 새 인사말의 값을 유지하려면 `value`를 지정해야 합니다. 그렇지 않으면 기본값인 빈 문자열로 돌아가기 때문입니다. +- `usePrepareContractWrite`는 `newGreeting`이 변경될 때마다 호출되므로 준비된 트랜잭션에 항상 최신 `newGreeting`이 포함됩니다. + +```tsx + +``` + +`workingTx.write`가 없으면 인사말 업데이트를 보내는 데 필요한 정보를 아직 기다리고 있는 것이므로 버튼이 비활성화됩니다. `workingTx.write` 값이 있으면 그것이 트랜잭션을 보내기 위해 호출할 함수입니다. + +```tsx +
+
+```
+
+UI를 모든 정보로 어지럽히고 싶지 않으므로, 정보를 보거나 닫을 수 있도록 [`details`](https://www.w3schools.com/tags/tag_details.asp) 태그를 사용합니다.
+
+```tsx
+
+
+}
+```
+
+다양한 HTML 태그를 끝냅니다.
+
+##### 최종 `export` {#the-final-export}
+
+```tsx
+export { Greeter }
+```
+
+`Greeter` 컴포넌트는 애플리케이션에 내보내야 하는 컴포넌트입니다.
+
+#### `src/wagmi.ts` {#wagmi-ts}
+
+마지막으로 WAGMI와 관련된 다양한 정의는 `src/wagmi.ts`에 있습니다. 대부분 변경할 필요가 없는 상용구이므로 여기서는 모든 것을 설명하지 않겠습니다.
+
+여기의 코드는 [github](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts)에 있는 것과 정확히 같지 않습니다. 왜냐하면 기사 뒷부분에서 다른 체인([Redstone Holesky](https://redstone.xyz/docs/network-info))을 추가하기 때문입니다.
+
+```ts
+import { getDefaultWallets } from '@rainbow-me/rainbowkit'
+import { configureChains, createConfig } from 'wagmi'
+import { holesky, sepolia } from 'wagmi/chains'
+```
+
+애플리케이션이 지원하는 블록체인을 가져옵니다. 지원되는 체인 목록은 [viem github](https://github.com/wagmi-dev/viem/tree/main/src/chains/definitions)에서 볼 수 있습니다.
+
+```ts
+import { publicProvider } from 'wagmi/providers/public'
+
+const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575'
+```
+
+[WalletConnect](https://walletconnect.com/)를 사용하려면 애플리케이션에 대한 프로젝트 ID가 필요합니다. [cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in)에서 얻을 수 있습니다.
+
+```ts
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia ],
+ [
+ publicProvider(),
+ ],
+)
+
+const { connectors } = getDefaultWallets({
+ appName: 'My wagmi + RainbowKit App',
+ chains,
+ projectId: walletConnectProjectId,
+})
+
+export const config = createConfig({
+ autoConnect: true,
+ connectors,
+ publicClient,
+ webSocketPublicClient,
+})
+
+export { chains }
+```
+
+### 다른 블록체인 추가 {#add-blockchain}
+
+요즘에는 많은 [L2 확장 솔루션](/layer-2/)이 있으며, viem이 아직 지원하지 않는 일부를 지원하고 싶을 수 있습니다. 이를 위해 `src/wagmi.ts`를 수정합니다. 이 지침은 [Redstone Holesky](https://redstone.xyz/docs/network-info)를 추가하는 방법을 설명합니다.
+
+1. viem에서 `defineChain` 유형을 가져옵니다.
+
+ ```ts
+ import { defineChain } from 'viem'
+ ```
+
+2. 네트워크 정의를 추가합니다.
+
+ ```ts
+ const redstoneHolesky = defineChain({
+ id: 17_001,
+ name: 'Redstone Holesky',
+ network: 'redstone-holesky',
+ nativeCurrency: {
+ decimals: 18,
+ name: 'Ether',
+ symbol: 'ETH',
+ },
+ rpcUrls: {
+ default: {
+ http: ['https://rpc.holesky.redstone.xyz'],
+ webSocket: ['wss://rpc.holesky.redstone.xyz/ws'],
+ },
+ public: {
+ http: ['https://rpc.holesky.redstone.xyz'],
+ webSocket: ['wss://rpc.holesky.redstone.xyz/ws'],
+ },
+ },
+ blockExplorers: {
+ default: { name: 'Explorer', url: 'https://explorer.holesky.redstone.xyz' },
+ },
+ })
+ ```
+
+3. `configureChains` 호출에 새 체인을 추가합니다.
+
+ ```ts
+ const { chains, publicClient, webSocketPublicClient } = configureChains(
+ [ holesky, sepolia, redstoneHolesky ],
+ [ publicProvider(), ],
+ )
+ ```
+
+4. 애플리케이션이 새 네트워크에서 계약 주소를 알고 있는지 확인합니다. 이 경우 `src/components/Greeter.tsx`를 수정합니다.
+
+ ```ts
+ const contractAddrs : AddressPerBlockchainType = {
+ // Holesky
+ 17000: '0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8',
+
+ // Redstone Holesky
+ 17001: '0x4919517f82a1B89a32392E1BF72ec827ba9986D3',
+
+ // Sepolia
+ 11155111: '0x7143d5c190F048C8d19fe325b748b081903E3BF0'
+ }
+ ```
+
+## 결론 {#conclusion}
+
+물론, `Greeter`를 위한 사용자 인터페이스를 제공하는 데는 그다지 관심이 없을 것입니다. 자신만의 계약을 위한 사용자 인터페이스를 만들고 싶을 것입니다. 자신만의 애플리케이션을 만들려면 다음 단계를 실행하세요.
+
+1. wagmi 애플리케이션을 생성하도록 지정합니다.
+
+ ```sh copy
+ pnpm create wagmi
+ ```
+
+2. 애플리케이션의 이름을 지정합니다.
+
+3. **React** 프레임워크를 선택합니다.
+
+4. **Vite** 변형을 선택합니다.
+
+5. [Rainbow kit를 추가](https://www.rainbowkit.com/docs/installation#manual-setup)할 수 있습니다.
+
+이제 여러분의 계약을 전 세계가 사용할 수 있도록 만들어 보세요.
+
+[여기서 제 작업에 대한 자세한 내용을 확인하세요](https://cryptodocguy.pro/).
+
diff --git a/public/content/translations/ko/developers/tutorials/deploying-your-first-smart-contract/index.md b/public/content/translations/ko/developers/tutorials/deploying-your-first-smart-contract/index.md
new file mode 100644
index 00000000000..e2e57150593
--- /dev/null
+++ b/public/content/translations/ko/developers/tutorials/deploying-your-first-smart-contract/index.md
@@ -0,0 +1,95 @@
+---
+title: "첫 번째 스마트 계약 배포하기"
+description: "이더리움 테스트넷에 첫 스마트 계약 배포하기 소개"
+author: "jdourlens"
+tags: [ "스마트 계약", "리믹스", "솔리디티", "배포하기" ]
+skill: beginner
+lang: ko
+published: 2020-04-03
+source: EthereumDev
+sourceUrl: https://ethereumdev.io/deploying-your-first-smart-contract/
+address: "0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE"
+---
+
+여러분도 저희처럼 이더리움 블록체인에서 첫 [스마트 계약](/developers/docs/smart-contracts/)을 [배포](/developers/docs/smart-contracts/deploying/)하고 상호작용하는 것에 대해 기대가 크실 것으로 생각합니다.
+
+걱정 마세요. 첫 스마트 계약이니만큼 [로컬 테스트넷](/developers/docs/networks/)에 배포할 것이므로, 배포하고 원하는 만큼 자유롭게 테스트해보는 데 비용이 전혀 들지 않습니다.
+
+## 계약 작성하기 {#writing-our-contract}
+
+[Remix에 방문](https://remix.ethereum.org/)하여 새 파일을 만드는 것이 첫 번째 단계입니다. Remix 인터페이스 왼쪽 상단에서 새 파일을 추가하고 원하는 파일 이름을 입력하세요.
+
+
+
+새 파일에 다음 코드를 붙여넣습니다.
+
+```solidity
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.5.17;
+
+contract Counter {
+
+ // 카운트 수를 저장하는 부호 없는 정수 유형의 공개 변수
+ uint256 public count = 0;
+
+ // 카운터를 증가시키는 함수
+ function increment() public {
+ count += 1;
+ }
+
+ // 카운트 값을 가져오기 위한 필수적이지 않은 getter
+ function getCount() public view returns (uint256) {
+ return count;
+ }
+
+}
+```
+
+프로그래밍에 익숙하다면 이 프로그램이 무엇을 하는지 쉽게 추측할 수 있습니다. 한 줄씩 설명해 보겠습니다.
+
+- 4번 줄: `Counter`라는 이름의 계약을 정의합니다.
+- 7번 줄: 계약은 0에서 시작하는 `count`라는 이름의 부호 없는 정수 하나를 저장합니다.
+- 10번 줄: 첫 번째 함수는 계약의 상태를 수정하고 `count` 변수를 `increment()`합니다.
+- 15번 줄: 두 번째 함수는 스마트 계약 외부에서 `count` 변수의 값을 읽을 수 있게 해주는 getter일 뿐입니다. 참고로, `count` 변수를 public으로 정의했기 때문에 이 함수는 필수는 아니지만 예시로 보여드립니다.
+
+첫 번째 간단한 스마트 계약에 대한 설명은 여기까지입니다. 아시다시피, 이것은 Java나 C++와 같은 OOP(객체 지향 프로그래밍) 언어의 클래스와 비슷해 보입니다. 이제 우리 계약을 다뤄볼 시간입니다.
+
+## 계약 배포하기 {#deploying-our-contract}
+
+첫 번째 스마트 계약을 작성했으니, 이제 블록체인에 배포하여 테스트해 보겠습니다.
+
+[블록체인에 스마트 계약을 배포하는 것](/developers/docs/smart-contracts/deploying/)은 사실 수신자를 지정하지 않고 컴파일된 스마트 계약의 코드가 포함된 트랜잭션을 보내는 것일 뿐입니다.
+
+먼저 왼쪽의 컴파일 아이콘을 클릭하여 [계약을 컴파일합니다](/developers/docs/smart-contracts/compiling/):
+
+
+
+그런 다음 컴파일 버튼을 클릭하세요:
+
+
+
+텍스트 편집기에서 내용을 저장할 때 계약이 항상 컴파일되도록 '자동 컴파일' 옵션을 선택할 수 있습니다.
+
+그런 다음 'deploy and run transactions' 화면으로 이동합니다:
+
+
+
+'deploy and run transactions' 화면에서 계약 이름이 나타나는지 다시 확인하고 배포(Deploy)를 클릭하세요. 페이지 상단에서 볼 수 있듯이 현재 환경은 'JavaScript VM'입니다. 이는 더 빠르고 수수료 없이 테스트하기 위해 로컬 테스트 블록체인에 스마트 계약을 배포하고 상호작용한다는 의미입니다.
+
+
+
+'배포(Deploy)' 버튼을 클릭하면 하단에 계약이 표시됩니다. 왼쪽의 화살표를 클릭하여 확장하면 계약 내용을 볼 수 있습니다. 이것은 우리의 `counter` 변수와, `increment()` 함수, 그리고 getter인 `getCounter()`입니다.
+
+`count` 또는 `getCount` 버튼을 클릭하면 실제로 계약의 `count` 변수 내용을 가져와 표시합니다. 아직 `increment` 함수를 호출하지 않았으므로 0이 표시되어야 합니다.
+
+
+
+이제 버튼을 클릭하여 increment 함수를 호출해 보겠습니다. 창 하단에 생성된 트랜잭션의 로그가 나타나는 것을 볼 수 있습니다. `increment` 버튼 대신 데이터를 가져오는 버튼을 누를 때 로그가 다른 것을 볼 수 있습니다. 이는 블록체인에서 데이터를 읽는 데는 트랜잭션(쓰기)이나 수수료가 필요하지 않기 때문입니다. 블록체인의 상태를 수정하는 경우에만 트랜잭션을 생성해야 하기 때문입니다.
+
+
+
+`increment()` 함수를 호출하는 트랜잭션을 생성하는 increment 버튼을 누른 후, count 또는 getCount 버튼을 다시 클릭하면 count 변수가 0보다 커져 새로 업데이트된 스마트 계약의 상태를 읽게 됩니다.
+
+
+
+다음 튜토리얼에서는 [스마트 계약에 이벤트를 추가하는 방법](/developers/tutorials/logging-events-smart-contracts/)에 대해 다룹니다. 이벤트 로깅은 스마트 계약을 디버깅하고 함수를 호출하는 동안 어떤 일이 발생하는지 이해하는 편리한 방법입니다.
diff --git a/public/content/translations/ko/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md b/public/content/translations/ko/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
new file mode 100644
index 00000000000..e155a8e81fc
--- /dev/null
+++ b/public/content/translations/ko/developers/tutorials/develop-and-test-dapps-with-a-multi-client-local-eth-testnet/index.md
@@ -0,0 +1,371 @@
+---
+title: "로컬, 멀티클라이언트 테스트넷에서 dApp을 개발하고 테스트하는 방법"
+description: "이 가이드에서는 먼저 다중 클라이언트 로컬 이더리움 테스트넷을 인스턴스화하고 구성하는 방법을 안내한 다음, 테스트넷을 사용하여 dApp을 배포하고 테스트합니다."
+author: "Tedi Mitiku"
+tags:
+ [
+ "클라이언트",
+ "노드",
+ "스마트 계약",
+ "결합성",
+ "합의 레이어",
+ "실행 레이어",
+ "테스트"
+ ]
+skill: intermediate
+lang: ko
+published: 2023-04-11
+---
+
+## 소개 {#introduction}
+
+이 가이드는 구성 가능한 로컬 이더리움 테스트넷을 인스턴스화하고, 스마트 계약을 배포하며, 테스트넷을 사용하여 dApp에 대한 테스트를 실행하는 과정을 안내합니다. 이 가이드는 라이브 테스트넷이나 메인넷에 배포하기 전에 다양한 네트워크 구성에 대해 로컬에서 dApp을 개발하고 테스트하려는 dApp 개발자를 위해 설계되었습니다.
+
+이 가이드에서는 다음을 수행합니다.
+
+- [Kurtosis](https://www.kurtosis.com/)를 사용하여 [`eth-network-package`](https://github.com/kurtosis-tech/eth-network-package)로 로컬 이더리움 테스트넷을 인스턴스화합니다.
+- Hardhat dApp 개발 환경을 로컬 테스트넷에 연결하여 dApp을 컴파일, 배포 및 테스트합니다.
+- 노드 수 및 특정 EL/CL 클라이언트 페어링과 같은 파라미터를 포함하여 로컬 테스트넷을 구성하여 다양한 네트워크 구성에 대한 개발 및 테스트 워크플로를 활성화합니다.
+
+### Kurtosis란 무엇인가요? {#what-is-kurtosis}
+
+[Kurtosis](https://www.kurtosis.com/)는 다중 컨테이너 테스트 환경 구성을 위해 설계된 구성 가능한 빌드 시스템입니다. 이를 통해 개발자는 블록체인 테스트넷과 같이 동적 설정 로직이 필요한 재현 가능한 환경을 만들 수 있습니다.
+
+이 가이드에서 Kurtosis eth-network-package는 [`geth`](https://geth.ethereum.org/) 실행 레이어(EL) 클라이언트와 [`teku`](https://consensys.io/teku), [`lighthouse`](https://lighthouse.sigmaprime.io/), [`lodestar`](https://lodestar.chainsafe.io/) 합의 레이어(CL) 클라이언트를 지원하는 로컬 이더리움 테스트넷을 가동합니다. 이 패키지는 Hardhat Network, Ganache, Anvil과 같은 프레임워크의 네트워크에 대한 구성 가능하고 조합 가능한 대안 역할을 합니다. Kurtosis는 개발자가 사용하는 테스트넷에 대한 더 큰 제어와 유연성을 제공하며, 이것이 [이더리움 재단이 머지를 테스트하기 위해 Kurtosis를 사용한](https://www.kurtosis.com/blog/testing-the-ethereum-merge) 주된 이유이며 네트워크 업그레이드를 테스트하기 위해 계속 사용하고 있습니다.
+
+## Kurtosis 설정 {#setting-up-kurtosis}
+
+진행하기 전에 다음을 확인하십시오.
+
+- 로컬 머신에 [Docker 엔진을 설치하고 시작](https://docs.kurtosis.com/install/#i-install--start-docker)했습니다.
+- [Kurtosis CLI를 설치](https://docs.kurtosis.com/install#ii-install-the-cli)했습니다(CLI가 이미 설치되어 있는 경우 최신 릴리스로 업그레이드).
+- [Node.js](https://nodejs.org/en), [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable), [npx](https://www.npmjs.com/package/npx)를 설치했습니다(dApp 환경용).
+
+## 로컬 이더리움 테스트넷 인스턴스화 {#instantiate-testnet}
+
+로컬 이더리움 테스트넷을 가동하려면 다음을 실행하세요.
+
+```python
+kurtosis --enclave local-eth-testnet run github.com/kurtosis-tech/eth-network-package
+```
+
+참고: 이 명령어는 '--enclave' 플래그를 사용하여 네트워크 이름을 "local-eth-testnet"으로 지정합니다.
+
+Kurtosis는 지침을 해석, 검증 및 실행하는 동안 내부적으로 수행하는 단계를 출력합니다. 마지막으로 다음과 유사한 출력이 표시되어야 합니다.
+
+```python
+INFO[2023-04-04T18:09:44-04:00] ======================================================
+INFO[2023-04-04T18:09:44-04:00] || Created enclave: local-eth-testnet ||
+INFO[2023-04-04T18:09:44-04:00] ======================================================
+Name: local-eth-testnet
+UUID: 39372d756ae8
+Status: RUNNING
+Creation Time: Tue, 04 Apr 2023 18:09:03 EDT
+
+========================================= Files Artifacts =========================================
+UUID Name
+d4085a064230 cl-genesis-data
+1c62cb792e4c el-genesis-data
+bd60489b73a7 genesis-generation-config-cl
+b2e593fe5228 genesis-generation-config-el
+d552a54acf78 geth-prefunded-keys
+5f7e661eb838 prysm-password
+054e7338bb59 validator-keystore-0
+
+========================================== User Services ==========================================
+UUID Name Ports Status
+e20f129ee0c5 cl-client-0-beacon http: 4000/tcp -> {attrs.name}
+
+ {JSON.stringify(attrs.object, null, 2)}
+```
+
+대부분의 필드는 [`JSON.stringify`](https://www.w3schools.com/js/js_json_stringify.asp)를 사용하여 표시됩니다.
+
+```tsx
+
+ { funs.length > 0 &&
+ <>
+ Functions:
+ -
+```
+
+예외는 함수인데, 이들은 [JSON 표준](https://www.json.org/json-en.html)의 일부가 아니므로 별도로 표시해야 합니다.
+
+```tsx
+ {funs.map((f, i) =>
+```
+
+JSX 내에서 `{` 중괄호 `}` 안의 코드는 JavaScript로 해석됩니다. 그런 다음, `(` 일반 괄호 `)` 안의 코드는 다시 JSX로 해석됩니다.
+
+```tsx
+ (
- {f} ) + )} +``` + +React는 [DOM 트리](https://www.w3schools.com/js/js_htmldom.asp)의 태그에 고유한 식별자가 있어야 합니다. 이는 동일한 태그의 자식(이 경우, [순서 없는 목록](https://www.w3schools.com/tags/tag_ul.asp))은 다른 `key` 속성이 필요하다는 것을 의미합니다. + +```tsx +
Hello ${loginResponse.extract.nameID}
+ + + `) + res.send(); +``` + +로그인을 받았음을 사용자에게 보여주기 위해 HTML 응답을 보냅니다. + +```typescript + } catch (err) { + console.error('Error processing SAML response:', err); + res.status(400).send('SAML authentication failed'); + } + } +) +``` + +실패 시 사용자에게 알립니다. + +```typescript +spRouter.get('/login', +``` + +브라우저가 이 페이지를 가져오려고 할 때 로그인 요청을 생성합니다. 위 시퀀스 다이어그램의 1단계에 대한 핸들러입니다. + +```typescript + async (req, res) => { + const loginRequest = await sp.createLoginRequest(idp, "post") +``` + +로그인 요청을 게시할 정보를 가져옵니다. + +```typescript + res.send(` + + + +``` + +이 페이지는 양식(아래 참조)을 자동으로 제출합니다. 이렇게 하면 사용자가 리디렉션되기 위해 아무것도 할 필요가 없습니다. 위 시퀀스 다이어그램의 2단계입니다. + +```typescript + + + + `) + } +) + +app.use(express.urlencoded({extended: true})) +``` + +[이 미들웨어는](https://expressjs.com/en/5x/api.html#express.urlencoded) [HTTP 요청](https://www.tutorialspoint.com/http/http_requests.htm)의 본문을 읽습니다. 기본적으로 express는 대부분의 요청에 필요하지 않기 때문에 무시합니다. POST는 본문을 사용하기 때문에 필요합니다. + +```typescript +app.use(`/${config.spDir}`, spRouter) +``` + +서비스 공급자 디렉터리(`/sp`)에 라우터를 마운트합니다. + +```typescript +app.get("/", (req, res) => { + res.send(` + + + + + + `) +}) +``` + +브라우저가 루트 디렉터리를 가져오려고 하면 로그인 페이지 링크를 제공합니다. + +```typescript +app.listen(config.spPort, () => { + console.log(`service provider is running on http://${config.spHostname}:${config.spPort}`) +}) +``` + +이 express 애플리케이션으로 `spPort`를 수신합니다. + +#### src/idp.mts + +ID 공급자입니다. 서비스 공급자와 매우 유사하며 아래 설명은 다른 부분에 대한 것입니다. + +```typescript +const xmlParser = new (await import("fast-xml-parser")).XMLParser( + { + ignoreAttributes: false, // Preserve attributes + attributeNamePrefix: "@_", // Prefix for attributes + } +) +``` + +서비스 공급자로부터 수신하는 XML 요청을 읽고 이해해야 합니다. + +```typescript +const getLoginPage = requestId => ` +``` + +이 함수는 위 시퀀스 다이어그램의 4단계에서 반환되는 자동 제출 양식이 있는 페이지를 만듭니다. + +```typescript + + +로그인 페이지
+ + + + +const idpRouter = express.Router() + +idpRouter.post("/loginSubmitted", async (req, res) => { + const loginResponse = await idp.createLoginResponse( +``` + +위 시퀀스 다이어그램의 5단계에 대한 핸들러입니다. [`idp.createLoginResponse`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L73-L125)는 로그인 응답을 생성합니다. + +```typescript + sp, + { + authnContextClassRef: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport', + audience: sp.entityID, +``` + +대상은 서비스 공급자입니다. + +```typescript + extract: { + request: { + id: req.body.requestId + } + }, +``` + +요청에서 추출한 정보입니다. 요청에서 우리가 신경 쓰는 매개변수 중 하나는 requestId로, 서비스 공급자가 요청과 응답을 일치시킬 수 있게 해줍니다. + +```typescript + signingKey: { privateKey: idpPrivateKey, publicKey: config.idpCert } // Ensure signing +``` + +응답에 서명할 데이터를 가지려면 `signingKey`가 필요합니다. 서비스 공급자는 서명되지 않은 요청을 신뢰하지 않습니다. + +```typescript + }, + "post", + { + email: req.body.email +``` + +서비스 공급자에게 다시 보내는 사용자 정보가 있는 필드입니다. + +```typescript + } + ); + + res.send(` + + + + + + + + `) +}) +``` + +다시 자동 제출 양식을 사용합니다. 위 시퀀스 다이어그램의 6단계입니다. + +```typescript + +// IdP endpoint for login requests +idpRouter.post(`/login`, +``` + +서비스 공급자로부터 로그인 요청을 수신하는 엔드포인트입니다. 위 시퀀스 다이어그램의 3단계에 대한 핸들러입니다. + +```typescript + async (req, res) => { + try { + // Workaround because I couldn't get parseLoginRequest to work. + // const loginRequest = await idp.parseLoginRequest(sp, 'post', req) + const samlRequest = xmlParser.parse(Buffer.from(req.body.SAMLRequest, 'base64').toString('utf-8')) + res.send(getLoginPage(samlRequest["samlp:AuthnRequest"]["@_ID"])) +``` + +인증 요청의 ID를 읽으려면 [`idp.parseLoginRequest`](https://github.com/tngan/samlify/blob/master/src/entity-idp.ts#L127-L144)를 사용할 수 있어야 합니다. 하지만 작동하게 할 수 없었고 많은 시간을 할애할 가치가 없었기 때문에 [범용 XML 파서](https://www.npmjs.com/package/fast-xml-parser)를 사용했습니다. 필요한 정보는 XML의 최상위 수준에 있는 `서명하세요
+ ++ + + +` +} +``` + +나머지는 표준 HTML입니다. + +```typescript +idpRouter.get("/signature/:nonce/:account/:signature", async (req, res) => { +``` + +시퀀스 다이어그램의 5단계에 대한 핸들러입니다. + +```typescript + const requestId = nonces[req.params.nonce] + if (requestId === undefined) { + res.send("Bad nonce") + return ; + } + + nonces[req.params.nonce] = undefined +``` + +요청 ID를 가져오고 재사용할 수 없도록 `nonces`에서 논스를 삭제합니다. + +```typescript + try { +``` + +서명이 유효하지 않을 수 있는 방법이 너무 많기 때문에 `try ...`로 래핑합니다. catch` 블록으로 발생한 오류를 포착합니다. + +```typescript + const validSignature = await verifyMessage({ + address: req.params.account, + message: `${loginPrompt}${req.params.nonce}`, + signature: req.params.signature + }) +``` + +시퀀스 다이어그램의 5.5단계를 구현하려면 [`verifyMessage`](https://viem.sh/docs/actions/public/verifyMessage#verifymessage)를 사용합니다. + +```typescript + if (!validSignature) + throw("Bad signature") + } catch (err) { + res.send("Error:" + err) + return ; + } +``` + +핸들러의 나머지 부분은 한 가지 작은 변경 사항을 제외하고 이전에 `/loginSubmitted` 핸들러에서 수행한 것과 동일합니다. + +```typescript + const loginResponse = await idp.createLoginResponse( + . + . + . + { + email: req.params.account + "@bad.email.address" + } + ); +``` + +실제 이메일 주소는 없으므로(다음 섹션에서 얻을 수 있음) 지금은 이더리움 주소를 반환하고 이메일 주소가 아님을 명확하게 표시합니다. + +```typescript +// IdP endpoint for login requests +idpRouter.post(`/login`, + async (req, res) => { + try { + // Workaround because I couldn't get parseLoginRequest to work. + // const loginRequest = await idp.parseLoginRequest(sp, 'post', req) + const samlRequest = xmlParser.parse(Buffer.from(req.body.SAMLRequest, 'base64').toString('utf-8')) + res.send(getSignaturePage(samlRequest["samlp:AuthnRequest"]["@_ID"])) + } catch (err) { + console.error('Error processing SAML response:', err); + res.status(400).send('SAML authentication failed'); + } + } +) +``` + +3단계 핸들러에서 `getLoginPage` 대신 이제 `getSignaturePage`를 사용합니다. + +## 이메일 주소 받기 + +다음 단계는 서비스 공급자가 요청한 식별자인 이메일 주소를 얻는 것입니다. 이를 위해 [이더리움 증명 서비스(EAS)](https://attest.org/)를 사용합니다. + +인증을 얻는 가장 쉬운 방법은 [GraphQL API](https://docs.attest.org/docs/developer-tools/api)를 사용하는 것입니다. 다음 쿼리를 사용합니다. + +``` +query GetAttestationsByRecipient { + attestations( + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } + take: 1 + ) { + data + id + attester + } +} +``` + +이 [`schemaId`](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977)는 이메일 주소만 포함합니다. 이 쿼리는 이 스키마의 인증을 요청합니다. 인증의 주체는 `recipient`라고 합니다. 항상 이더리움 주소입니다. + +경고: 여기서 인증을 얻는 방식에는 두 가지 보안 문제가 있습니다. + +- 중앙화된 구성 요소인 API 엔드포인트 `https://optimism.easscan.org/graphql`로 이동합니다. `id` 속성을 가져와서 온체인 조회를 통해 인증이 진짜인지 확인할 수 있지만, API 엔드포인트는 인증에 대해 알려주지 않음으로써 여전히 인증을 검열할 수 있습니다. + + 이 문제는 해결 불가능한 것이 아니며, 자체 GraphQL 엔드포인트를 실행하고 체인 로그에서 인증을 얻을 수 있지만, 우리의 목적에는 과도합니다. + +- 인증자 신원을 보지 않습니다. 누구나 거짓 정보를 제공할 수 있습니다. 실제 구현에서는 신뢰할 수 있는 인증자 집합이 있고 그들의 인증만 살펴봅니다. + +이것이 작동하는 것을 보려면 기존 IdP와 SP를 중지하고 다음 명령을 실행하세요. + +```sh +git checkout email-address +pnpm install +pnpm start +``` + +그런 다음 이메일 주소를 제공합니다. 두 가지 방법이 있습니다. + +- 개인 키를 사용하여 지갑을 가져오고 테스트 개인 키 `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80`을 사용합니다. + +- 자신의 이메일 주소에 대한 인증을 추가합니다. + + 1. 인증 탐색기에서 [스키마](https://optimism.easscan.org/schema/view/0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977)로 이동합니다. + + 2. **스키마로 인증**을 클릭합니다. + + 3. 이더리움 주소를 수신자로 입력하고, 이메일 주소를 이메일 주소로 입력하고, **온체인**을 선택합니다. 그런 다음 **인증 만들기**를 클릭합니다. + + 4. 지갑에서 트랜잭션을 승인합니다. 가스를 지불하려면 [옵티미즘 블록체인](https://app.optimism.io/bridge/deposit)에 ETH가 필요합니다. + +어느 쪽이든 이 작업을 마친 후 [http://localhost:3000](http://localhost:3000)으로 이동하여 지침을 따릅니다. 테스트 개인 키를 가져온 경우 받는 이메일은 `test_addr_0@example.com`입니다. 자신의 주소를 사용했다면 인증한 주소여야 합니다. + +### 자세한 설명 + + + +새로운 단계는 GraphQL 통신, 5.6 및 5.7단계입니다. + +다시 한 번, `idp.mts`의 변경된 부분은 다음과 같습니다. + +```typescript +import { GraphQLClient } from 'graphql-request' +import { SchemaEncoder } from '@ethereum-attestation-service/eas-sdk' +``` + +필요한 라이브러리를 가져옵니다. + +```typescript +const graphqlEndpointUrl = "https://optimism.easscan.org/graphql" +``` + +[각 블록체인에 대한 별도의 엔드포인트](https://docs.attest.org/docs/developer-tools/api)가 있습니다. + +```typescript +const graphqlClient = new GraphQLClient(graphqlEndpointUrl, { fetch }) +``` + +엔드포인트 쿼리에 사용할 수 있는 새로운 `GraphQLClient` 클라이언트를 만듭니다. + +```typescript +const graphqlSchema = 'string emailAddress' +const graphqlEncoder = new SchemaEncoder(graphqlSchema) +``` + +GraphQL은 바이트가 포함된 불투명한 데이터 객체만 제공합니다. 이를 이해하려면 스키마가 필요합니다. + +```typescript +const ethereumAddressToEmail = async ethAddr => { +``` + +이더리움 주소에서 이메일 주소로 변환하는 함수입니다. + +```typescript + const query = ` + query GetAttestationsByRecipient { +``` + +GraphQL 쿼리입니다. + +```typescript + attestations( +``` + +인증을 찾고 있습니다. + +```typescript + where: { + recipient: { equals: "${getAddress(ethAddr)}" } + schemaId: { equals: "0xfa2eff59a916e3cc3246f9aec5e0ca00874ae9d09e4678e5016006f07622f977" } + } +``` + +원하는 인증은 스키마에 있으며 수신자가 `getAddress(ethAddr)`인 인증입니다. [`getAddress`](https://viem.sh/docs/utilities/getAddress#getaddress) 함수는 주소에 올바른 [체크섬](https://github.com/ethereum/ercs/blob/master/ERCS/erc-55.md)이 있는지 확인합니다. 이는 GraphQL이 대소문자를 구분하기 때문에 필요합니다. "0xBAD060A7", "0xBad060A7", "0xbad060a7"은 서로 다른 값입니다. + +```typescript + take: 1 +``` + +몇 개의 인증을 찾든 첫 번째 것만 원합니다. + +```typescript + ) { + data + id + attester + } + }` +``` + +받고 싶은 필드입니다. + +- `attester`: 인증을 제출한 주소. 일반적으로 인증을 신뢰할지 여부를 결정하는 데 사용됩니다. +- `id`: 인증 ID. 이 값을 사용하여 [온체인에서 인증을 읽어](https://optimism.blockscout.com/address/0x4200000000000000000000000000000000000021?tab=read_proxy&source_address=0x4E0275Ea5a89e7a3c1B58411379D1a0eDdc5b088#0xa3112a64) GraphQL 쿼리의 정보가 올바른지 확인할 수 있습니다. +- `data`: 스키마 데이터(이 경우 이메일 주소). + +```typescript + const queryResult = await graphqlClient.request(query) + + if (queryResult.attestations.length == 0) + return "no_address@available.is" +``` + +인증이 없는 경우 명백히 잘못되었지만 서비스 공급자에게 유효하게 표시되는 값을 반환합니다. + +```typescript + const attestationDataFields = graphqlEncoder.decodeData(queryResult.attestations[0].data) + return attestationDataFields[0].value.value +} +``` + +값이 있으면 `decodeData`를 사용하여 데이터를 디코딩합니다. 제공하는 메타데이터는 필요하지 않고 값 자체만 필요합니다. + +```typescript + const loginResponse = await idp.createLoginResponse( + sp, + { + . + . + . + }, + "post", + { + email: await ethereumAddressToEmail(req.params.account) + } + ); +``` + +새 함수를 사용하여 이메일 주소를 가져옵니다. + +## 탈중앙화는 어떻습니까? + +이 구성에서 사용자는 이더리움-이메일 주소 매핑을 위해 신뢰할 수 있는 인증자에 의존하는 한 다른 사람인 척할 수 없습니다. 그러나 ID 공급자는 여전히 중앙화된 구성 요소입니다. ID 공급자의 개인 키를 가진 사람은 누구나 서비스 공급자에게 거짓 정보를 보낼 수 있습니다. + +[다자간 계산(MPC)](https://en.wikipedia.org/wiki/Secure_multi-party_computation)를 사용하는 솔루션이 있을 수 있습니다. 다음 튜토리얼에서 이에 대해 쓸 수 있기를 바랍니다. + +## 결론 + +이더리움 서명과 같은 로그온 표준을 채택하는 것은 닭과 달걀 문제에 직면합니다. 서비스 공급자는 가능한 가장 넓은 시장에 어필하기를 원합니다. 사용자는 로그온 표준 지원에 대해 걱정하지 않고 서비스에 액세스할 수 있기를 원합니다. +이더리움 IdP와 같은 어댑터를 만들면 이 장애물을 극복하는 데 도움이 될 수 있습니다. + +[여기서 제 작업에 대한 자세한 내용을 확인하세요](https://cryptodocguy.pro/). diff --git a/public/content/translations/ko/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md b/public/content/translations/ko/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md new file mode 100644 index 00000000000..47ad2c87004 --- /dev/null +++ b/public/content/translations/ko/developers/tutorials/getting-started-with-ethereum-development-using-alchemy/index.md @@ -0,0 +1,149 @@ +--- +title: "이더리움 개발 시작하기" +description: "이더리움 개발을 시작하는 입문자를 위한 가이드입니다. API 엔드포인트를 구동하는 것부터 명령줄 요청을 보내고, 첫 웹3 스크립트를 작성하는 것까지 안내해 드립니다! 사전 블록체인 개발 경험은 필요 없어요!" +author: "Elan Halpern" +tags: [ "자바스크립트", "ethers.js", "노드", "요청", "alchemy" ] +skill: beginner +lang: ko +published: 2020-10-30 +source: Medium +sourceUrl: https://medium.com/alchemy-api/getting-started-with-ethereum-development-using-alchemy-c3d6a45c567f +--- + + + +이더리움 개발을 시작하는 입문자를 위한 가이드입니다. 이번 튜토리얼에서는 Maker, 0x, MyEtherWallet, Dharma, Kyber를 비롯한 상위 블록체인 앱 70%가 사용하는 수백만 명의 사용자를 지원하는 선도적인 블록체인 개발자 플랫폼인 [Alchemy](https://alchemyapi.io/)를 사용합니다. Alchemy는 이더리움 체인의 API 엔드포인트에 대한 액세스를 제공하여 트랜잭션을 읽고 쓸 수 있도록 합니다. + +Alchemy에 가입하는 것부터 첫 웹3 스크립트를 작성하는 것까지 안내해 드립니다! 사전 블록체인 개발 경험은 필요 없어요! + +## 1. 무료 Alchemy 계정 가입하기 {#sign-up-for-a-free-alchemy-account} + +Alchemy 계정 생성은 간단합니다. [여기에서 무료로 가입하세요](https://auth.alchemy.com/). + +## 2. Alchemy 앱 만들기 {#create-an-alchemy-app} + +이더리움 체인과 통신하고 Alchemy 제품을 사용하려면 요청을 인증할 API 키가 필요합니다. + +[대시보드에서 API 키를 생성](https://dashboard.alchemy.com/)할 수 있습니다. 새 키를 생성하려면 아래와 같이 “앱 만들기” 로 이동합니다. + +[_ShapeShift_](https://shapeshift.com/)가 _대시보드를 보여주도록 허락해준 것에 대해 특별히 감사드립니다!_ + + + +“앱 만들기” 밑의 입력란을 채워 새 키를 얻으세요. 여기에서 이전에 만들었던 앱을 보거나 팀에서 만든 앱을 볼 수 있습니다. 아무 앱에서나 '키 보기'를 클릭하여 기존 키를 가져올 수 있습니다. + + + +'앱' 위에 마우스를 올리고 하나를 선택하여 기존 API 키를 가져올 수도 있습니다. 여기에서 '키 보기'를 하거나, '앱 편집'에서 특정 도메인을 화이트리스트에 추가하고, 여러 개발자 도구를 확인하며, 분석을 볼 수 있습니다. + + + +## 3. 명령줄에서 요청하기 {#make-a-request-from-the-command-line} + +JSON-RPC와 curl을 사용하여 Alchemy를 통해 이더리움 블록체인과 상호작용합니다. + +수동 요청의 경우 `POST` 요청을 통해 `JSON-RPC`와 상호작용하는 것을 권장합니다. 다음 필드와 함께 `Content-Type: application/json` 헤더와 쿼리를 `POST` 본문으로 전달하기만 하면 됩니다: + +- `jsonrpc`: JSON-RPC 버전—현재는 `2.0`만 지원됩니다. +- `method`: ETH API 메서드. [API 참조 보기](https://docs.alchemyapi.io/documentation/alchemy-api-reference/json-rpc) +- `params`: 메서드에 전달할 파라미터 목록입니다. +- `id`: 요청의 ID입니다. 응답에 의해 반환되므로 어떤 요청에 대한 응답인지 추적할 수 있습니다. + +다음은 명령줄에서 실행하여 현재 가스 가격을 검색하는 예제입니다: + +```bash +curl https://eth-mainnet.alchemyapi.io/v2/demo \ +-X POST \ +-H "Content-Type: application/json" \ +-d '{"jsonrpc":"2.0","method":"eth_gasPrice","params":[],"id":73}' +``` + +_**참고:** [https://eth-mainnet.alchemyapi.io/v2/demo](https://eth-mainnet.alchemyapi.io/jsonrpc/demo)를 본인의 API 키 `https://eth-mainnet.alchemyapi.io/v2/**your-api-key`로 바꾸세요._ + +**결과:** + +```json +{ "id": 73,"jsonrpc": "2.0","result": "0x09184e72a000" // 10000000000000 } +``` + +## 4. 웹3 클라이언트 설정하기 {#set-up-your-web3-client} + +**기존 클라이언트가 있는 경우,** 현재 노드 공급자 URL을 API 키가 포함된 Alchemy URL로 변경하세요: `“https://eth-mainnet.alchemyapi.io/v2/your-api-key"` + +**_참고:_** 아래 스크립트는 명령줄에서 실행하는 것이 아니라 **노드 컨텍스트**에서 실행하거나 **파일에 저장**해야 합니다. Node나 npm이 아직 설치되지 않았다면, 이 빠른 [mac용 설정 가이드](https://app.gitbook.com/@alchemyapi/s/alchemy/guides/alchemy-for-macs)를 확인하세요. + +Alchemy와 통합할 수 있는 [웹3 라이브러리](https://docs.alchemyapi.io/guides/getting-started#other-web3-libraries)는 많지만, web3.js를 바로 대체할 수 있으며 Alchemy와 원활하게 작동하도록 빌드 및 구성된 [Alchemy 웹3](https://docs.alchemy.com/reference/api-overview) 사용을 권장합니다. 이는 자동 재시도 및 강력한 WebSocket 지원과 같은 여러 이점을 제공합니다. + +AlchemyWeb3.js를 설치하려면 **프로젝트 디렉터리로 이동**하고 다음을 실행하세요: + +**Yarn 사용 시:** + +``` +yarn add @alch/alchemy-web3 +``` + +**NPM 사용 시:** + +``` +npm install @alch/alchemy-web3 +``` + +Alchemy의 노드 인프라와 상호작용하려면 NodeJS에서 실행하거나 이 코드를 JavaScript 파일에 추가하세요: + +```js +const { createAlchemyWeb3 } = require("@alch/alchemy-web3") +const web3 = createAlchemyWeb3( + "https://eth-mainnet.alchemyapi.io/v2/your-api-key" +) +``` + +## 5. 첫 웹3 스크립트 작성하기! {#write-your-first-web3-script} + +이제 웹3 프로그래밍을 본격적으로 시작해보기 위해 이더리움 메인넷에서 최신 블록 번호를 출력하는 간단한 스크립트를 작성해 보겠습니다. + +**1.** 아직 하지 않았다면, 터미널에서 새 프로젝트 디렉터리를 만들고 그 안으로 이동(cd)하세요:\*\* + +``` +mkdir web3-example +cd web3-example +``` + +**2.** 아직 설치하지 않았다면 프로젝트에 Alchemy 웹3(또는 다른 웹3) 의존성을 설치하세요:\*\* + +``` +npm install @alch/alchemy-web3 +``` + +**3.** `index.js`라는 이름의 파일을 만들고 다음 내용을 추가하세요:\*\* + +> `demo`는 본인의 Alchemy HTTP API 키로 교체해야 합니다. + +```js +async function main() { + const { createAlchemyWeb3 } = require("@alch/alchemy-web3") + const web3 = createAlchemyWeb3("https://eth-mainnet.alchemyapi.io/v2/demo") + const blockNumber = await web3.eth.getBlockNumber() + console.log("최신 블록 번호는 " + blockNumber) +} +main() +``` + +비동기와 관련된 것들이 낯선가요? 이 [Medium 게시물](https://medium.com/better-programming/understanding-async-await-in-javascript-1d81bb079b2c)을 확인해보세요. + +**4. node를 사용하여 터미널에서 실행하세요** + +``` +node index.js +``` + +**5. 이제 콘솔에 최신 블록 번호 출력이 표시될 것입니다!** + +``` +최신 블록 번호는 11043912 +``` + +**수고하셨어요!** 축하해요! Alchemy를 사용하여 첫 번째 웹3 스크립트를 작성했습니다 🎉\*\* + +다음으로 해야 될 걸 모르겠나요? [Hello World 스마트 계약 가이드](https://www.alchemy.com/docs/hello-world-smart-contract)에서 첫 스마트 계약을 배포하고 솔리디티 프로그래밍을 직접 해보거나, [대시보드 데모 앱](https://docs.alchemyapi.io/tutorials/demo-app)으로 대시보드 지식을 테스트해보세요! + +_[무료로 Alchemy에 가입](https://auth.alchemy.com/)하고, [개발문서](https://www.alchemy.com/docs/)를 확인하고, 최신 소식을 보려면 [Twitter](https://twitter.com/AlchemyPlatform)에서 저희를 팔로우하세요_. diff --git a/public/content/translations/ko/developers/tutorials/guide-to-smart-contract-security-tools/index.md b/public/content/translations/ko/developers/tutorials/guide-to-smart-contract-security-tools/index.md new file mode 100644 index 00000000000..edb8a635c9a --- /dev/null +++ b/public/content/translations/ko/developers/tutorials/guide-to-smart-contract-security-tools/index.md @@ -0,0 +1,102 @@ +--- +title: "스마트 계약 보안 도구 가이드" +description: "세 가지 다른 테스팅 및 프로그램 분석 기법 개요" +author: "Trailofbits" +lang: ko +tags: [ "솔리디티", "스마트 계약", "보안" ] +skill: intermediate +published: 2020-09-07 +source: Building secure contracts +sourceUrl: https://github.com/crytic/building-secure-contracts/tree/master/program-analysis +--- + +세 가지 독특한 테스팅 및 프로그램 분석 기법을 사용할 것입니다. + +- **[Slither](/developers/tutorials/how-to-use-slither-to-find-smart-contract-bugs/)를 사용한 정적 분석.** 프로그램의 모든 경로를 다양한 프로그램 표현(예: 제어 흐름 그래프)을 통해 동시에 근사화하고 분석합니다. +- **[Echidna](/developers/tutorials/how-to-use-echidna-to-test-smart-contracts/)를 사용한 퍼징.** 트랜잭션을 의사 난수 생성하여 코드를 실행합니다. 퍼저는 주어진 속성을 위반하는 트랜잭션 시퀀스를 찾으려고 시도합니다. +- **[Manticore](/developers/tutorials/how-to-use-manticore-to-find-smart-contract-bugs/)를 사용한 심볼릭 실행.** 각 실행 경로를 수학 공식으로 변환하고 그 위에 제약 조건을 확인할 수 있는 정형 검증 기법입니다. + +각 기법은 장점과 단점이 있으며 [특정 사례](#determining-security-properties)에서 유용합니다. + +| 기법 | 도구 | 사용 방식 | 속도 | 놓친 버그 | 오탐 | +| ------ | --------- | ------------------ | ----- | ----- | -- | +| 정적 분석 | Slither | CLI 및 스크립트 | 초 단위 | 보통 | 낮음 | +| 퍼징 | Echidna | Solidity 속성 | 분 단위 | 낮음 | 없음 | +| 심볼릭 실행 | Manticore | Solidity 속성 및 스크립트 | 시간 단위 | 없음\* | 없음 | + +\* 시간 초과 없이 모든 경로를 탐색하는 경우 + +**Slither**는 몇 초 안에 계약을 분석하지만 정적 분석은 오탐을 유발할 수 있으며 복잡한 검사(예: 산술 검사)에는 덜 적합합니다. API를 통해 Slither를 실행하여 내장된 탐지기에 간편하게 액세스하거나 사용자 정의 검사를 수행할 수 있습니다. + +**Echidna**는 몇 분 동안 실행해야 하며 실제 참(true positive)만 생성합니다. Echidna는 Solidity로 작성된 사용자 제공 보안 속성을 확인합니다. 무작위 탐색을 기반으로 하므로 버그를 놓칠 수 있습니다. + +**Manticore**는 가장 "무거운" 분석을 수행합니다. Echidna와 마찬가지로 Manticore는 사용자가 제공한 속성을 확인합니다. 실행하는 데 더 많은 시간이 필요하지만 속성의 유효성을 증명할 수 있으며 오탐을 보고하지 않습니다. + +## 권장 워크플로 {#suggested-workflow} + +Slither의 내장 탐지기로 시작하여 간단한 버그가 현재 존재하지 않거나 나중에 유입되지 않도록 하세요. Slither를 사용하여 상속, 변수 종속성 및 구조적 문제와 관련된 속성을 확인하세요. 코드베이스가 커짐에 따라 Echidna를 사용하여 상태 머신의 더 복잡한 속성을 테스트하세요. Solidity에서 사용할 수 없는 보호 기능(예: 함수 재정의 방지)을 위해 Slither를 다시 사용하여 맞춤형 검사를 개발하세요. 마지막으로 Manticore를 사용하여 중요한 보안 속성(예: 산술 연산)의 대상 검증을 수행하세요. + +- Slither의 CLI를 사용하여 일반적인 문제 발견 +- Echidna를 사용하여 계약의 상위 수준 보안 속성 테스트 +- Slither를 사용하여 맞춤형 정적 검사 작성 +- 중요한 보안 속성에 대한 심층적인 보증을 원할 때 Manticore 사용 + +**단위 테스트에 대한 참고 사항**. 단위 테스트는 고품질 소프트웨어를 구축하는 데 필요합니다. 그러나 이러한 기법은 보안 결함을 찾는 데 가장 적합하지는 않습니다. 일반적으로 코드의 긍정적인 동작(즉, 코드가 일반적인 컨텍스트에서 예상대로 작동함)을 테스트하는 데 사용되는 반면, 보안 결함은 개발자가 고려하지 않은 엣지 케이스에 있는 경향이 있습니다. 수십 건의 스마트 계약 보안 검토에 대한 저희의 연구에서, [저희가 고객의 코드에서 발견한 보안 결함의 수나 심각도에 단위 테스트 커버리지는 영향을 미치지 않았습니다](https://blog.trailofbits.com/2019/08/08/246-findings-from-our-smart-contract-audits-an-executive-summary/). + +## 보안 속성 결정하기 {#determining-security-properties} + +코드를 효과적으로 테스트하고 검증하려면 주의가 필요한 영역을 식별해야 합니다. 보안에 사용하는 리소스는 제한적이므로, 코드베이스의 취약하거나 가치가 높은 부분의 범위를 정하는 것이 노력을 최적화하는 데 중요합니다. 위협 모델링이 도움이 될 수 있습니다. 다음을 검토해 보세요. + +- [신속한 위험 평가](https://infosec.mozilla.org/guidelines/risk/rapid_risk_assessment.html)(시간이 부족할 때 선호하는 접근 방식) +- [데이터 중심 시스템 위협 모델링 가이드](https://csrc.nist.gov/pubs/sp/800/154/ipd)(일명 NIST 800-154) +- [Shostack 위협 모델링](https://www.amazon.com/Threat-Modeling-Designing-Adam-Shostack/dp/1118809998) +- [STRIDE](https://wikipedia.org/wiki/STRIDE_\(security\)) / [DREAD](https://wikipedia.org/wiki/DREAD_\(risk_assessment_model\)) +- [PASTA](https://wikipedia.org/wiki/Threat_model#P.A.S.T.A.) +- [단언문 사용](https://blog.regehr.org/archives/1091) + +### 구성 요소 {#components} + +확인하려는 내용을 알면 적절한 도구를 선택하는 데도 도움이 됩니다. + +스마트 계약과 자주 관련된 광범위한 영역은 다음과 같습니다. + +- **상태 머신.** 대부분의 계약은 상태 머신으로 표현될 수 있습니다. (1) 유효하지 않은 상태에 도달할 수 없는지, (2) 상태가 유효할 경우 도달할 수 있는지, (3) 어떤 상태도 계약을 가두지 않는지 확인하는 것을 고려해 보세요. + + - Echidna와 Manticore는 상태 머신 사양을 테스트하는 데 선호되는 도구입니다. + +- **액세스 제어.** 시스템에 권한 있는 사용자(예: 소유자, 컨트롤러 등)가 있는 경우 (1) 각 사용자는 승인된 작업만 수행할 수 있고, (2) 어떤 사용자도 더 많은 권한을 가진 사용자의 작업을 차단할 수 없도록 보장해야 합니다. + + - Slither, Echidna, Manticore는 올바른 액세스 제어를 확인할 수 있습니다. 예를 들어, Slither는 화이트리스트에 있는 함수에만 onlyOwner 수정자가 없는지 확인할 수 있습니다. Echidna와 Manticore는 계약이 특정 상태에 도달한 경우에만 권한이 부여되는 것과 같은 더 복잡한 액세스 제어에 유용합니다. + +- **산술 연산.** 산술 연산의 건전성을 확인하는 것은 매우 중요합니다. 모든 곳에서 `SafeMath`를 사용하는 것은 오버플로우/언더플로우를 방지하는 좋은 방법이지만, 반올림 문제와 계약을 가두는 결함을 포함한 다른 산술적 결함도 여전히 고려해야 합니다. + + - 여기서는 Manticore가 최선의 선택입니다. 산술이 SMT 솔버의 범위를 벗어나는 경우 Echidna를 사용할 수 있습니다. + +- **상속 정확성.** Solidity 계약은 다중 상속에 크게 의존합니다. `super` 호출이 누락된 섀도잉 함수, 잘못 해석된 c3 선형화 순서와 같은 실수가 쉽게 발생할 수 있습니다. + + - Slither는 이러한 문제를 확실하게 탐지할 수 있는 도구입니다. + +- **외부 상호작용.** 계약은 서로 상호작용하며, 일부 외부 계약은 신뢰해서는 안 됩니다. 예를 들어, 계약이 외부 오라클에 의존하는 경우 사용 가능한 오라클의 절반이 손상되어도 안전하게 유지될까요? + + - Manticore와 Echidna는 계약과의 외부 상호작용을 테스트하는 데 최선의 선택입니다. Manticore에는 외부 계약을 스텁하는 내장 메커니즘이 있습니다. + +- **표준 준수.** 이더리움 표준(예: ERC20)은 설계에 결함이 있었던 이력이 있습니다. 구축 기반이 되는 표준의 한계를 인지하고 있어야 합니다. + - Slither, Echidna, Manticore는 주어진 표준에서 벗어나는 것을 탐지하는 데 도움이 될 것입니다. + +### 도구 선택 치트 시트 {#tool-selection-cheatsheet} + +| 구성 요소 | 도구 | 예시 | +| ------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 상태 머신 | Echidna, Manticore | | +| 액세스 제어 | Slither, Echidna, Manticore | [Slither 연습 문제 2](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise2.md), [Echidna 연습 문제 2](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-2.md) | +| 산술 연산 | Manticore, Echidna | [Echidna 연습 문제 1](https://github.com/crytic/building-secure-contracts/blob/master/program-analysis/echidna/exercises/Exercise-1.md), [Manticore 연습 문제 1 - 3](https://github.com/crytic/building-secure-contracts/tree/master/program-analysis/manticore/exercises) | +| 상속 정확성 | Slither | [Slither 연습 문제 1](https://github.com/crytic/slither/blob/7f54c8b948c34fb35e1d61adaa1bd568ca733253/docs/src/tutorials/exercise1.md) | +| 외부 상호작용 | Manticore, Echidna | | +| 표준 준수 | Slither, Echidna, Manticore | [`slither-erc`](https://github.com/crytic/slither/wiki/ERC-Conformance) | + +목표에 따라 다른 영역도 확인해야 하지만, 이러한 대략적인 집중 영역은 모든 스마트 계약 시스템에 좋은 시작입니다. + +저희의 공개 감사에는 검증되거나 테스트된 속성의 예가 포함되어 있습니다. 실제 보안 속성을 검토하려면 다음 보고서의 `자동화된 테스트 및 검증` 섹션을 읽어보세요. + +- [0x](https://github.com/trailofbits/publications/blob/master/reviews/0x-protocol.pdf) +- [Balancer](https://github.com/trailofbits/publications/blob/master/reviews/BalancerCore.pdf) diff --git a/public/content/translations/ko/developers/tutorials/hello-world-smart-contract-fullstack/index.md b/public/content/translations/ko/developers/tutorials/hello-world-smart-contract-fullstack/index.md new file mode 100644 index 00000000000..5cf41cd7555 --- /dev/null +++ b/public/content/translations/ko/developers/tutorials/hello-world-smart-contract-fullstack/index.md @@ -0,0 +1,1542 @@ +--- +title: "초보자를 위한 Hello World 스마트 계약 - 풀스택" +description: "이더리움에 간단한 스마트 계약을 작성하고 배포하는 방법에 대한 입문 튜토리얼입니다." +author: "nstrike2" +tags: + [ + "솔리디티", + "hardhat", + "alchemy", + "스마트 계약", + "배포하기", + "블록 탐색기", + "프론트엔드", + "트랜잭션" + ] +skill: beginner +lang: ko +published: 2021-10-25 +--- + +이 가이드는 블록체인 개발을 처음 접하시거나 스마트 계약을 배포하고 상호 작용하는 방법을 모르는 분들을 위한 것입니다. [MetaMask](https://metamask.io), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org), [Alchemy](https://alchemy.com/eth)를 사용하여 Goerli 테스트 네트워크에 간단한 스마트 계약을 생성하고 배포하는 과정을 안내합니다. + +이 튜토리얼을 완료하려면 Alchemy 계정이 필요합니다. [무료 계정으로 가입하세요](https://www.alchemy.com/). + +궁금한 점이 있으면 언제든지 [Alchemy Discord](https://discord.gg/gWuC7zB)에 문의하세요! + +## 1부 - Hardhat을 사용하여 스마트 계약 생성 및 배포하기 {#part-1} + +### 이더리움 네트워크에 연결하기 {#connect-to-the-ethereum-network} + +이더리움 체인에 요청을 보내는 방법은 여러 가지가 있습니다. 간단하게 하기 위해, 자체적으로 노드를 실행하지 않고도 이더리움 체인과 통신할 수 있게 해주는 블록체인 개발자 플랫폼이자 API인 Alchemy의 무료 계정을 사용하겠습니다. Alchemy는 모니터링 및 분석을 위한 개발자 도구도 제공합니다. 이 튜토리얼에서 이러한 도구를 활용하여 스마트 계약 배포 시 내부적으로 어떤 일이 일어나는지 이해해 보겠습니다. + +### 앱과 API 키 만들기 {#create-your-app-and-api-key} + +Alchemy 계정을 생성한 후에는 앱을 만들어 API 키를 생성할 수 있습니다. 이를 통해 Goerli 테스트넷에 요청을 보낼 수 있습니다. 테스트넷에 익숙하지 않은 경우 [네트워크 선택에 대한 Alchemy 가이드](https://www.alchemy.com/docs/choosing-a-web3-network)를 읽어보세요. + +Alchemy 대시보드의 탐색 모음에서 **Apps** 드롭다운을 찾아 **Create App**을 클릭합니다. + + + +앱 이름을 '_Hello World_'로 지정하고 간단한 설명을 작성합니다. 환경으로 **Staging**을, 네트워크로 **Goerli**를 선택합니다. + + + +_참고: **Goerli**를 반드시 선택해야 합니다. 그렇지 않으면 이 튜토리얼이 작동하지 않습니다._ + +**앱 만들기**를 클릭하세요. 생성한 앱이 아래 표에 나타납니다. + +### 이더리움 계정 만들기 {#create-an-ethereum-account} + +트랜잭션을 보내고 받으려면 이더리움 계정이 필요합니다. 브라우저에서 이더리움 계정 주소를 관리할 수 있는 가상 지갑인 MetaMask를 사용하겠습니다. + +[여기](https://metamask.io/download)에서 MetaMask 계정을 무료로 다운로드하고 생성할 수 있습니다. 계정을 생성하거나 이미 계정이 있는 경우, 오른쪽 상단에서 'Goerli 테스트 네트워크'로 전환했는지 확인하세요(실제 돈을 다루지 않기 위함입니다). + +### 4단계: 파우셋에서 이더 추가하기 {#step-4-add-ether-from-a-faucet} + +테스트 네트워크에 스마트 계약을 배포하려면 가짜 ETH가 필요합니다. Goerli 네트워크에서 ETH를 받으려면, Goerli 파우셋으로 이동하여 Goerli 계정 주소를 입력하세요. 최근 Goerli 파우셋이 약간 불안정할 수 있습니다. [테스트 네트워크 페이지](/developers/docs/networks/#goerli)에서 시도해 볼 수 있는 옵션 목록을 확인하세요. + +_참고: 네트워크 혼잡으로 인해 시간이 다소 걸릴 수 있습니다._ +`` + +### 5단계: 잔액 확인하기 {#step-5-check-your-balance} + +지갑에 ETH가 있는지 다시 확인하기 위해 [Alchemy의 컴포저 도구](https://composer.alchemyapi.io/?composer_state=%7B%22network%22%3A0%2C%22methodName%22%3A%22eth_getBalance%22%2C%22paramValues%22%3A%5B%22%22%2C%22latest%22%5D%7D)를 사용하여 [eth_getBalance](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_getbalance) 요청을 보냅니다. 이것은 지갑에 있는 ETH의 양을 반환할 것입니다. 더 자세한 내용은 [컴포저 도구 사용법에 대한 Alchemy의 짧은 튜토리얼](https://youtu.be/r6sjRxBZJuU)을 확인하세요. + +MetaMask 계정 주소를 입력하고 **요청 보내기**를 클릭하세요. 아래 코드 스니펫과 같은 응답을 보게 될 것입니다. + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> _참고: 이 결과는 ETH가 아닌 wei 단위입니다. Wei는 ether의 가장 작은 단위로 사용됩니다._ + +휴! 우리의 가짜 돈이 다 있군요. + +### 6단계: 프로젝트 초기화하기 {#step-6-initialize-our-project} + +먼저 프로젝트를 위한 폴더를 만들어야 합니다. 명령줄로 이동하여 다음을 입력하세요. + +``` +mkdir hello-world +cd hello-world +``` + +이제 프로젝트 폴더 안으로 들어왔으니, `npm init`을 사용하여 프로젝트를 초기화하겠습니다. + +> 아직 npm이 설치되지 않았다면 [Node.js 및 npm 설치 지침](https://docs.alchemyapi.io/alchemy/guides/alchemy-for-macs#1-install-nodejs-and-npm)을 따르세요. + +이 튜토리얼에서는 초기화 질문에 어떻게 대답하든 상관없습니다. 참고를 위해 다음과 같이 진행했습니다. + +``` +패키지 이름: (hello-world) +버전: (1.0.0) +설명: hello world 스마트 계약 +진입점: (index.js) +테스트 명령어: +git 저장소: +키워드: +작성자: +라이선스: (ISC) + +/Users/.../.../.../hello-world/package.json에 쓰기 직전: + +{ + "name": "hello-world", + "version": "1.0.0", + "description": "hello world 스마트 계약", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} +``` + +package.json을 승인하면 준비 완료입니다! + +### 7단계: Hardhat 다운로드하기 {#step-7-download-hardhat} + +Hardhat은 이더리움 소프트웨어를 컴파일, 배포, 테스트 및 디버그하기 위한 개발 환경입니다. 실제 블록체인에 배포하기 전에 로컬에서 스마트 컨트랙트 및 dApp을 구축할 때 사용됩니다. + +`hello-world` 프로젝트 내부에서 다음을 실행하세요: + +``` +npm install --save-dev hardhat +``` + +설치 지침에 대한 자세한 내용은 [이 페이지](https://hardhat.org/getting-started/#overview)를 확인하세요. + +### 8단계: Hardhat 프로젝트 생성하기 {#step-8-create-hardhat-project} + +`hello-world` 프로젝트 폴더 안에서 다음을 실행합니다: + +``` +npx hardhat +``` + +그러면 환영 메시지와 원하는 작업을 선택할 수 있는 옵션이 표시됩니다. "create an empty hardhat.config.js"를 선택합니다. + +``` +888 888 888 888 888 +888 888 888 888 888 +888 888 888 888 888 +8888888888 8888b. 888d888 .d88888 88888b. 8888b. 888888 +888 888 "88b 888P" d88" 888 888 "88b "88b 888 +888 888 .d888888 888 888 888 888 888 .d888888 888 +888 888 888 888 888 Y88b 888 888 888 888 888 Y88b. +888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888 + +👷 Hardhat v2.0.11에 오신 것을 환영합니다 👷 + +무엇을 하시겠습니까? … +샘플 프로젝트 생성 +❯ 빈 hardhat.config.js 생성 +종료 +``` + +이렇게 하면 프로젝트에 `hardhat.config.js` 파일이 생성됩니다. 튜토리얼의 뒷부분에서 이 파일을 사용하여 프로젝트 설정을 지정할 것입니다. + +### 9단계: 프로젝트 폴더 추가하기 {#step-9-add-project-folders} + +프로젝트를 체계적으로 정리하기 위해 두 개의 새 폴더를 만들겠습니다. 명령줄에서 `hello-world` 프로젝트의 루트 디렉토리로 이동하여 다음을 입력합니다. + +``` +mkdir contracts +mkdir scripts +``` + +- `contracts/`는 hello world 스마트 계약 코드 파일을 보관할 곳입니다. +- `scripts/`는 계약을 배포하고 상호작용하기 위한 스크립트를 보관할 곳입니다. + +### 10단계: 계약 작성하기 {#step-10-write-our-contract} + +언제 코드를 작성하게 될지 궁금하실 겁니다. 바로 지금입니다! + +선호하는 편집기에서 hello-world 프로젝트를 여세요. 스마트 계약은 대부분 Solidity로 작성되며, 저희도 스마트 계약을 작성하는 데 Solidity를 사용할 것입니다. + +1. `contracts` 폴더로 이동하여 `HelloWorld.sol`이라는 새 파일을 만듭니다. +2. 아래는 이 튜토리얼에서 사용할 샘플 Hello World 스마트 계약입니다. 아래 내용을 `HelloWorld.sol` 파일에 복사하세요. + +_참고: 이 계약이 어떤 역할을 하는지 이해하려면 주석을 꼭 읽어보세요._ + +``` +// 시맨틱 버저닝을 사용하여 Solidity 버전을 지정합니다. +// 자세히 알아보기: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma +pragma solidity >=0.7.3; + +// 'HelloWorld'라는 계약을 정의합니다. +// 계약은 함수와 데이터(그 상태)의 모음입니다. 배포되면, 계약은 이더리움 블록체인의 특정 주소에 위치하게 됩니다. 자세히 알아보기: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html +contract HelloWorld { + + //업데이트 함수가 호출될 때 발생합니다 + //스마트 계약 이벤트는 계약이 블록체인에서 발생한 일을 앱 프론트엔드에 전달하는 방법으로, 특정 이벤트를 '수신'하고 이벤트가 발생할 때 조치를 취할 수 있습니다. + event UpdatedMessages(string oldStr, string newStr); + + // 'string' 타입의 상태 변수 `message`를 선언합니다. + // 상태 변수는 값이 계약 스토리지에 영구적으로 저장되는 변수입니다. `public` 키워드는 변수를 계약 외부에서 액세스할 수 있도록 하고 다른 계약이나 클라이언트가 값을 액세스하기 위해 호출할 수 있는 함수를 생성합니다. + string public message; + + // 많은 클래스 기반 객체 지향 언어와 마찬가지로 생성자는 계약 생성 시에만 실행되는 특수 함수입니다. + // 생성자는 계약의 데이터를 초기화하는 데 사용됩니다. 자세히 알아보기:https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors + constructor(string memory initMessage) { + + // 문자열 인수 `initMessage`를 수락하고 계약의 `message` 스토리지 변수에 값을 설정합니다). + message = initMessage; + } + + // 문자열 인수를 허용하고 `message` 스토리지 변수를 업데이트하는 공개 함수입니다. + function update(string memory newMessage) public { + string memory oldMsg = message; + message = newMessage; + emit UpdatedMessages(oldMsg, newMessage); + } +} +``` + +이것은 생성 시 메시지를 저장하는 기본적인 스마트 계약입니다. `update` 함수를 호출하여 업데이트할 수 있습니다. + +### 11단계: MetaMask와 Alchemy를 프로젝트에 연결하기 {#step-11-connect-metamask-alchemy-to-your-project} + +MetaMask 지갑, Alchemy 계정을 만들고 스마트 계약을 작성했습니다. 이제 이 세 가지를 연결할 차례입니다. + +지갑에서 전송되는 모든 트랜잭션은 고유한 개인 키를 사용한 서명이 필요합니다. 프로그램에 이 권한을 제공하기 위해, 개인 키를 환경 파일에 안전하게 저장할 수 있습니다. 여기에 Alchemy용 API 키도 저장할 것입니다. + +> 트랜잭션 전송에 대해 더 알아보려면 web3를 사용한 트랜잭션 전송에 관한 [이 튜토리얼](https://www.alchemy.com/docs/hello-world-smart-contract#step-11-connect-metamask--alchemy-to-your-project)을 확인하세요. + +먼저 프로젝트 디렉터리에 dotenv 패키지를 설치합니다. + +``` +npm install dotenv --save +``` + +그런 다음, 프로젝트의 루트 디렉터리에 `.env` 파일을 생성합니다. 여기에 MetaMask 개인 키와 HTTP Alchemy API URL을 추가합니다. + +환경 파일의 이름은 `.env`여야 합니다. 그렇지 않으면 환경 파일로 인식되지 않습니다. + +`process.env`나 `.env-custom` 또는 다른 이름으로 지정하지 마세요. + +- 개인 키를 내보내려면 [다음 지침](https://metamask.zendesk.com/hc/en-us/articles/360015289632-How-to-Export-an-Account-Private-Key)을 따르세요. +- HTTP Alchemy API URL을 얻으려면 아래를 참조하세요. + + + +`.env` 파일은 다음과 같아야 합니다: + +``` +API_URL = "https://eth-goerli.alchemyapi.io/v2/your-api-key" +PRIVATE_KEY = "your-metamask-private-key" +``` + +이를 실제로 코드에 연결하기 위해 13단계의 `hardhat.config.js` 파일에서 이러한 변수를 참조합니다. + +### 12단계: Ethers.js 설치하기 {#step-12-install-ethersjs} + +Ethers.js는 [표준 JSON-RPC 메서드](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc)를 보다 사용자 친화적인 메서드로 래핑하여 이더리움과 더 쉽게 상호 작용하고 요청할 수 있도록 하는 라이브러리입니다. + +Hardhat은 추가적인 툴링 및 확장된 기능을 위해 [플러그인](https://hardhat.org/plugins/)을 통합할 수 있게 해줍니다. 계약 배포를 위해 [Ethers 플러그인](https://hardhat.org/docs/plugins/official-plugins#hardhat-ethers)을 활용할 것입니다. + +프로젝트 디렉토리에 다음을 입력합니다. + +```bash +npm install --save-dev @nomiclabs/hardhat-ethers "ethers@^5.0.0" +``` + +### 13단계: hardhat.config.js 업데이트하기 {#step-13-update-hardhat-configjs} + +지금까지 여러 종속성과 플러그인을 추가했습니다. 이제 프로젝트가 이 모든 것을 인식할 수 있도록 `hardhat.config.js`를 업데이트해야 합니다. + +`hardhat.config.js`를 다음과 같이 업데이트하세요: + +```javascript +/** + * @type import('hardhat/config').HardhatUserConfig + */ + +require("dotenv").config() +require("@nomiclabs/hardhat-ethers") + +const { API_URL, PRIVATE_KEY } = process.env + +module.exports = { + solidity: "0.7.3", + defaultNetwork: "goerli", + networks: { + hardhat: {}, + goerli: { + url: API_URL, + accounts: [`0x${PRIVATE_KEY}`], + }, + }, +} +``` + +### 14단계: 계약 컴파일하기 {#step-14-compile-our-contract} + +지금까지 모든 것이 제대로 작동하는지 확인하기 위해 스마트 컨트랙트를 컴파일해 보겠습니다. `compile` 작업은 hardhat에 내장된 작업 중 하나입니다. + +명령줄에서 다음을 실행합니다. + +```bash +npx hardhat compile +``` + +`SPDX license identifier not provided in source file`에 대한 경고가 표시될 수 있지만 걱정할 필요는 없습니다. 다른 모든 것이 잘 보이기를 바랍니다! 그렇지 않은 경우 언제든지 [Alchemy discord](https://discord.gg/u72VCg3)로 메시지를 보내주세요. + +### 15단계: 배포 스크립트 작성하기 {#step-15-write-our-deploy-script} + +이제 스마트 컨트랙트가 작성되고 설정 파일을 사용할 수 있으므로 스마트 컨트랙트 배포 스크립트를 작성할 차례입니다. + +`scripts/` 폴더로 이동하여 `deploy.js`라는 새 파일을 만들고 다음 내용을 추가하세요. + +```javascript +async function main() { + const HelloWorld = await ethers.getContractFactory("HelloWorld") + + // 배포를 시작하고, 계약 객체로 확인되는 프라미스를 반환합니다 + const hello_world = await HelloWorld.deploy("Hello World!") + console.log("계약이 배포된 주소:", hello_world.address) +} + +main() + .then(() => process.exit(0)) + .catch((error) => { + console.error(error) + process.exit(1) + }) +``` + +Hardhat은 [계약 튜토리얼](https://hardhat.org/tutorial/testing-contracts.html#writing-tests)에서 각 코드 라인이 무엇을 하는지 훌륭하게 설명하고 있으며, 저희는 그 설명을 여기에 채택했습니다. + +```javascript +const HelloWorld = await ethers.getContractFactory("HelloWorld") +``` + +ethers.js의 `ContractFactory`는 새로운 스마트 계약을 배포하는 데 사용되는 추상화이므로, 여기서 `HelloWorld`는 [팩토리](https://en.wikipedia.org/wiki/Factory_\(object-oriented_programming\)) 계약 인스턴스를 위한 팩토리입니다. `hardhat-ethers` 플러그인을 사용할 때 `ContractFactory` 및 `Contract` 인스턴스는 기본적으로 첫 번째 서명자(소유자)에게 연결됩니다. + +```javascript +const hello_world = await HelloWorld.deploy() +``` + +`ContractFactory`에서 `deploy()`를 호출하면 배포가 시작되고, `Contract` 객체로 확인되는 `Promise`를 반환합니다. 이것은 각 스마트 컨트랙트 기능에 대한 메소드가 있는 개체입니다. + +### 16단계: 계약 배포하기 {#step-16-deploy-our-contract} + +마침내 스마트 컨트랙트를 배포할 준비가 되었습니다! 명령줄로 이동하여 다음을 실행하세요: + +```bash +npx hardhat run scripts/deploy.js --network goerli +``` + +그러면 다음과 같은 내용이 표시됩니다. + +```bash +계약이 배포된 주소: 0x6cd7d44516a20882cEa2DE9f205bF401c0d23570 +``` + +**이 주소를 저장해주세요**. 튜토리얼 뒷부분에서 사용할 것입니다. + +[Goerli Etherscan](https://goerli.etherscan.io)으로 이동하여 계약 주소를 검색하면 성공적으로 배포된 것을 볼 수 있습니다. 트랜잭션은 다음과 같습니다. + + + +`From` 주소는 MetaMask 계정 주소와 일치해야 하며, `To` 주소는 **계약 생성**이라고 표시됩니다. 트랜잭션을 클릭하면 `To` 필드에 계약 주소가 표시됩니다. + + + +축하해요! 방금 이더리움 테스트넷에 스마트 계약을 배포했습니다. + +내부적으로 어떤 일이 일어나고 있는지 이해하기 위해 [Alchemy 대시보드](https://dashboard.alchemy.com/explorer)의 Explorer 탭으로 이동해 보겠습니다. 여러 개의 Alchemy 앱이 있는 경우 앱별로 필터링하고 **Hello World**를 선택해야 합니다. + + + +여기에서 `.deploy()` 함수를 호출했을 때 Hardhat/Ethers가 내부적으로 수행한 몇 가지 JSON-RPC 메서드를 볼 수 있습니다. 여기서 중요한 두 가지 메서드는 계약을 Goerli 체인에 작성하는 요청인 [`eth_sendRawTransaction`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_sendrawtransaction)과, 해시가 주어졌을 때 트랜잭션에 대한 정보를 읽는 요청인 [`eth_getTransactionByHash`](https://docs.alchemyapi.io/alchemy/documentation/alchemy-api-reference/json-rpc#eth_gettransactionbyhash)입니다. 트랜잭션 전송에 대해 더 자세히 알아보려면 [Web3를 사용한 트랜잭션 전송 튜토리얼](/developers/tutorials/sending-transactions-using-web3-and-alchemy/)을 확인하세요. + +## 2부: 스마트 계약과 상호작용하기 {#part-2-interact-with-your-smart-contract} + +이제 Goerli 네트워크에 스마트 계약을 성공적으로 배포했으니, 이와 상호 작용하는 방법을 알아보겠습니다. + +### interact.js 파일 생성하기 {#create-a-interactjs-file} + +이 파일은 상호 작용 스크립트를 작성할 파일입니다. 1부에서 이전에 설치한 Ethers.js 라이브러리를 사용할 것입니다. + +`scripts/` 폴더 안에 `interact.js`라는 새 파일을 만들고 다음 코드를 추가합니다. + +```javascript +// interact.js + +const API_KEY = process.env.API_KEY +const PRIVATE_KEY = process.env.PRIVATE_KEY +const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS +``` + +### .env 파일 업데이트하기 {#update-your-env-file} + +새로운 환경 변수를 사용할 것이므로 [이전에 생성한](#step-11-connect-metamask-&-alchemy-to-your-project) `.env` 파일에 정의해야 합니다. + +Alchemy `API_KEY`와 스마트 계약이 배포된 `CONTRACT_ADDRESS`에 대한 정의를 추가해야 합니다. + +`.env` 파일은 다음과 같아야 합니다. + +```bash +# .env + +API_URL = "https://eth-goerli.alchemyapi.io/v2/
+ 
+
+
+
+)
+```
+
+이 코드를 자세히 살펴보면 UI에서 다양한 상태 변수를 사용하는 위치를 알 수 있습니다.
+
+- 6-12줄에서 사용자의 지갑이 연결된 경우(즉, `walletAddress.length > 0`), ID가 "walletButton"인 버튼에 사용자의 `walletAddress`의 축약된 버전을 표시하고, 그렇지 않으면 "지갑 연결"이라고만 표시합니다.
+- 17번 줄에는 `message` 문자열에 캡처된 스마트 계약에 저장된 현재 메시지를 표시합니다.
+- 23-26줄에서는 [제어된 컴포넌트](https://legacy.reactjs.org/docs/forms.html#controlled-components)를 사용하여 텍스트 필드의 입력이 변경될 때 `newMessage` 상태 변수를 업데이트합니다.
+
+상태 변수 외에도 `publishButton` 및 `walletButton` ID를 가진 버튼을 각각 클릭하면 `connectWalletPressed` 및 `onUpdatePressed` 함수가 호출되는 것을 볼 수 있습니다.
+
+마지막으로, 이 `HelloWorld.js` 컴포넌트가 어디에 추가되는지 알아보겠습니다.
+
+React의 메인 컴포넌트로 다른 모든 컴포넌트의 컨테이너 역할을 하는 `App.js` 파일로 이동하면, 7번째 줄에 `HelloWorld.js` 컴포넌트가 주입된 것을 볼 수 있습니다.
+
+마지막으로, 제공된 또 다른 파일인 `interact.js` 파일을 확인해 보겠습니다.
+
+#### `interact.js` 파일 {#the-interact-js-file}
+
+[M-V-C](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) 패러다임을 따르기 위해, 탈중앙화앱의 로직, 데이터, 규칙을 관리하는 모든 함수를 포함하는 별도의 파일을 원할 것입니다. 그리고 이 함수들을 프런트엔드(`HelloWorld.js` 컴포넌트)로 내보낼 수 있어야 합니다.
+
+👆🏽이것이 바로 `interact.js` 파일의 정확한 목적입니다!
+
+`src` 디렉터리의 `util` 폴더로 이동하면, 모든 스마트 계약 상호 작용 및 지갑 함수와 변수를 포함할 `interact.js`라는 파일이 포함된 것을 볼 수 있습니다.
+
+```javascript
+// interact.js
+
+//export const helloWorldContract;
+
+export const loadCurrentMessage = async () => {}
+
+export const connectWallet = async () => {}
+
+const getCurrentWalletConnected = async () => {}
+
+export const updateMessage = async (message) => {}
+```
+
+파일 상단에서 `helloWorldContract` 객체가 주석 처리된 것을 볼 수 있습니다. 이 튜토리얼의 뒷부분에서 이 객체의 주석을 해제하고 이 변수에 스마트 계약을 인스턴스화한 다음, `HelloWorld.js` 컴포넌트로 내보낼 것입니다.
+
+`helloWorldContract` 객체 뒤에 있는 네 개의 미구현 함수는 다음을 수행합니다.
+
+- `loadCurrentMessage` - 이 함수는 스마트 계약에 저장된 현재 메시지를 로드하는 로직을 처리합니다. [Alchemy Web3 API](https://github.com/alchemyplatform/alchemy-web3)를 사용하여 Hello World 스마트 계약에 _읽기_ 호출을 합니다.
+- `connectWallet` - 이 함수는 사용자의 MetaMask를 탈중앙화앱에 연결합니다.
+- `getCurrentWalletConnected` - 이 함수는 페이지 로드 시 이더리움 계정이 이미 탈중앙화앱에 연결되어 있는지 확인하고 그에 따라 UI를 업데이트합니다.
+- `updateMessage` - 이 함수는 스마트 계약에 저장된 메시지를 업데이트합니다. Hello World 스마트 계약에 _쓰기_ 호출을 하므로, 사용자의 MetaMask 지갑은 메시지를 업데이트하기 위해 이더리움 트랜잭션에 서명해야 합니다.
+
+이제 무엇을 다루고 있는지 이해했으니, 스마트 계약에서 어떻게 읽어오는지 알아봅시다!
+
+### 3단계: 스마트 계약에서 데이터 읽기 {#step-3-read-from-your-smart-contract}
+
+스마트 계약에서 읽으려면 다음을 성공적으로 설정해야 합니다.
+
+- 이더리움 체인에 대한 API 연결
+- 로드된 스마트 계약 인스턴스
+- 스마트 계약 함수를 호출하는 함수
+- 스마트 계약에서 읽고 있는 데이터가 변경될 때 업데이트를 감시하는 리스너
+
+많은 단계처럼 들릴 수 있지만, 걱정하지 마세요! 각 단계를 하나씩 안내해 드리겠습니다! :\)
+
+#### 이더리움 체인에 API 연결 설정하기 {#establish-an-api-connection-to-the-ethereum-chain}
+
+이 튜토리얼 2부에서 [Alchemy Web3 키를 사용하여 스마트 계약에서 읽어왔던](https://docs.alchemy.com/alchemy/tutorials/hello-world-smart-contract/interacting-with-a-smart-contract#step-1-install-web3-library) 것을 기억하시나요? 체인에서 읽기 위해 탈중앙화앱에서도 Alchemy 웹3 키가 필요합니다.
+
+아직 설치하지 않았다면, `starter-files`의 루트 디렉터리로 이동하여 터미널에서 다음을 실행하여 [Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3)를 설치하세요.
+
+```text
+npm install @alch/alchemy-web3
+```
+
+[Alchemy Web3](https://github.com/alchemyplatform/alchemy-web3)는 [Web3.js](https://docs.web3js.org/)의 래퍼로, 향상된 API 메서드와 기타 중요한 이점을 제공하여 웹3 개발자로서의 삶을 더 쉽게 만듭니다. 최소한의 구성만으로 바로 앱에서 사용할 수 있도록 설계되었습니다!
+
+그런 다음 프로젝트 디렉터리에 [dotenv](https://www.npmjs.com/package/dotenv) 패키지를 설치하여 가져온 후 API 키를 안전하게 보관할 수 있도록 합니다.
+
+```text
+npm install dotenv --save
+```
+
+탈중앙화앱에서는 HTTP API 키 대신 **웹소켓 API 키를 사용할 것**입니다. 이를 통해 스마트 계약에 저장된 메시지가 변경될 때 감지하는 리스너를 설정할 수 있습니다.
+
+API 키를 받으면 루트 디렉터리에 `.env` 파일을 만들고 Alchemy 웹소켓 URL을 추가하세요. 그 후 `.env` 파일은 다음과 같이 보일 것입니다.
+
+```javascript
+REACT_APP_ALCHEMY_KEY = wss://eth-goerli.ws.alchemyapi.io/v2/현재 메시지:
+{message}
+ +새 메시지:
+ +
+ setNewMessage(e.target.value)}
+ value={newMessage}
+ />
+
+
+{status}
+ + ++ {" "} + 🦊 + 브라우저에 가상 이더리움 지갑인 MetaMask를 설치해야 합니다. + +
+ + ), + } + } +} +``` + +이 거대한 코드 블록은 정확히 무엇을 하는 걸까요? + +먼저, 브라우저에서 `window.ethereum`이 활성화되어 있는지 확인합니다. + +`window.ethereum`은 MetaMask 및 기타 지갑 제공업체에서 주입하는 글로벌 API로, 웹사이트가 사용자의 이더리움 계정을 요청할 수 있도록 합니다. 승인되면 사용자가 연결된 블록체인에서 데이터를 읽고, 사용자에게 메시지 및 트랜잭션 서명을 제안할 수 있습니다. 자세한 내용은 [MetaMask 문서](https://docs.metamask.io/guide/ethereum-provider.html#table-of-contents)를 확인하세요! + +`window.ethereum`이 _없으면_ MetaMask가 설치되지 않았다는 의미입니다. 그러면 `address`가 빈 문자열로 반환되고 `status` JSX 객체는 사용자가 MetaMask를 설치해야 한다는 것을 전달하는 JSON 객체가 반환됩니다. + +이제 `window.ethereum`이 _있으면_ 상황이 흥미로워집니다. + +try/catch 루프를 사용하여 [`window.ethereum.request({ method: "eth_requestAccounts" });`](https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts)를 호출하여 MetaMask에 연결을 시도합니다. 이 함수를 호출하면 브라우저에서 MetaMask가 열리고 사용자에게 지갑을 탈중앙화앱에 연결하라는 메시지가 표시됩니다. + +- 사용자가 연결하기로 선택하면 `method: "eth_requestAccounts"`는 탈중앙화앱에 연결된 모든 사용자의 계정 주소를 포함하는 배열을 반환합니다. 전체적으로 `connectWallet` 함수는 이 배열의 _첫 번째_ `address`\(9번째 줄 참조\)와 사용자에게 스마트 계약에 메시지를 작성하라는 `status` 메시지를 포함하는 JSON 객체를 반환합니다. +- 사용자가 연결을 거부하면 JSON 객체는 반환된 `address`에 대해 빈 문자열을 포함하고 사용자가 연결을 거부했음을 반영하는 `status` 메시지를 포함합니다. + +이제 이 `connectWallet` 함수를 작성했으므로 다음 단계는 `HelloWorld.js` 컴포넌트에서 호출하는 것입니다. + +#### `connectWallet` 함수를 `HelloWorld.js` UI 컴포넌트에 추가하기 {#add-the-connectWallet-function-to-your-HelloWorld-js-ui-component} + +`HelloWorld.js`의 `connectWalletPressed` 함수로 이동하여 다음과 같이 업데이트하세요. + +```javascript +// HelloWorld.js + +const connectWalletPressed = async () => { + const walletResponse = await connectWallet() + setStatus(walletResponse.status) + setWallet(walletResponse.address) +} +``` + +`interact.js` 파일에서 대부분의 기능이 `HelloWorld.js` 컴포넌트에서 어떻게 추상화되었는지 주목하세요. 이것은 M-V-C 패러다임을 준수하기 위함입니다! + +`connectWalletPressed`에서 가져온 `connectWallet` 함수를 await 호출하고, 그 응답을 사용하여 상태 훅을 통해 `status` 및 `walletAddress` 변수를 업데이트합니다. + +이제 두 파일(`HelloWorld.js` 및 `interact.js`)을 모두 저장하고 지금까지의 UI를 테스트해 보겠습니다. + +[http://localhost:3000/](http://localhost:3000/) 페이지에서 브라우저를 열고 페이지 오른쪽 상단의 "지갑 연결" 버튼을 누르세요. + +MetaMask가 설치되어 있다면, 지갑을 탈중앙화앱에 연결하라는 메시지가 표시됩니다. 연결 초대를 수락합니다. + +이제 지갑 버튼에 주소가 연결되었음이 반영되는 것을 볼 수 있습니다! 좋아요 🔥 + +다음으로, 페이지를 새로고침해 보세요... 이상하네요. 지갑이 이미 연결되어 있음에도 불구하고 지갑 버튼은 MetaMask에 연결하라는 메시지를 표시합니다... + +하지만 두려워하지 마세요! 이 주소 문제를 쉽게 해결할 수 있습니다(이해하셨나요?) `getCurrentWalletConnected`를 구현하여 주소가 이미 탈중앙화앱에 연결되어 있는지 확인하고 그에 따라 UI를 업데이트하면 됩니다! + +#### `getCurrentWalletConnected` 함수 {#the-getcurrentwalletconnected-function} + +`interact.js` 파일의 `getCurrentWalletConnected` 함수를 다음과 같이 업데이트하세요. + +```javascript +// interact.js + +export const getCurrentWalletConnected = async () => { + if (window.ethereum) { + try { + const addressArray = await window.ethereum.request({ + method: "eth_accounts", + }) + if (addressArray.length > 0) { + return { + address: addressArray[0], + status: "👆🏽 위 텍스트 필드에 메시지를 작성하세요.", + } + } else { + return { + address: "", + status: "🦊 오른쪽 상단 버튼을 사용하여 MetaMask에 연결하세요.", + } + } + } catch (err) { + return { + address: "", + status: "😥 " + err.message, + } + } + } else { + return { + address: "", + status: ( + ++ {" "} + 🦊 + 브라우저에 가상 이더리움 지갑인 MetaMask를 설치해야 합니다. + +
+ + ), + } + } +} +``` + +이 코드는 이전 단계에서 작성한 `connectWallet` 함수와 _매우_ 유사합니다. + +주요 차이점은 사용자가 지갑을 연결하기 위해 MetaMask를 여는 `eth_requestAccounts` 메서드를 호출하는 대신, 여기서는 현재 탈중앙화앱에 연결된 MetaMask 주소를 포함하는 배열을 반환하는 `eth_accounts` 메서드를 호출한다는 것입니다. + +이 함수가 작동하는 것을 보려면 `HelloWorld.js` 컴포넌트의 `useEffect` 함수에서 호출해 봅시다. + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) +}, []) +``` + +`getCurrentWalletConnected` 호출의 응답을 사용하여 `walletAddress`와 `status` 상태 변수를 업데이트하는 것을 확인하세요. + +이제 이 코드를 추가했으니 브라우저 창을 새로고침해 봅시다. + +좋아요! 버튼에는 연결되었다고 표시되고 연결된 지갑 주소의 미리보기가 표시되어야 합니다 - 새로고침 후에도 말이죠! + +#### `addWalletListener` 구현하기 {#implement-addwalletlistener} + +탈중앙화앱 지갑 설정의 마지막 단계는 사용자가 연결을 끊거나 계정을 전환할 때와 같이 지갑의 상태가 변경될 때 UI가 업데이트되도록 지갑 리스너를 구현하는 것입니다. + +`HelloWorld.js` 파일에서 `addWalletListener` 함수를 다음과 같이 수정하세요. + +```javascript +// HelloWorld.js + +function addWalletListener() { + if (window.ethereum) { + window.ethereum.on("accountsChanged", (accounts) => { + if (accounts.length > 0) { + setWallet(accounts[0]) + setStatus("👆🏽 위 텍스트 필드에 메시지를 작성하세요.") + } else { + setWallet("") + setStatus("🦊 오른쪽 상단 버튼을 사용하여 MetaMask에 연결하세요.") + } + }) + } else { + setStatus( ++ {" "} + 🦊 + 브라우저에 가상 이더리움 지갑인 MetaMask를 설치해야 합니다. + +
+ ) + } +} +``` + +이 시점에서는 여기서 무슨 일이 일어나고 있는지 이해하는 데 도움이 필요 없을 것이라고 확신하지만, 철저함을 위해 간단히 분석해 보겠습니다. + +- 먼저, 함수는 `window.ethereum`이 활성화되어 있는지(즉, MetaMask가 설치되어 있는지) 확인합니다. + - 그렇지 않다면, `status` 상태 변수를 사용자가 MetaMask를 설치하도록 유도하는 JSX 문자열로 설정합니다. + - 활성화된 경우, 3번째 줄에서 `window.ethereum.on("accountsChanged")` 리스너를 설정하여 사용자가 탈중앙화앱에 추가 계정을 연결하거나 계정을 전환하거나 계정 연결을 끊는 등 MetaMask 지갑의 상태 변화를 수신합니다. 연결된 계정이 하나 이상 있는 경우, `walletAddress` 상태 변수는 리스너가 반환한 `accounts` 배열의 첫 번째 계정으로 업데이트됩니다. 그렇지 않으면 `walletAddress`는 빈 문자열로 설정됩니다. + +마지막으로 `useEffect` 함수에서 호출해야 합니다. + +```javascript +// HelloWorld.js + +useEffect(async () => { + const message = await loadCurrentMessage() + setMessage(message) + addSmartContractListener() + + const { address, status } = await getCurrentWalletConnected() + setWallet(address) + setStatus(status) + + addWalletListener() +}, []) +``` + +이것으로 끝입니다! 모든 지갑 기능을 성공적으로 프로그래밍했습니다! 이제 마지막 작업인 스마트 계약에 저장된 메시지 업데이트로 넘어갑시다! + +### 6단계: `updateMessage` 함수 구현하기 {#step-6-implement-the-updateMessage-function} + +자, 이제 마지막 단계에 도착했습니다! `interact.js` 파일의 `updateMessage`에서 다음을 수행할 것입니다. + +1. 스마트 계약에 게시하려는 메시지가 유효한지 확인합니다 +2. MetaMask를 사용하여 트랜잭션에 서명합니다 +3. `HelloWorld.js` 프런트엔드 컴포넌트에서 이 함수를 호출합니다 + +오래 걸리지 않을 것입니다. 이 탈중앙화앱을 완성합시다! + +#### 입력 오류 처리 {#input-error-handling} + +당연히 함수 시작 부분에 일종의 입력 오류 처리를 하는 것이 합리적입니다. + +MetaMask 확장 프로그램이 설치되지 않았거나, 지갑이 연결되지 않았거나(즉, 전달된 `주소`가 빈 문자열인 경우), `메시지`가 빈 문자열인 경우 함수가 조기에 반환되도록 하고 싶을 것입니다. `updateMessage`에 다음 오류 처리를 추가합시다. + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + if (!window.ethereum || address === null) { + return { + status: + "💡 블록체인에서 메시지를 업데이트하려면 MetaMask 지갑을 연결하세요.", + } + } + + if (message.trim() === "") { + return { + status: "❌ 메시지는 빈 문자열이 될 수 없습니다.", + } + } +} +``` + +이제 적절한 입력 오류 처리가 있으니, MetaMask를 통해 트랜잭션에 서명할 시간입니다! + +#### 트랜잭션 서명하기 {#signing-our-transaction} + +전통적인 웹3 이더리움 트랜잭션에 이미 익숙하다면 다음에 작성할 코드는 매우 친숙할 것입니다. 입력 오류 처리 코드 아래에 `updateMessage`에 다음을 추가합니다. + +```javascript +// interact.js + +//트랜잭션 매개변수 설정 +const transactionParameters = { + to: contractAddress, // 계약 게시 중을 제외하고 필수입니다. + from: address, // 사용자의 활성 주소와 일치해야 합니다. + data: helloWorldContract.methods.update(message).encodeABI(), +} + +//트랜잭션 서명 +try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Etherscan에서 트랜잭션 상태 보기! + ++ ℹ️ 트랜잭션이 네트워크에 의해 확인되면 메시지가 + 자동으로 업데이트됩니다. + + ), + } +} catch (error) { + return { + status: "😥 " + error.message, + } +} +``` + +어떤 일이 일어나는지 분석해 봅시다. 먼저, 트랜잭션 매개변수를 설정합니다. 여기서: + +- `to`는 수신자 주소(우리의 스마트 계약)를 지정합니다. +- `from`은 트랜잭션의 서명자, 즉 함수에 전달된 `주소` 변수를 지정합니다. +- `data`는 Hello World 스마트 계약의 `update` 메서드에 대한 호출을 포함하며, `message` 문자열 변수를 입력으로 받습니다. + +그런 다음, `window.ethereum.request`라는 await 호출을 통해 MetaMask에 트랜잭션 서명을 요청합니다. 11번과 12번 줄에서 eth 메서드 `eth_sendTransaction`을 지정하고 `transactionParameters`를 전달하는 것을 주목하세요. + +이 시점에서 MetaMask가 브라우저에서 열리고 사용자에게 트랜잭션에 서명하거나 거부하라는 메시지를 표시합니다. + +- 트랜잭션이 성공하면, 함수는 `status` JSX 문자열이 사용자에게 트랜잭션에 대한 자세한 정보를 Etherscan에서 확인하도록 안내하는 JSON 객체를 반환합니다. +- 트랜잭션이 실패하면, 함수는 `status` 문자열이 오류 메시지를 전달하는 JSON 객체를 반환합니다. + +전체적으로 `updateMessage` 함수는 다음과 같아야 합니다. + +```javascript +// interact.js + +export const updateMessage = async (address, message) => { + //입력 오류 처리 + if (!window.ethereum || address === null) { + return { + status: + "💡 블록체인에서 메시지를 업데이트하려면 MetaMask 지갑을 연결하세요.", + } + } + + if (message.trim() === "") { + return { + status: "❌ 메시지는 빈 문자열이 될 수 없습니다.", + } + } + + //트랜잭션 매개변수 설정 + const transactionParameters = { + to: contractAddress, // 계약 게시 중을 제외하고 필수입니다. + from: address, // 사용자의 활성 주소와 일치해야 합니다. + data: helloWorldContract.methods.update(message).encodeABI(), + } + + //트랜잭션 서명 + try { + const txHash = await window.ethereum.request({ + method: "eth_sendTransaction", + params: [transactionParameters], + }) + return { + status: ( + + ✅{" "} + + Etherscan에서 트랜잭션 상태 보기! + +
+ ℹ️ 트랜잭션이 네트워크에 의해 확인되면 메시지가 + 자동으로 업데이트됩니다. + + ), + } + } catch (error) { + return { + status: "😥 " + error.message, + } + } +} +``` + +마지막으로, `updateMessage` 함수를 `HelloWorld.js` 컴포넌트에 연결해야 합니다. + +#### `updateMessage`를 `HelloWorld.js` 프런트엔드에 연결하기 {#connect-updatemessage-to-the-helloworld-js-frontend} + +`onUpdatePressed` 함수는 가져온 `updateMessage` 함수에 대한 await 호출을 하고 `status` 상태 변수를 수정하여 트랜잭션이 성공했는지 실패했는지를 반영해야 합니다. + +```javascript +// HelloWorld.js + +const onUpdatePressed = async () => { + const { status } = await updateMessage(walletAddress, newMessage) + setStatus(status) +} +``` + +매우 깔끔하고 간단합니다. 그리고 그거 아시나요... 탈중앙화앱이 완성되었습니다!!! + +**업데이트** 버튼을 테스트해 보세요! + +### 나만의 맞춤형 탈중앙화앱 만들기 {#make-your-own-custom-dapp} + +와, 튜토리얼 끝까지 오셨네요! 요약하자면, 다음을 배웠습니다. + +- MetaMask 지갑을 탈중앙화앱 프로젝트에 연결하기 +- [Alchemy Web3](https://docs.alchemy.com/alchemy/documentation/alchemy-web3) API를 사용하여 스마트 계약에서 데이터 읽기 +- MetaMask를 사용하여 이더리움 트랜잭션 서명하기 + +이제 이 튜토리얼에서 배운 기술을 적용하여 자신만의 맞춤형 탈중앙화앱 프로젝트를 구축할 준비가 되었습니다! 언제나 그렇듯이 질문이 있으시면 [Alchemy Discord](https://discord.gg/gWuC7zB)에서 주저하지 말고 도움을 요청하세요. 🧙♂️ + +이 튜토리얼을 완료한 후, Twitter에서 [@alchemyplatform](https://twitter.com/AlchemyPlatform)을 태그하여 경험이 어땠는지 또는 피드백이 있는지 알려주세요! diff --git a/public/content/translations/ko/developers/tutorials/hello-world-smart-contract/index.md b/public/content/translations/ko/developers/tutorials/hello-world-smart-contract/index.md new file mode 100644 index 00000000000..c4683ba45e5 --- /dev/null +++ b/public/content/translations/ko/developers/tutorials/hello-world-smart-contract/index.md @@ -0,0 +1,359 @@ +--- +title: "초보자용 Hello World 스마트 컨트랙트" +description: "이더리움에 간단한 스마트 계약을 작성하고 배포하는 방법에 대한 입문 튜토리얼입니다." +author: "elanh" +tags: [ "솔리디티", "hardhat", "alchemy", "스마트 계약", "배포하기" ] +skill: beginner +lang: ko +published: 2021-03-31 +--- + +블록체인 개발이 처음이라 어디서부터 시작해야 할지 모르거나, 스마트 계약을 배포하고 상호작용하는 방법을 이해하고 싶다면 이 가이드가 도움이 될 것입니다. 가상 지갑 [MetaMask](https://metamask.io/), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org/) 및 [Alchemy](https://www.alchemy.com/eth)를 사용하여 Sepolia 테스트 네트워크에 간단한 스마트 계약을 만들고 배포하는 과정을 안내합니다(아직 이 내용이 무엇을 의미하는지 이해하지 못하더라도 걱정하지 마세요. 앞으로 설명해 드릴 것입니다). + +이 튜토리얼의 [2부](https://docs.alchemy.com/docs/interacting-with-a-smart-contract)에서는 스마트 계약이 배포된 후 상호작용하는 방법을 살펴보고, [3부](https://www.alchemy.com/docs/submitting-your-smart-contract-to-etherscan)에서는 Etherscan에 게시하는 방법을 다룹니다. + +궁금한 점이 있으면 언제든지 [Alchemy Discord](https://discord.gg/gWuC7zB)에 문의하세요! + +## 1단계: 이더리움 네트워크에 연결하기 {#step-1} + +이더리움 체인에 요청을 보내는 방법은 여러 가지가 있습니다. 간단하게 설명하기 위해, 자체 노드를 실행하지 않고도 이더리움 체인과 통신할 수 있는 블록체인 개발자 플랫폼 및 API인 Alchemy의 무료 계정을 사용하겠습니다. 이 플랫폼에는 모니터링 및 분석을 위한 개발자 도구도 있습니다. 이 튜토리얼에서는 이 도구를 활용하여 스마트 계약 배포 시 내부적으로 어떤 일이 일어나는지 이해해 보겠습니다. Alchemy 계정이 아직 없다면 [여기서 무료로 가입할 수 있습니다](https://dashboard.alchemy.com/signup). + +## 2단계: 앱 만들기(및 API 키) {#step-2} + +Alchemy 계정을 생성한 후에는 앱을 생성하여 API 키를 생성할 수 있습니다. 이를 통해 Sepolia 테스트넷에 요청을 보낼 수 있습니다. 테스트넷에 익숙하지 않다면 [이 페이지](/developers/docs/networks/)를 확인하세요. + +1. Alchemy 대시보드에서 탐색 모음의 "Select an app"을 선택하고 "Create new app"을 클릭하여 "Create new app" 페이지로 이동하세요. + + + +2. 앱 이름을 “Hello World”로 지정하고, 간단한 설명을 제공한 다음, 사용 사례(예: "Infra & Tooling")를 선택하세요. 다음으로 "Ethereum"을 검색하고 네트워크를 선택하세요. + + + +3. "Next"를 클릭하여 진행한 다음, “Create app”을 클릭하면 완료됩니다! 앱이 탐색 모음 드롭다운 메뉴에 나타나며, API 키를 복사할 수 있습니다. + +## 3단계: 이더리움 계정(주소) 생성하기 {#step-3} + +거래를 보내고 받기 위해서는 이더리움 계정이 필요합니다. 이 튜토리얼에서는 이더리움 계정 주소를 관리하는 데 사용되는 브라우저의 가상 지갑인 MetaMask를 사용합니다. [트랜잭션](/developers/docs/transactions/)에 대해 자세히 알아보기. + +[여기](https://metamask.io/download)에서 MetaMask를 다운로드하고 이더리움 계정을 무료로 만들 수 있습니다. 계정을 만들 때나 이미 계정이 있는 경우, 네트워크 드롭다운 메뉴를 사용하여 "Sepolia" 테스트 네트워크로 전환해야 합니다(실제 돈을 다루지 않도록 하기 위함입니다). + +Sepolia가 목록에 표시되지 않으면 메뉴로 이동한 다음 '고급'으로 가서 아래로 스크롤하여 "테스트 네트워크 표시"를 켜세요. 네트워크 선택 메뉴에서 "사용자 지정" 탭을 선택하여 테스트넷 목록을 찾고 "Sepolia"를 선택하세요. + + + +## 4단계: 파우셋에서 이더 추가하기 {#step-4} + +스마트 계약을 테스트넷에 배포하려면 가짜 Eth가 필요합니다. Sepolia ETH를 얻으려면 [Sepolia 네트워크 세부 정보](/developers/docs/networks/#sepolia)로 이동하여 다양한 파우셋 목록을 볼 수 있습니다. 하나가 작동하지 않으면 다른 것을 시도해 보세요. 때때로 고갈될 수 있습니다. 네트워크 트래픽으로 인해 가짜 ETH를 받는 데 시간이 걸릴 수 있습니다. 곧 MetaMask 계정에서 ETH를 확인할 수 있습니다! + +## 5단계: 잔액 확인하기 {#step-5} + +잔액이 있는지 다시 확인하기 위해 [Alchemy의 컴포저 도구](https://sandbox.alchemy.com/?network=ETH_SEPOLIA&method=eth_getBalance&body.id=1&body.jsonrpc=2.0&body.method=eth_getBalance&body.params%5B0%5D=&body.params%5B1%5D=latest)를 사용하여 [eth_getBalance](/developers/docs/apis/json-rpc/#eth_getbalance) 요청을 해보겠습니다. 이것은 지갑에 있는 ETH의 양을 반환할 것입니다. MetaMask 계정 주소를 입력하고 "Send Request"를 클릭하면 다음과 같은 응답이 표시됩니다. + +```json +{ "jsonrpc": "2.0", "id": 0, "result": "0x2B5E3AF16B1880000" } +``` + +> **참고:** 이 결과는 ETH가 아닌 wei 단위입니다. Wei는 ether의 최소 단위로 사용됩니다. wei를 ETH로 변환하면 다음과 같습니다: 1 eth = 1018 wei. 따라서 0x2B5E3AF16B1880000을 10진수로 변환하면 5\*10¹⁸이 되며 이는 5 ETH와 같습니다. +> +> 휴! 가짜 돈이 모두 준비되었습니다
.env를 커밋하지 마세요! .env 파일을 다른 사람과 공유하거나 노출하지 마세요. 그렇게 하면 민감한 정보가 노출될 수 있습니다. 버전 관리 시스템을 사용하는 경우 .env를 gitignore 파일에 추가하세요.
+