-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHowToSet.txt
More file actions
29 lines (28 loc) · 2.85 KB
/
Copy pathHowToSet.txt
File metadata and controls
29 lines (28 loc) · 2.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Node js Download
node -v 로 설치되어있는지 확인
npm init
Express js 다운받기 // npm install express --save
MongoDB 연결하기
models 폴더 생성
user.js 파일 --> 필요한 user data들 생성 및 설정
npm install body-parser --save 로 body-parser 다운
postman 다운 , + 눌러서 post 로 해주고 url 은 http://localhost:5000/register 로, Body 부분 raw JSON 변경 후 입력
nodemon 다운(소스를 변경할때 그것을 감지해서 자동으로 서버를 재시작해주는 tool)-->npm install nodemon --save-dev
nodemon 즉 수정사항을 바로바로 사이트에 적용시키기 위해 실행할 때 npm run start 대신 npm run dev 로 서버를 열어준다(package.json script 에 그렇게 지정했기에)
npm install bcrypt --save (비밀번호 암호화)
npm install jsonwebtoken --save (토큰생성을 위해) / https://www.npmjs.com/package/jsonwebtoken 참조
npm install cookie-parser --save / token 저장을 위해 cookie 생성
npm install react-router-dom --save / React Router Dom 개념 -> page 간 이동의 개념
************************** npm run start 명령어 치기 위해서 폴더경로가 정확히 지정되어있어야 하기에 cd client // cd server 필수 !! *****
npm install axios --save / axios 를 통해서 request,response 요청 응답의 역할을함
npm install http-proxy-middleware --save // server 은 5000번 port, client 는 3000번 port 를 이용하고 있기에 요청,응답에서 제한사항이 있는데 proxy 를 통해서 이를 해결하기 위함
proxy --> https://create-react-app.dev/docs/proxying-api-requests-in-development/ 참조
proxyserver --> 1) 아이피를 임의로 바꿀 수 있다. 2) 보내는 데이터도 임의로 바꿀 수 있다. 3) 방화벽 기능 4) 웹필터 기능 5)캐쉬데이터,공유데이터 제공 기능
npm install concurrently --save / Front 와 Back 서버 둘다 동시에 켜기 위해서 필요한 라이브러리
/// "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" 를 상위 package-json 의 script 부분에 등록함으로써 back 과 front 를 동시에 켤 수있음
/// script 의 dev 부분 npm run start -- prefix client 는 client 안에 있는 package.json 의 start 를 찾아서 켠다는 의미
Ant Design --> 내가 사용할 Css Framework ( 단점 : 사이즈가 매우 큼 기능이 많아서, 장점 : 매우 깔끔하며 쓰기가 굉장히 편하다) // https://ant.design/
프레임워크 사용 --> cd client / npm install antd --save // css Framework 다운
Redux --> React 의 두가지 형태인 props , state 중에 state 를 사용할것인데 Redux 는 이와같은 State 를 관리하는 것
npm install redux react-redux redux-promise redux-thunk --> Redux 를 사용하기 위해 네가지 Dependency 들을 다운
구글에 redux extension 검색 후 , Redux DevTools 확장프로그램 구글에 설치해주기