Feature

프로젝트에 추가해야 하는 기능 내용

Tasks

• CRA typescript
• eslint
• prettier
• styled-components 설치
• design system 구축

Feature

API 응답 실패 시 예외 처리 매커니즘 구현

Tasks

• 예외를 나타내는 ErrorCode 열거형과 예외 클래스 구현
• 예외 발생 시 클라이언트에게 반환할 ErrorResponse 작성
• GlobalExceptionHandler 클래스 구현

Feature

사용자의 요청에 따라 카드의 위치를 이동시킨다.

Tasks

• 1 Request DTO 구현
• 2 position 정렬 메소드 구현
• 3 DB UPDATE 로직 구현
• 4 테스트코드 작성

Feature

• 비즈니스 로직 수행시 로그를 기록합니다.

Tasks

• logback 설정
• 각 비즈니스 로직별 로그 기록

Feature

세션을 id로 사용해서 사용자를 구분하여 todo-list 서비스를 이용하도록 구현한다.

Tasks

• 1. card, cololumns 테이블에 session_id 필드 추가
• 2. 쿼리 변경
• 3. 세션id 생성 시 더미 데이터 insert

상황

• 여러 Feature 브랜치에서 be 브랜치로 병합하는 과정에서 중복된 코드가 발생하였습니다.

Feature

• Mock data로 만들어 둔 데이터를 이용해서 메인 화면에 Card들을 렌더링한다.

Tasks

• [ ]
• [ ]
• [ ]

Feature

프로젝트에 추가해야 하는 기능 내용

Tasks

• DB에서 columnId 값 받기
• 반환DTO에 columnId 필드추가

Feature

사용자가 전체 활동 기록 삭제 버튼을 클릭했을 때 목록에 있는 기록들을 삭제하는 기능 구현

Tasks

• 삭제할 히스토리의 is_deleted 컬럼 값을 true로 변경
• 처리 결과를 반환
• 테스트 코드 작성

Feature

• 활동기록 레이어의 UI를 구현
• 취소 모달창의 UI를 구현

Tasks

• 활동 기록 레이어 컴포넌트
  • 활동 기록 카드 컴포넌트
• 삭제 모달창
  • 전체 활동 기록 삭제 모달
  • 카드 삭제 모달

Feature

Redis를 설치하고 활동 기록 데이터를 저장하도록 환경 설정

Tasks

• Redis 설치
• Redis 환경 설정

Feature

• MSW 이용해서 mock data 적용

Tasks

• MSW 설치 및 세팅
• Mock data 구성

Feature

• 현재 수동 배프 스크립트에서 표준 출력과 표준 에러에 대한 로그 기록을 한 파일에서 저장하고 있습니다. 이를 분리하여 저장하도록 합니다.

Tasks

• 수동 배포 스크립트 설정 변경

Solution

$ nohup java -Dspring.profiles.active=prod -jar be-0.0.1-SNAPSHOT.jar 1 > ~/log.out 2 > ~/err.out &

목표 기한

• 4시간

Feature

• 카드 조회시 특정 컬럼에 카드가 한개도 없어도 빈 컬럼이 응답하도록 수정하기

Feature

• 수동 배포시 Nginx를 배포하여 80포트로 들어오는 요청들을 3000포트로 서빙하는 Nginx를 배포해봅니다.
• 이 이슈는 선택사항입니다.

Tasks

• Nginx 설치
• Nginx 설정

목표 시간

• 1일

Solution

1. NGINX 설치

$ sudo yum update
$ sudo yum upgrade
$ sudo yum install nginx

1. NGINX 설치 확인

$ nginx -v

1. nginx 서비스 시작

$ sudo service nginx start

1. 해당 호스트의 80포트로 접속해봅니다.

• nginx 사이트가 뜨면 성공입니다.

1. nginx 설정 파일 탐색

$ sudo find / -name nginx.conf

• /etc/nginx/nginx.conf 위치에 있는 것을 확인할 수 있습니다.

1. nginx.conf 파일 접속

$ sudo vim /etc/nginx/nginx.conf

1. server 블록안에 다음 내용을 입력

location / {
	proxy_pass http://{EC2 IPv4}:3000;
}

