React Project

사이드 프로젝트를 하게된 계기

Jquery의 한계!!
다루어야 할 데이터가 많고 동적 api 요청이 많은 페이지면 많은 직접적인 DOM 조작으로 인해 코드가 복잡해져 실수를 유발하고 성능 또한 느려졌다.

React는 Component 기반으로 화면을 구성하여 효율적인 코드 분리를 통해 생산성과 재사용성을 높일 수 있기 때문이다. Virtual DOM 또한 매력적으로 느껴진다.
React의 더 자세한 포스팅

다양한 기술스택 경험
React, Spring boot, JPA, Spring Security 등 배워보고 싶은것들을 경험해보고 싶었다.
사용 기술스택 리스트

가구 쇼핑몰

• 인원 : 3명(대학 동기들, 모두 3년차 백엔드 개발자들)
• 담당 역할
  • Spring boot 설정
  • Spring Security 설정 및 인증,권한 처리
  • 메인, 회원가입, 로그인, 회원 관련 정보 view 개발
  • 메인, 회원가입, 로그인, 회원 관련 정보 API 개발

*사용 기술
[Back-End] : Java, Spring boot, Spring Security, JPA(QueryDsl), MySql, Gradle
[Front-End] : React, Jsx, Npm, JWT

사용한 기술스택에대한 내용은 아래 링크에서 확인. 해당 포스트는 화면구성에대한 리뷰
사용 기술스택 리스트

Home

• 메인 화면으로 모든 화면구성을 담당하였다. 로그인 유무에 따라 헤더의 상태변화를 볼 수 있다. npm에서 슬라이더 라이브러리를 다운받아 슬라이더를 정말 손쉽게 만들었다. 상품은 결제,등록날짜 순으로 정렬된 상품이 노출된다.

Login

• 로그인 화면으로 아이디 찾기/비밀번호 찾기 기능이 있다. 로그인 기능은 Spring Security를 사용하였으며 상세 내용은 Spring Security 에서 확인

Login 완료

• 로그인이 완료되면 JWT토큰을 받게된다. 앞으로 해당 JWT토큰을 이용하여서 request를 진행하게된다. 상세 내용 확인->JWT
  

ID 찾기

• 이메일과 휴대폰번호를 이용하여 회원찾기 진행. 조건에 부합하는 회원들 리스트를 나열한다.
• 
• 

PW 찾기

• PW를 복호화 하지못하기 때문에 이메일 본인인증 후, 신규 pw설정으로 기능을 만들었다.
• 

MyPage

• 회원 정보, 주문내역들을 조회한다.
  

회원정보 수정

• 수정버튼을 눌러야 변경이 가능하다. 입력되었던 회원정보들 중 ID를 제외한 모든 정보를 수정 가능하다. 주소는 도로명 주소 API를 활용하였다. 그리고 생년월일, 전화번호, 이메일등 validation처리 함수를 만들어 처리하였다.
  

비밀번호 변경

• 기존 비밀번호 확인이되면 신규 비밀번호 설정을 하게된다. 서버에서는 Bcrypt 암호화하여 저장하게된다.
• 
• 

회원가입

• 아이디 중복확인, 비밀번호, 생년월일, 번호 등 validation 처리 함수를 만들어 처리하였다. 그리고 이메일 인증을 해야만 회원가입이 진행되도록 본인인증 절차를 추가하였다.
• 

회원가입 > 주소 API

• 주소 API부분을 따로 컴포넌트로 만들어 회원가입,회원정보 수정에 사용하였다.
  

회원가입 > 이메일 본인 인증

• 구글 이메일 API를 사용하였으며, 전송받은 이메일에서 인증번호를 입력하는 형태로 만들었다.
• 
• 

마치며

내가 생각하는 React의 장점은 물론 virtual Dom일 수도 있지만, 화면을 Component 단위로 잘쪼개어 재사용성을 높이고, 유지보수를 편하게 하는 것이라고 생각한다.
헤더,푸터,메뉴 등 레이아웃 뿐 아니라 주소 검색 버튼과 API를 컴포넌트하여 회원가입과 회원정보 수정시에 편리하게 잘 사용하였다. 물론 javscript를 사용하더라도 모듈화를 잘 해놓을수도 있지만, facebook은 이런 재사용성이 높은 코딩 스타일을 제안한게 아닐까 싶다.