asroq1 / project_cats Goto Github PK

View Code? Open in Web Editor NEW

8.0 1.0 2.0 4.52 MB

집사님들을 위한 킹냥이 웹앱 😺

HTML 0.47% CSS 0.03% JavaScript 72.02% Java 27.46% Shell 0.02%

project_cats's Introduction

Catchoo

Web App for Cat Lovers. 😺

한글

Built with [React + Redux + Redux-Saga] + [Spring Boot + JPA + MariaDB]

Catchoo Web App

Layout optimized for mobile screen

Functionalities

Track Weight of Your Cats

Measure and record your cat's weight every day to track it in graphs or tables.
Your cat's age is automatically calculated with its birthdate.

Registration Made Easy

Share Your Stories with Other Cat Lovers

Post any stories and photos you want to share with other users.
Whether it be to show off your cat's beauty or to ask questions, this app is here for you!

Tech Stack

Front-end: React + Redux (State Management) + Redux-Saga (Async Actions Management)
Back-end: SpringBoot + MariaDB

General

Implemented RESTful Routes
JWT used to ensure scalability with a potential increase in the number of users.

Front-end

React used to optimize rerendering and app performance.
React-Hooks used to implement states and life cycle methods while using functional components for reusable and simple codes.
React-Router used to manage routes and links.
Redux used to centralize the states and logics of the app and to manage them easily.
Redux-Saga used to manage asynchronous action flows.
Other Tools
- immer to ensure immutability of states.
- Axios to handle HTTP requests based on promises.
- Redux-Persist to maintain states even after page reloads. Root state is purged after logout to ensure security.
- Styled-component to style components without triggering unnecessary rerenders, to store the shared design elements, and to provide dark/light mode options.
- React-Easy-Crop to crop uploaded images.
- React-Slick to create image carousels.
- Recharts to create charts.
- Font-Awesome to use various icons.

Back-End

Java used to develop object based apps, which is easier as it helps keeps the system flexible and extensible.
Spring Framework used to simplify enterprise-level Java development and loose coupling of code by dependency injection and AOP.
Spring Boot used to make development, testing, and deployment more convenient.
Spring Security used to implement authentication, authorization, and protection against common attacks.
JPA(Hibernate) used to manipulate data from database through an object-oriented program and improve productivity.
MariaDB used to avoid data redundancy and data duplication.
Swagger UI is implemented for better communication using APIs with Front-end team.
Other Tools
- JUnit used to write and run repeatable automated tests.
- Bean Validation used to validate user input.
- Lombok used to reduce boilerplate code for model/data objects.
- Apache Commons Lang 3 used to manupulate core classes of Java APIs.

Deployment

Front-end server deployed on Netlify (temporary) and AWS.
Back-end server deployed on AWS

Team Members

This project is being developed by (2) Front-end engineers and (2) Back-end engineers, gathered via Korean developers' online community - OKKY.kr.
Project started on 03/30/21.
Tool decision, task distribution, debugging, etc. discussed every day via Slack. Weekly zoom meetings held for deeper discussion and catch-up.
Front-end: HS, HR
Back-end: HY, SH

project_cats's People

Contributors

Stargazers

Watchers

Forkers

haileykr suethebae

project_cats's Issues

Description

게시글 사진 여러 개 (2개 이상) 추가 기능 구현하기 - 필요시

Progress

백엔드 로직 수정
프론트엔드 연동

Description

소셜 로그인 (카카오) 기능을 구현

Progress

백엔드 기능 구현
프론트 엔드 연동

[선택] 체중 그래프 / 리스트 월별 보기 추가 - 필요시

Description

기록 데이터가 많아짐에 따라, 월별 기록 보기 기능 추가
그래프 라이브러리 자체를 바꿔야 하므로, 필요 시에 구현하도록

Progress

그래프 라이브러리 탐색
월별 보기 기능 추가하기

반려동물에 대한 데이터 엑세스 계층 및 서비스 계층 CRUD 구현과 테스트

Description

반려동물 CRUD 기능을 위한 데이터 엑세스 계층 및 서비스 계층을 구현하고 테스트 코드를 작성한다.

Progress

Spring Data JPA를 활용한 Repository 구현
비즈니스 Service 구현
각 메서드에 대한 테스트 코드 작성

