React & Nodejs & MongoDB - Blog Setting & Login & Register (프런트 + 백엔드)

github.com/jaewonhimnae/boilerplate-mern-stack

jaewonhimnae/boilerplate-mern-stack

 

 

npm init

npm i express --save

npm i mongoose@5.4.20 --save

mongodb+srv://admin:1234@simpleblog.uhhst.mongodb.net/myFirstDatabase?retryWrites=true&w=majority

여기에서 id_rsa, id_ras.pub이 없다면  ssh가 없는것이다. 

 

 

docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh

Connecting to GitHub with SSH - GitHub Docs

ssh-keygen -t ed25519 -C "your_email@example.com"

eval "$(ssh-agent -s)"

ssh-add -K ~/.ssh/id_ed25519

 pbcopy < ~/.ssh/id_ed25519.pub

 

들어가서 private key number 복사해서 본인 깃허브 프로필 -> setting -> SSH -> new SSH key -> 붙여넣기

 

 npm i body-parser --save //설치
 npm i nodemon --save-dev // 설치 (수정시 자동반영되어 서버 끌 일 없음)
 

package.json 수정

 "scripts": {
    "start": "node index.js",
    "backend" : "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
    
  },

run 실행시

npm run backend

 

 

비밀번호 암호화

npm i bcrypt --save

www.npmjs.com/package/bcrypt

bcrypt

 

 

인스턴스 메서드를 만들어서 this를 사용하는 경우 function 키워드를 써줘야 한다.

그래야 자신이 속한 객체, 여기서는 this가 userSchema 도큐먼트를 가르킨다. 

 

즉, 화살표 함수랑 일반 함수에서 this의 바인딩 차이점이 있다

(Arrow functions explicitly prevent binding this, so this method will not have access to the document and the above example wil not work!)

 

milugarcito.tistory.com/512

 

 

 

npm i jsonwebtoken --save // token

www.npmjs.com/package/jsonwebtoken

jsonwebtoken

쿠키 파서 깔기

npm i cookie-parser --save

 

React client 쪽에 깔기 & es7 확장자 설치하기 (rcc / rfce)

npx create-react-app .

npm i react-router-dom --save
npm i axios --save

App.js 에

import { BrowerRouter as Router, Switch, Route, Link } from "react-router-dom"; // 추가


<Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <hr />

        {/*
          A <Switch> looks through all its children <Route>
          elements and renders the first one whose path
          matches the current URL. Use a <Switch> any time
          you have multiple routes, but you want only one
          of them to render at a time
        */}
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
    
    function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

reactrouter.com/web/example/basic

React Router: Declarative Routing for React

create-react-app.dev/docs/proxying-api-requests-in-development

Proxying API Requests in Development | Create React App

npm install http-proxy-middleware --save // client 쪽

ant.design/

Ant Design - The world's second most popular React UI framework

React CSS FrameWork -> Ant Design 설치하기

npm i antd --save

 

Redux 설치하기 (redux-promise & redux-thunk => 리덕스를 조금 더 잘 사용할 수 있게끔 도와주는 middleware 이다)

npm i redux react-redux redux-promise redux-thunk --save // client

chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd 

Redux DevTools