(React) 개인 프로젝트 간단 소개 (ft. 로그인 기능 구현)

어제부터 이제 본격적으로 개인적으로 하던 프로젝트를 리액트로 옮기고 있는데, 이쯤되서 간단하게 한 번 정리를 해볼까 합니다.

사실 프로젝트라고 뭐가 있는 건 아니고... 그냥 게시판이나 로그인 기능 등을 SPA 로 구현해 놓은 것인데, 기본적인 틀을 보는데는 나쁘지 않을 것 같아서 소개를 해봅니다.

일단 리액트 게시판이니까 프론트 부터 정리를 해보겠습니다.
서버는 추후에 node 게시판에 업로드 하겠습니다.

1. File Structure

public/ index.html
src/ actions/
     reducers/
     configureStore.js
     components/     Nav / nav.js
                                      nav.less
                                      nav.css
                             Alert / alert.js
                                          ...
     routes          / Login / login.js
                                       login.less
                                       login.css
     
     index.js

action 과 store, reducer 는 redux 의 구조이므로 뒤에서 보고, 
크게 components, routes, index.js 세개로 이루어져 있다고 생각하시면 되겠습니다.

components 에는 Nav, Alert, Counter 등 작은  조각(?) 단위로, 재사용성이 높은 것들을 넣어두고, 
routes 에는 login, profile, main 등 페이지 단위, 라우팅 단위로 구성을 했습니다.

아직 여기에 대해서 깊은 생각이 있는 것은 아닌데, 약간 상식적으로도 관심사의 분리에 따라, 관련 파일이 JS, CSS, img 뭐가 되었던 그렇게 모아주는 것이 찾기도 쉽고, 유지 보수 측면에서도 쉬울 것 같다는 생각이 들어서... 그렇게 짜보았습니다.

즉, route 쪽은 container 와 비슷한 느낌으로 로직과 틀을 담당하지만, 기능의 단위 혹은 라우팅 단위로 표현을 했고, 개별 종속적인 컴포넌트 들은 추가로 component 의 하위 폴더로 조직을 했습니다.

2. Dependencies

Configuration : react-create-app (webpack, babel)
View : react
Data-binding : redux
Ajax : Axios, redux-thunk
Route : react-router
Log : redux-logger
Lint: eslint-plugin-react (atom 패키지)

아직 이렇다 할 기능이 있는 프로젝트가 아니어서 뭔가 많이 없는데, 아마 기본적인 것들은 있지 않나 싶습니다. 

3. 로그인 기능 구현

그래도 만든 것 중에 제일 어려워 보이는 ... 게 로그인 기능이라 이거를 좀 자세히 설명하겠습니다.

---

< Login component >

먼저 JSX 부분은 아래와 같습니다. 
간단하게 Email, Password 파트 input 두고, button 을 눌러서 혹은 onkeydown 에서 13번 코드, 즉 엔터를 눌렀을 때 로그인 기능이 구현될 수 있도록 설정해놓았습니다.

(onkeydown 의 entersubmit 부분이 keycode == 13 ? 으로 this.login 을 실행하는 내용입니다)

(className 이 많아보이는 듯한 이유는 기존에 bootstrap 쓰던 거를 그냥 그대로 가져와서 그렇구요. react-bootstrap을 배워야 하나 말아야 하나 고민하고 있습니다.)

input value 값에는 controlled 방식을 써서, onChange 가 발생할 때, 변경된 값을 this.state 에 저장되고, 그 값을 다시 input value 에 할당하도록 해두었습니다.
이를 통해서 추후에 input 값을 가져오기 편하게 되었습니다!

그리고 맨 윗부분에 있는 redirect 는, 아래처럼 reducer 의 store이자 state를 this.props 로 가져온 후, user 가 있을 경우 redirect를 리턴, 없을 경우 로그인 페이지 유지를 로직으로 구현해 놓았습니다.

그리고 유저가 로그인을 하면! 바로 이 부분이 실행이 됩니다.

configureStore 파일에서 thunk middleware 를 적용해서 
state 를 this.props 로 받을 경우, dispatch 를 쓸 수 있게 되었는데요.

여튼 login 이라는 thunk 를 action creator 쪽에서 받아와, 그거를 dispatch 합니다.
여기서 하나 문제가 있는데, 이게 로직 흐름 상에서 함수를 여러번 호출하다보니까 이름이 많이 필요한데, 그러다보니 getLogin 같이 괴랄한 이름도 등장을 하였습니다... 

여기까지가 login.js 컴포넌트 부분이었구요.

---

< action & reducer>

아까 dispatch 를 했던 부분이 아래를 import 해서 보냈던 것입니다.

기본 action creator 처럼 '액션 객체'를 반환하는 것이 아니라, dispatch 를 인자로 갖는 함수를 반환하고 있습니다. 이게 thunk middleware 에서 처리를 해주는 부분인데요.

dispatch 를 넘겨받아서 requestLogin 이라는 액션을 보내서 '로그인 요청' 이 발생했다는 정보를 reducer 에 전해줍니다.

그러면 로그인 요청 중이라는 정보를 store 에 저장시키고, 바로 axios 를 통해 서버로 post 요청을 보냅니다. 그리고 받으면 다시 receiveLogin 이라는 액션을 보내서, 실질 정보를 store 에 저장시킵니다.

그러면 이제 다시 한바퀴 돌아서, 맨 처음 Login component 의 props 로 store 의 로그인 정보가 넘어가고, <Redirect > 가 반환되면서 페이지 이동까지 완료하게 됩니다.

사실상 그냥 redux 를 설명한 것 같은데 ...ㅋㅋㅋㅋ
만들어 보면서 진짜로 무슨 말을 했던 건지 이해를 할 수 있었던 것 같습니다.

그리고 사실 기존에도 session 을 따로 두지 않고, localstorage 에 간단한 계정 정보를 두고, jwt 로 인증을 진행했었는데, redux 의 store 에 token 을 두는 게 안전한지 아닌지 아직은 잘 모르겠네요.
크롬 의 console 창으로도 store 내용을 확인 할수는 없는거 같던데, 그러면 내부 로직 외에는 접근 방법이 없는 것 같기도 하고 그런 점에서는 localstorage 보다는 안전한 거 같기는 한데...

더 찾아보고 관련된 내용을 알게 되면 추가로 내용 올리겠습니다 ㅎㅎ

여기까지 별거 없는 간단한 프로젝트 소개였습니다.