rheehot / boiler-plate

boiler-plate

인프런-따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
boiler plate는 변경없이 반복해서 재사용할 수 있는 저작품을 의미
웹개발에 사용하는 library를 사용하고 개발환경을 구축해두는 것을 말한다.

백엔드 순서

• Node.js, Express.js

  • 1. node-v : node가 이미 존재하는지 확인
  • 2. 존재하지 않는다면 node.js 홈페이지 이동 후 다운로드
  • 3. 프로젝트 폴더 생성 (ex. C:\Users\username\Documents\boiler-plate)
  • 4. npm init : node 프로그램을 시작 명령어, package.json 파일 생성 -> 명령어 입력 후 모두 enter
  • 5. index.js 생성
  • 6. npm install express --save : express js 다운로드 (--save : package.json 안의 dependencies에 저장)
  • 7. hello world example의 내용을 index.js에 저장
  • 8. package.json에서 scripts에서 "start": "node index.js" custom script 등록
  • 9. npm run start : index.js 실행
  • 10. require() : node.js에서 module을 import하기 위해 사용

• MongoDB

  • 1. mongodb 홈페이지
  • 2. cluster 만들기 (free tier), mongodb user 생성(아이디와 비번 기억하기)
  • 3. npm install mongoose --save : mongoose 다운로드(mongodb 편하게 쓸 수 있음)
  • 4. mongoose 설명에서 connect mongodb 참조

• MongoDB Model, Schema

  • 1. user.js 에 schema 생성 mongoose.Schema()
  • 2. mongoose.model()로 schema 등록
  • 3. module.exports() : require() 함수를 사용했을 때 반환 받는 함수

• Git 설치

  • 1. Git : distributed version control
  • 2. git --version : git 설치 확인
  • 3. Git 홈페이지
  • 4. 작업하는 폴더에서 git init : 새로운 git repository 생성 (버전 관리 시작)
  • 5. git status : git 상태 파악
  • 6. git add . : staging area에 등록
  • 7. git commit -m "내용" : git local repository에 올리기
  • 8. .gitignore 생성 후 node_modules 추가

• SSH를 이용해 Github 연결

  • 1. Github : service for Git repositories
  • 2. Github 홈페이지
  • 3. New repository 생성
  • 4. ssh 설정 : 안전하게 통신하기 위해
  • 5. ls ~/.ssh : ssh key 존재 확인
  • 6. Git ssh 홈페이지 windows 기준
  • 7. 이후 생성한 repository에서 나머지 목록 끝까지 만들기

• BodyParser, PostMan, 회원가입

  • 1. body-parser : node.js 모듈, POST request data의 body로부터 파라미터 추출
  • 2. npm install body-parser --save : body-parser 설치
  • 3. postman : request를 확인해야하는데 현재 client가 없어서 postman을 활용
  • 4. postman 홈페이지
  • 5. postman에서 request 후 success:true 확인

• nodemon

  • 1. 소스를 변경할 때 감지해서 자동으로 서버를 재시작해준다.
  • 2. npm install nodemon --save-dev : 설치 (devDependencies에 저장)
  • 3. package.json에서 scripts에서 "backend": "nodemon index.js" custom script 등록
  • 4. npm run backend : 실행

• 비밀정보 관리

  • 1. config 폴더 생성 후 dev.js 생성 -> mongoURI 저장
  • 2. key.js 생성 후 process.env.NODE_ENV(환경변수)에 따라 deploy, local 설정
  • 3. .gitignore에서 보호해야할 정보가 있는 dev.js 추가
  • 4. github 서버에서 dev.js를 볼 수 없다.

• Bcrypt로 비밀번호 암호화

  • 1. 윈도우 cmd를 관리자 모드로 실행
  • 2. npm install --global --production windows-build-tools
  • 3. 멈추면 다시 실행 후 위 명령어를 다시 한번 실행시킨다. (All done! 이 나오면 완료)
  • 4. npm install bcrypt --save : bcrypt 설치
  • 5. bcrypt 홈페이지 참고하여 진행

• 로그인 기능(Bcrypt)

  • 1. npm install jsonwebtoken --save : token 생성을 위해 설치
  • 2. npm install cookie-parser --save : token을 cookie에 저장해주기 위해 설치

• Auth 기능

  • 1. 로그인 유지가 되어있는지나 관리자인지 확인 가능
  • 2. cookie에 저장된 token 복호화
  • 3. user ID를 이용해 DB에서 찾은 후 token 확인으로 일치하면 true, 일치하지 않다면 false

• 로그아웃 기능

  • 1. 로그아웃하려는 user를 DB에서 찾는다.
  • 2. token을 지워준다.

프론트엔드 순서

• React JS

  • 1. library이며 facebook에서 만들어짐.
  • 2. module과 비슷하게 components로 이루어져 재사용성이 뛰어남.
  • 3. virtual DOM : real DOM은 전체 리스트를 다시 reload하는 반면 바뀐 것만 DOM에서 바꿔준다.

• create-react-app

  • 1. Babel : 최신 JS 문법을 지원하지 않는 브라우저들을 위해서 변환시켜줌.
  • 2. Webpack : 많은 module들을 간단하게 만들어준다.
  • 3. client 라는 새로운 폴더 생성후 이동
  • 4. npx create-react-app .
  • 5. npm : node package manager
  • 6. npx 사용 이유
    • 1. 원래는 npm install -g create-react-app 사용해서 global directory에 다운
    • 2. 이제는 npx를 사용한다.
    • 3. npx가 npm registry에서 create-react-app을 찾아서 다운 없이 실행시켜준다
    • 4. disk 메모리 낭비하지 않고 최신 버전 사용 가능의 장점

• 구조

  • 1. public/index.html : 임시 page
  • 2. src/index.js : js entry point
  • 3. public 폴더에 있는 파일들은 오직 public/index.html만 사용
  • 4. src에 js,css 파일을 넣는다.
  • 5. webpack은 src에 있는 파일만 본다.

• React Router Dom

  • 1. 페이지 이동 시에 사용
  • 2. clients 폴더 이동 후 npm install react-router-dom --save 실행
  • 3. react-router-dom 사용법 참조

• Axios

  • 1. jQuery의 AJAX와 비슷한 개념
  • 2. React JS 부분에서 Request를 보낼 때 사용
  • 3. npm install axios --save

• CORS 이슈, PROXY 설정

  • 1. server, client의 port 번호가 달라서 발생.
  • 2. CORS : Cross-Origin Resource Sharing
  • 3. 여러 방법 중에 proxy 설정으로 해결하려고 함
  • 4. Proxy 홈페이지에서 Configuring the Proxy Manually 참조

• Concurrently 이용해 백, 프론트 같이 실행

  • 1. npm install concurrently --save
  • 2. pacage.json에 "dev": "concurrently "npm run backend " "npm run start --prefix client"" 추가

• css framework

  • 1. 여기서는 ant design 사용
  • 2. 홈페이지
  • 3. npm install antd --save
  • 4. client의 index.js에 import "antd/dist/antd.css" 추가

• Redux

  • 1. State 관리
  • 2. flow : action, reducer, store, react component
  • 3. npm install redux react-redux redux-promise redux-thunk --save

• React Hooks

  • 1. Class Component, Functional Component 있었는데 functional이 더 짧고 빠르다.
  • 2. 하지만 life-cycle 같이 class component를 주로 사용했었다.
  • 3. 16.8 부터 hook이 update
  • 4. state -> userState(), componentDidMount() -> useEffect() 등 functional을 더 사용한다.