Polygon is a protocol and a framework for building and connecting Ethereum-compatible blockchain networks. Aggregating scalable solutions on Ethereum supporting a multi-chain Ethereum ecosystem. Polygon solves pain points associated with Blockchains, like high gas fees and slow speeds, without sacrificing security.

What is Hardhat?

Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software. It helps developers manage and automate the recurring tasks that are inherent to the process of building smart contracts and dApps, as well as easily introducing more functionality around this workflow. This means compiling, running, and testing smart contracts at the very core.

Hardhat comes built-in with Hardhat Network, a local Ethereum network designed for development. Its functionality focuses around Solidity debugging, featuring stack traces, console.log(), and explicit error messages when transactions fail.

Hardhat Runner, the CLI command to interact with Hardhat, is an extensible task runner. It's designed around the concepts of tasks and plugins. Every time you're running Hardhat from the CLI you're running a task. E.g. npx hardhat compile is running the built-in compile task. Tasks can call other tasks, allowing complex workflows to be defined. Users and plugins can override existing tasks, making those workflows customizable and extendable.

A lot of Hardhat's functionality comes from plugins, and, as a developer, you're free to choose which ones you want to use. Hardhat is unopinionated in terms of what tools you end up using, but it does come with some built-in defaults. All of which can be overridden.

Setting up Metamask for Polygon (Matic Network)

From client-side the wallet itself can act as a bridge to connect the particular blockchains, but if you want to connect your application to blockchain from server-side, rpc provider is required. there are may providers including the block explorers themselves. You can get free provider like infura. create project id and get api key. If infura doesn't work you can get their free RPC providers

This is the site for setting testnet and mainet

👉 RPC Infomation page 👉 How to set up metamask

Get Test matic tokens

The account from which smart contract is to be deployed should be funded with matic tokens first. You can buy matic tokens from any exchanges for mainnet , but for testnet test tokens can be accessed from faucet. Select matic token and mumbai testnet paste your account address hit submit button and confirm transaction that's it.

👉 mainet faucet link 👉 mumbai testnet faucet link

👉 Get private key

Get the private key of the account in which you have some matic tokens are available, both for mainnet and testnet.

Install hardhat-ethers

Hardhat plugin for integration with ethers.js.

$ npm install --save-dev @nomiclabs/hardhat-ethers 'ethers@^5.0.0'

Setup hardhat

$ npx hardhat
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

Welcome to Hardhat v2.0.0

? What do you want to do? …
  Create a sample project
❯ Create an empty hardhat.config.js
  Quit

Project Structure

contracts/smartContract.sol
scripts/deploy.js
test/
hardhat.config.js

hardhat.config.js

require('@nomiclabs/hardhat-ethers');

