(0.0) 리액트.장고.회원가입_ Zero. package.json 설치 버전 가이드 // 특정 버전의 npm 설치 방법

(0.0) 리액트.장고.회원가입_ Zero. package.json 설치 버전 가이드

안녕하세요? 영어쌤 죠니입니다.

- 이번 프로젝트를 진행하며 겪은 어려움이 무엇이 있었냐 하면 역시... 빌드와 개발환경 이 되겠습니다.
- 만들고 기본 웹 코딩이라면 모두들 크게 어려움이 없을 것 입니다.
- 하지만 웹 뿐만아니라 안드로이드, 자바 등을 통해 무언가를 만들다 보면 버전 문제는 항상 존재합니다. 

- 결국 이런 문제를 겪지 않아도 되는 완벽한 것을 만드는 것이 저의 목표이기도 합니다.

- 서론은 이쯤 해 두고 이번 인증 및 회원가입 튜토리얼을 완벽이 끝마치기 위해 설치해야 하는 dependencies 에 대해 기술하고 또한 설치법도 써 놓을 것 입니다.

---

(1)  특정 버전의 npm을 설치하면 어떻게 해야 하나요?

- 우선 기본적인 npm 설치법은 다음과 같습니다.
- 다음은 webpack 하나만을 설치할 때의 명령어 입니다.

# example
$ npm install webpack

- 다중 설치(여러개를 한번에) 방법

$ npm i webpack webpack-cli

- 특정 버전 설치

$ npm i webpack@4.29.0

- 위와 같이 [설치할 패키지]@[버전] 을 입력하면 해당 버전의 패키지를 설치하게 됩니다.

- 다음은 이번 리액트-장고 프로젝트의 권장 패키지 설치 버전을 명시하겠습니다.

---

(2) 리액트, 파이썬-장고를 통한 회원가입 구현하기를 위한 패키지 버전

# package.json

{
  "name": "lead-manager-react-django",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./leadmanager/frontend/src/index.js --output ./leadmanager/frontend/static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-alert": "^5.1.0",
    "react-alert-template-basic": "^1.0.0",
    "react-dom": "^16.8.3",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
    "react-transition-group": "^2.6.0",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

- 처음 접하시는 분들께선 위와 같이 명시하면 구분하기 조금 어려웁을 알기에 다시 분류하겠습니다.

- 위와  같은 패키지들을 설치해 주어야 합니다.

- 다음은 편의를 시간 절약을 위해 설치 명령어를 미리 제공해 드립니다.

---

(3) 설치 명령어

$ npm i -D webpack@4.29.0 webpack-cli@3.2.1

$ npm i -D @babel/core@7.2.2 babel-loader@8.0.5 @babel/preset-react@7.0.0 babel-plugin-transform-class-properties@6.24.1

$ npm i react@16.7.0 react-dom@16.7.0 prop-types@15.6.2

$ npm i -D @babel/preset-env@7.3.1

$ npm i react-router-dom@4.3.1

$ npm i redux@4.0.1 react-redux@6.0.0 redux-thunk@2.3.0 redux-devtools-extension@2.13.7

$ npm i axios@0.18.0

- 이상입니다.

- 이후 더 설치해야 할 것들을 정리하면 추가 해 놓겠습니다.

감사합니다.