darass-team/2021-darass

🧩 웹 페이지 어디든 간편하게 추가하는 댓글 모듈 서비스 "다라쓰"

다라쓰

어디든지 쉽고 간편하게 다는 댓글 모듈 서비스

📌 Notice

다라쓰는 현재 프론트엔드 저장소와 백엔드 저장소가 분리되어 있어요.
해당 저장소는 홍보용으로 자세한 코드는 darass-team를 참고해 주세요!

📝 Introduce

다라쓰는 스크립트 코드를 웹 페이지에 붙여넣는 것만으로 간편하게 댓글 기능을 추가할 수 있는 댓글 모듈 서비스 입니다.

사용자에게 필요한 댓글 기능과 함께 운영에 필요한 댓글 통계 및 관리 기능도 제공합니다.

🐤 Demo

• 다라쓰 체험해보기

• 다라쓰 시작하기

⭐ Main Feature

• 웹 페이지에 서비스에서 제공하는 스크립트 코드를 추가하면, 댓글 모듈이 추가되는 기능
• 관리자 페이지에서 댓글 통계를 확인하고 댓글을 관리할 수 있는 기능
• oauth2 로그인 / 로그아웃 기능

🔧 Stack

Frontend(Web)

• Language : TypeScript
• Library & Framework : React, Styled-Components, Webpack, Babel
• Test : Jest, RTL, Storybook
• Deploy: AWS(S3, Cloudfront)
• CI/CD : Github Actions

Backend, Devops

• Language : Java
• Library & Framework : Spring Boot
• Database : MariaDB
• ORM : JPA
• Deploy: AWS(EC2, S3, ELB), Docker, Nginx, ELK
• CI/CD : Github Actions

🔨 Front-End Architecture

🔨 Back-End Architecture

🔨 CI / CD Flow

1. main 브랜치에서 feature 브랜치를 딴 후 기능을 개발한다. (단, feature 브랜치는 하루 안에 사라져야 한다.)
2. feature 브랜치에서 main 브랜치로 PR을 날린다.
   1. Github Actions에서 테스트를 포함한 빌드가 수행된다.
   2. Jacoco가 최소 테스트 커버리지를 만족하는지 검사한다.
   3. 소나 큐브가 정적 코드 분석을 한다.
   4. 코드 리뷰를 반영한다.
3. PR을 main 브랜치에 merge한다.
   1. 개발 서버로 자동 배포가 된다.
   2. 개발 서버를 기준으로 QA를 진행한다.
4. 빠른 시간 안에 운영 서버로 수동 배포한다.

🙋‍♂️ Developer

Backend	Backend	Backend	Backend	Frontend	Frontend
제이온	우기	아론	제리	도비	곤이

2021-darass's Issues

[BE] RestDocs를 쓸 때 MockMvc를 쓰는 것이 나은지, RestAssured를 쓰는 것이 나은지 논의해보기

[BE] Docker를 활용한 인프라 셋팅 (Proxy Server, Application Server, DB Server)

[FE] 댓글 모듈 UI 구현

[FE][관리자 페이지] Noto sans 폰트 미적용된 컴포넌트 수정

[BE] 토큰 인증이 필요한 API 처리 로직 구현

[BE] develop 브랜치 생성 & 프로젝트 환경 설정 셋팅

• develop 브랜치 생성
• 프로젝트 환경 설정
  • 스프링 부트 생성
  • 의존성 추가
  • gitignore 추가
  • 폴더 구성 추가

[BE] API 문서 정리, ERD 정리

[BE] oauth 파트 리팩토링

코드리뷰 진행 과정 규칙은 어떤식으로 하는게 좋을까요?

PR 보낸후, 몇명한테 코드리뷰를 받고, approve를 받아야 Merge를 시킬지 규칙으로 정하면 좋을 것 같습니다.
지금은 편의상 임의로 Merge 시키는데, 정확히 정해야 나중에 혼동이 없을 거 같아요!

어떤식으로 할까요?

[BE] CORS 긴급 FIX

.

[BE] 댓글 CRUD api에 토큰 인증 기능을 추가한다.

Rest doc 적용 전, 공유용 API 문서 작성

.

appplication.yml 파일 수정

• loggin은 prod 환경에서 실행되지 않도록 변경
• application-local의 사용자가 root다 보니 로컬에서 적용하기가 어려움. 다른 계정으로 바꾸기.

[BE] REST DOCS 설정 수정, 유효성 검증 로직 추가

[BE] 깃허브 액션을 이용하여 CD를 적용한다.

[FE][댓글모듈] 댓글작성시간과 현재시간의 차이를 보여주는 로직 구현

