https://vomtom.at/how-to-use-uniswap-v2-as-a-developer/ virtual env설치
python3 -m venv venv
https://jacob-cs.tumblr.com/post/679495648682328064/django-rest-framework-api-quick-tips-7hrs-1
.
requirements.txt만들어서
django 와 djangorestframework를 타입
.
pip install -r requirements.txt를 통해 설치
.
django-admin startproject moneyprinter1
.
django-admin startapp api 를 통해 api app을 만든다.
그리고 add을 settings에서 등록해준다. rest_framework도 등록해준다.
.
python manage.py migrate
python manage.py makemigrations
python manage.py runserver
.
django-admin startapp frontEnd 를 통해 react front end가 위치할 app을 만든다.
https://www.youtube.com/watch?v=6c2NqDyxppU&list=PLzMcBGfZo4-kCLWnGmK0jUBmGLaJxvi4j&index=3
참조사이트) django + react hybrid style , 보통은 각각 따로 만들기도 한다. 이런경우 front , back side가 물리적으로 다른 웹사이트로 인지되기 때문에 cross web site관련해서 처리 해줘야 할 문제가 있다. hybrid의 경우는 물리적으로 하나의 사이트므로 상관없음
https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline
.
frontEnd 폴더 안에 static 폴더를 만들고 css, frontEnd, images폴더를 만든다
frontEnd 폴더 안에 src 폴더를 만들고 components 폴더를 만든다
frontEnd 폴더안에서 npm init -y
npm i webpack webpack-cli
npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react
npm i react react-dom –save-dev
npm install @babel/plugin-proposal-class-properties –save-dev
npm install react-router-dom –save-dev
.
package.json에 추가하고 설치하기 npm install
“moralis”: “^1.3.2”,
.
frontEnd app폴더안에 아래 config 화일을 만든다.
babel.config.json
webpack.config.js
https://youtu.be/6c2NqDyxppU?t=626
https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial%201%20-%204/frontend/webpack.config.js
https://github.com/techwithtim/Music-Controller-Web-App-Tutorial/blob/main/Tutorial%201%20-%204/frontend/babel.config.json
.
.
위와같이 npm dependencies를 설치했으나 아래와 같이 변경했다.
{ "name": “frontEnd”, "version": “1.0.0”, "description": “”, "main": “index.js”, "scripts": { "dev": “webpack –mode development –watch”, "build": “webpack –mode production” }, "keywords": [], "author": “”, "license": “ISC”, "dependencies": {}, "devDependencies": { "@babel/core": “^7.17.9”, "@babel/plugin-proposal-class-properties": “^7.16.7”, "@babel/preset-env": “^7.16.11”, "@babel/preset-react": “^7.16.7”, "babel-loader": “^8.2.4”, "moralis": “^1.3.2”, "react": “^18.0.0”, "react-dom": “^18.0.0”, "react-moralis": “^1.3.1”, "react-router-dom": “^6.3.0”, "semantic-ui-css": “^2.4.1”, "semantic-ui-react": “^2.1.2”, "web3uikit": “^0.1.75”, "webpack": “^4.44.2”, "webpack-cli": “^4.9.2”, "react-scripts": “^4.0.0” }}
.
.
mnemonic words를 이용해서 web3 provider를 사용하기 위해서는 hdwalleetprovider를 사용해야 했고 그래서 truffle를 설치 하기로 함
frontEnd 폴더안에서 truffle 설치 하지 않고
globally install 했고 사용하는 방법은 SwapTest2.js를 보면 알수 있다.
require를 통해 globally intalled 된 모듈을 사용할수 있다
const HDWalletProvider = require(“@truffle/hdwallet-provider”);
https://medium.com/coinmonks/the-many-ways-to-deploy-your-smart-contract-to-rinkeby-network-38cadf7b20be
https://jacob-cs.tumblr.com/post/680759022081785856/truffle-js-1
.
.
bip 39, 32, 44를 구현하기 위해 아래 라이브러리 설치
npm install ethereum-hdwallet –save-dev
ethereum-hdwallet
https://www.npmjs.com/package/ethereum-hdwallet
.
.
bip 39 니모닉 단어 생성을 위해 설치
npm install bip39
https://www.npmjs.com/package/bip39
.
.
python virtual env로 들어가서 selenium설치
웹사이트를 자동으로 접근 가능하게 해주는 라이브러리
pip install selenium
.
.
.
참조) https://www.youtube.com/watch?v=6c2NqDyxppU&list=PLzMcBGfZo4-kCLWnGmK0jUBmGLaJxvi4j&index=3
src 폴더 안에 index.js 만들기
frontEnd app 폴더 안에 templates/frontEnd 폴더 만들고 index.html 화일 만들기
index.html에 app id를 가지는 div을 만들어준다. 이것은 나중에 react component로 교체될 placeholder역할을 할것이다.
index.js를 아래와 같이 만들어 준다. 이는 webpack에 의해 압축될것이다.
App.js를 아래와 같이 만든다 이것은 index.html의 div id= app 에 들어갈 부분이다.
django project urls 과 app urls을 수정하고 settings에 app들을 등록해준다..
.
.
truffle과 truffle hd wallet provider를 설치한다.
truffle docs : https://trufflesuite.com/tutorial/
npm install truffle @truffle/hdwallet-provider
.
.
npm install web3 –save-dev
npm install lodash –save-dev
.
.
.
semantic ui react 가 Icon 사용하려면 아래 설치 필요
npm install font-awesome –save-dev
.
.
추가로 알게된 사실
– 코드 작성하고 반영되는데 시간이 걸리므로 기다려야 한다.
– javascript concatenation은 +
– javascript empty array 만들기 []
– useEffect 사용법 https://reactjs.org/docs/hooks-effect.html
– django react 하이드리드 프로젝트 https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/
– react hook useState, useEffect https://reactjs.org/docs/hooks-overview.html
– web3 UI KIT DOCS https://web3ui.github.io/web3uikit/?path=/docs/2-forms-button–primary
– react inline css
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
– semantic ui https://react.semantic-ui.com/layouts
– react router v6 DOCS https://reactrouter.com/docs/en/v6/getting-started/tutorial
– abi.encode https://medium.com/coinmonks/abi-encode-and-decode-using-solidity-2d372a03e110
– solidity evm encode https://ethereum.stackexchange.com/a/124769
– 한글자료 erc20 token , function selector https://taeyonghwang.github.io/ethereum/ethereum-erc20-function-selector/
– function selector https://ethereum.stackexchange.com/a/88073
– 한글 자료 assembly, abi encoding https://medium.com/onther-tech/solidity-assembly-abi-encoding-db8f79d1c1a1
– create2 https://medium.com/onther-tech/solidity-assembly-abi-encoding-db8f79d1c1a1
– create2 https://ethereum.stackexchange.com/questions/101336/what-is-the-benefit-of-using-create2-to-create-a-smart-contract
– 이더리움 개발자 도구 리스트 https://github.com/ConsenSys/ethereum-developer-tools-list/blob/master/README_Korean.md
– memory variable pointer 0x20 add(bytecode, 0x20)
https://ethereum.stackexchange.com/a/84844
– m:=mload(0x40) instruction reads the 32 bytes of memory starting at position 0x40
https://ethereum.stackexchange.com/a/9612
– virtual , override keyword https://ethereum.stackexchange.com/a/78573
– address(0) https://stackoverflow.com/questions/48219716/what-is-address0-in-solidity
– Uniswap v2 (as a Developer) 유니스왑에서 가격 가져오기 거래 하기 방법
https://vomtom.at/how-to-use-uniswap-v2-as-a-developer/
