따라하면서 배우는 노드 리액스 강의 노트
1강
•
npm init
•
npm install express --save
•
공홈가서 기초 코드 복사
•
"scripts": { "start": "node index.js" } 추가
•
npm run start
2강
•
몽고 db 회원가입
•
몽고 db 공홈에서 클러스터 만들기
◦
클라우드 상에서 만드는것
◦
싱가포르 프리 티어
◦
이름은 맘대로
•
유저 만들기
◦
CONNECT 눌러서 유저 생성
◦
connect your application
◦
연결 코드 복사
•
npm install mongoose --save
•
몽고 db 연결 코드 작성
◦
password 랑 dbname 잘 치환
◦
use~ 머시기들 쓰고
◦
then, catch로 확인
•
Collections 탭에서 데이터 확인 가능
3강
•
Model, Schema 만들기
•
user.js 파일 참고
4강
•
까먹고 안적은듯
5강
•
라이브러리 파일은 빼고 올린다ㅏ
•
다시 npm install 하면 설치 됨
•
git add .
•
git status
•
git rm --cached node_modules -r
•
.gitignore 파일만들고
•
git commit
6강
•
깃허브에서 원격 리파지토리 만들어
•
안전하게 통신하기 위해서 ssh를 연결해서 사용
•
ssh 설정 되어있는지 확인
◦
ls -a ~/.ssh
◦
id_ras, id_ras.pub 있는지 확인
•
git bash
◦
◦
eval $(ssh-agent -s)
◦
ssh-add /d/Dev/Projects/JsStudy/Tave/.ssh/id_rsa
◦
clip < ~/.ssh/id_rsa.pub
◦
깃 설정에 퍼블릭키 추가
•
git remote add origin https://github.com/Skyrich2000/boiler-plate-test.git
•
git branch -M master
•
git push -u origin master
7강
•
body 데이터를 parse 해서 req.body로 출력
◦
npm install body-parser --save
◦
const bodyParser = require('body-parser')
◦
app.use(bodyParser.urlencoded({extended: true})); //url 인식
◦
app.use(bodyParser.json()); //json 입력 인식
◦
이제 req.body 로 client의 정보를 받을수있다.
•
Register Route 만들기
◦
req를 db로 넘겨주고 받은값을 res로 넘겨주면됨
•
DB 다루기
◦
const { User } = require("./models/user")
◦
const user = new User(req.body) //User instance 생성
◦
user.save() //db 저장
•
Client 부분을 만들어줄 PostMan 다운로드
◦
POST 방식
◦
body / raw / json
◦
db에 들어갈 내용 입력 - 다 입력하지 않아도 됨
◦
Send 하면 success: true 뜸
app.use의 정체res.josn / res.status(200) 정체
8강
•
nodemon : 서버 실시간 업데이트
•
npm install nodemon --save-dev
•
"backend": "nodemon index.js" 추가
•
npm run backend
9강
•
git 에 올라가면 안되는 변수는 따로 파일로 빼놓고 gitignore을 써서 가릴것
•
depoly 하는 서비스에 따라서 변수을 따로 설정해주는 경우가 있어 처리해줘야함
•
환경 변수 process.env.NODE_ENV 를 사용
•
key.js / dev.js / prod.js 참고
•
git 업로드
10강
•
비밀번호를 암호화 해서 db에 저장
•
npm install bcrypt --save
•
mongoose의 pre 함수를 사용
◦
userSchema.pre('save', f => f())
◦
save 되기전에 먼저 처리될것
•
bcrypt 의 공식 doc 확인
◦
salt를 이용한 암호화 코드 복사
◦
const saltRuonds = 10; // salt가 몇글자인지 정함
◦
꼭 next()를 통해서 원래 함수로 넘어가야함
•
user.isModified('password') // 변경될때
11강
•
로그인 과정
◦
요청된 이메일을 DB에서 있는지 찾는다.
◦
비밀번호가 맞는지 확인
◦
토큰 생성하기
•
스키마에 함수 만드는법 methods.함수이름 = function() {}
◦
comparePassword 함수를 만든다.
•
비밀번호 비교 bcrypt.compare
12강
•
•
스키마에 generateToken 함수 만듬
◦
토큰은 user._id + secretToken 으로 만들어져있는 문자열
◦
토큰을 생성해서 db에 저장
•
생성된 토큰을 브라우저에 저장해야댐 : 쿠키 or 로컬스토리지
•
쿠키에 저장하는 방법
◦
npm install cookie-parser --save
◦
res.cookie("x_auth", user.token)
13강
•
auth 기능 : 로그인된 유효한 유저인지 확인하는 기능
•
db에 있는 token이랑 쿠키에있는 token이랑 비교
•
쿠키에 있는 token에서 user._id 값을 찾아냄
◦
req.coookies.x_auth
◦
findByToken 함수 만든다.
◦
이떄 statics으로 만들어야함
◦
jwt.verify(token, 'secretToken', function(err, decoded) {})
•
db에서 해당 user._id의 토큰값이 일치하는지 확인
•
auth 라는 미들웨어를 만들어서 거기서 토크 값 확인
그냥 바로 token을 비교하면 안되는것인가?statics이랑 methods 차이점이 뭐지?
14강
•
로그아웃 하는법 : 토큰을 지워주면 됨
15강
•
리액트 : 페이스북에서 만든 라이브러리
•
컴포넌트로 이루어짐
•
Real DOM / Virtaul DOM
◦
Virtaul DOM에서 Snapshot을 찍어두고 바뀐부분만 Real DOM에 적용
16강
•
Babel : 자바스크립트 문법을 구형 브라우저에서 돌수있게 변환시켜줌
•
Webpack : 웹개발이 점점 복잡해짐 -> bundle로 묶어줌
•
react 설치
◦
npx create-react-app .
17강
•
npm vs npx
◦
npm : node package manager
◦
따로 -g 안하면 local에 다운받음
◦
npx하면 온라인에있는 node repository를 그대로 쓴다..?
◦
disk space를 낭비 하지 않음
•
원래는 npm install -g create-react-app 이였는데
•
npx create-react-app 하면 다운로드 없이 실행 시켜준다!
18강
•
간단하게 구조만 살펴봄
•
webpack 이 src를 관리해줌
◦
이미지나 그런건 왠만하면 src에 넣어서 webpack의 기능이 작용할수있게
19강
•
boiler-plate 구조대로 뼈대 폴더/파일들 만들었음
20강
•
react-router-dom으로 페이지 이동함
◦
npm install react-router-dom --save
◦
여기있는 코드중 example.js 부분을 그대로 복사해서 App.js에 붙여넣기
◦
그리고 npm run start로 실행
◦
작동확인
•
Switch 부분 빼고 다 삭제
•
컴포넌트를 불러온다
◦
import 컴포넌트이름 from 페이지 위치
•
라우터에 컴포넌트 연결
<Route exact path="/">
<LandingPage />
</Route>
<Route exact path="/" component={LandingPage} />
Plain Text
복사
21강
•
React JS 부분에서 Request 보낼떄 AXIOS 를 씀
◦
JQuery에서 Ajax 같은거
◦
npm install axios --save
•
Landingpage 가서 테스트용으로 request 보내보자
import React, { useEffect } from 'react'
import axios from 'axios'
useEffect(() => {
axios.get('/api/hello')
.then(res => console.log(res))
}, [])
Plain Text
복사
•
CORS 오류가 발생!
22강
•
CORS : 서로 다른 도메인은 CORS의 보호 없이는 통신 불가능
•
Proxy라는걸 써서 해결할것임
•
◦
npm install http-proxy-middleware --save
◦
seroutProxy.js 만들어서 코드 복사
◦
console 창에 출력되는거 확인
https://brunch.co.kr/@adrenalinee31/1 참고
23강
•
proxy 가 무엇인지 알아보자
•
유저랑 인터넷 사이에 존재하는것
◦
아이피를 임의로 바꿈
◦
데이터도 임의로 바꿈
◦
방화벽 기능
◦
웹 필터 기능
◦
캐쉬 데이터, 공유 데이터 제공 기능
•
쓰는 이유
◦
인터넷 접근 제한 / 빠른 속도 / 보안 등
24강
•
프론트와 백서버 한번에 켜기
•
npm install concurrently --save
•
"dev": "concurrently "npm run backend" "npm run start --prefix ../client""
25강
•
css framework
◦
Material UI
◦
Reacct Bootstrap
◦
Semantic UI
◦
Ant Design <- 이거 쓸거임
◦
Materialize
•
npm install antd --save
26강
•
Redux : 상태 관리 라이브러리
•
Props
◦
properties
◦
부모-자식 컴포넌트 간에 변수를 주고받을때
◦
부모->자식만 가능
◦
자식이 받은 변수는 바꾸지 못함 immutable
<ChatMessages
messages={messages}
currentMember={currentMember}
/>
Plain Text
복사
•
State
◦
컴포넌트 내부에서 변수 공유
◦
변수가 바뀔수있음 mutable
◦
바뀌면 rerender 된다.
state = {
message: '',
attachFile; undefined,
openMenu: false,
}
Plain Text
복사
•
Store: 글로벌 변수같은 느낌
•
Data Flow : Component -> ACTION -> REDUCER -> STORE -> Component
◦
Action: 객체형식으로 무엇을할지 미리 정해놓고 씀
◦
Reducer: 실제로 행동이 일어나는곳인듯
27강
•
npm install redux react-redux redux-promise redux-thunk --save
•
redux-promis redux-thunk
◦
ACTION 이 무조건 객체 형식만 받음
◦
Promise나 Function도 쓸수있게 해줌
•
redux 쓰는법
◦
import { Provider } from 'react-redux';
◦
App 컴포넌트를 Provider로 감싸주면 됨
•
미들웨어 쓰는법
◦
const createStorewithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)
◦
Provider 컴포넌트에 store={createStorewithMiddleware()} 속성 추가
•
_reducer 에 index.js 추가
◦
combineReducers : reducers 여러개를 묶어서 root 화
•
_reducer 폴더 import
•
크롬 확장 프로그램 설치
◦
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() store 인자로 넘겨
28강
•
Functional Component
◦
원래는 안됐었는데 hook 업데이트하고 엄청 편리해져서 이거 씀
•
lifecycle
1.
constructor : 변수 설정 생성자같은거 -> useState 사용
2.
render : 화면에 dom으로 출력
3.
componentDidMount, componentDidUpdate, componentDidUnmount : 데이터 통신부분 -> useEffect 사용
29강 / 30강
•
Formik, Yup 라이브러리로 다이나믹 하게 가능
•
LandingPage 보기좋게 살짝 수정
•
LoginPage에 폼 추가
•
react hook 으로 이메일/비밀번호 state를 만든다.
◦
onchange 되면 value를 바꿔줌
•
submit을 위한 핸들러 추가
•
Axios 를 그냥 쓰지 않고 action(dispatch) 를 쓸것임
•
props.history.push('/') 이걸로 페이지 이동
◦
import { withRouter } from 'react-router-dom'
◦
export default withRouter(RegisterPage)
◦
history 가 react-router-dom 을 쓰는거라 이거 해줘야댐
31강
•
RegisterPage 만들기
32강
•
LandingPage에 로그아웃 버튼 만들어서 redux 안쓰고 그냥 axios 때려서 로그아웃 시킴
33강
•
로그인 회원만 접근 가능한 페이지에 대한 컨트롤
•
HOC : component를 받아서 새로운 component 를 리턴하는놈
•
component 전에 HOC에 보내서 로그인 유무를 서버로부터 받는다 | 미들웨어 같은 느낌
•
HOC 폴더에 auth.js 만들어
•
HOC 적용하는 법 : App.js 에서 다른 컴포넌트 호출 전에 Auth로 묶어
