TIL - 2024/07/12

최종 프로젝트 전 심화 프로젝트라고, 단기 프로젝트가 시작됐다. 심화가 끝나고 바로 다음날부터 최종 프로젝트인데

굳이 이 짧은 시간에 심화 프로젝트를 넣은 게 조금 의아하긴 하다. "협업 도구를"만드는 것이다.

원래 프런트를 구현하지 않고, 백엔드만 구현 후 포스트맨이나 intellij에서 직접 테스트하는 형식으로 진행했지만

이번에는 프런트를 구현하라고 하셨다. 시간도 주말 빼고 약 3~4일인데, 이 시간 안에 이게 되나?라고 생각을 했다.

아래는 조건이다.

 

❗ 공통 조건

• 기능은 프론트엔드 UI를 통해 실제로 사용할 수 있어야 합니다.
  • 키워드 : Thymeleaf, React, Vue.js etc
• 사용자 인증 기능 공통 조건
  • username, password를 클라이언트에서 전달 받습니다.
  • Spring Security와 JWT를 사용하여 설계 및 구현합니다.
  • JWT는 Access Token, Refresh Token을 구현합니다.
  • Access Token 만료 시 : 유효한 Refresh Token을 통해 새로운 Access Token과 Refresh Token을 발급
  • Refresh Token 만료 시 : 재로그인을 통해 새로운 Access Token과 Refresh Token을 발급
  • API를 요청할 때는 Access Token을 사용합니다.
  • Access Token, Refresh Token은 동시에 전달을 하는게 아니고 용도에 맞게 사용되어야 합니다.
• 프론트 공통 조건
  • 사용자가 알아야 하는 에러 메세지라면 사용자가 인지할 수 있게 보여줍니다.
    • 예시)
      • 아이디, 비밀번호가 맞지 않습니다.
      • 로그인이 필요한 기능입니다.
  • 프론트 UI에 시간을 너무 많이 들이지 않습니다.
    • 기능 구현이 중심이고 디자인은 부차적 요소입니다.
• 보드 공통 조건
  • 보드 초대를 받지 않은 사용자는 해당 보드와 관련된 기능을 사용할 수 없다.
• USER, MANAGER 권한을 가진 사용자 수에 대한 제한은 없다.

🚀  트렐로의 필수 기능 구현해보기!

사용자 기능

• 로그인
  • 성공
    • DB에서 username을 사용하여 회원가입 된 사용자인지 확인한다.
    • 회원가입 된 사용자라면 password를 비교하여 로그인한다.
    • header에 토큰을 추가하고 성공 상태코드와 메세지를 반환합니다.
  • ⚠️ 필수 예외처리
    • 유효하지 않은 사용자 정보로 로그인을 시도한 경우
    • ex. 회원가입을 하지 않거나 회원 탈퇴한 경우
    • username과 password가 일치하지 않는 사용자 정보로 로그인을 시도한 경우
• 로그아웃 기능
  • 조건
    • 로그아웃 시, 발행한 토큰은 초기화 합니다.
    • 로그아웃 후 초기화 된 Refresh Token은 재사용할 수 없고 재로그인해야 합니다.
• 회원가입
  • 성공
    • DB에 중복된 username이 없다면 회원을 저장한다.
    • 클라이언트에 성공 메시지와 상태코드를 반환한다.
    • 응답
      • content-type application/json
    • 권한
      • MANAGER
        • 보드 → 보드 관계 없이 카드 전체 조회
        기능명 세부 기능

        보드	생성, 조회, 수정, 삭제, 초대
        컬럼	생성, 조회, 수정, 삭제
        카드	생성, 조회, 수정, 삭제

      • USER
        • 보드, 컬럼, 카드 조회 가능
        • 카드 → 본인이 생성한 항목에 대해서만 권한 존재
        • 보드 → 초대 받은 모든 보드에서 생성된 카드 전체 조회 (전체, 작업자별, 상태별)
        기능명 세부 기능

        보드	조회
        컬럼	조회
        카드	전체 조회, 생성, 수정, 삭제

  • ⚠️ 필수 예외처리
    • DB에 중복된 username이 이미 존재하는 경우
    • username,password 조건에 맞지 않는 경우