Domain Driven Design 적용: Dto 클래스 작성 및 컨트롤러 적용

Description

Domain Driven Desgin을 적용한다.
현재 Entity 그대로 클라이언트 API로 내리고 있어 불필요한 데이터가 넘어가고 있다.
도메인마다 Dto.Request, Dto.Response를 작성한다.

Progress

클라이언트 팀과 상의하여 필수 데이터와 타입 파악
각 Domain마다 Dto를 작성한다. 이때 Request, Response를 static inner class 로 작성한다.
Dto에 ofEntity() 메서드를 만들어 Service 클래스에서 Entity를 Dto로 쉽게 변경할 수 있도록 만든다.
모든 Service 조회 메서드에서 ofEntity()를 사용하여 리턴하도록 만든다 (리턴 타입 변경)
Controller에서 Request와 Response 객체를 파라미터로 받고 리턴하도록 만든다.

Description

현재 JWT 발행 시 유효기간이 하루인 Access Token만 생성해서 클라이언트에 보내고 있다. 그러나 Access Token이 탈취되었을 때 악용될 위험을 방지하기 위해서 Access Token의 유효기간은 짧게(30분) 잡는 것이 좋다. 그러나 유효시간을 30분으로 할 경우 30분 이후에는 다시 사용자가 재로그인을 해야 한다는 불편함이 있다. 이를 위해 유효기간이 긴 Refresh Token을 Access Token과 함께 발행하여 Access Token이 만료되더라도 Refresh Token이 유효하다면 재로그인할 필요 없이 Access Token을 생성해주도록 만든다.

Progress

영속성 레벨에서 Refresh Token을 어떻게 저장할 지 자료조사
DB 변경
TokenDto에 refresh token 추가
access token 과 refresh token의 유효시간 설정
token 생성 및 검증 로직에 refresh token 관련 코드 추가 (JwtFilter, TokenProvider)

회원기능에 관한 이슈

Description

어떻게 해결해야 할까

Progress

1. 회원가입에서 소셜미디어로 회원가입을 한다면 네이버, 카카오 타입을 어떻게 같이 전해줄 수 있을까
2. 로그인 후 API를 호출할 때마다 헤더에 토큰을 실어보낼 방법

반려동물에 대한 프레젠테이션 계층 CRUD 구현과 테스트

Description

반려동물 CRUD 기능을 위한 프레젠테이션 계층을 구현하고 테스트 코드를 작성한다.

Progress

CatController 및 메서드 구현 (RESTful 하게 메서드 선택)
테스트 코드 작성: MockMvc 를 활용한 Controller 테스트 코드 작성

프론트엔드 - 보안 및 에러 핸들링 강화

Description

보안 및 에러 핸들링 관련 기능을 추가한다.

Progress

XSS 위험 확인
npm 및 yarn packages살펴보고 클린-업
Content Security Policy (CSP) 헤더 확인
query string 위험성 확인
에러 메시지 알림

사용자 설정

Description

사용자의 편의성을 위해 사용자 설정란에서 로그아웃, 다크모드, 사용자, 문의사항 기능을 추가

Progress

야간모드 기능
문의사항 링크
로그아웃 기능

체중 기록 화면 기능

description

체중 기록화면 구현

Progress

고양이를 안고 체중 기록 후 주인 혼자 체중 체크
차이나는 몸무게를 state에 담아서 DB로 전달
펫용 체중계로 고양이 체중 체크
몸무게 기록을 리덕스에서 DB로 전달

프론트와 JWT 연동

Description

프론트엔드 쪽에서 JWT 연동

Progress

JWT토큰 이용 -> 헤더에 accessToken 넣어 API request마다 전달해주는 방식 차용
JWT를 첫 발급받을 때 decode하여 userID만 local storage에 저장 -> 백엔드 API 형식이 userID를 필요로 하고, 현재로써는 API 구성을 바꾸지 않기 위함

게시판 구성

Description

게시판 형태를 구성한다.

1. 게시판 글 목록 (PostList) + 무한스크롤
1. 게시판 글 보기 (PostView) + 댓글
1. 게시판 글 쓰기 (PostWrite) + 사진

Progress

