실행 메뉴얼

Frontend

React, Typescript, redux(RTK)

프론트 엔드 환경 세팅

CRA redux-typescript 템플릿 사용
```
$ npx create-react-app frontend --template redux-typescript
```
- 사용하지 않는 컴포넌트 정리
- TDD 고려 jest 사용할 지 토의하기
Axios, dotenv
```
$ npm install axios dotenv
```

React-router-dom

$ npm install react-router-dom

import * as React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);

import React from 'react';
import { Routes, Route, Link} from 'react-router-dom'

import Login from './features/auth/#';
import { Counter } from './features/counter/Counter';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Link to="/#">로그인</Link>
        <Link to="/counter">카운터</Link>
      </header>
      <Routes>
        <Route path="/#" element={<Login />} />        
        <Route path="/counter" element={<Counter />} />        
      </Routes>
    </div>
  );
}

export default App;

react-helmet-async(spa 라우터 이동 시 제목 변경하기 + 검색 정보)

$ npm install react-helmet-async

import { HelmetProvider } from 'react-helmet-async';
...
root.render(
  <HelmetProvider>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </HelmetProvider>
);

import { Helmet } from 'react-helmet-async';
...
		<Helmet>
      <title>{title값}</title>
    </Helmet>

별도의 helmet 컴포넌트 만들기

lodash: 지연 요청(과도한 요청 방지)
```
npm install lodash
```

Prettier, Eslint

Prettier

Prettier 코드 포멧터를 프로젝트에서 활용하기 위한 패키지를 설치합니다.

npm i -D --save-exact prettier

.prettierrc.js

module.exports = {
  // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
  arrowParens: 'always',
  // 닫는 괄호(>) 위치 설정
  // ex: <div
  //       id="unique-id"
  //       class="contaienr"
  //     >
  htmlWhitespaceSensitivity: 'css',
  bracketSameLine: false,
  // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
  bracketSpacing: true,
  // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
  printWidth: 80,
  // 산문 래핑 설정
  proseWrap: 'preserve',
  // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
  quoteProps: 'as-needed',
  // 세미콜론(;) 사용 여부
  semi: true,
  // 싱글 인용 부호(') 사용 여부
  singleQuote: true,
  // 탭 너비 설정
  tabWidth: 2,
  // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
  trailingComma: 'es5',
  // 탭 사용 여부
  useTabs: false,
};

.prettierignore

dist
build
coverage

ESLint

ESLint 린팅 도구를 프로젝트에 활용하기 위해 설치 및 구성 파일 초기화 명령을 실행합니다.

npm init @eslint/config

$ npm i -D eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-config-prettier
// typescript 설정항목 선택
// eslint-plugin-prettier 왜 읽을 수 없다고 떴는 지 확인안됨.

ESLint + React + Prettier 통합 설정 + Typescript 포함

.eslintrc.yml

env:
  browser: true
  es2021: true
  node: true
extends:
  - eslint:recommended
  - plugin:react/recommended
  - plugin:react/jsx-runtime
  - plugin:react-hooks/recommended
  - plugin:jsx-a11y/recommended
  - plugin:prettier/recommended
  - prettier
  - standard-with-typescript
overrides: []
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: latest
  sourceType: module
plugins:
  - react
  - jsx-a11y
rules: {}

ESLint 린팅 제외 항목 작성

.eslintignore

dist
build
coverage

Backend

설치

build.gradle 종속성 설치 후

실행

src > main > java > io > ssafy > NFTeam > ReadmeApplicaton.java 실행

DB

로컬 환경에서 MySQL Workbench 설치 및 실행

src > main > resources > application.properties의 값을 수정하여 DB와 연결

$으로 변수 바인딩되어 있는 부분을 로컬 사용자 환경에 맞게 변경

WebSocket

설치

패키지 설치

npm install

pm2 설치(전역)

npm install pm2 -g

웹소켓 서버 실행

로컬 환경

pm2 start src/server.js

컨테이너 환경

pm2-runtime start ecosystem.config.js --env production

Smart-contract

설치

패키지 설치

npm install

truffle.js 설치(전역)

npm install truffle -g

ganache 설치(전역)

npm install ganache -g

실행

2개의 터미널 필요

ganache

truffle compile
truffle migrate

IPFS

IPFS 설치

참고 : https://docs.ipfs.tech/install/command-line/#official-distributions

바이너리 파일 다운로드

wget https://dist.ipfs.tech/kubo/v0.15.0/kubo_v0.15.0_linux-amd64.tar.gz

압축 해제

tar -xvzf kubo_v0.15.0_linux-amd64.tar.gz

run install script
```
cd kubo/
sudo bash install.sh 
```

IPFS 실행

IPFS 실행 커맨드

ipfs init

IPFS daemon
IPFS daemon & //background

테스트 파일 생성
```
vi test.html

> <h2>hello world<h2/>
```

IPFS 업로드

