[React/JavaScript/Nodejs/Express] 채팅 기능을 포함한 가계부 프론트 웹 프로젝트

⭐️ 프로젝트 소개

기존 가계부에 친구 초대, 채팅 기능을 추가한 소셜 가계부 제작 프로젝트

 

 

🎢 개발 기간

2022.03.20 ~ 2022.06.06 (1차)

 

 

⚙️ 개발환경 및 라이브러리

서버를 두지 않고 리액트로만 CRUD를 작업하였으며, 채팅을 위해서는 nodejs와 express + socke.io를 사용하였다.

추가로, 로그인 구현을 위해 스프링 부트와 mysql을 이용했다.

 

 

🚲 동작 방법

1. 인텔리제이 서버 on (서버를 켜지 않을 시 구글 로그인 동작하지 않음)

2. 채팅 서버 on (채팅을 위해 서버를 켜야 함. server 폴더 열고 yarn start)

3. 리액트 서버 on (frontend 폴더를 열고 yarn start)

🚨 'xxx'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 문구가 뜰 경우 yarn install 명령어를 입력해 필요한 라이브러리를 설치한 뒤 yarn start로 서버를 실행시킨다.

 

 

🔮 동작 화면

- 전체 동작

 

- 동작 상세 설명

진입화면

로그인을 하지 않으면 대시보드에 진입할 수 없게 구현하였다.

로그인 방식은 2가지로 구글/페이스북/깃허브 아이디로 로그인하는 간편 로그인(소셜 로그인) 방식, 이메일과 패스워드를 이용해 로그인하는 직접 로그인 방식이 존재한다.

(소셜 로그인 구현 과정은 👉👉 [React & Spring Boot & MySql] 리액트&스프링부트 OAuth2 Google, Facebook, Github 소셜로그인 구현 일지)

만약 회원가입이 되어있지 않다면 모달 하단의 회원가입 링크를 눌러 회원가입 페이지로 이동할 수 있다.

🔆 로그인 세부 구현사항

만약 회원가입되지 않은 회원이라면

로그인 실패

 

회원가입된 회원이라면

 

회원가입 화면

로그인과 동일한 모달 안에 회원가입 폼을 만들었다.

사용자가 올바른 값을 이용해 회원가입을 마쳤다면 mysql에 회원정보가 저장되어 추후 로그인에 사용된다.

mysql에 저장된 정보

🔆 회원가입 세부 구현사항

만약 회원가입 필드에 제대로 된 값을 입력하지 않는다면

모든 입력란을 채우지 않은 경우

이메일 주소를 제대로 입력하지 않은 경우

 

 

대시보드

 예산과 수입/지출, 통계, 친구 목록을 전체적으로 보여주는 페이지

구현 중반부 이미지

로그인 후 최종 구현 이미지

마지막 사용자 정보 카드 이외에, 대시보드의 내용은 모두 하드코딩된 상태이다. Your Friends 카드의 목록보기를 누르면 관련 페이지로 넘어갈 수 있게 Link를 등록하였다.

페이지를 넘어가려면 왼쪽의 사이드메뉴를 클릭하면 된다.

 

🚗애니메이션

 

진입 시

 

마우스 오버 시

 

 

가계부 페이지

 

1. 예산 수정

 

2. 가정부 수입/지출 내역 CRUD

가계부 수입/ 지출 내역을 입력하거나 수정하기 위해서 모달을 이용하였다.

 

- 가정부 수입/지출 내역 입력

(+) 버튼 클릭 시 수입 지출 내역을 입력할 수 있는 form을 띄운다. 이때 미리 지정해 놓은 데이터 타입이 입력되지 않을 시 경고 문구 출력 및 작성 내용이 submit 되지 않도록 하여, 백엔드에서 데이터 처리가 쉽게 이루어지도록 하였다.

 데이터 수정 및 삭제 진행한 결과는 다음과 같다.

수정 전

수정 후

 

- 가정부 수입/지출 내역 수정

 

- 가정부 수입/지출 내역 삭제

 

3. ocr (흉내내기)