보드 관리 기능

• 보드 목록 조회
  • 성공
    • 생성된 보드들을 조회할 수 있습니다.
• 보드 생성
  • 성공
    • 보드 이름, 한 줄 설명 필수 데이터가 있다면 생성할 수 있습니다.
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 생성을 시도하는 경우
    • 보드 이름, 한 줄 설명 필수 데이터가 존재하지 않는 경우
• 보드 수정
  • 성공
    • 보드 이름, 한 줄 설명 필수 데이터를 수정할 수 있습니다.
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 수정을 시도하는 경우
    • 보드 이름, 한 줄 설명 필수 데이터가 존재하지 않는 경우
• 보드 삭제
  • 성공
    • 보드를 삭제할 수 있습니다.
    • 삭제할 때 ‘삭제하는 경우 연결된 데이터가 전부 삭제됩니다. 정말 삭제하시겠습니까?’ 같은 확인 메세지를 출력하여 사용자가 해당 내용을 인지할 수 있도록 합니다.
      • 취소 → 삭제 기능 수행하지 않습니다.
      • 확인 → 삭제 기능 수행합니다.
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 삭제를 시도하는 경우
    • 이미 삭제된 보드인 경우
• 보드 초대
  • 성공
    • 보드에 사용자를 초대할 수 있습니다.
    • MANAGER 권한을 가지고 있는 사용자는 본인이 생성한 보드 혹은 초대받은 보드에 대해서 다른 사용자를 초대할 권한을 가질 수 있다.
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 초대를 시도하는 경우
    • 이미 해당 보드에 초대된 사용자인 경우
    • 존재하지 않은 사용자인 경우

컬럼 관리 기능

• 컬럼 생성
  • 성공
    • 보드에 컬럼을 생성할 수 있습니다.
    • 상태 이름 필수 데이터가 존재하는 경우
      • 예시) 시작 전, 진행 중, 완료
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 생성을 시도하는 경우
    • 이미 존재하는 상태 이름 으로 생성하는 경우
• 컬럼 삭제
  • 보드에 생성한 컬럼을 삭제할 수 있습니다.
  • 삭제할 때 ‘삭제하는 경우 연결된 데이터가 전부 삭제됩니다. 정말 삭제하시겠습니까?’ 같은 확인 메세지를 출력하여 사용자가 해당 내용을 인지할 수 있도록 합니다.
    • 취소 → 삭제 기능 수행하지 않습니다.
    • 확인 → 삭제 기능 수행합니다.
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 삭제를 시도하는 경우
    • 이미 삭제된 컬럼인 경우
• 컬럼 순서 이동
  • 성공
    • 컬럼 순서를 자유롭게 변경할 수 있습니다.
      • 예시) 시작 전, 진행 중, 완료 → 완료, 진행 중, 시작 전
    • 새로고침을 한 후에 변경한 순서대로 유지가 되어 있어야 합니다.
    • 예시 방법
      • 드래그 앤 드랍을 할 때 마다 순서 변경
      • 순서 변경 후 ‘확정’ 버튼을 누르면 순서 변경
  • ⚠️ 필수 예외처리
    • 권한에 맞지 않는 사용자가 순서 이동을 시도하는 경우

카드 관리 기능

• 카드 목록 조회
  • 성공
    • 생성된 카드들을 목록에서 조회할 수 있습니다.
  • 조건
    • 전체 조회
    • 작업자별 조회
    • 상태별 조회
• 카드 생성
  • 성공
    • 컬럼에 카드를 생성할 수 있습니다.
    • 제목, 카드 상태 필수 데이터가 있다면 생성할 수 있습니다.
      • 카드 상태는 '진행 중', '완료'와 같은 카드가 속한 컬럼을 의미합니다.
    • 내용, 마감일자, 작업자 는 필수 데이터가 아닙니다.
  • ⚠️ 필수 예외처리
    • 제목, 카드 상태 필수 데이터가 존재하지 않는 경우
    • 이미 컬럼이 삭제된 경우
