페이지를 만들면서, 방대한 자료들을 데이터베이스 없이 관리하는건 사실상 불가능 인 것 같아서 몽고DB를 설치하기로 했다.
먼저 서버구축 부터,
express모듈을 가져와서, app 이라는 변수에 express를 담는 코드를 적어준다. clinet부분을 3000포트로 설정해서, 서버는 4000포트로 할당했다.
클라이언트와 서버 부분의 포트가 달라 생기는 CORS이슈 방지를 위해서 프록시를 설정해준 모습.
클라이언트와 서버를 동시에 실행하기 위해서, concurrently를 설치해 "dev"명령어로 처리해준 모습.
몽고DB 연결 후, 우선은 boiler-plate강의 복습할겸, 로그인과 회원가입을 위한 스키마를 생성했다.
userSchema를 "User"라는 모델로 감싸준후. User라는 변수를 다른 곳에서 모듈로 사용할 수 있게함.
여기서 잠시 loginPage를 설명하기 위해서, Redux를 정리해보자.
(참조:https://youtu.be/dJC_uAR7d60)
Redux: State를 관리 하는 것
State: 리액트에는 props(부모component에서 자식component로 데이터 전달)와 state 두 종류의 데이터가 있는데, props관계가 아닌, 한 component안에서 데이터를 전달할 때, 데이터를 수정하거나 저장할 때, state을 쓴다(객체).
이 때, redux가 있으면 변경된 내용(action)을 여러 component를 타고 올라갈 필요 없이 store에 저장해 수고를 덜 수 있다.
-Redux의 데이터 flow-
dispatch(Action)를 이용해 Reducer로 보냄
Reducer: 기존 state가 Action을 조합해서 다음 state를 리턴해주는 것
Action : 무엇이 일어났는지 설명하는 객체
dispatch: Action을 발생시키는 함수
먼저, 입력한 Email,Password정보를 loginUser라는 Action에 담을 것이다.
이 정보들을 서버에 전송하고, 응답받은 데이터를 request에 저장한다. 그럼 위로 올라가서, dispatch({login_user라는 type, 응답받은내용인 payload}) 가 있으니, dispatch실행해 reducer에 데이터보낸후, payload에 loginSuccess가 true면 "/"로 보내겠다는 것이다.
reducer다. nextState return을 위해서, 기존 state와 action을 인자로 받고있다.
action.payload에 loginSuccess:true, userId가 들어있음을 확인할 수 있다.(저 user가 정확히 어디서 나온지는 잘 모르겠다. reducer.js에서 user를 user_reducer로부터 import 해 오는데 안보인다...흠)
이는 저 json형식으로 return해줬기 때문이다.
.
.
.
다음에는 쿠키생성, 회원가입 부분을 정리하면서, 로그아웃을 구현해야겠다.
