Install

How to Install NodeJS on CentOS 8 > Option 2 — Installing Node Using the Node Version Manager
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-centos-8


NVM, Node Version Manager
https://github.com/nvm-sh/nvm

# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

# cat ~/.zshrc | last
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion


nvm list-remote
nvm install v18.15.0
nvm list
nvm use v18.15.0
node --version


create-react-app

# npx create-react-app new_app
# cd new_app
# tree
# find . | grep -v node_modules
./.gitignore
./package-lock.json
./package.json
./public
./public/favicon.ico
./public/index.html
./public/logo192.png
./public/logo512.png
./public/manifest.json
./public/robots.txt
./README.md
./src
./src/App.css
./src/App.js
./src/App.test.js
./src/index.css
./src/index.js
./src/logo.svg
./src/reportWebVitals.js
./src/setupTests.js


{
  "name": "new_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
     ...


ERR_OSSL_EVP_UNSUPPORTED

# npm start
Starting the development server...
...
Error: ...
  opensslErrorStack: ...
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

# NODE_OPTIONS=--openssl-legacy-provider npm start


개발환경

https://codesandbox.io

https://codepen.io

https://jsfiddle.net


라이브러리

visjs

https://visjs.org

https://github.com/visjs

https://visjs.github.io/vis-network/examples

https://github.com/visjs/vis-network-react

https://www.npmjs.com/package/vis-network-react

https://codesandbox.io/examples/package/vis-network-react

npm i vis-network-react


  "dependencies": {
    "prop-types": "15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "vis-network-react": "1.3.6"
  }



예제내용추가하면 좋을 것

https://codesandbox.io/s/vis-network-test-hrkqw1
  • 토폴로지
  • 노드/링크 마우스 over
  • 노드/링크 클릭


https://codesandbox.io/s/vis-network-test-gcwoy8
  • 토폴로지
  • 링크에 label 삽입





chartjs

https://blog.logrocket.com/using-chart-js-react/


Material UI

https://mui.com

기본이 되는 것은 무료로 이용 가능
https://mui.com/pricing/


  "dependencies": {
    "@material-ui/core": "4.9.10",
    "@material-ui/icons": "4.9.1",
    "material-ui": "0.20.2",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "3.0.1"
  },



예제내용

https://codesandbox.io/s/react-material-ui-0yqeo
  • 헤더, 푸터, Navbar
  • dropdown, text input
  • edit, view






https://goo-gy.github.io/2021-02-28-material-ui


기타

https://www.geeksforgeeks.org/how-to-create-a-multi-page-website-using-react-js/


[NPM] npm install 할 때 --save 옵션을 함께 입력하는 이유? 하지만 이제는 사용하지 않아도 되는 이유.
https://xtring-dev.tistory.com/11

  • 레이블 없음