module.exports = {
  solidity: {
    version: '0.8.2',
    settings: {
      optimizer: {
        enabled: true,
        runs: 200,
      },
    },
  },
  paths: {
    sources: './contracts',
  },
  defaultNetwork: 'matic',
  networks: {
    hardhat: {},
    matic: {
      url: 'https://rpc-mumbai.maticvigil.com',
      accounts: ['METAMASK_PRIVATE_KEY`],
    },
  },
};

deploy.js

async function main() {
  const [deployer] = await ethers.getSigners();
  const TOR = await ethers.getContractFactory('SmartContracts');

  // Start deployment, returning a promise that resolves to a contract object
  const tor = await TOR.deploy();
  console.log('Contract deployed to address:', tor.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

smartContract.sol

pragma solidity >=0.7.0 <0.9.0;

contract SmartContracts {
    struct SmartContract {
        address Address;
        bytes32 MappingHash;
        uint blockNumber;
        bool exists;
    }

    mapping(bytes32 => SmartContract) public SmartContracts;

    function mintHashFile(address Address, bytes32 MappingHash) external {
        require(!SmartContracts[MappingHash].exists);
        SmartContracts[MappingHash] = SmartContract(Address, MappingHash, block.number, true);
    }
}

In my case, I needed to mint some hash value in the smart contract This mintHashFile function is not used in the stage of issuing the smart contract now and will be called from Node.js later when we need

👉 here is another cases of solidity code bt example

Compile Contract

npx hardhat compile

Deploy

 npx hardhat run scripts/deploy.js --network matic

The contract address will be printed on terminal.

reference link

https://dapp-world.com/smartbook/deploy-smart-contract-on-polygon-pos-using-hardhat-bhta https://polygon.technology/ https://hardhat.org/plugins/nomiclabs-hardhat-ethers.html https://solidity-by-example.org/ https://metamask.zendesk.com/hc/en-us/articles/360015489331-How-to-import-an-Account https://medium.com/stakingbits/setting-up-metamask-for-polygon-matic-network-838058f6d844

NFT를 만들기 전에 NFT를 작동시키는 기술과 기능을 살펴보겠습니다.

ERC 프로토콜

NFT의 발행에는 이더리움 네트워크에서 사용되는 ERC 프로토콜을 사용

ERC(Ethereum Request for Comment)는 ‘이더리움의 요구사항을 위한 표준’이며, 이는 이더리움을 이용해서 가상자산을 발행할 때 지켜야 하는 규칙

NFT는 ERC-721과 최근 개발되어 적용되고 있는 ERC-1155 프로토콜을 이용하여 발행

• ERC-721의 특징은 예술품, 골동품, 캐릭터에 대한 NFT를 발행하여 토큰을 생성하고, 해당 토큰의 고유한 가격이 결정되면 가상자산으로 거래하는 방식, 최근에는 미술품 거래에서 토큰을 분할해 소유하는 등 새로운 방식이 나타나고 있음

• ERC-1155는 ERC-20과 ERC-721의 장점을 혼합하여, 두 토큰이 연동하여 거래할 수 있도록 설계된 프로토콜이며, 하나의 트랜잭션을 이용해 한 명 이상의 수신자에게 두 개 이상의 토큰을 보낼 수 있는 멀티 전송(Multi-transfers)이 가능한 것이 특징

Smart contracts and NFTs

‘이해 당사자간 공유 네트워크를 통하여 계약과 계약의 결과에 대한 신뢰를 쌓아 나갈 수 있는 기반 하에 확보된 자동화된 계약처리의 형태’에 대하여 미국의 프로그래머 닉 자보(Nick Szabo)는 ‘스마트계약(Smart Contracts)’이라 이름 붙였다.

Smart contracts 은 블록체인에 배포되고 있는 그대로 실행되는 간단한 프로그램입니다. 즉, 사용자가 제어하지 않습니다. 스마트 계약을 사용하여 토큰을 만들고 추적할 수 있습니다.

Smart x ERC-721 표준을 구현하는 경우 NFT로 간주될 수 있으며 NFT는 Smart contracts의 인스턴스입니다. 새로운 NFT를 발행할 때마다 블록체인에 배포된 Smart contracts 코드를 사용합니다.

Smart contracts > source code를 컴파일 > EVM bite 코드 생성 > 구체적인 작업은 ABI 취득 > ABI로부터 contracts 객체 생성 > Smart contracts 배포 > 트랜잭션 생성하여 블락에 추가 > 마이너가 해당 블락을 채굴하게 되면 블락체인에 포함됨 -> Smart contracts address를 이용하여 정보를 읽고 쓰기가 가능

Smart contracts에 쓰는 것는 것은 트랜잭션을 발생시키지만, 값을 읽어 오는 것은 트랙잭션을 발생시키지 않습니다. 만약 공유 변수 값을 읽기만 하는 경우는 트랜잭션이 발생하지 않습니다. 트랙잭션이 발생하지 않으면 거래라고 보기 어려움.

Networks

Public networks: Mainnet vs. Testnet

이더리움은 여러 네트워크를 사용합니다. 프로덕션에 사용되는 네트워크는 일반적으로 Mainnet이라고 하고 테스트에 사용되는 나머지는 Testnet이라고 합니다. NFT를 프로덕션이나 메인넷에 배포할 때 이더리움용 작업 증명 테스트넷인 Ropsten Testnet에 있는 거래 내역과 잔액은 이월되지 않아 Testnet을 퍼블릭 스테이징/개발 환경으로, Mainnet을 프로덕션 환경으로 생각하시면 됩니다.

Private networks

네트워크의 노드가 퍼블릭 블록체인에 연결되어 있지 않으면 해당 네트워크는 프라이빗으로 간주됩니다. 이더리움 블록체인은 로컬머신이나 Private 네트워크나 컨소시엄 네트워크와 같은 그룹에서도 실행할 수 있습니다. 이런 환경에서 이더리움 블록체인을 실행하려면 이더리움 소프트웨어인 node를 사용하여 블록 및 트랜잭션을 검증해야 합니다.

HardHat 및 Ganache 에서 Smart contracts앱을 컴파일, 테스트, 배포 및 디버그하기 위해 로컬 시스템에서 실행할 수 있습니다.

for test

테스트하려면 Faucets(가입을 하면 무료로 암호화폐를 받을 수 있는 웹사이트 )에서 이더리움 암호화폐인 이더(ETH)를 가져와야 합니다. Ropsten Faucet 와 같은 Faucets는 테스트 ETH를 지정하고 해당 주소로 보낼 수 있는 웹 앱입니다. 이를 통해서 테스트넷에서 트랜잭션을 완료할 때에 사용할 수 있습니다.

Private networks에서 이더리움 앱을 실행한 경우에는 테스트 ETH가 필요하지 않습니다.

Node

노드는 블록 및 트랜잭션 데이터를 확인합니다. Geth 및 OpenEthereum 과 같은 클라이언트를 사용하여 자신의 노드를 만들고 블록체인에서 트랜잭션 및 블록을 검증하여 이더리움 블록체인에 기여할 수 있습니다.

자체 노드를 생성하는 과정을 건너뛰고 Alchemy 와 같은 서비스형 노드 플랫폼 으로 클라우드에서 호스팅되는 노드를 대신 사용할 수 있습니다. 개발에서 프로덕션으로 빠르게 이동할 수 있으며 애플리케이션에 대한 중요한 메트릭을 얻을 수 있습니다.

우리는 Alchemy API를 사용하여 Ropsten 블록체인에 애플리케이션을 배포할 것입니다. Alchemy는 블록체인용 AWS 로 설명되었으며 애플리케이션이 어떻게 수행되는지에 대한 통찰력을 볼 수 있는 개발자 도구를 제공합니다.

참고 자료

• https://wnjoon.tistory.com/98
• KISA Insight NFT 기술의 이해와 활용, 한계점 분석
• https://blog.logrocket.com/how-to-create-nfts-with-javascript/
• https://steemit.com/coinkorea/@etainclub/smart-contract-6-dapp

각각 OS에 맞게 주어진 개발 소프트웨어

장점

해당 OS 에서 주어진 가이드와 프레임워크로 앱들이 개발되어 디바이스의 주어진 모든 자원과 기능을 활용 할 수있음

또한 최신 기능들을 바로 탑재할수가 있고 OS가 허용하는 한 디바이스의 전후 카메라 , 각종 센서 , 내부 파일 시스템에 직접 접근이 가능함

스마트폰의 기능을 최대한 활용할 수있는 고 퀄리티 앱을 구현가능

단점

각각에서 만들어야하기 때문에 공수가 2배로 든다 그리고 새로운 버전을 만들때마다 검수 기간이 다르기때문에

시간을 맞춰서 동시에 출시하기가 까다롭다.

요약

우수한 성능의 앱을 구현가능하지만

개발에 관한 공수와 관리가 까다롭다.

개발에 사용되는 언어

IOS

• Objective-C ( 예전에 많이 사용됬음 )
• Swift ( 작년에 혁신적으로 업데이트 되어 리액트처럼 컴포넌트 단위로 구현하기에 편리함과 조금 더 쉬워졌다고 한다. 최근 사용자가 늘고있는 추세 )

Android

• Java
• Kotlin

Hybrid Application

하이브리드 앱(웹앱)은 웹 개발 방식으로 모바일 UI를 제작한 후 아이폰/안드로이드 웹뷰로 패키징하여 앱스토어에 출시하는 방식이고 적은 비용으로 빠르게 개발할 수 있습니다.

장점

네이티브 앱 방식의 5분의 1 정도의 개발 비용만으로 개발할 수 있으며 최근에는 하이브리드 앱 제작 기술이 좋아져서 동작도 빠르고, 개발기간도 3~4개월 이내로 짧아서 초기 스타트업에 적합한 방식입니다.

상대적으로 적은 비용으로 아이폰/안드로이드 양쪽 스토어 출시가 가능하고 앱 업데이트도 매번 심사를 받지 않고 서버 배포만으로 기능 추가가 가능한 방식입니다.

예로 들어서 네이버앱이 하이브리드앱으로 구현되어있다고 한다.

순수 네이티브 앱으로 만들기도 하고

IONIC 또는 Adobe PhoneGap 등의 프레임워크를 사용하기도 한다.

단점

구현을 어떻게 하냐에 따라서 스토어에서 아래와 같은 거절 될 수 있는 사유가 분명히 존재 합니다.

웹뷰앱 정책 위반

구글 플레이스토어 정책 이슈

메뉴들에 웹사이트 URL만 연결해서 제작한 경우, 유튜브 외부 영상 링크만 연결된 앱은 심사가 거절됩니다.
웹뷰 앱은 사업자등록 인증을 통해서 본인 혹은 회사 홈페이지를 인증하면 되나 
관계가 없는 외부 웹사이트만 넣어서 제작한 앱은 웹뷰앱 정책 위반 사유가 됩니다.

애플 앱스토어 정책 이슈

모든 사용자가 제한 없이 이용할 수 있는 앱이 아닌 특정 회사의 내부 용도로 사용하도록 제작된 앱은 앱스토어 출시가 제한된다고 합니다.
웹사이트(홈페이지 등)를 앱에 걸어서 제작하는 웹뷰 전용 앱은
앱스토어 심사에서 "웹 브라우징과 다름이 없는 앱은 앱스토어 출시 승인이 어렵다"라는 리젝의 결과가 나온다(연구원마다 주관적인 요소가 많아서 심사 기준이 달라집니다)
최근들어서는 해당 앱도 심사가 많이 거절되고 있기 때문에 이슈사항으로 안내드립니다.

Cross-Platform Application

한 가지의 개발 언어와 프레임워크로 아이폰/안드로이드 양쪽 앱스토어에 출시할 수 있습니다.

23년 전까지는 페이스북이 주도하던 리액트 네이티브가 모바일 크로스 플랫폼 중 가장 활발하게 발전하고 있었으나 현재는 12년 사이 구글이 주도하는 플러터라는 플랫폼이 빠르게 성장하고 있습니다.

또한 들리는 소문을 따르면 리네는 사내에서 더 이상 추가 개발을 하지 않는다고 하며 새로운 오픈소스를 발표를 목적으로 다른 프레임 워크를 만들고 있다고 합니다 (off the record)

크로스 플랫폼은 네이티브 앱과 비교하면 개발 속도가 빠르고 성능은 네이티브와 크게 차이가 나지 않는다는 장점이 있습니다.

또한 네이티브 앱의 경우 코드 몇 글자만 고치더라도 결과를 보려면 전체 소스를 다시 빌드하는 컴파일(빌드) 타임이 있고 이 시간이 짧으면 수 초이지만 길면 수 분에 이르기 때문에 개발 속도가 느립니다.

프로젝트 하나를 네이티브로 개발하는데 빌드를 최소 수 천 번에서 수 만 번 해야 하기 때문에 빌드 타임이 짧아지거나 없어진다는 것은 굉장한 개발 생산성 향상과 비용 절감을 가져옵니다.

그래서 리액트 네이티브와 플러터는 코드 수정후 핫리로딩이라는 방식으로 수정한 결과를 에뮬레이터 상에서 바로 보여주어 컴파일/빌드 타임을 없애고 수정 후 결과를 바로 확인할 수 있도록 하여 개발 생산성을 증대시키고 있습니다.

더불어 한 번 코드를 작성하면 아이폰/안드로이드 앱 둘 다 제작이 가능하고 네이티브 개발 기술을 익히지 않아도 네이티브에 가까운 앱을 제작할 수 있기 때문에 네이티브 앱 개발 수요의 일부가 리액트 네이티브와 플러터로 조금씩 이동하고 있는 것 같습니다.

높은 숙련도가 필요한 네이티브 앱 방식에 비해 크로스 플랫폼은 상대적으로 쉬운 언어와 기술 기반으로 되어 있습니다.

또한 이 크로스플랫폼 방식 안에 웹뷰까지 더해진다고 하면 하이브리드 앱의 더 상향화된 버전이라고 생각할 수 있겠다.

프레임워크

• React Native
• Flutter
• Xamarin

Progressive Web Application

개발하기 쉽고 사용하기 편리한 새로운 방법론으로 탄생된 앱으로

모바일 웹의 한계를 브라우저의 새 기능 ( 발전 ) 을 통해 향상시킵니다.

모바일 OS 기능을 사용하는 웹 페이지를 만들수가 있습니다..

어떻게 디바이스에 접근이 가능하냐 ( 브라우저가 지원 함 ) 브라우저마다 조금 다르기는 하나

현재 구글과 MS에서 적극적으로 밀고 있는 추세 ( 사파리에서는 소극적이나 점진적으로 변하고있다고 함 )

일반 웹브라우저와의 차이점

• 모바일에서 단순히 웹에 접근하기만 하면 웹앱이 실행됨.
• 즐겨찾기 기능을 통해서 아이콘 설정이 되어 앱이 설치 되는 기능을 함.
• 네이티브 앱 같이 홈 스크린에서 스플래쉬 스크린을 통해서 실행가능함
• 최신 데이터와 백그라운드 동기화된 데이터 모두 다 사용 가능.
• 오프라인 상태에서도 실행이 가능함.
• 네이티브 앱 과 같이 설치(캐쉬) 된 파일과 캐쉬 된 데이터를 사용 가능함.
• 네이티브 앱과 같이 빠른 사용자 경험을 제공
• 구글 등에서 검색이 가능하도록 최적화도 가능 (서버사이드 렌더링을 제공해 SEO에 최적)
• 위치기능 지원, 푸시알람과 홈스크린에 접근 가능함.

기존 웹사이트 프로젝트를 PWA로 전향하는 경우가 많아지고 있음.

사용자 경험에서 확실한 향상을 보여주고있음.

• 트위터의 네이티브 앱 vs PWA 앱 사용자 경험 비교영상

  https://www.youtube.com/watch?v=3cIee4VfD9s

  1:13 분 부터 비교영상이 나옴.

[출처 : https://www.youtube.com/watch?v=BZUEEby0HEU]

단점

아직 앱으로써 쓰기엔 제한적이다.

브라우저 지원은 현재 Android 용 Firefox 58+, 모바일 Chrome 및 Android 웹 뷰 31+, Android 32+ 용 Opera로 제한되어 있지만 가까운 장래에 개선 될 거라고는 한다.

1. 앱 사용자가 어떤 스크린에 제일 많이 머무르는지 수집하기 위함입니다.

2. Firebase 와 연동하여 사용합니다.

2. Google Analytics 란 무엇인가?

https://analytics.google.com/analytics/web/provision/?hl=ko&pli=1#/provision

2.1. Google Analytics 란?

웹사이트 방문자의 데이터를 수집해서 분석함으로써 온라인 비즈니스의 성과를 측정하고 개선하는 데 사용하는 웹로그분석 도구입니다.

2.2. 어떤 기능이 있는가?

맞춤 보고서

구글에서 기본적으로 제공하는 표준보고서 이외에 분석하고자 하는 데이터(측정기준과 측정항목)를 선택하여 나만의 맞춤 보고서(custom reports)를 쉽게 만들어서 활용 가능하다.

세그먼트 분석

시스템 세그먼트 및 맞춤 세그먼트 기능을 사용하여 심층적인 데이터 분석이 가능하다.

화면 추적

화면 전환을 추적하고 현재 화면에 관한 정보를 이벤트에 첨부하므로 사용자 참여와 같은 측정항목이나 사용자 행동을 화면별로 추적할 수 있습니다. 이 데이터 수집은 대부분 자동으로 이루어지지만 수동으로 화면 조회수를 로깅할 수도 있습니다.

디버깅 이벤트

DebugView를 사용하면 개발 기기에서 앱이 기록하는 원시 이벤트 데이터를 거의 실시간으로 확인할 수 있습니다.

Firebase 와 함께 사용해서 사용자 맞춤 앱을 제공할 때

이 글을 참고하자

애널리틱스는 Firebase 기능 전체에 통합되며 Firebase SDK를 사용하여 정의할 수 있는 최대 500개의 고유한 이벤트에 대한 무제한 보고를 제공합니다.

Remote Config 와 GA 를 모두 포함하는 앱을 빌드하면, 앱 사용자를 더욱 자세히 파악하면서도 사용자에 맞춰 앱을 맞춤설정 할 수가 있게 된다.

2.3. 어떤 항목을 사용하는가?

저희가 사용하고자 하는 Firebase Analytics는 정보를 ‘사용자 속성’과 ‘이벤트’ 두 가지 종류로 구분합니다.

홍길동 씨가 오늘 회원가입을 했다.

여기서 ‘홍길동’은 사용자 속성에, ‘회원가입’은 이벤트에 해당합니다.

사용자 속성

사용자 고유의 속성을 붙일 수 있습니다. 회원 구분, 연령대 등의 각 회원 고유의 정보를 붙여주면 됩니다.

이벤트와 달리 지속적으로 정보가 유지되고 어느 이벤트에나 붙여 읽을 수 있습니다.

이벤트

Custom Event : 일반적으로 우리가 원하는 이벤트 입력을 얘기합니다.

자동 수집되는 이벤트 : 별도로 추가 설정하지 않아도 자동으로 수집되는 이벤트들 입니다. 앱 제거나 업데이트, 스크린 뷰 등의 이벤트가 포함되어 있습니다. ( 자세한 내용은 도움말을 참고 )

app_remove 이벤트는 iOS에서 수집되지 않습니다.

Event methods list 링크

2.4. 어떻게 사용하는가?

react native firebase analytics 설치 방법

react native firebase analytics Screen Tracking 예제

2.5. 장점

무료 서비스

구글 계정만 있다면 자신의 사이트에 무료로 구글 애널리틱스를 설치해서 데이터를 확인할 수 있습니다.

다른 프로그램들과 호환가능

Firebase remote config, Google Data Studio, Google Optimize, Google Tag Manager, 이외의 다른 클라우드 서비스와도 무료로 함께 사용이 가능합니다.

구글의 광고서비스와 연동

구글 애널리틱스에서 사용자의 특정 행동을 조건으로 걸어서 광고계정에서 리마케팅 캠페인을 만들 수 있습니다.

방대한 자료

2.6. 주의해야 할 점

이벤트

이벤트 이름을 설정할 때 알파벳으로 시작해야하는 제한이 있습니다. 또한 ‘firebase_’, ‘google_’, ‘ga_’로 시작하는 이벤트 이름도 사용할 수 없습니다.

데이터 처리 지연시간

구글 애널리틱스에 데이터 전송 후 리포트에 보여지기까지는 일반적으로 24~48시간이 걸립니다. 또한 수집하는 데이터가 일일 20만 세션이 넘게 될 경우. 하루에 한 번 만 보고서가 업데이트 됩니다. 그렇게 된다면 실질적으로 오늘 쌓은 데이터는 최소 내일에서 모레는 되어야 정확하게 볼 수 있게 됩니다.

샘플링의 문제

구글 애널리틱스의 좌측 메뉴에는 기본으로 볼 수 있는 보고서는 전수 데이터가 적용되어 있지만, 임의로 리포트를 생성하는 [두 번째 측정기준], [세그먼트], [맞춤보고서] 등의 기능을 사용할 경우,리포트를 보기 위해 설정한 기간 중 세션(방문) 수가 50만이 넘을 경우에 데이터가 샘플링이 됩니다.

*샘플링이 적용되는 이유란 ? * 데이터를 처리하는 데 한정된 리소스를 가지고 있기때문에 데이터 양이 많아도 일정한 리소스를 사용하고, 일정 시간내에 사용자에게 빠르게 리포트를 보여주기 때문에 샘플링이 적용 될 경우 하위 집합의 결과로, 전체 집합의 결과가 리포팅 되기 떄문에 정확성이 떨어지는 문제가 발생합니다.

3. 가격, 사용량(한계치), API 지원 여부는 어떻게 되는가?

3.1. 가격

Firebase react-native analytics 사용료는 무료다.

단, 월 1천만 히트(Hit) 이상이 발생할 경우 유료 전환이 필요합니다.

3.2. 이벤트 사용량(한계치)

이벤트 개수

전송 가능 한 이벤트 개수는 ‘무제한’으로 안내되고 있습니다.

실제로 문서화 되지 않은 제한이 있는것으로 알려지고 있다고 합니다.. 하나의 디바이스에서 일반적으로는 발생할 수 없는 만큼의 이벤트를 발생시키면 해당 디바이스에 한해 더 이상 이벤트가 저장되지 않는 상황이 발생합니다. (일반적인 상황에서 발생하지 않음.)

이벤트 종류

500개까지의 이벤트 종류만 저장 가능합니다.

사용자 속성 개수

50개의 사용자 속성을 사용할수 있습니다.

이벤트 파라미터

*하나의 이벤트에 25개 *파라미터를 붙여 보낼 수 있습니다.

파라미터 키와 값 각각 40글자, 100글자 제한이 있습니다.

3.3. API 지원 여부

Google Analytics의 모든 모듈을 제공한다.

4. 간단한 설계

React Native Firebase Analytics Docs 주소

4.1. 화면전환 하는 경우 Screen class와 Screen name을 현재 네비게이션 스크린으로 설정해 log 기록

5. 샘플 코드 적용

import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';

const RootNavigator = (props: any): React.ReactElement => {
  const routeNameRef = React.useRef();
  const navigationRef = React.useRef<any>();

  return (
    <NavigationContainer
        ref={navigationRef}
        independent={true}
        onReady={() => (routeNameRef.current = navigationRef.current.getCurrentRoute().name)}
        onStateChange={(state) => {
          const previousRouteName = routeNameRef.current;
          const currentRouteName = navigationRef.current.getCurrentRoute().name;

          if (previousRouteName !== currentRouteName) {
            console.log(currentRouteName);
            analytics()
              .logScreenView({
                screen_name: currentRouteName,
                screen_class: currentRouteName,
              })
              .then(() => {
                console.log('asdf');
              })
              .catch((err) => {
                console.warn(err);
              });
          }
          routeNameRef.current = currentRouteName;
        }}
      >
      </NavigationContainer>
    )
  } 

6. 우려되는 지점

페이지뷰에 대해서

예를 들어 모달을 페이지뷰로 기록할지 아니면 버튼 클릭 이벤트로 기록 해야할지 최선이 무엇인지 많은 고민이 필요합니다. 확실한 것은 이전의 페이지뷰 단위 이동의 UX에서 Context 이동으로의 UX 변화가 기록 방식에도 같은 변화와 고민을 주고 있습니다.

파라미터의 제한

25개를 넘는 파라미터를 가지는 이벤트들에는 제한이 생기는 점

100글자를 넘는 정보가 충분하지 않는 경우도 존재함

실험에 대해서

예를 들어 버튼의 색으로 A/B 테스트를 진행한다고 할 때 실험 번호 “A” 혹은 “B”를 이벤트에 넣어야 할까요, 사용자 속성에 넣어야 할까요?

버튼 클릭 이벤트에 실험 번호를 넣을 경우 버튼의 색이 이후 사용자 행동에 어떤 영향을 주었는지 알기 힘듭니다. 어떤 실험 번호 였는지 조회하기 위해서 모든 이벤트를 뒤져 사용자 단위로 파티셔닝해 사용자와 매치하는 과정이 필요합니다.

사용자 속성에 실험 번호를 넣는 경우 50개 자리 중 하나를 사용해야 하지만 동시에 진행되는 실험이 다수가 될 경우 실험의 개수를 제한하거나 사용자 속성 정보를 복잡하게 기록하고 복잡하게 파싱해 사용하는 어려운 과정을 거쳐야 합니다.

https://brunch.co.kr/@minwoo/24 참고한 사이트

사전 준비사항 XCode 최신 버전(11.6) - 2020년 08월 11일 기준 최신 버전이 있어야 iPhone 13.x 버전에서 빌드가 가능함 iPhone Device 배포용 아이디

🐶 최초 배포 시 준비사항

AppstoreConnect 에 로그인을 한 후 ,

Xcode > 파일폴더 아이콘 클릭 후 해당 프로젝트 클릭 > Targets > Signing & Capabilities > Bundle Identifier 업로드 할 앱의 Bundle Identifier와 동일한 앱 프로파일을 생성해야 합니다.

번들 아이디가 없을 경우 개발자 페이지로 이동하여 Bundle Identifier와 동일한 Identifier 인증서를 만들어 주어야 합니다.

Bundle ID와 동일한 Identifier를 넣어 생성합니다.

⭐️ 배포 시작!!!!

😎 Version 설정

xcode 들어가서 프로젝트 클릭하게되면 General 탭에서 version을 해당 버전에 맞게 수정해줍니다. 또한 build도 이전 build 번호보다 높게 설정해 줍니다. 이전 build 번호보다 낮거다 같을 경우 앱스토어 승인 거절 사유 입니다

항상 소스코드에 있는 버전명 일치 작업을 먼저 진행 한 후 배포 진행해야함. 버전 업그레이드 기준은 기능또는 버그 수정에 따라서 내부에서 상의해서 정하는 것이 좋음.

버전 변경 후 터미널에서 develop에 push 처리 후

git push origin develop

저의 배포 과정은 버전이랑 빌드번호만 수정하기에 develop 브랜치에서 진행하였습니다. 이럴 경우는 해당 develop에 오류가 없다고 확실할때 develop에서 처리하도록 하였습니다.

😎 Entitlements Value 를 production로 변경!!

해당 프로젝트 파일 > 프로젝트 파일명.entitlements > Entitlements File > APSEnvironment에서 production 으로 변경합니다.!!

😎 Release 모드로 변경!!

xcode 상단에 프로젝트를 클릭한 다음 Edit Scheme으로 들어갑니다.

실제 기기에 Release 모드로 빌드를 하는 과정이 필요합니다.(실제 기기로 Release Build 하지 않으면 Archive 해 업로드 할 수 없음)

😎 Archive로 패키징 처리 !!

디바이스에 릴리즈 빌드를 마쳤다면 xCode Product 메뉴에 Archive 메뉴가 뜰 것입니다. 해당 메뉴로 이동해 AppleConnect에 업로드가 필요합니다.

Archive 메뉴에서 빌드할 버전을 선택 한 후 Distribute App 버튼을 클릭합니다.

업로드가 완료되면 Build된 파일을 제출할 수 있는데까지 시간이 제법 소요됩니다. (30분 정도) 선택된 항목들로 Next를 눌러 준 private key를 생성해줍니다.

😎 앱 심사 제출하기 !!

제출 가능한 상태가 되면 다음 페이지에서 빌드를 선택할 수 있습니다.

배포할 빌드 버전을 선택하고 심사에 제출하세요.

그리고 결과를 기다리면 끝 !!! ⭐️⭐️⭐️⭐️

저희는 실제 앱을 배포하기 전에 테스트 버전의 앱을 미리 심사를 거친 후 피드백을 받은 다음 수정 후 릴리즈 버전을 배포하였습니다.

git 관련 내용 💥

실제 개발 코드에서는 debug 모드이나 앱 배포시에는 release 모드로 변경하게 되면 메인코드에서 코드가 일부 수정이 됩니다. 만약 master가 release 모드가 아니라 debug 모드로 push 할 경우 해당 변경 사항을 체크아웃 처리 한 후 push 처리 하였습니다.

git checkout ios 

release 당시 겪었던 에러들의 대한 해결방안을 써놓은 포스트입니다.

64K가 넘는 메서드의 앱에 관해 멀티덱스 사용 설정

앱 및 앱이 참조하는 라이브러리에서 메서드가 65,536개를 초과하면 앱이 Android 빌드 아키텍처의 제한에 도달했음을 알리는 빌드 오류가 발생합니다.

Android 앱(APK) 파일에는 Dalvik Executable(DEX) 파일 형식의 실행 가능한 바이트 코드 파일이 포함되며, DEX 파일에는 앱을 실행하기 위해 사용되는 컴파일된 코드가 포함됩니다. Dalvik Executable 사양은 단일 DEX 파일 내에서 참조될 수 있는 메서드의 총 개수를 65,536으로 제한하며 여기에는 Android 프레임워크 메서드, 라이브러리 메서드, 자체 코드에 있는 메서드가 포함됩니다. 컴퓨터 공학 측면에서 킬로, K라는 용어는 1024(또는 2^10)를 나타냅니다. 65,536은 64 X 1024와 동일하므로 이 제한을 '64K 참조 제한'이라고 부릅니다.

해결방법

android/app/build.gradle 파일에 멀티덱스 사용설정을 해준다.

android {
    defaultConfig {
        ...
        multiDexEnabled true
    }
    ...
}

dependencies {
  implementation 'androidx.multidex:multidex:2.0.1'
}

그리고 android/app/src/main/java/com/프로젝트이름/MainApplication.java 파일에 임포트를 해준다.

import androidx.multidex.MultiDexApplication; 

Production test build 하기 전에 먼저 해당 프로젝트 에뮬레이터 또는 Android device에서 성공적으로 컴파일이 되고 실행이 되고 오류는 없는지 확인한 후 진행하여야 합니다.

1. key store 생성

Android 용 React Native 실행 바이너리를 생성하는 데 사용되는 key store file 인 Java 생성 서명 키가 필요합니다. 다음 명령을 사용 하여 터미널 에서 keytool 을 사용하여 만들 수 있습니다.

keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000

여기서 your_key_name과 your_key_alias을 원하는 이름으로 작성을 해줍니다.
your_key_alias 은 나중에 앱에 서명 할 때 사용할 이름으로 따로 기록해두시는게 좋습니다. 또 해당 키는 보안성이 좋아야 하기때문에 기본값 1024 대신 탈취하기 보다 어려운 2048로 변경하였습니다.

해당 명령어는 해당 키 저장소의 정보 필드값을 입력하라는 문구가 나오게 됩니다.

Enter your keystore password: password123 
// 원하는 키 비밀번호 여기서 저는 대문자, 소문자, 숫자, 특수기호를 모두 넣은 최소 8자리 이상의 비밀번호를 사용하였습니다.
Re-enter new password: password123
What is your first and last name? [unknown]: Dani Williams // 개발자 이름
What is the name of your organizational unit? [unknown]: Sample Company // 회사 개발팀 
What is the name of your organization? [unknown]: Sample // 회사이름
What is the name of your city or Locality? [unknown]: XYZ // 대한민국
What is the name of your State or Province? [unknown]: ABC // 서울
What is the two-letter country code for this unit? [unknown]: XX // 국가코드 알파벳 KR

다 작성하게 되면 해당 문구가 나오는 경우가 있으나 저에게는 따로 나오지않았습니다. 해당 문구가 나오지 않는 경우 your_key_alias 비밀번호는 keystore 비밀번호와 동일합니다. 나온다고 한다면 만약 새로운 비밀번호가 필요할때 작성하면 됩니다.

 Enter key password for <your_key_alias> 

다 완료하고 나면 결과적으로 10000일 동안 유효한 해당 your_key_name.keystore 라는 프로젝트 디렉토리에 키저장소 파일이 생성되게 됩니다.

Google play console 에 한번 업로드된 key store file은 변경되지 않으니 잘 보관할 수 있도록 합니다. 백업 필수 🔥🔥🔥 만약 분실하였거나 도용된 경우 해당 사이트로 가서 지침을 따라야합니다. https://support.google.com/googleplay/android-developer/answer/7384423#reset

2. 프로젝트에 키 저장소 추가

your_key_name.keystore 파일을 복사한 후 나의 React Native 프로젝트 폴더 안에 android/app 디렉토리 안에 붙여 넣기 해줍니다.

mv my-release-key.keystore / android / app

3. Gradle 전역 변수 설정

파일 ~/.gradle/gradle.properties 또는 android/gradle.properties을 편집하고 다음을 추가합니다 ( *****올바른 키 저장소 암호, 별칭 및 키 암호로 대체 ).

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

이 변수는 전역 Gradle 변수가 될 것이며 나중에 앱에 서명하기 위해 Gradle 구성에서 사용할 수 있습니다.

만약 보안상의 이유로 해당 암호를 텍스트로 저장하지 않고 OSX를 실행하여 해당 앱에 비밀번호를 저장 할 수도 있습니다. https://pilloxa.gitlab.io/posts/safer-passwords-in-gradle/ 그렇게 되면 마지막 두 행을 건너뛸수 있습니다.

4. 앱의 Gradle config에 signing release 설정 추가

프로젝트 폴더의 android/app/build.gradle 파일에서 해당 release를 추가합니다

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

5. release APK 생성 (AAB)

보통 APK 파일을 업로드를 하게 되면 해당 google play console에서 해당 앱의 용량을 압축하여 업로드 하라고 안내문구를 띄웁니다. 그래서 google play 에서 제공해주는 Android App Bundle 을 사용하여 앱의 모든 컴파일된 코드 및 리소스를 포함하며 APK 생성 및 서명을 Google Play에 맡기고 각 기기 설정에 맞게 최적화된 APK를 생성합니다.

터미널에서 해당 명령어를 실행합니다.

cd android
./gradlew bundleRelease

Gradle bundleRelease 는 앱을 실행하는데에 필요한 모든 자바스크립트를 AAB 번들로 제공합니다.

성공하면 android/app/build/outputs/bundle/release 폴더 안에 .aab 파일이 생성됩니다.

짜잔!!!😎 🎶

만약 APK 파일로 생성하고 싶다고 한다면 해당 명령어를 실행합니다.

cd android
./gradlew app:assembleRelease

⭐️ 참고한 사이트

1. https://www.instamobile.io/android-development/generate-react-native-release-build-android/
2. https://reactnative.dev/docs/signed-apk-android

브라우저의 동작 원리를 이해하기 위해 잘 나와있는 블로그를 참조해서 작성하였습니다.

브라우저란

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

브라우저의 주요 구성 요소

사용자 인터페이스

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

렌더링 엔진

요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

통신

HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행.

자료 저장소

이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

렌더링 엔진

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있다

동작 과정

렌더링 엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송된다.

다음은 렌더링 엔진의 기본적인 동작 과정이다.

예를 들어 HTML 문서를 파싱 과정을 예시로

• HTML 문서를 파싱 > "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환
• 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱
• 스타일 정보와 HTML 표시 규칙은 "렌더 트리" 라고 부르는 또 다른 트리를 생성
• 렌더 트리는 정해진 순서대로 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하여 화면에 표시
• 렌더 트리 생성 후 배치 시작 (각 노드가 화면의 정확한 위치에 표시되는 것을 의미)
• UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그림.

일련의 과정들이 점진적으로 진행되며 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.

파싱

파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다.

파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다.

파싱은 어휘 분석과 구문 분석이라는 두 가지로 구분 파서는 보통 두 가지 일을 하는데 자료를 유효한 토큰으로 분해 하는 어휘 분석기(토큰 변환기 라고도 부름)가 있고 언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서가 있다. 어휘 분석기는 공백과 줄 바꿈 같은 의미 없는 문자를 제거한다. 파싱 과정은 반복된다.

규칙에 맞지 않으면 파서는 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청한다. 맞는 규칙이 없는 경우 예외로 처리하는데 이것은 문서가 유효하지 않고 구문 오류를 포함하고 있다는 의미다.

파서 트리는 최종 결과물이 아니다. 파싱은 보통 문서를 다른 양식으로 변환하는데 컴파일이 하나의 예가 된다. 소스 코드를 기계 코드로 만드는 컴파일러는 파싱 트리 생성 후 이를 기계 코드 문서로 변환한다.

출처: https://d2.naver.com/helloworld/59361