• localhost로 하는 경우 JS, CSS 리소스를 재귀적으로 얻지 못할 수 있습니다.

1. 설정 내용 반영

$ sudo service nginx restart;

1. EC2 IPv4 주소에 포트 80 또는 없이 접속해봅니다.

$ curl http://ec2-43-201-104-148.ap-northeast-2.compute.amazonaws.com/

참고

nginx 실행 로그 확인

$ sudo nginx -t

Feature

카드 생성, 수정, 삭제, 이동 후 히스토리 생성하는 로직을 AOP로 구현

Tasks

• [ ]
• [ ]
• [ ]

Feature

• 사용자 활동기록 레이어 토글 기능 및 디폴트 문구 출력 기능
• 새로운 카드 등록시 화면에 새로운 카드가 렌더링 되는 기능

Tasks

• Header에 활동기록 레이어의 열고 닫힘을 관리하는 state 추가
• 사용자 활동 기록이 없을 때 렌더링 되는 ActivityHistory UI 구현
• 새로운 카드 등록 시 Board 컴포넌트의 state를 변경시키는 핸들러 구현
• 새로운 카드 등록시 해당 Column 가장 위에 카드가 추가되도록 구현

option) Column의 타이틀 옆 카운트되는 숫자 min, max 정해두기

상황

• 웹 서버에서 WAS 서버로 리소스 요청시 CORS 위반으로 카드를 조회하지 못하고 있습니다.

원인

• CORS 미설정

Soltuion

package com.kiosk.config;


import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST")
            .maxAge(3000);
    }
}

Feature

• EC2 인스턴스 환경에서 수동 배포를 위한 스크립트를 작성하고 실행하여 Spring, React, Mysql이 작동하는지 확인합니다.
• Nginx를 이용한 포트포워딩을 수행합니다.

Tasks

• Spring 수동 배포 스크립트 작성
• React 수동 배포 스크립트 작성
• MySQL 설치
• JDK 설치
• Node.js, npm 설치

Feature

• 컬럼 도메인 관련 CRUD 기능을 구현합니다.

Tasks

• 컬럼 추가
• 컬럼 수정
• 컬럼 삭제
• 컬럼 조회
  • 특정 컬럼 아이디에 따른 컬럼 이름들 조회
• 컬럼 예외처리
  • 컬럼 추가
  • 컬럼 수정
  • 컬럼 삭제
• 컬럼 테스트 코드 작성
  • 컬럼 추가
  • 컬럼 수정
  • 컬럼 삭제
  • 컬럼 조회

목표 기한

• 2023-07-17(월) ~ 2023-07-18(화), (2일)

Feature

히스토리 목록 전달 시 id도 함께 전달하도록 수정

Tasks

• HistoryFindAllResponse 클래스에 Long id 추가

Feature

카드 서비스에서 등록,수정,삭제,이동 실행 시 히스토리 생성하도록 구현

Tasks

• 1 전달 할 값 DTO 생성
• 2 카드 서비스에서 히스토리 서비스 호출
• 3 테스트코드

Feature

AWS RDS 서비스를 이용하여 MySQL을 사용할 수 있도록 환경 구축

Tasks

• RDS MySQL 생성
• ERD를 참고하여 테이블 생성
• 디폴트 칼럼 값(3개) 및 디폴트 액션 값(4개) 삽입

Feature

Action table을 삭제하고 그와 관련된 변경 사항을 적용

Tasks

• ER 다이어그램의 Action table 삭제
• History table의 action_id 컬럼 삭제
• History table에 action_name 컬럼 추가
• 테이블 생성 쿼리 변경
• 샘플 데이터 쿼리 변경

Feature

해당 카드를 삭제한다.

Tasks

• 삭제 쿼리 작성
• 레포지토리, 서비스, 컨트롤러 메서드 구현
• 테스트 코드 작성

Feature

• 카드 조회시 클라이언트에게 응답하기 위해서 3~4번의 쿼리를 날립니다.
• 카드 조회시 1번의 쿼리로 응답할 수 있도록 리팩토링합니다.

Tasks

• 카드 조회 자바 코드 리팩토링

Feature

사용자가 활동 기록 버튼을 클릭했을 때 활동 기록 목록이 보이도록 API 구현