ipfs add test.txt 

>added QmeV1kwh3333bsnT6YRfdCRrSgUPngKmAhhTa4RrqYPbKT test.txt

ipfs 완료 시 CID값이 나타난다.

IPFS에 업로드 된 파일 확인하기.
- 퍼블릭 게이트웨이를 사용한다. (eg. ipfs.io)
  - 퍼블릭 게이트웨이 확인하기
- URL : ipfs.io/ipfs/${CID}
- 결과:

ipfs daemon 계속 실행하기

ec2에 설치된 ipfs는 ssh를 종료하면 꺼지게 된다.
레포지토리 폴더 생성

mkdir /home/ubuntu/data/ipfs

IPFS path 추가하기

echo 'export IPFS_PATH=/home/ubuntu/ipfs/data' > ~/.profile
source ~/.profile

IPFS 레포지토리 초기화

ipfs init --profile server //provider.queue에러가 발생할 수 있는데 전혀 상관 없다고 한다.

systemctl 설정

sudo nano /lib/systemd/system/ipfs.service

파일 내용

[Unit]
Description=ipfs daemon
[Service]
ExecStart=/usr/local/bin/ipfs daemon --enable-gc
Restart=always
User=ubuntu
Group=ubuntu
Environment="IPFS_PATH=/home/ubuntu/ipfs/data"
[Install]
WantedBy=multi-user.target

ec 인스턴스가 시작할때마다 실행되도록 설정

실행하고 정상 작동하는지 확인하기

sudo systemctl start ipfs
sudo systemctl status ipfs

IPFS 게이트웨이 설정

외부에서 IPFS 노드를 사용할 수 있도록

/home/ubuntu/ipfs/data의 config 수정

"API": "/ip4/0.0.0.0/tcp/5001",
"Gateway": "/ip4/0.0.0.0/tcp/8080"
...
"Gateway": {
    "HTTPHeaders": {
      "Access-Control-Allow-Headers": [
        "X-Requested-With",
        "Range",
        "User-Agent"
      ],
      "Access-Control-Allow-Methods": [
        "GET",
        "POST"
      ],
      "Access-Control-Allow-Origin": [
        "*"
      ]
    },
    "RootRedirect": "",
    "Writable": false,
    "PathPrefixes": [],
    "APICommands": [],
    "NoFetch": false,
    "NoDNSLink": false,
    "PublicGateways": null
  },
  "API": {
    "HTTPHeaders": {
      "Access-Control-Allow-Methods": [
        "PUT",
        "POST"
      ],
      "Access-Control-Allow-Origin": [
        "*"
      ]
    }
  },

ipfs 재시작 및 상태 확인

sudo systemctl restart ipfs
sudo systemctl status ipfs

Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Swarm listening on /p2p-circuit
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Swarm announcing /ip4/127.0.0.1/tcp/4001
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Swarm announcing /ip4/127.0.0.1/udp/4001/quic
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Swarm announcing /ip4/34.198.166.0/udp/4001/quic
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Swarm announcing /ip6/::1/tcp/4001
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Swarm announcing /ip6/::1/udp/4001/quic
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: API server listening on /ip4/0.0.0.0/tcp/5001
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: WebUI: http://127.0.0.1:5001/webui
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Gateway (readonly) server listening on /ip4/0.0.0.0/tcp/8080 //변경된 게이트웨이 확인
Sep 23 04:57:39 ip-172-31-87-41 ipfs[14954]: Daemon is ready

5001포트 열기

sudo ufw allow 5001/tcp

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

실행 메뉴얼.md

실행 메뉴얼.md

실행 메뉴얼

Frontend

React, Typescript, redux(RTK)

프론트 엔드 환경 세팅

Prettier, Eslint

Prettier

ESLint

ESLint + React + Prettier 통합 설정 + Typescript 포함

ESLint 린팅 제외 항목 작성

Backend

설치

실행

DB

WebSocket

설치

패키지 설치

pm2 설치(전역)

웹소켓 서버 실행

Smart-contract

설치

패키지 설치

truffle.js 설치(전역)

ganache 설치(전역)

실행

IPFS

IPFS 설치

IPFS 실행

IPFS 게이트웨이 설정

Files

실행 메뉴얼.md

Latest commit

History

실행 메뉴얼.md

File metadata and controls

실행 메뉴얼

Frontend

React, Typescript, redux(RTK)

프론트 엔드 환경 세팅

Prettier, Eslint

Prettier

ESLint

ESLint + React + Prettier 통합 설정 + Typescript 포함

ESLint 린팅 제외 항목 작성

Backend

설치

실행

DB

WebSocket

설치

패키지 설치

pm2 설치(전역)

웹소켓 서버 실행

Smart-contract

설치

패키지 설치

truffle.js 설치(전역)

ganache 설치(전역)

실행

IPFS

IPFS 설치

IPFS 실행

IPFS 게이트웨이 설정