3. Directory Structure

|-- contracts
|-- migrations
|-- truffle.js
|-- static
|-- src
    |-- klaytn
      |-- caver.js
      |-- KlaystagramContract.js
    |-- redux
    |-- pages
      |-- AuthPage.js
      |-- FeedPage.js
    |-- components
      |-- UploadPhoto.js
      |-- Feed.js
      |-- TransferOwnership.js
      |-- ...
    |-- styles
    |-- utils
    |-- index.js
    |-- App.js

contracts/: 솔리디티 컨트랙트 파일을 담고 있습니다.

migrations/: 컨트랙트 배포를 처리하는 자바스크립트 파일을 담고 있습니다.

truffle.js: 트러플의 환경설정 파일입니다.

static/: Contains static files, such as images and fonts.

src/index.js: App's index file. ReactDOM.render logic is in here.

src/App.js: App's root component file.

src/styles: Overall style definition regarding stylesheet.

src/redux: Creates API functions that interact with the contract and keep track of consequent data.

src/klaytn: Contains files that support interaction with the Klaytn.

• src/klaytn/caver.js: 환경설정에 따라 caver-js 인스턴스화합니다.

  참고) caver-js는 Klaytn 노드와 연결하여 해당 노드나 Klaytn에 배포된 컨트랙트와의 상호작용을 지원해주는 RPC 호출 라이브러리입니다.

• src/klaytn/Klaystagram.js: caver-js API를 사용하여 컨트랙트 인스턴스를 작성합니다. 이 인스턴스를 통해 컨트랙트와 상호작용할 수 있습니다.

src/pages: Contains two page files that compose Klaystagram app.

• src/pages/AuthPage.js: Contains sign up and login form. You can generate private key in the sign up form and use it to login on the app.

• src/pages/FeedPage.js: Reads photo data from the contract and show them to users. Also users can upload their pictures in FeedPage.

src/components: Contains component files that compose page.

• src/components/Feed.js: Reads data from contract and displays photos.

• src/components/UploadPhoto.js: Uploads photo by sending transaction to contract.

• src/components/TransferOwnership.js: Transfers photo's ownership by sending transaction.