테스팅 시 localhost간의 CORS 문제 해결

Description

테스팅 할 때, localhost:3000와 localhost:8080 사이의 CORS 문제 해결

Progress

CORS설정 확인

Redux-Saga Undefined에러

Current behavior (bug)

로그인 및 회원가입 Request 상황에서 data가 정의되지 않았다고 나오는데 saga의 문제인 거 같으나 확실한 위치를 파악하기 어려움.

Expected behavior (correct)

Request를 한 뒤에 Success나 Failure가 반환되어야 함.

버그 해결 과정은 댓글로 달아주시고, 해결이 완료되었다면 이슈를 닫아주세요.

권한 체크

Description

게시글, 고양이, 기록 등 게시판 R을 제외한 나머지 기능을 할 때 권한을 체크한다.
또한, C 시 Entity에 userId를 직접 지정해주는 것이 아니라 기본으로 로그인한 유저가 들어가도록 변경한다.

Progress

Controller에서 해당 기능 권한 체크하는 로직 추가
Controller.add() 에서 SecurityUtil.getCurrentUserId()를 통해 알아낸 로그인 유저 시퀀스를 파라미터로 넣는다.
Service.save() 파라미터로 userId를 추가한다.

[선택] README 한글 버젼 작성하기

Description

README 한국어로 작성

Progress

한글 버젼 작성하기

GET /api/cats 호출 오류

Current behavior (bug)

현재 GET /api/cats를 호출하면 NPE 가 발생하면서 500으로 응답을 받고 있다. 기록 정보가 아예 없는 고양이일 때 발생한다.

Expected behavior (correct)

기록 정보가 없더라도 기록 정보는 제외하고 고양이 정보를 응답하도록 변경한다.

새로고침 시 상태 유지되지 않아 나타나는 접근 에러

Current behavior (bug)

새로고침 시 리덕스에 저장된 상태가 유지되지 않아, 접근 에러가 뜸.

Expected behavior (correct)

새로고침 이후에도 필요한 상태들이 저장되어 오류가 뜨지 않도록 변경

[필수] 사진 추가 기능

Description

고양이 추가 / 수정 및 게시글 추가 / 수정에 이미지 기능 구현

Progress

고양이 추가 시 이미지 포함 API 완성
게시글 추가 시 이미지 포함 API 완성
고양이 수정 시 이미지 포함 API 완성
게시글 수정 시 이미지 포함 API 완성
고양이 추가 백엔드와 연동
게시글 추가 백엔드와 연동
고양이 수정 백엔드와 연동
게시글 수정 백엔드와 연동

java.sql.SQLException: Column 'cat_id' cannot be null

Current behavior (bug)

고양이 체중 기록 추가(POST /records)가 되지 않고 있다.
에러 로그

2021-04-17 00:58:44.969 ERROR 19754 --- [nio-8080-exec-5] o.h.engine.jdbc.spi.SqlExceptionHelper   : (conn=440) Column 'cat_id' cannot be null
2021-04-17 00:58:44.987 ERROR 19754 --- [nio-8080-exec-5] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.dao.DataIntegrityViolationException: could not execute statement; SQL [n/a]; constraint [null]; nested exception is org.hibernate.exception.ConstraintViolationException: could not execute statement] with root cause

Expected behavior (correct)

POST /records 시 정상적으로 기록 추가가 된다.

스타일링 Cleanup

Description

전체적인 스타일링에서의 통일성을 증진시킨다.

Progress

Media query 및 기본 레이아웃 적용한 Global Container 컴포넌트 생성 및 적용
버튼, 인풋 등 컴포넌트 스타일링 통일 (ex. padding, margin, border-radius)

고양이 추가

Description

고양이 추가 화면 구성

Progress

이미지 포함 모든 데이터 formdata로 묶기
전체적 구현
이미지 크롭 알아보기
스타일링 완성

JWT 토큰에서 username 이외의 다른 값을 꺼낼 때 null이 나오는 문제

Current behavior (bug)

토큰에서 username(email)은 잘 가져오나, 다른 값을 꺼낼 때 null을 리턴하고 있다.

