티스토리 뷰
[Trello Clone 프로젝트] ASP.NET Core + Vue.js 로 구현한 trello 사이트
코드너머 2019. 2. 5. 14:11Trello Clone 프로젝트
url: https://trelloclone20201123102354.azurewebsites.net/
source: https://github.com/kanginhan/trelloclone
웹개발에 대한 전체적인 학습을 위해 진행한 첫번째 개인 프로젝트 입니다
강의를 보고 한 것이 아닌!! 저 혼자 직접 구현방법을 고민하면서 모두 구현하였습니다
🖥 기술스택
클라우드 플랫폼: Azue App Services
DB: SQL Server + EntityFramework Core
Server: ASP.NET Core 2.2
Front: Vue.js
🔍 주요특징
1. trello 의 첫 landing 페이지 디자인을 vuetify + css 로 직접 구현
디자인 소스를 배끼지 않고 보이는 그대로 직접 구현하였습니다
2. JWT 를 이용한 인증
토큰발급으로 로그인 상태를 클라이언트에서 기억할 수 있도록 하여서
토큰만료 전까지는 로그인과정 생략하고 바로 접속가능
3. 기본적인 카드관리 기능
dragging은 라이브러리 사용하여 구현
4. trello의 private / public 기능 간단하게 구현
public 으로 설정하면 로그인없이 누구나 접근 가능. private은 해당 사용자만 접근 가능
✔ 기타특징
1. 모바일까지 고려하여 디자인하지 않았음
반응형 디자인 적용 안함
2. Client Side 렌더링 방식
굳이 검색이 되도록 SEO를 고려할 필요가 없어 Server Side 렌더링하지 않음
3. 라우팅, api호출시 상단 로딩바
nprogress를 전역에 등록하여 라우팅, api전송시에 자동으로 로딩바 표시
상세내용
0. 개발 범위 및 기획
1) Landing 페이지 구현
2) 인증 및 로그인 구현
3) 기본적인 카드관리 기능 구현
1. 사용된 기술
백엔드
- ASP.NET Core (메인 프레임워크)
- SQL Server + EntityFramwork Core (데이터베이스)
- JWT (사용자 인증 및 세션관리)
- Swagger (API 문서 자동생성)
- NLog (로그생성)
- AutoMapper (객체 자동 매핑)
- https://hashids.org/ (hash id 생성)
프론트엔드
- Vue.js (메인 프레임워크)
- Vuetify (UI 프레임워크)
- vuex (상태관리)
- vue-router (클라이언트 라우팅)
- axios (promise기반 http통신)
- lodash (자바스크립트 유틸)
- vee-validate (폼 유효성검사)
- nprogress (로딩바)
- vue-smooth-dnd (div상자 이동)
2. 구현상세
1) 일반
- Board > List > Card 구조
- PC화면 전용. Mobile은 고려되지 않음
- 서버사이드렌더링(SSR) 적용하지 않음 (ASP.NET Core SpaServices 사용하면 가능)
2) UI Framwork
- Vuetify 사용
2) 인증
- 패스워드는 hmacsha512로 암호화 (더 안전한 방법필요)
- JWT를 쿠키에 저장함. (httpOnly, secure)
- 토큰관련 미들웨어 2개 생성
1) JWTInHeaderMiddleware: 쿠키로 넘어온 토큰을 헤더에 주입
2) JWTRefreshMiddleware: 토큰 만료기간 50%이내에 요청시 토큰 자동 재발급
- 토큰 유효성검사시 IP도 체크함. 토큰생성 IP와 다르면 권한없음
3) 연속 api 호출 방지
- nprogress를 전역에 등록하여 라우팅, api전송시에 자동으로 로딩바 표시
5) 카드 드래그로 순서변경
- List/Card 드래그로 자유롭게 순서변경 가능함
- vue-smooth-dnd 라이브러리 사용 (https://kutlugsahin.github.io/vue-smooth-dnd/#/cards)
- 순번을 부여하면 하나의 변경에 의한 update가 많이 일어남
- tree 구조로 순서를 저장함. update가 적게 일어남
- tree 구조로 정렬하는 재귀함수 구현
6) Board 권한
- Board에 Public/Private 권한 부여기능 구현
- https://hashids.org/net/ 라이브러리 사용
- Board에 접근 하는 url은 hashId를 포함한다 (실제 트렐로와 유사)
- 해당 url로 public board에 대해 로그인하지 않은 사용자도 접속이 가능하다
- 현재 hashId가 너무 긴데 짧게 줄일 수 있음. 귀찮아서 작업안함