Tasks

• DB에 저장된 히스토리 목록 불러오기
• 불러온 히스토리 목록 반환하기
• 테스트 코드 작성

Feature

• 테스트 코드에 중괄호가 뺘져서 수정합니다.
• 커밋 컨벤션에서 이모지와 커밋타입 간의 공백 제거

Feature

MethodArgumentNotValidException 발생 시 errors 메세지가 아닌 errorCode 메세지로 반환하도록 로직 변경

Tasks

• makeErrorResponse 메서드 변경
• ErrorResponse 클래스 변경
• ValidationError 삭제

Feature

• 사용자는 칼럼에 새로운 카드를 등록할 수 있다.

Tasks

• 칼럼 타이틀 옆 + 버튼을 클릭하면 해당 컬럼에 새로운 카드를 등록할 수 있는 박스가 나타난다.
• + 버튼을 다시 한 번 더 누르거나 카드의 [취소 버튼]을 누르면 박스가 사라진다.
• 카드에 내용을 입력하면 [등록 버튼]이 활성화된다.
  • 카드의 내용이 공백이면 [등록 버튼]은 비 활성화된다.
  • 카드의 글자 수 제한은 500자 이내이다.
  • 글의 길이에 맞춰 박스의 높이가 변한다.
• 활성화 된 등록 버튼을 누르면 서버로 Post 요청을 보낸다.

Feature

• TODO 서비스를 구현하기 위해서 스프링 부트 프로젝트를 초기화합니다.

Tasks

• Card 엔티티 클래스 구현
• Column 엔티티 클래스 구현
• History 엔티티 클래스 구현
• 각 엔티티 클래스에 해당하는 Controller, Service, Repository 스켈레톤 코드 구현

상황

• EC2 t2.micro 사용중 스프링과 MySQL 데이터베이스를 같이 실행하는데 실행되지 않거나 빌드가 되지 않습니다.

원인

• EC2 t2.micro 기준 메모리가 부족하기 때문입니다.

스왑 파일을 이용한 스왑 공간 할당

ec2 램 메모리가 가득 찼기 때문에 실제 디스크의 용량을 이용하여 부족한 메모리를 대체할 공간을 swap memory(스왑 공간)이라 합니다.

해결방법

0. EC2 SSH 접속

$ ssh -i {key-pem 파일} {서버 OS}@{퍼블릭 ip 주소}

1. Swap 파일 메모리를 할당합니다.

# swapfile 메모리를 할당
$ sudo dd if=/dev/zero of=/swapfile bs=128M count=16

• 128M * 16 = 2GB, 2GB 크기로 swapfile을 설정합니다.
• dd 명령어는 파일 복사 및 변환 관련 유닉스 명령 유틸리티입니다.
• /dev/zero는 데이터 스토리지 초기화 관련 파일입니다.

2. swapfile에 접근할 수 있는 권한을 설정한다.

# swapfile 권한 세팅 (READ, WRITE)
$ sudo chmod 600 /swapfile

• 읽기 쓰기 권한을 부여합니다.

3. mkswap 명령어로 swapfile을 추가할 swap 공간을 생성합니다.

# swap 공간 생성 (Make swap)
$ sudo mkswap /swapfile

4. swapon 명령어를 통해 swapfile을 swap memory에 추가합니다.

# swap 공간에 swapfile 추가하여 즉시 사용할 수 있도록
$ sudo swapon /swapfile

5. /etc/fstab에 세팅

# /etc/fstab vi 에디터 열기
sudo vi /etc/fstab

# 파일의 맨 끝 다음줄에 아래 명령어 작성
/swapfile swap swap defaults 0 0

• etc/fstab는 파일시스템 정보를 저장하는 곳입니다. 파티션 변경 및 디스크 추가 시에는 이 파일에 등록해야 자동으로 마운트가 가능합니다.

6. free 명령어로 ec2 메모리 상태를 확인합니다.

$ free

Feature

히스토리 패키지 코드 정리와 예외 처리 구현하기

Tasks

• 히스토리 패키지 내 코드 정리
• id 데이터 타입 Long으로 맞추기
• Repository에서 예외 발생 구현

Feature

• 메인화면 UI 구현

