[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'은(는) 내부 또는 외부 명령, 실행할 수 있는..
[React, FrontEnd] 가계부 웹 사이트 프로젝트 일지-1. 대시보드 만들기
·
웹 프로젝트/👨‍👨‍👧‍👧소셜 가계부
대략적인 구상도 (구현 전) 완벽하게 똑같지 않더라도 대략 이런 식으로 구현하려고 생각 중이다. 구현 중에 많이 달라질 것 같기는 하다. (구현 후) 최종 구현 이미지는 초기와 완전히 달라졌다. 참고한 UI 소스가 마음에 들어서 거의 그대로 따라갔다. 색상 팔레트 출처: https://www.design-seeds.com/ Design Seeds for all who love color | inspiration & color palettes www.design-seeds.com 바이올렛 베이스의 웹 사이트를 만들고 싶어서 위 색상과 인터넷에서 서칭한 여러 색깔을 사용했다. 구현 UI의 기본 틀은 아래 동영상을 따라하며 구성했고, 바꾸고 싶은 부분은 따로 커스텀했다. styled-components 사용 ..