Node JS , React 를 이용한 Boiler-plate 구현하기 - Client Part

클라이언트 구현 

LoginPage Part

Front end Part

 

React의 userState를 사용하여 Email, Password를 받을 수 있도록 함.

useDispatch를 React-redux에서 import 해서 redux store에 있는 action에 연결함.

(useDispatch function은 redux store에 설정된 action에 대한 dispatch를 연결하는 hook으로써, 실제 updateExampleProfile이라는 action을 연결할 수 있도록 선언해줍니다. (관련된 부분은 상단에 props내의 action을 사용할 때와 동일합니다.)

withRouter를 import 하여 페이지 history를 push 할 수 있도록 함.

 

Lading Page Part

Register Page Part - 1

Register Page part - 2

 

useState를 사용하여 각각에 맞는 개인정보를 입력받을 수 있도록 적용 

버튼이 클릭됐을 때 작동되는 기능(Handler)을 구현

dispatch가 정상적으로 실행됐을 때 회원가입이 완료가 되었으므로 /login 화면으로 보내줌.

 

Register Page Part - 3

-각각의 버튼에 맞는 기능을 CSS, HTML으로 구현함

 버튼에 맞는 value 값과 버튼이 클릭됐을 때 실행될 Handler 연결

 

 

Login Page

Register Page

 

느낀 점

Node Js와 React Js를 동시에 사용해서 회원 가입을 할 수 있는 페이지를 만드는 프로젝트를  진행했다. 인프런에서  좋은 강의가 있길래 신청하게 되었고 난이도는 있었지만 강의를 따라가면서 모르는 것을 스스로 해결하면서 접근하는 과정이 의미가 있었다.

Redux와 React hook 등 리액트의 라이브러리들을 사용할 수 있어서 많은 공부가 되었던 것 같고 CORS(교차 출처 리소스 공유)에 대해서도 알지 못했는데 3000 port와 5000 port처럼 다른 port를  Proxy 서버에서 변환하여 문제를 해결하는 것 등 새로운 것을 알게 되어 좋았다.  (Proxy는 방화벽 기능, 웹 필터 기능, 캐쉬 데이터 공유, 데이터 공유 기능을 가지고 있다.)

 

서버 관련 부분에서는 내가 모르는 부분이 많았는데 Node js를 활용하는 부분에 있어서 정말 많은 공부를 할 수 있었다. MongoDB와 Postman을 연결해서 회원가입이 정상적으로 이루어지는지 아니면 실패하는지를 내가 스스로 구현해 볼 수 있어서 자신감이 생기는 공부가 되었다. 그리고 사용자 인증에 관련해서 스키마를 구현해 보게 되었고, Jwt(json web Token) 라이브러리를 사용해서 Token을 생성해 로그인 관련 부분에 Token을 활용하는 부분이 공부가 되었다. 또한 Password 관련해서는 bycrpt라는 암호화 라이브러리를 사용해서 암호화를 진행했는데 기존 비밀번호화 암호화된 암호를 비교해서 로그인을 처리하는 것이 공부가 되었다.

 

끝으로 이 강의를 통해서 많은 라이브러리의 사용법을 조금이나마 익히게 되서 좋은 경험이 되었다.

boiler-plate를 구현하면서 사용한 것이 엄청 많은데 전부 설명할 정도로 이해하지 못해서 아쉽다. 그래도 대표적으로 Redux , React hook,Antd CSS FrameWork , Router React Dom , Axios , body-parser, nodemon , Bcrypt 등 을 공부하게 되어서 정말 좋았다.