Tasks

• 헤더 컴포넌트
• 메인영역 컴포넌트
  • 칼럼 컴포넌트
    • 타이틀, + 버튼, X 버튼은 칼럼에 포함
  • 카드 컴포넌트
    • 보통 모드
    • 수정 모드
    • 추가 모드

Feature

• 카드 조작(생성, 삭제, 수정, 이동) 시 히스토리 생성

Tasks

• RequestDTO 구현
• 히스토리 생성 sql문 및 로직 구현
• 테스트코드 작성

Feature

• 활동 기록 레이어가 나타나는 위치를 기획서에 맞는 위치로 변경한다.

Tasks

• StyledApp에 position: relative 속성이 적용되면서 변경된 ActivityHistory의 위치를 조정한다.

Feature

• Board 상태 업데이트와 응답 받은 후 로직 구현.

Tasks

• 카드 수정에 대한 확인 응답에 의해 Board update.

Feature

카드 생성, 이동, 수정, 삭제시 예외 구현

Tasks

• 카드 패키지 메소드 예외처리 구현

Feature

새로운 카드를 등록한다.

Tasks

• 요청, 응답 DTO 작성
• 등록 쿼리 작성
• 레포지토리 메서드 작성
• 서비스 메서드 작성
• 컨트롤러 메서드 작성
• 테스트 코드 작성

Feature

• 정상적으로 카드가 이동하지 않는 문제 해결해보자

Tasks

• 빈 칼럼으로 카드를 이동할 수 없는 오류 수정하기
• 다른 칼럼 맨 밑으로 카드 이동시 이동한 카드가 맨 위에 렌더링 되는 오류 수정하기
• Board, Card 컴포넌트의 props들 리팩터링

Feature

사용자에게 어떤 카드의 제목 혹은 내용의 수정 요청이 들어오면,
요청 받은 데이터를 이용해 카드를 수정하고, 성공 여부를 반환한다.

Tasks

• 1 요청 데이터 DTO 작성
• 2 DTO를 토대로 DB접근하는 서비스 메소드 구현
• 3 DB에서 UPDATE 하는 쿼리 구현
• 4 성공 시 success, 실패 시 에러 코드와 메세지를 반환하는 로직 구현
• 5 테스트코드 작성

Feature

• 카드 drag and drop

Tasks

• MouseMove
  • mouseMoveHandler on Board component.
  • Update currMouseCoords based on the mouse position. (clientX, clientY).
  • Update selected ColumnCard position based on currMouseCoords.
  • Render CardShadow upon dragging.
  • Use document.elementFromPoint(currentCoords) to determine the element at the corresponding coordinates.
    • belowCard = elementAtPoint.closest(”li”).
    • Calculate the mid y point of belowCard by using getBoundingClientRect().
      • To determine whether coming from above or below.
    • Render CardShadow above/below based on the calculated mid y point.
• MouseDown
  • Update dragCard.
  • Initialize cardShadowPosition.
  • Initialize currMouseCoords.
• MouseUp
  • Determine prevColumnId, nextColumnId, beforeCardId, afterCardId.
  • Send PUT request to server.
  • Update board based on response.
• 필요한 상태
  • currMouseCoords
    • Keep track of the mouse's current coords.
    • Used to synchronize the card being dragged with the mouse's current coords.
      • Feed dragged card's top, left with the these coords.
    • Used to determine the card that is underneath the currently being dragged card using elementAtPoint.
  • dragCard
    • Contains the reference for the card that is being dragged, and the card details.
    • dragCard.cardRef is used to temporarily remove pointer events on the card being dragged (in order to determine belowCard).
    • dragCard.cardDetails is used for feeding CardShadow.
  • currBelowCardId
    • Used to determine whether this Card is the card that is currently below the dragged card, which is used to conditionally render CardShadow.
  • currCardShadowInsertPosition
    • Used to determine whether CardShadow should be rendered above or below belowCard.
• 필요한 컴포넌트
  • 선택된 카드 위치를 대체할 CardShadow 컴포넌트 추가

Feature

• 활동 기록 레이어가 나타나고 사라질 때 애니메이션 기능을 추가한다.

Tasks