const TIME_TABLE_BY_MILISECOND = {
  SEC: 1000,
  MINUTE: 60 * 1000,
  HOUR: 60 * 60 * 1000,
  DAY: 24 * 60 * 60 * 1000,
  MONTH: 30 * 24 * 60 * 60 * 1000,
  YEAR: 12 * 30 * 24 * 60 * 60 * 1000,
};

const calculateTimeDiff = (targetTime) => {
  const formattedTargetTime = new Date(targetTime);
  const currTime = new Date();
  
  const diff = currTime.getTime() - formattedTargetTime.getTime();
  
  if(diff < TIME_TABLE_BY_MILISECOND.SEC) return "방금 전";
  
  else if(diff < TIME_TABLE_BY_MILISECOND.MINUTE) return `${Math.floor((diff)/TIME_TABLE_BY_MILISECOND.SEC)}초 전`;
  
  else if(diff < TIME_TABLE_BY_MILISECOND.HOUR) return `${Math.floor((diff)/(TIME_TABLE_BY_MILISECOND.MINUTE))}분 전`;
  
  else if(diff < TIME_TABLE_BY_MILISECOND.DAY) return `${Math.floor((diff)/(TIME_TABLE_BY_MILISECOND.HOUR))}시간 전`;
  
  else if(diff < TIME_TABLE_BY_MILISECOND.MONTH) return `${Math.floor((diff)/(TIME_TABLE_BY_MILISECOND.DAY))}일 전`;
  
  else if(diff < TIME_TABLE_BY_MILISECOND.YEAR) return `${Math.floor((diff)/(TIME_TABLE_BY_MILISECOND.MONTH))}개월 전`;
  
  else return `${Math.floor(Math.floor((diff)/TIME_TABLE_BY_MILISECOND.YEAR))}년 전`;

}

console.log(
  calculateTimeDiff("2020-07-12 20:29:00") 
);

[FE] 관리자 페이지에 카카오 Oauth 에서 액세스 토큰을 받아오기

[BE] DB 백업 시스템 구축하기

[BE] 엔티티가 DB에 저장될때 생성, 수정 시간이 자동으로 저장되게 한다.

hihi

testest

[BE] 댓글 관련 API 구현

[FE] 관리자 페이지 min-height 설정

[BE] RestDocs 셋팅

[BE] 테스트 코드 DisplayName Convention 관련 논의

@DisplayName("Calculator 클래스")
public class Calculator {
    
    @DisplayName("sum 메서드는 합을 리턴한다.")
    @Test
    void sum(){
        
    }

    @DisplayName("minus 메서드는 차를 리턴한다.")
    @Test
    void minus(){

    }

    @DisplayName("multiply 메서드는 값이 0이라면 예외를 던진다.")
    @Test
    void multiply(){

    }
    
}

위와 같은 식의 테스트 코드 DisplayName 컨밴션은 어떠신가요?
아래 기술블로그 글을 참고했는데, 가독성이 좋다고 생각했습니다.

• https://helloworld.kurly.com/blog/try-bdd/
• https://johngrib.github.io/wiki/junit5-nested/

[BE] private 파일 모듈화

.

[BE] CORS 이슈 해결

[BE] 댓글 api에 어떠한 유저가 댓글을 달았는지 판단하는 기능 구현

[BE] 엔티티가 DB에 저장될때 생성, 수정 시간이 자동으로 저장되게 한다.

[FE] GlobalStyle과 중복된 button 스타일 제거

[FE][댓글모듈] 로그인 기능 추가

[BE] 댓글 api 리팩토링

[BE] DB 설정 추가하기

[FE] 관리자페이지 라우터 설정

[BE] 프로젝트 api 구현

[BE] proxy-server에 도메인 달고, HTTPS 적용시키기

[BE] 실제 서비스 운영 전에 DB 옵션 중에 create-drop 설정 고치기!

[BE] 환경별 profile 설정

[BE] 예외 처리 클래스 파일 정리

[BE]Oauth 관련 API 구현

[FE] 댓글 모듈 환경 설정

[FE] 관리페이지 메인 페이지 UI 구현

[BE] 백엔드 DB DDL 수정하기

• NOT NULL 설정하기
• 지연 로딩 설정하기
• CASCADE 설정

[BE] 테이블 매핑

[BE] 깃허브 액션을 이용하여 CI를 적용한다.

[BE] Jacoco 플러그인을 추가한다.

[FE][관리자 페이지] API키를 쿠키에 read/write하는 기능 구현

[FE] 관리페이지 프로젝트 환경 설정

기술스택

공통

• React
• Typescript
• Webpack
• Babel, Eslint, Prettier
• Styled-component
• React Query
• React Router DOM
• Axios

테스트

• Jest
• RTL
• Stroybook

[BE] RestDocs를 기반으로 하는 인수테스트 작성 - /api/v1/projects

[FE] 관리자 페이지 tsconfig 오타 수정

잘못된 include 수정