평소에 완전 무료로 서비스하고 사진이 없고 상대가 어떤 사람인지에 초점을 맞춘 소개팅 어플 또는 웹 사이트가 있었으면 좋다고 생각했고 포트폴리오용 웹 사이트를 개발하는 겸 BlindKing 소개팅 웹을 개발하게 되었습니다.
BlindKing 소개
개발기간 및 인원
개발기간: 2021-05 ~ 2021-11 (약 6개월 - 개발진행중)
팀원: 나
기술스택
FrontEnd: Vue.js
BackEnd: Node.js + Express
DB: MongoDB
DevOps: AWS Amplify, AWS Certificate Manager, AWS 53, AWS EC2, AWS Load Balancer, AWS S3
그외 사용 기술: CKEditor5, Bootstarp 4.6, express-rate-limit, JWT, socket.io, Mongoose
소스코드
FrontEnd Git Repository
https://github.com/GangTakChoi/BlindKing_Web
BackEnd Git Repository
https://github.com/GangTakChoi/BlindKing_BackEnd
실 서비스 주소
https://blindking.choikt.com
관리자 계정 > ID: administrator / PW: 123123
일반 계정 > ID: test / PW: 123123
회원가입 시 비밀번호는 암호화되어 저장되고 있습니다.
일반 계정은 중복되지만 않으면 얼마든지 만들 수 있기 때문에 많이 만들어서 테스트하셔도 괜찮습니다.
서비스 구조
BlindKing 기능
매칭활성화
- 인연찾기 페이지에 본인 정보가 노출되게하는 기능
- 자기소개작성 페이지에서 필수입력 항목을 입력해야 사용가능
매칭 상위 노출 (매칭활성화 시 노출)
- 인연찾기 페이지에서 본인 정보를 최상단으로 노출되게하는 기능
- 4시간에 한번씩 사용가능
자기소개작성
- 나이, 사는 지역, MBTI를 작성하고 질문리스트에 대해 입력하는 페이지입니다.
- 필수 영역을 제외하고 모두 생략가능합니다.
- 이곳에 입력된 내용은 인연찾기 페이지에서 이성에게 노출됩니다.
인연찾기
- 이곳에서 매칭활성화된 이성의 자기소개작성 내용을 볼 수 있습니다.
- 지역, MBTI, 나이 필터 가능
- 지역, MBTI는 다중 필터 적용이 가능
자세히보기 버튼 클릭 시 상세페이지로 이동,
페이지 하단에 친구신청 버튼이 있다.
친구목록
- 친구목록, 요청목록, 차단목록 3가지 탭이 존재
- 친구목록에서는 대화방 입장가능, 친구삭제, 친구차단 가능
- 요청목록에서는 이성이 나에게 친구요청한 목록을 조회
- 차단목록에서는 차단된 친구의 목록을 조회
- 대화방에서 읽지 않은 메세지가 있는 경우 대화방 버튼이 깜박임
- 대화방을 나와있는 상태에서 상대에게 메세지가 오는 경우 toast 팝업으로 알림 기능 존재
- 상대가 악의적인 행동을 할 경우 대화방에서 신고가능
커뮤니티
- 워즈윅 에딕터를 통한 글쓰기 가능 (이미지 업로드, 동영상 공유 가능)
- 댓글, 대댓글, 댓글 [인기순,최신순] 정렬, 게시글 종아요/싫어요, 댓글 좋아요, 게시글 수정, 게시글 삭제, 댓글 삭제, 게시글 신고, 댓글 신고 기능, 게시글 검색 기능
- 카테고리는 두 가지 유형 존재
관리자 카테고리와 일반 카테고리가 존재하고,
관리자 카테고리는 관리자 유저만 글쓰기가 가능하고,
일반 카테고리는 일반 유저, 관리자 모두 글쓰기 가능
관리자 카테고리는 빨간 글자색이며,
일반 카테고리는 검정 글자색입니다.
관리자로 로그인 시 아래와 같이 버튼이 추가됩니다.
카테고리 추가와 카테고리 관리 버튼입니다.
추가 버튼을 클릭하게 되면 아래와 같이 유형, 카테고리 명을 입력하여 카테고리를 추가할 수 있습니다.
톱니바퀴 모양을 클릭하면 카테고리 관리 창이 뜨고 카테고리 명을 수정할 수 있고 삭제도 가능합니다.
글쓰기는 이미지 업로드 및 동영상 첨부가 가능합니다.
아래는 등록된 글이며 댓글 기능과 함께 캡처했습니다.
내정보
- 내정보에서는 나의 닉네임, 성별, 나의 게시글, 나의 댓글들을 조회
- 나의 게시글은 최신순, 좋아요순, 조회수순 정렬이 있다.
- 나의 댓글은 최신순, 좋아요순 정렬이 있다.
신고관리 (관리자 회원에게만 노출)
신고관리에서는 댓글, 게시글, 채팅, 자기소개작성에서 신고한 정보들을 조회할 수 있고 각각 유형마다 신고 내용을 객관적으로 판단할 수 있도록 구현하였다.
신고 목록 페이지
- 신고자, 신고대상자, 유형, 대상(댓글, 게시글, 채팅, 자기소개) 검색이 가능합니다.
신고 상세 페이지
- 신고 대상자의 활동정지이력 조회,
- 신고 대상자에게 활동정지처분 (3일, 1주일, 1개월, 3개월, 6개월, 영구정지),
- 게시글 신고 시 신고 당시 게시글 캡처내용 확인 가능,
- 댓글 신고 시 신고대상자가 해당 게시글에 작성한 댓글 내용 전부 확인 가능 (삭제된 댓글 포함),
- 채팅 신고 시 채팅내용 확인 가능
질문관리 (관리자 회원에게만 노출)
질문관리에서는 자기소개작성 페이지에서 노출되는 질문 리스트들을 관리할 수 있는 기능 제공합니다.
드래그하여 질문이 노출되는 순서를 변경할 수 있고 질문 수정, 추가, 삭제가 가능합니다.
코드 설명
웹 캐시 적용
window 이벤트 헨들러 onpopstate를 사용하여 뒤로가기를 통해 진입한 페이지인지 확인이 되면 서버에 데이터를 요청하지 않고 localStorage에 저장한 데이터를 불러와 로드함
Matching.vue
commonMixin.js
Content Security Policy 를 활용한 보안강화
아래와 같이 CSP child-src 지시문을 사용하여 iframe, frame의 주소를 youtube, vimeo로 제한함
만약 커뮤니티 글쓰기에서 동영상 공유 시 등록된 iframe의 주소가 악의적인 사이트로 위변조된 경우 아래와 같이 막히게 된다.
백앤드(node.js) 개발환경 분리
development, staging, production 환경으로 분리하여 서버가 동작될 수 있도록 개발하였습니다.
전달된 값 (prod, staging, dev)에 따라 환경변수 파일 로드
실제 환경변수 선언 파일
백앤드(node.js) CORS 해더 설정
app.js
middlewares/responseHeader.js
To-do List
이 글은 추후 계속 업데이트해 나가겠습니다.