• 히스토리 버튼 클릭시 fetch한 데이터를 이용해 메인 영역 바깥에 ActivityHistory를 렌더링한다.
• 렌더링이 끝난 ActivityHistory 컴포넌트는 헤더의 히스토리 버튼 아래쪽 영역으로 슬라이드하면서 이동한다.
• 슬라이드 되는 동시에 fade in 효과를 적용한다.
• 히스토리 버튼이나 닫기 버튼 클릭시 나타나날 때 애니메이션이 반대로 적용되며 화면밖으로 사라진다.

추가 작업) ActivityHistoryItem이 5개 초과일 때 레이어가 더 이상 길어지지 않고 스크롤 생성되도록 변경

Feature

• 사용자가 메인 페이지에 접속하면 칼럼과 칼럼에 해당하는 카드를 조회하여 응답합니다.

Tasks

• 카드 조회
• 컬럼 조회
• 카드를 위치값을 기준으로 정렬
  • 위치값이 높을 수록 위에 존재합니다.

Feature

• 변경된 Delete API response payload 반영

Feature

• 사용자는 칼럼에 새로운 카드를 수정할 수 있다.

Tasks

• 카드의 [수정 버튼]을 누르면 등록 박스와 동일한 스타일로 전환되면서 수정이 가능해진다.
• 카드 수정 상태에서 [취소 버튼]을 누르면 변경 사항이 반영되지 않고 수정 상태가 풀린다.
• 내용을 모두 삭제하면 [저장 버튼]이 비활성화된다.
• 내용을 수정한 후 [저장 버튼]을 누르면 변경사항이 반영된 카드로 바뀐다.

상황

스프링 부트 실행시 resources/db/mysql/schema.sql 파일에 존재하는 테이블을 초기화하는 설정을 하였습니다. 그러나 action 테이블을 참조할 수 없어서 실행에 실패하였습니다.

schema.sql

SET foreign_key_checks = 0;   #체크 해제
DROP TABLE IF EXISTS history;
DROP TABLE IF EXISTS columns;
DROP TABLE IF EXISTS action;
DROP TABLE IF EXISTS card;
SET foreign_key_checks = 1;   #체크 설정

CREATE TABLE action (
	id	int	NOT NULL AUTO_INCREMENT PRIMARY KEY,
	name	VARCHAR(50)	NOT NULL
);

CREATE TABLE columns (
	id	int	NOT NULL AUTO_INCREMENT PRIMARY KEY,
	name	VARCHAR(50)	NOT NULL
);

CREATE TABLE card (
	id	int	NOT NULL AUTO_INCREMENT PRIMARY KEY,
	title	VARCHAR(50)	NOT NULL,
	content	text	NOT NULL,
	position	bigint	NOT NULL,
	is_deleted	Boolean	NOT NULL	DEFAULT false,
	column_id	int	NOT NULL,
    FOREIGN KEY (column_id) REFERENCES columns (id)
);

CREATE TABLE history (
	id	int	NOT NULL AUTO_INCREMENT PRIMARY KEY,
	card_title	VARCHAR(50)	NOT NULL,
	prev_column	VARCHAR(50)	NULL,
	next_column	VARCHAR(50)	NULL,
	created_at	DATETIME	NOT NULL,
	is_deleted	Boolean	NOT NULL	DEFAULT false,
	action_id	int	NOT NULL,
	card_id	int	NOT NULL,
    FOREIGN KEY (action_id) REFERENCES action (id),
    FOREIGN KEY (card_id) REFERENCES card (id)
);

원인

• sql 스크립트 파일에서 "#"이 주석인줄 알고 적용되는줄 알았으나 실제로는 적용되지 않아서 foreign_key_checks = 0이 정상적으로 작동하지 않은 것이 원인이었습니다. MySQL 워크벤치에서는 쿼리가 동작한 이유는 MySQL 워크벤치 편집창에서는 "#"이 주석처리가 되었기 때문입니다.

해결방법

• sql 스크립트 파일에서 "#"으로 달린 주석을 제거합니다.

SET foreign_key_checks = 0;
drop table IF EXISTS history;
drop table IF EXISTS columns;
drop table IF EXISTS action;
drop table IF EXISTS card;
SET foreign_key_checks = 1;

결과