깃허브 주소
팀 깃허브 | https://github.com/baebyeongil/Team_88 |
김민규 | https://github.com/kimmingyu9411 |
남현진 | https://github.com/hyun20230508 |
배병일 | https://github.com/baebyeongil |
역할 분배
배병일 | Member, Column |
남현진 | Card, Comment |
김민규 | User, Board |
ERD
API 설계
와이어 프레임
구현한 기능
1. 사용자 관리 기능
- 로그인/로그아웃
- 사용자 정보 수정 및 삭제 기능
2. 보드 관리 기능
- 보드 생성
- 보드 초대
3. 컬럼 관리 기능
- 컬럼 생성
- 컬럼 이름 수정(색상포함)
- 컬럼 삭제
- 컬럼 순서 이동
4. 카드 관리 기능
- 카드 생성
- 카드 수정 (이름,설명,색상,작업자,마감일)
- 카드 삭제
- 카드 순서 이동(컬럼 내,다른컬럼으로)
5. 댓글 관리 기능
- 댓글 생성
- 댓글 수정
- 댓글 삭제
6. 사이트 공용 채팅
7. 체크리스트 생성,수정,삭제
8. CI/CD 서버 배포
기능 설명
1. 사용자 관리
- 생성한 이메일, 비밀번호를 사용하여 로그인 가능 ( 중복 이메일, 닉네임 방지 )
- 기존 비밀번호 입력 후 정보 수정, 회원 탈퇴 가능
2. 보드 관리
- 보스 생성 시 ( 제목, 설명 )
- 나의 보드 목록 : 현재 본인이 생성한 보드 + 초대된 보드
3. 컬럼 관리
- 컬럼 생성 ( 제목, 색상 )
- 컬럼 위치 이동 가능 (드래그 앤 드 롭 ) : 리셋 기능 포함 ( 현재 인덱스 값 )
- 제목.색상 수정, 삭제
4. 카드 관리
- 카드 생성 ( 제목, 내용, 작업자, 마감일, 색상 )
- 카드 수정 ( 제목, 내용, 작업자, 마감일, 색상
- 카드 위치 이동 가능 ( 드래그 앤 드롭 ) : 컬럼 내 이동, 다른 컬럼 이동 가능, 리셋 기능 포함 ( 현재 인덱스 값 )
- 카드 삭제
5. 댓글 관리
- 댓글 생성 ( 내용 )
- 댓글 수정 ( 내용 )
- 댓글 삭제 ( 댓글 작성자만 가능 )
6. 사이트 공용 채팅
- 내 정보 전체 채팅 ( 버튼 우측 상단 ) : 현재 사이트에 접속한 모든 유저가 사용 가능
- div에 그려지는 식으로 코딩 : 새로고침 시 채팅 내용 사라짐.
7. 체크리스트 관리
- 체크리스트 생성 ( 내용 )
- 체크리스트 수정 ( 내용, 현재 체크 상태 )
- 체크리스트 삭제
2. CI/CD
- 사용한 Workflow : 강의에서 예제로 올려준 걸 그대로 사용함.
name: Deploy to Amazon EC2
on:
pull_request:
branches: [master]
# 본인이 설정한 값을 여기서 채워넣습니다.
# 리전, 버킷 이름, CodeDeploy 앱 이름, CodeDeploy 배포 그룹 이름
env:
AWS_REGION: [AWS_REGION]
S3_BUCKET_NAME: [S3_BUCKET_NAME]
CODE_DEPLOY_APPLICATION_NAME: [CODE_DEPLOY_APPLICATION_NAME]
CODE_DEPLOY_DEPLOYMENT_GROUP_NAME: [CODE_DEPLOY_DEPLOYMENT_GROUP_NAME]
permissions:
contents: read
jobs:
deploy:
name: Deploy
runs-on: ubuntu-latest
environment: production
steps:
# (1) 기본 체크아웃
- name: Checkout
uses: actions/checkout@v3
# (2) Node.js 세팅
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '18.x'
# (3) build (Test 제외)
- name: Install dependencies
run: npm install
# - name: Build test
# run: npm run build
# (4) AWS 인증 (IAM 사용자 Access Key, Secret Key 활용)
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.ACCESSKEY }}
aws-secret-access-key: ${{ secrets.SECRETACCESSKEY }}
aws-region: ${{ env.AWS_REGION }}
# (5) 빌드 결과물을 S3 버킷에 업로드
- name: Upload to AWS S3
run: |
aws deploy push \
--application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
--ignore-hidden-files \
--s3-location s3://$S3_BUCKET_NAME/$GITHUB_SHA.zip \
--source .
# (6) S3 버킷에 있는 파일을 대상으로 CodeDeploy 실행
- name: Deploy to AWS EC2 from S3
run: |
aws deploy create-deployment \
--application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
--deployment-config-name CodeDeployDefault.AllAtOnce \
--deployment-group-name ${{ env.CODE_DEPLOY_DEPLOYMENT_GROUP_NAME }} \
--s3-location bucket=$S3_BUCKET_NAME,key=$GITHUB_SHA.zip,bundleType=zip
- master브랜치에 PR 적용할 때만 수행되도록함.
.env 파일은 자주 바뀔 일이 없다고 생각하여 우분투 자체에서 해당 서버 파일이 생성되는 위치에 직접 생성, 수정하도록 함 |
마무리 소감
컬럼, 카드 이동 부분을 어떤 식으로 작동하게 할 지에 대해 고민되었고, 우리가 정한 방법에서 현재 인덱스 값을 어떻게 초기화 해줘야할 지에 있어 많은 고민을 했다. 3명에서 진행해보는 팀 프로젝트는 처음이라 팀원 모두 급한 마음이 있어 걱정했지만 소통이 잘돼서 원활하게 진행되었던 거 같다. |
'긁적..' 카테고리의 다른 글
MVC 패턴 (0) | 2023.08.17 |
---|---|
8딱8딱 KPT회고 (0) | 2023.08.14 |
티스토리 단축키 (0) | 2023.08.04 |
프로퍼티 ( PROPERTY ) (0) | 2023.08.02 |
transaction 에서 destroy (0) | 2023.07.29 |