서비스 아키텍쳐

ERD

서비스 소개

---

Alpha+

• 프로젝트 관리와 협업을 도와주는 업무용 협업툴 ‘Trello’를 모티브로 만든 웹기반 생산성 협업툴 ‘Alpha’
• 팀원들의 성 (Ahn hee jae, Lee sung ae, Park ji eun, Hong jong hoon) 한글자씩 딴 alph + A+ 을 붙인 팀으로, 우리가 만든 서비스로 세상을 +a 한다는 의미를 더했습니다. 처음 서비스를 개발하여 처음 배포하는 단계를 '알파'라고 하는 의미 또한 있습니다.

주요 특징

1. 워크스페이스, 보드, 컬럼, 카드

• 워크스페이스(Workspace) : 회원 개인별 워크스페이스 공간
• 보드 (Boards) : 프로젝트나 팀의 작업 공간
• 컬럼(Columns): 보드 내에서 여러개의 카테고리나 열로 구성(주로, To-do, Doing, Done으로 사용)
• 카드(Cards): 실제 작업 항목

2. 드래그 앤 드롭 인터페이스 카드의 상태나 우선순위를 변경하기 위해 간단히 카드를 드래그해서 다른 위치나 다른 리스트로 옮기면 됩니다.
3. 협업 기능 여러 사용자와 함께 보드를 공유하고, 알림을 설정해서 협업을 쉽게 할 수 있습니다.

기술적 의사결정

---

1. HTTPS
   • HTTPS는 데이터를 암호화하여 중간자 공격(Man-in-the-Middle Attack)으로부터 보호합니다. 사용자 데이터와 비밀번호가 안전하게 전송될 수 있습니다.
   • 사용자들에게 웹사이트가 신뢰할 수 있음을 보증합니다. 이로 인해 사용자들은 서비스를 더 안심하고 사용할 수 있습니다.
   • 검색 엔진 최적화(SEO)에 있어서도 HTTPS는 중요한 역할을 합니다. 구글은 HTTPS를 사용하는 사이트에 더 높은 랭킹을 부여합니다.
2. Github Actions을 통한 CD
   • Github Actions을 사용하면 배포 과정을 자동화할 수 있어 개발자의 수작업을 줄이고 실수를 방지할 수 있습니다.
   • 코드와 배포 파이프라인이 동일한 위치에 있어서 접근성이 좋고, 코드와 설정의 일관성을 유지할 수 있습니다.
3. Socket.io
   • socket.io는 room과 broadcast같은 기능을 제공하지만, ws는 이러한 코드를 직접 커스터마이징 해야 합니다.
   • to, of를 이용하여 특정 클라이언트에게만 메세지를 보낼 수 있습니다.
   • ws는 string자료형으로만 데이터를 주고 받을 수 있으며, 데이터를 parsing하는 과정이 필요하지만, socket.io는 모든 자료형을 주고받을 수 있습니다.
   • socket.io는 연결이 끊어졌을 때 주기적으로 연결을 시도하여, 복구합니다.
   • 협업 도구에서는 실시간 통신이 필수적입니다. WebSocket을 사용하면 사용자들 간의 실시간 상호작용을 효율적으로 구현할 수 있습니다.
   • 일반적인 HTTP 요청에 비해 WebSocket은 연결을 유지하기 때문에 서버 리소스를 효율적으로 사용할 수 있습니다.
   • 사용자가 페이지를 새로고침하지 않아도 데이터가 실시간으로 업데이트되므로 사용자 경험이 향상됩니다.
4. Typescript
   • 정적 타입 검사를 통해 개발 초기 단계에서 타입 오류를 발견하고 수정할 수 있습니다. 이는 런타임 오류를 줄이고 코드 품질을 향상시킵니다.
   • 타입 정의를 통해 다른 개발자들이 코드를 이해하기 쉽게 만들며, 큰 규모의 프로젝트에서 코드의 유지보수를 용이하게 합니다.
   • 자동완성, 타입 체킹 등의 기능을 통해 개발자 경험이 향상됩니다.

기능 설명

---

1. 회원가입

   1-1. 요청 검증 - email, name, password, confirm 을 받아서 DB에 중복되는 email이 있는지로 검증하고, 이메일 형식은 정규표현식으로 검증합니다. 1-2. 비밀번호 암호화 - bcrypt 사용해서 안전하게 암호화 - DB에는 암호화된 비밀번호를 저장합니다. 1-3. 검증된 정보를 DB에 저장하고 응답을 반환합니다. 1-4. 회원가입이 되면, 개인 워크스페이스를 생성합니다.

2. 로그인 2-1. 요청 검증 - email, password 가 있는지 확인하고 DB에서 해당 email로 사용자 조회하고 없거나 비밀번호가 일치 하지 않으면 인증 에러를 반환합니다. 2-2. 토큰 생성 - JWT 사용 액세스토큰과 리프레시 토큰을 발급합니다. 2-3. 리프레시 토큰은 DB에 저장합니다. 2-4. 생성된 액세스토큰과 리프레시토큰을 사용자에게 반환하는데, 보안을 위해 HTTP - only 와 secure 옵션을 활성화한 HTTPS 프로토콜을 사용할 때만 쿠키가 전송되도록 설정합니다.

3. 로그아웃 3-1. 토큰 삭제 - DB에 저장된 refreshToken을 삭제합니다. 3-2. 쿠키 삭제 - ‘Authorization’과 ‘refreshToken’이 저장된 쿠키를 삭제합니다. 3-3. 사용자에게 로그아웃 성공 메시지 반환합니다.

4. Board 배경 변경

• 서버에서 등록해놓은 배경을 바탕으로 Board의 배경을 변경할 수 있습니다.

5. 실시간 Board 변경 및 초대 알림 기능

도전과제

---

1. Nest.js로 구현해보기
2. 카카오로그인, 구글 로그인
3. Card 이미지 작성