리액트 심화주차 개인과제

며칠전 그룹아티스트 팬레터함을 만들었는데 거기서 더 나아가 인증시스템을 적용시킨 서비스로 발전시켜 본다.

상세페이지로 가면 팬레터를 누구나 다 수정, 삭제할 수 있었는데 본인이 작성한 팬레터에서만 수정, 삭제가 가능하도록 구현해 볼 것이다. 그리고 로그인을 해야만 팬레터를 작성할 수 있는 화면으로 진입이 가능하게 하고, 프로필의 이미지, 닉네임을 변경할 수 있는 기능을 구현할 것이다.

팬레터 CRUD를 위한 API통신은 json-server를 이용
인증과 프로필관리를 위한 API통신은 제공된 jwt인증서버를 이용
fetch API 대신 axios를 이용
Redux 사용시 Redux Toolkit 이용

일단, 기존의 일반 redux로 구현한 것을 redux-toolkit으로 리팩토링 해보았다.
configStore.js에 아래와 같이 작성한 후

createSlice를 이용하면 Action value, Action Creator, Reducer를 각각 만들어 줄 필요가 없다. fanletterSlice 리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서 동시에 Action Creator가 된다. 그리고 Action Value까지 함수의 이름을 따서 자동으로 만들어진다.

=> reducer는 configStore에 등록하기 위해 export default하고, Action Creator는 컴포넌트에 사용하기 위해 export한다.

다음은 로그인 화면 UI작업을 진행했다. 로그인, 회원가입 UI를 만든 후 로그인창에서 회원가입 버튼을 클릭하면 회원가입창으로, 회원가입창에서 로그인 버튼을 누르면 로그인창으로 토글링 되도록 구현했다.

redux toolkit을 처음 적용해봐서 낯설었지만 구현하고 나니 확실히 일반 redux보다 코드가 간결해지고 전역관리가 쉬워서 얼른 익숙해져야겠다는 생각이 들었다. 내일도 이어서 해보는걸로,, 화이팅🔥🔥🔥