[Project] YoonSea 개발 과정기(1)

EllaDev·2022년 4월 11일

Blockchain Project

목록 보기

1/1

해당 프로젝트는 "OpenSea Clone Project"로 간단한 기능구현과 스타일일링 되었습니다.

기획

Software Reqirement

기술스택

Client

React: Create React App으로 기본 셋팅 및 컴포넌트 구현
Tailwind Css : 스타일링 구현
Eslint & Prettier

Server

solidity : 스타트 컨트랙트 구현

Database

IPFS

Deploy

정적 배포를 생각하고 있으며 아직 정해지지 않았다.

구현해야하는 기능

메타마스크 지갑 연결
IPFS 연결 및 호출 기능
NFT 생성 기능
NFT 구매 기능 구현
NFT 판매 기능 구현

환경 설정

패키지 정보

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "web3": "^1.7.3"
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "^2.6.2"
  }

Component 구조

Eslint & Prettier 설정

프로젝트를 함께 개발하다보면 각기 다른 환경과 코딩 습관을 가지고 있기 때문에 협업을 위해서 eslint와 prettier를 사용하였다.
esLint는 주로 에러가 나는 코드를 찾아주고 규칙에 따라 코드를 일괄되게 사용할 수 있도록 해준다. prettier은 코드가 가독성 좋게 보여질 수 있도록 강제적으로 코드를 변경한다.

설치

이 프로젝트에서는 Create-react-app을 사용했기 때문에 이미 eslint가 설치되어있다.

$ npm i -D prettier
$ npm i -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier : ESLint의 formatting 관련 설정 중 Prettier와 충돌하는 부분을 비활성화
eslint-plugin-prettier : Prettier를 ESLint 플러그인으로 추가한다. 즉, Prettier에서 인식하는 코드상의 포맷 오류를 ESLint 오류로 출력해준다.

파일 생성 및 셋팅

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  plugins: ['prettier'],
  extends: ['react-app', 'eslint:recommended', 'plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'error',
  },
};

env : 적용되는 환경 설정

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true, 
  "singleQuote": true 
}

trailingComma : 여러 줄이 있는 구문에서 후행 쉼표 여부
tabWidth: 탭너비
semi: 끝에 세미클론 여부
singleQuote : 작은 따움표 사용 여부

VScode 설정

VSCode 설정(윈도우, 리눅스에서는 Ctrl + , 맥에서는 Cmd + ,)으로 들어간다.
User와 Workspace 항목있는데 User는 VSCode 자체 설정으로 모든 프로젝트에 적용이 되고, Workspace는 현재 프로젝트에서만 설정이 적용되며, .vscode/settings.json에 설정 항목이 저장된다.

{
  // Set the default
  "editor.formatOnSave": false, // true : 저장시 포맷이 자동으로 변경
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

Ref
ESLint 규칙
Prettier 옵션
ESLint, Prettier 적용하기

이슈사항

Webpack5

create-react-app으로 기본 환경을 셋팅했다.
이 과정에서 create-react-app이 React 버전이 18로 업그레이드 되면서 webpack5를 적용하게 되어서 다른 패키지들과 호환이 안되는 이슈가 발생했다.

이를 해결하는 방안으로 2가지를 생각했다.

방법 1
Webpack5를 그대로 유지하면서 호환이 안되는 것들을 호환이 가능하도록 해주는 패키지들(polyfill)을 설치해서 셋팅한다.

//polyfill
"assert": "^2.0.0",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"http": "0.0.1-security",
"https": "^1.0.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"stream": "0.0.2",
"stream-http": "^3.2.0",
"url": "^0.11.0"

방법 2
react-scripts 버젼을 5.0.0에서 4.0.3으로 하고 react(v17.0.2), react-dom(17.0.2) 버젼을 낮추어 셋팅한다.

선택된 방법
안정성을 생각해서 "방법2"를 선택했다. webpack5 호환이 안되는 패키지가 많으면 그만큼 많은 폴리필 패키지를 설치해야하기 때문에 기능도 무거워지고 사용하지 못하는것들도 있지 않으까 하는 생각에 이전에 사용하던 버젼으로 선택하게 되었다.
사실 webpack.config.js를 사용해서 구현도 가능하지만 제한된 시간에 구현이 어려울꺼 같아서 선택하지 않았지만 추후에 구성해봐야겠다.

셋팅 방법
node-modules와 package-lock.json 파일 삭제 후 아래 처럼 파일 코드를 변경한다.

package.json

// 변경 전 
[
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4",
    "web3": "^1.7.3"
  },

// 변경 후 
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.4",
    "web3": "^1.7.3"
  },

index.js

// 변경 전
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


// 변경 후
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

EllaDev

Frontend Developer