쇼핑몰 토이 프로젝트 정리 - DAY 1

Redux

리덕스를 사용하게되면 리액트 앱의 상태는 하나의 저장소(store) 안에 있는 객체 트리에 저장된다.

상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐이다.

액션이 상태 트리를 어떻게 변경할지 명시하기 위해 리듀서(reducer)를 작성해야 한다.

 

액션은 특정 행동이 일어날때 어떻게 데이터를 가공하고 처리할 것인지를 구현해야하고 리듀서는 가공된 데이터를 어떻게 변경하여 상태 트리에 업데이트를 할 것인지 명시해야한다.

 

Login

F

Formik과 Yup을 사용해 input validation을 간편하게 처리할 수 있다.

[ dispatch 함수 > redux action에 정의된 로그인 함수 > 서버에 데이터를 보냄 ] 와 같은 방식으로 데이터가 이동된다.

>> axios가 안보여서 한참을 찾았는데 action 정의 페이지에 axios가 있었다.

axios.post로 /login url주소와 email, password 데이터를 보낸다.

 

B

models 폴더에 있는 User은 database에 어떤 형식의 데이터를, 어떻게 저장할 건지 표시한다.

프론트에서 데이터를 받아 가공해야하는 부분은 routes 폴더에 있는 users.js이다.

저장된 비밀번호를 비교해서 틀리면 json을 return 하고

비밀번호가 일치하면 token을 쿠키에 저장한다.

 

 

 

 

 

다음엔 register / logout부터 시작하기

참고 자료

https://ko.redux.js.org/introduction/getting-started/

https://velog.io/@hjkdw95/Formik%EA%B3%BC-Yup%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-input-validation-%EA%B0%84%ED%8E%B8%ED%95%98%EA%B2%8C-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0