2021-04-20 21:10:57.542  INFO 14332 --- [nio-8080-exec-2] com.pso.cat.jwt.TokenProvider            : claims.getSubject(): [email protected]
2021-04-20 21:10:57.542  INFO 14332 --- [nio-8080-exec-2] com.pso.cat.jwt.JwtFilter                : Security Context에 '[email protected]' 인증 정보를 저장했습니다, uri: /api/posts
2021-04-20 21:10:57.556  INFO 14332 --- [nio-8080-exec-2] com.pso.cat.util.SecurityUtil            : CustomUserDetails의 인스턴스가 맞음.
2021-04-20 21:10:57.556  INFO 14332 --- [nio-8080-exec-2] com.pso.cat.util.SecurityUtil            : springSecurityUser.getId(): null
2021-04-20 21:10:57.556  INFO 14332 --- [nio-8080-exec-2] com.pso.cat.util.SecurityUtil            : null

Expected behavior (correct)

username 이외의 다른 값(userId)를 꺼내 PostService에서 사용한다.

회원가입, 로그인 Request시에 네트워크 에러 발생.

Current behavior (bug)

Request마다 에러 발생

 Error: Network Error
    at createError (http://localhost:3000/static/js/vendors~main.chunk.js:1464

Expected behavior (correct)

정상적인 로그인 및 회원가입이 이루어진 상황에서 Success반환

버그 해결 과정은 댓글로 달아주시고, 해결이 완료되었다면 이슈를 닫아주세요.

댓글 CRUD 구현

Description

댓글 추가, 조회, 수정, 삭제 기능을 구현한다.

Progress

프레젠테이션 계층
비즈니스 계층
영속성 계층

게시글에 대한 프레젠테이션 계층 CRUD 구현

Description

게시글 CRUD 기능을 위한 프레젠테이션 계층을 구현한다.

Progress

PostDto.Request, PostDto.Response, UserDto.WriterResponse 작성
PostController 및 메서드 구현

고양이, 유저, 게시판 사진 추가

Description

이미지 추가 시 파일 형식과 갯수 제한 확인

Progress

파일 형식 확인 (백엔드 팀과 같이!)
갯수 제한 확인

사진 업로드 시 편집

Description

CatAdd, PostWrite컴포넌트에서 사진 업로드할 때 편집하는 기능을 추가한다.

Progress

Crop 가능하도록 처리
백엔드로 넘겨주는 형식 체크

Swagger UI를 활용한 REST API 문서화

Description

Swagger UI 라이브러리를 활용해 REST API 테스트와 문서화를 하고, 협업 효율성을 향상시킨다.

Progress

Swagger 의존 라이브러리 추가
Swagger 설정 파일 추가
Swagger 관련 애노테이션 각 클래스에 추가하여 API 문서화

서버 빌드 실패: org.gradle.api.tasks.TaskExecutionException

Current behavior (bug)

EC2에서 서버 빌드 실패

org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':test'.
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.lambda$executeIfValid$3(ExecuteActionsTaskExecuter.java:186)
        at org.gradle.internal.Try$Failure.ifSuccessfulOrElse(Try.java:268)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeIfValid(ExecuteActionsTaskExecuter.java:184)

로컬에서는 빌드 성공하는데 왜 EC2에서는 실패할까?

Expected behavior (correct)

서버 빌드 성공

게시판에 대한 데이터 엑세스 계층 및 서비스 계층 CRUD 구현

Description

게시판 CRUD 기능을 위한 데이터 엑세스 계층 및 서비스 계층을 구현한다.

Progress

Post Entity 작성
Spring Data JPA를 활용한 Repository 구현
비즈니스 Service 구현

[선택] 검색 및 링크공유 기능 향상 위한 meta tag 추가

Description

검색 및 링크 공유 시 더 많은 정보를 공유할 수 있도록 index.hmtl에 메타 택 추

Progress

meta tag 추가

로컬 환경에서 로그인 및 회원가입 dispatch 변경

Current behavior (bug)

회원가입을 dispatch하는 동안에 잘못된 data타입으로 인해, 회원가입이 에러난다.

Expected behavior (correct)

정상적인 회원가입이 이루어지면서 회원가입 성공

AWS EC2 + RDS를 이용하여 서버 배포

Description

AWS EC2 서비스를 이용하여 서버를 배포한다.

Progress

DB: 관계테이블을 추가함으로서 다대다 관계 표현: 게시글-사진, 유저-권한

Description

현재 user-authority, board-photo는 다대다 관계임에도 불구하고 1대다 형태로 테이블이 구성되어 있다.
이에 관계 테이블을 추가하여 다대다 관계를 표현한다.

Progress

ERD 변경: 관계테이블 추가
SQL 테이블 생성문 변경
DB에 맞게 Entity 수정

회원가입 및 로그인 기능 관련

Description

회원가입 및 로그인 기능에 정규표현식 적용 및 카카오, 네이버 소셜미디어 연동

Progress

정규표현식 적용해서 스크립트 공격 방지
UI구성하기
카카오 및 네이버 로그인, 회원가입 기능 연동
회원가입 및 로그인 백엔드와 API협업
JWT를 활용한 로그인 구현

Auth 관련 기능 구현

Description

회원가입, 로그인, 로그아웃 기능을 구현한다.

Progress

프레젠테이션 계층의 Auth 기능을 구현한다.
비즈니스 계층의 Auth 기능을 구현한다.

Spring Security + JWT 적용하기

Description

Spring Security 와 JWT 라이브러리를 이용하여 토큰 방식으로 로그인 기능을 구현한다.

Progress

Spring Security 의존성 추가 및 설정
JWT 의존성 추가 및 설정
LoginDto, TokenDto 생성
AuthController.login()

로그인 시 발생하는 401 Unauthorized Error

Current behavior (bug)

POST /api/authenticate 를 통해 로그인을 시도하면 401 Unauthorized Error 가 발생하는 문제

Expected behavior (correct)

정상적으로 로그인이 되어 토큰이 발급되도록 만든다.

SpringConfig에서 WhiteList에 /api/authenticate을 추가해줬는데도 왜 안되는 걸까..

이슈 테스트 #1

Hello issues !

[선택] 팝업 및 에러 - 모달로 구현

Description

window 함수 (alert, confirm)에 의존하지 않고, 웹 앱 내의 모달로 팝업 및 에러 메세지 구현

Progress

선택 (확인 / 취소) 알림 모달 layout 구현
선택 알림 모달 적용하기
알림 모달 (확인만) layout 구현
알림 모달 적용하기
에러 타입 구분 및 알림적용

Spring Security: UserDetails를 구현하여 필요한 유저 정보를 가져온다.

Description

Security에서 사용자의 정보를 담는 인터페이스는 UserDetails 인터페이스이다.
현재 Spring Security는 UserDetails를 구현한 User 구현체를 기본으로 제공하고 있고, 프로젝트에서 이 User 객체를 사용하고 있다.
그러나 User 객체는 다음과 같이 username과 password 라는 제한적인 정보만 가지고 있다.

public class User implements UserDetails, CredentialsContainer {

	private static final long serialVersionUID = SpringSecurityCoreVersion.SERIAL_VERSION_UID;

	private static final Log logger = LogFactory.getLog(User.class);

	private String password;

	private final String username;

	private final Set<GrantedAuthority> authorities;

	private final boolean accountNonExpired;

	private final boolean accountNonLocked;

	private final boolean credentialsNonExpired;

	private final boolean enabled;

이 제한적인 정보로는 CATCHOO 프로젝트에서 다른 기능을 수행하기 힘들다.
특히 고양이나 게시글을 추가할 때 userId가 필요하다.
이를 위해 UserDetails 인터페이스를 프로젝트에 맞게 구현한 CustomUserDetails를 생성하여 사용할 것이다.

Progress

CustomUserDetails 작성
기존 Spring Security 기본 제공 User를 사용하는 곳에서 CustomUserDetails를 사용하도록 변경
로그인 유저 정보가 필요한 기능에 적용

로그인 이후 메인 화면 구성

Description

로그인 이후 메인 화면 구성

Progress

유저에 할당된 고양이들 이름 메뉴바에 고정
고양이 많을 시 collapse시켜주기
고양이 이름 누르면, 해당 고양이 정보로 리렌더링
체중 등록 및 데이터 보기 화면으로 넘어갈 때, 고양이 정보 건네줌 -> JWT 이용
예쁘게 꾸미기
Backend와 연동