• 카드 수정
  • 성공
    • 내용, 마감일자, 작업자 , 제목 을 수정할 수 있습니다.
    • 순서 이동을 통해 카드 상태를 변경할 수 있습니다.
      • 예시 방법
        • 드래그 앤 드랍을 할 때 마다 순서 변경
        • 순서 변경 후 ‘확정’ 버튼을 누르면 순서 변경
  • ⚠️ 필수 예외처리
    • 로그인 하지 않은 사용자가 순서 이동을 시도하는 경우
    • 이미 컬럼이 삭제된 경우
• 카드 삭제
  • 컬럼에 생성한 카드를 삭제할 수 있습니다.
  • 삭제할 때 ‘삭제하는 경우 작성한 데이터가 전부 삭제됩니다. 정말 삭제하시겠습니까?’ 같은 확인 메세지를 출력하여 사용자가 해당 내용을 인지할 수 있도록 합니다.
    • 취소 → 삭제 기능 수행하지 않습니다.
    • 확인 → 삭제 기능 수행합니다.
  • ⚠️ 필수 예외처리
    • 로그인 하지 않은 사용자가 삭제를 시도하는 경우
    • 이미 삭제된 카드인 경우

카드 상세 기능

• 댓글 작성
  • 성공
    • 카드 상세에 댓글을 작성할 수 있습니다.
    • 내용 필수 데이터가 있다면 생성할 수 있습니다.
  • ⚠️ 필수 예외처리
    • 로그인 하지 않은 사용자가 작성을 시도하는 경우
    • 이미 삭제된 카드인 경우
• 댓글 조회
  • 성공
    • 카드 상세에 작성한 댓글들을 볼 수 있습니다.
    • 작성일자 최신순으로 정렬합니다.
  • ⚠️ 필수 예외처리
    • 로그인 하지 않은 사용자가 조회를 시도하는 경우
    • 이미 삭제된 카드인 경우

🔥 둘 중 하나는 무조건 선택

• 동시성 문제 이해하기
  • 여러 사용자가 동시에 같은 데이터를 수정하려고 할 때 발생할 수 있는 문제를 이해하고, 이를 해결하기 위한 전략을 배워보세요.
  • 레이스 컨디션, 데드락과 같은 동시성 문제를 알아보고, 왜 동시성 제어가 필요한지 학습하세요.
• 동시성 제어 기법 적용하기
  • 백엔드 서버와 데이터베이스에서 동시성 제어를 위해 낙관적 락과 비관적 락과 적용해보세요.
  • 낙관적 락은 데이터베이스 레벨에서 제공하는 버전 관리 기능을 활용하여 충돌을 감지하고 처리하는 방식입니다.
  • 비관적 락은 전통적인 락 기법으로, 데이터를 수정하기 전에 명시적으로 락을 걸어 다른 트랜잭션의 접근을 차단합니다.

 

이렇게 요구사항이다 택 1에서는 최적화 or 동시성 제어 이렇게 둘 중 골랐는데, 동시성 제어를 골랐다. 처음 들어봤다.

 

일단 와이어 프레임과 api erd 이렇게 설계를 해야 한다. 총 5명이니 1,2,2명 이렇게 나눠서 짜고,

후에는 전체적으로 다 확인해 봤다.

 

erd이다. 식별 관계/비 식별 관계가 살짝 헷갈려서 모두 비식별로 했다. 몇 가지를 식별로 바꿔야 한다.

 

api도 이런 식으로 피그마에서 짰다. 많기 때문에 자세한 건 프로젝트가 다 끝나고 올리도록 하겠습니다

 

나는 auth 부분 로그인 회원가입 로그아웃 회원 탈퇴 등 맡았고, 이 부분 빨리 끝낸 후 팀원을 도와주려고 하는데

뭔가 오류 때문에 3시간 정도 잡아먹고, 리팩토링할 것도 은근 많다.

 

토요일까지 팀원 중 한 분이 기능을 해보시다가 안되면 나한테 말하기로 했다. 그러면 그 기능을 내가 구현하려고 한다.

 

열심히 해보자 파이팅~