[웹] Node.js & React 회원관리 - 1

노드 리액트 기초강의를 들으며, 기본적으로 알아야 할 내용을 정리해보려한다
제공된 강의는 끝까지 완강했고, 내것으로 만들기 위해 정리한다

결과물

페이지는 단 3개뿐
login, register, landing

---

활용한 기술 - Node.Js / mongoose DB / React 정도..
Window10 환경

---

1. Node.js 설치
   설치 자체가 어려운건 아니니 생략!

cmd에 node -v로 설치가 되었는지 확인정도 해줄 필요

2. npm init으로 패키지 생성
   package.json이라는 파일을 생성시켜주기 위한 명령어
   package.json은 npm을 통해 설치된 패키지 목록과 버전을 관리하는 스크립트라고 생각하면 될 것 같다. cmd에

   npm init

이렇게 치면 여러가지 설정을 해주면 된다

• package name : (개인 패키지 명 설정. 디렉토리 명으로 생성되었던 것 같음)
• version: (자동으로 기입되어있음)
• description: (옵션)
• entry point: (자동)
• test command: (옵션)
• git repository: (옵션)
• keywords: (옵션)
• author: (옵션. 작성자명)
• license: (자동)
  이런 항목들이 있는데, 기본값으로 모두 enter치고 넘어가도 된다. 이렇게 만들면 "패키지가 생성됨"

3. VS Code 설치
   대부분 VS Code를 쓰므로 VS Code 설치하여 사용

4. express js설치
   VS Code 내부에 터미널을 이용해서 express js를 설치한다

npm install express --save

5. index.js 파일 생성하여 백엔드 시작지점

http://expressjs.com/en/starter/hello-world.html
express js기본 사용법을 제공해주는 페이지

생성한 index.js에 홈페이지에서 제공해주는 소스를 그대로 가져옴(port는 기본적으로 3000으로 되어있는데, react 기본 포트가 3000이라 서버 포트는 5000으로 함)

package.json 파일의 7번줄에
"start": "node index.js",
해주는 것이 시작점을 지정해준다는 것을 의미함

6. backend 서버 열기

   npm run start

라고 터미널에 치면

이런식의 메세지를 볼 수 있으며,
브라우저의 주소창에 localhost:5000에 접속하면

Hello word!

를 보게 되는데, 이러면 서버 열기에 성공한 것!