사진을 업로드하면 ocr 판독을 통해 글씨를 인식해 자동으로 지출/소비 분류, 소비내역, 금액을 등록하는 기능을 개발하고 싶었는데 실패하였다. 대신 이미지가 올라가는 이벤트를 감지하여 미리 준비된 내역을 폼에 띄워주는 방법으로 기능을 구현했다.

 

 

채팅 페이지

왼쪽 창에서 채팅목록, 오른쪽 채팅창에서 채팅화면을 보일 수 있도록 화면을 구성하였다.

실제 채팅 화면은 아래와 같다.

 

- 1:1 채팅

1:1 채팅 예시

- 2명 이상 채팅

크롬, 크롬시크릿, 마이크로 엣지 3개의 브라우저로 세 명의 유저가 채팅을 진행하도록 했다. 더 많은 인원이 채팅하는 것도 가능하다.

다대다 채팅 예시

 

 

커뮤니티 페이지

게시글 목록

게시글 등록 폼

상단에서 게시물 목록, 하단에서 게시물 등록을 진행할 수 있고 수정 및 삭제도 가능하도록 구현하였다.

 

- 게시글 CRUD

 

1. 게시글 등록

게시물 등록

2. 게시글 수정

 

3. 게시글 삭제

 

추가) 수정/삭제 권한

수정, 삭제 권한이 없는 유저는 수정, 삭제를 진행하지 못하게 하였다. (내가 작성한 게시글이 아니면 수정, 삭제 불가)

 

 

내 정보 페이지

초기 구현 이미지

 

 

모바일 웹 브라우저를 위한 반응형 web

미디어쿼리를 이용해 화면 크기가 달라질 때의 ui를 따로 작성했다.

크롬 모바일 Samsung Galaxy S20 Utra 기준으로 진행하였다.

 

 

🚩 마무리

프로젝트를 통해 배운 점

- 반복되는 여러 요소를 리액트 컴포넌트로 만들어 중복을 제거하는 방법을 배웠다.

- 리액트를 이용한 CRUD를 구현할 수 있게 되었다.

- 리액트의 다양한 라이브러리를 설치하고 사용하는 방법을 알게 되었다.

- 리액트와 스프링부트를 연동하는 방법을 일부 익혔다. (로그인 부분만)

- node js, express를 이용하여 채팅 서버를 생성하고 여러 사용자가 채팅을 주고받을 수 있게 하는 방법을 배웠다.

- 미디어 쿼리를 통해 웹앱을 제작하는 방식을 일부 체험해 보았다.

- 디자인적으로 다양한 시도를 해볼 수 있었다.(애니메이션, 폰트, 전체 화면설계, 색감 선정 등)

 

아쉬운 점(개선점)

- 서버를 두어 사용자의 정보를 저장해 실제 서비스 가능한 웹 사이트로 만드는 데 실패했다. -> 스프링부트 or node.js를 이용한 서버 개발

- 결과물을 만드는 데 급급해 코드의 중복이 많고 효율이 떨어지는 코드가 다수 존재한다. -> 코드 리팩토링 필요

- 초기 생각했던 기능을 넣지 못 했다. -> 친구 초대, 친구와 챌린지 기능 추가

 

---

관련 포스팅

[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-1. 대시보드 만들기

[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-1. 대시보드 만들기

 

[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-2. 페이지 간 이동 구현 (a href와 Link to의 차이점)

[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-2. 페이지 간 이동 구현 (a href와 Link to의 차이점)

 

[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-3. 달력 페이지 구현

[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-3. 달력 페이지 구현

 

[React & Spring Boot & MySql] 리액트&스프링부트 OAuth2 Google, Facebook, Github 소셜로그인 구현 일지 (스프링 구현x, 리액트 구현o)

[React & Spring Boot & MySql] 리액트&스프링부트 OAuth2 Google, Facebook, Github 소셜로그인 구현 일지 (스프링

 

 

---

소스코드

https://github.com/Yoonyesol/Web-Social-Account-Book.git

GitHub - Yoonyesol/Web-Social-Account-Book