$$config title: Paracord 기술설명서 keywords: - 기술문서 - 기술설명서 - django - paracord - tailwind - jenkins - docker $$ ## ✔️ 사이트 주소 - Paracord 바로가기 [http://paracord.kchm.kr](http://paracord.kchm.kr) --- ## ✔️ 개요 　 ``` ? 여러사람들이 다같이 채팅할수있고 1:1 채팅할수있는 커뮤니티 채팅사이트 구현 ``` --- ## ✔️ Github 리포지터리 　 ``` ? [https://github.com/kimchaemin000617/paracord](https://github.com/kimchaemin000617/paracord) ``` --- ## ✔️ 사용된기술 ### ⚓️ 버전관리 　 ~~~ - Git , Github ~~~ --- ### ⚓️ 배포 　 ~~~ - ? Github ~~~ ~~~ - ☕️ Jenkins ~~~ ~~~ - ? Docker ~~~ --- ### ♻️ 개발환경 　 ``` - Anaconda - Sqlyog - Chrome - Firefox - Window 11 - PIP ``` --- ### ? 서비스환경 　 ``` - Nginx - Mariadb - Docker - CentOS7 ``` --- ### ? 기술 스택 　 ``` - Python 3 - Django 4 - Django MTV - Django DRF - MariaDB - HTML,CSS,JS - JQuery - Tailwind - Bootstrap - daisy ``` --- ## ✔️ 요구사항 현황 | RQ-ID | 분류 | 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | | RQ-001 | 회원 | 회원가입 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-002 | 회원 | 로그인/로그아웃 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-003 | 회원 | 온/오프라인 상태 표시 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-004 | 회원 | 전체 유저 목록 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-005 | 회원 | 온라인 유저 목록 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-006 | 회원 | 유저 검색 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-007 | 회원 | 친구 추가 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-008 | 회원 | 친구 목록 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-101 | 채팅 | 단체 채팅 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-102 | 채팅 | 다이렉트 채팅 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-103 | 채팅 | 채팅방 생성 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-104 | 채팅 | 채팅방 나가기 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-105 | 채팅 | 채팅방 삭제 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-106 | 채팅 | 채팅방 목록 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-107 | 채팅 | 채팅방 검색 | 3/03 | 김채민 | ✔️ | 0.01 | | RQ-108 | 채팅 | 시스템 메시지 | 3/03 | 김채민 | ✔️ | 0.01 | --- ## ✔️ 기능 　 ### ? 회원 　 ~~~ - 회원가입시 로그인 할수있는 회원이 만들어진다. ~~~ ~~~ - 로그인시 회원으로 접속이 가능하다. ~~~ ~~~ - 로그아웃이 된다. ~~~ ~~~ - 온라인유저는 초록불, 오프라인유저는 빨간불 로 구별할수있다 ~~~ ~~~ - 친구 검색을 통해 친구를 검색할수있다 ~~~ ~~~ - 알림메세지를 통해 입 퇴장 메세지를 알려줄수있다 ~~~ ~~~ - 전체 회원을 보여줄수있다 ~~~ ~~~ - 친구 추가한 전체 친구목록을 보여줄수있다 ~~~ ~~~ - 전체 온라인 유저를 볼수있다 ~~~ --- ### ? 채팅 　 ~~~ - 채팅방만들기시 유저들과 채팅할수있는 채팅방을 만들수있다 ~~~ ~~~ - 채팅방나가기시 채팅방을 나갈수있다 ~~~ ~~~ - 채팅방검색을 통해 원하는 채팅방 을 찾을수있다 ~~~ ~~~ - 메인 아이콘을 을 통해 전체채팅방목록 을 볼수있다 ~~~ ~~~ - 단체채팅방을 만들어서 단체채팅을 할수있다 ~~~ ~~~ - 친구창에 다이렉트 메세지를 눌러 친구와 1:1 채팅 할수있다 ~~~ ~~~ - 시스템 메세지 구현을 통해 채팅방 입장 퇴장 알림메세지를 출력할수있다 ~~~ --- ## ✔️ ERD 　 ![ERD](https://i.postimg.cc/zz4DBN0t/graphviz.png) --- ## ✔️ 주요 폴더 및 파일 　 ```python - accounts : 회원앱 - base : 프로젝트 - chat : 채팅앱 - static : 정적으로 발생하는 정적파일들을 담는 폴더 - requirement : 의존성 파일 - .env : 설정파일 - package.json : node 의존성 - nodemodules : node 패키지 - docker-compose.yaml : 가상컨테이너 오케스트레이션 파일 - dockerfile : Docker Image를 만들기 위한 설정 파일 - tailwind.config.js : 테일윈드 설정 ``` ___ ## ? 배포 구조 　 - 커밋, 푸시, 젠킨스 빌드 유발, 컨테이너 내의 소스코드 리빌드 --- ### 서버 구조 $$uml !theme mars frame 작업자PC { frame Windows10 { frame Chrome { } } } frame 운영서버머신 { frame CentOS7(paracord．kchm．kr,_172．17．0．1) { circle 172．17．0．1――8000 circle 172．17．0．1――443 circle 172．17．0．1――3306 frame Docker { frame Nginx――1 { circle Nginx――1――443 } frame Mariadb――1 { circle Mariadb――1――3306 } frame python――2 { circle python――2――8000 } frame python――2――test { } } } } Chrome --> "172．17．0．1――443":1． https://paracord．kchm．kr 로 접속 "172．17．0．1――443" --> "Nginx――1――443" : 2． 외부 443 => Nginx 내부 443 "Nginx――1――443" --> "172．17．0．1――8000" : 3． Nginx Proxy Manager 에 의해 => 외부 8000 "172．17．0．1――8000" --> "python――2――8000" : 4． 외부 8000 => python――2 내부 8000 "python――2――8000" -[#green]-* "172．17．0．1――3306" : 5． DB 쿼리, 내부 8000 => 외부 3306 "172．17．0．1――3306" -[#green]-* "Mariadb――1――3306" : 6． 외부 3306 => Mariadb__1 내부 3306 $$ --- ### 젠킨스 배포순서, 테스트 실패시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity Github_Repository box "서버" entity Jenkins entity 테스트용_밍크컨테이너 entity 실서버용_밍크컨테이너 end box 개발자 -> 작업PC : Commit! 작업PC -> Github_Repository : Push! Github_Repository -> Jenkins : Webhook에 의해서 Commit Signal 전송 Jenkins -> 테스트용_밍크컨테이너 : 재배포 스크립트 실행 테스트용_밍크컨테이너 -> Jenkins : 테스트가 실패했습니다... Jenkins -> Jenkins : 이번 빌드는 실패로 처리하고, 작업을 종료합니다. 개발자 -> Jenkins : 해당 빌드의 콘솔기록을 확인하여 테스트가 왜 실패했는지 분석 $$ --- ### 젠킨스 배포순서, 테스트 성공시 $$uml !theme toy autonumber box "작업PC" actor 개발자 entity 작업PC end box entity Github_Repository box "서버" entity Jenkins entity 테스트용_밍크컨테이너 entity 실서버용_밍크컨테이너 end box 개발자 -> 작업PC : Commit! 작업PC -> Github_Repository : Push! Github_Repository -> Jenkins : Webhook에 의해서 Commit Signal 전송 Jenkins -> 테스트용_밍크컨테이너 : 재배포 스크립트 실행 테스트용_밍크컨테이너 -> Jenkins : All Clear Jenkins -> 실서버용_밍크컨테이너 : 리빌드 후 다시 실행하세요! 개발자 -> 실서버용_밍크컨테이너 : Web Brouser로 Build 되었는지 확인 $$ --- ## ? 주요 기능 / 화면 　 ### ▶️ 메인(로그인) ![메인화면 이미지](https://i.postimg.cc/qBmDLh0k/unknown.png) ```html

Paracord

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi

``` ``` ? Tailwind와 Daisy Ui를 사용한 메인 페이지 HTML 코드 ``` ```py # base/urls.py from django.contrib import admin from django.urls import path, include from django.contrib.auth import views as auth_views urlpatterns = [ path('', auth_views.LoginView.as_view(template_name='main.html'), name='accounts'), ] ``` ``` ? `url/`을 입력하면 main.html을 보여주는 path ``` --- ### ▶️ 전체 채팅방 목록 ![전체 채팅방 목록](https://i.postimg.cc/C1c7mt3v/unknown.png) ```html

Welcome to Paracord

파라코드에서는 여러 사람들이랑 소통할 수 있습니다

{% if rooms %} {% for room in rooms %}

{% if room.part_server %}

{% else %} {% endif %}

{% endfor %} {% else %}

채팅방 is lonely...

{% endif %}

{% endblock %} ``` ``` ? Tailwind와 Daisy Ui를 사용한 로그인 후 보이는 화면 HTML 코드 ``` ```py # chat/views.py def room_list(request): kw = request.GET.get('kw') if kw: rooms = Room.objects.filter(name__icontains=kw) | Room.objects.filter(name__startswith=kw) if not rooms: messages.error(request, "검색된 채팅방이 없습니다.") else: rooms = Room.objects.prefetch_related( Prefetch('part_user', queryset=User.objects.filter(id=request.user.id), to_attr='part_server')) rooms = rooms.exclude(room_type="direct") users = User.objects.all() context = {'rooms': rooms, 'users': users} return render(request, 'chat/room_list.html', context) ``` ``` ? 모든 Room object를 받아와 HTML로 넘겨주는 python 코드 (kw는 채팅방 검색에서 이용된다.) ``` --- ### ▶️ 채팅 ##### 단체 채팅 ![단체 채팅 이미지](https://i.postimg.cc/RF3Djvv3/unknown.png) ___ ##### 다이렉트 메세지 채팅 ___ ![다이렉트 메세지 채팅 이미지1](https://i.postimg.cc/N0MZ766w/2022-02-24-10-32-25.png) ![다이렉트 메세지 채팅 이미지2](https://i.postimg.cc/c4Sj5yRh/2022-02-24-10-34-21.png) ```html {% block app %} {% include 'chat/js/chat_logic.html' %}

{% endblock %} ``` ``` ? chat_logic.html을 실행시켜 채팅 내용들을 받아오는 Tailwind를 사용한 HTML 코드 ``` ___ ```js // chat/tamplates/chat/js/chat_logic.html let ChickChat__lastMessageId = 0; function ChickChat__loadMore() { $.get( "{% url 'chat:chat' room.id %}", { from_id: ChickChat__lastMessageId, }, function (data) { for (const chatKey in data.chats) { const chat = data.chats[chatKey]; ChickChat__lastMessageId = chat.id; ChickChat__renderMessage(chat); } console.log(1); setTimeout(ChickChat__loadMore, 200); }, "json" ); } let lastNickname = null; let lastTimeStamp = null; function ChickChat__renderMessage(chat) { let chat_timestamp = moment(chat.timestamp).format("LT"); console.log(chat["m_type"]); if (chat.m_type != "NOMAL") { if (chat.m_type == "ENTER") { $(".chat-messages").append(`

`); } else if (chat.m_type == "EXIT") { $(".chat-messages").append(`

`); } else { if (lastNickname != chat.nickname || lastTimeStamp != chat_timestamp) { $(".chat-messages").append(`

${chat.nickname} ${chat_timestamp}

${chat.message}

`); } else { $(".chat-messages").append(`

${chat.message}

`); } lastNickname = chat.nickname; lastTimeStamp = chat_timestamp; } } console.log($("#chat_scroll").scrollTop($("#chat_scroll")[0].scrollHeight)); } ChickChat__loadMore(); ``` ``` ? 지속적으로 서버와 통신해(Ajax) 해당 채팅방의 채팅 오브젝트를 가져오는 js코드 ``` ___ ```py # chat/views.py def room_detail(request, room_id): room = Room.objects.get(id=room_id) room_detail = "True" context = {'room': room, 'room_detail': room_detail} return render(request, 'chat/room_detail.html', context) ``` ``` ? url에 입력받은 room.id로 Room object를 찾아 html로 넘겨주는 python 코드 ``` --- ### ▶️ 채팅방 검색 ![채팅방검색](https://i.postimg.cc/6pQZ9qVQ/2022-02-24-10-20-01.png) ![채팅방검색2](https://i.postimg.cc/tJ51bGYP/2022-02-24-10-21-56.png) ```html ``` ``` ? 입력받은 kw(room.name)를 chat:list(views.py)로 넘겨주는 Tailwind를 사용한 html 코드 ``` ___ ```py # chat/views.py kw = request.GET.get('kw') if kw: rooms = Room.objects.filter(name__icontains=kw) | Room.objects.filter(name__startswith=kw) if not rooms: messages.error(request, "검색된 채팅방이 없습니다.") else: rooms = Room.objects.prefetch_related( Prefetch('part_user', queryset=User.objects.filter(id=request.user.id), to_attr='part_server')) ``` ``` ? 입력받은 kw에 해당되는 Room objects가 있으면 objects를 list로 넘겨주고, 없다면 안내메시지를 넘겨주는 python 코드 ``` --- ### ▶️ 채팅방 검색 (Modal) ![채팅방 검색 모달 이미지](https://i.postimg.cc/YqLVC6Lv/unknown.png) ```html ``` ``` ? 버튼 클릭 시 kw(room.name)를 입력받는 input 창을 출력하는 Tailwind, Daisy Ui를 사용한 HTML 코드(Modal) ``` ___ ```py # chat/views.py kw = request.GET.get('kw') if kw: rooms = Room.objects.filter(name__icontains=kw) | Room.objects.filter(name__startswith=kw) if not rooms: messages.error(request, "검색된 채팅방이 없습니다.") else: rooms = Room.objects.prefetch_related( Prefetch('part_user', queryset=User.objects.filter(id=request.user.id), to_attr='part_server')) ``` ``` ? 입력받은 kw에 해당되는 Room objects가 있으면 objects를 list로 넘겨주고, 없다면 안내메시지를 넘겨주는 python 코드 ``` --- ### ▶️ 채팅방 생성 (Modal) ![채팅방 생성 이미지](https://i.postimg.cc/pXzGt0zd/unknown.png) ```html ``` ``` ? 버튼 클릭 시 name(room.name)을 입력받는 input 창을 출력하는 Tailwind, Daisy Ui를 사용한 HTML 코드(Modal) ``` ___ ```py # chat/views.py @login_required(login_url='accounts:login') def room_create(request): if request.method == "POST": form = RoomForm(request.POST) if form.is_valid(): room = form.save(commit=False) room.host = request.user room.reg_date = timezone.now() room.save() request.user.part_server.add(room) messages.success(request, f"{room.name} 채팅방이 생성되었습니다.") return redirect('chat:detail', room_id=room.id) else: messages.error(request, "이미 존재하는 채팅방 이름입니다.") else: messages.error(request, "정상적이지 않은 접근입니다.") return redirect('chat:list') return redirect(request.META.get('HTTP_REFERER')) ``` ``` ?입력받은 room.name으로 room object를 생성하고 해당 채팅방으로 이동 시켜주는 python 코드 / room.name이 없거나, 중복되는 room.name이 있다면 에러 메시지를 출력한다. ``` --- ### ▶️ 채팅방나가기 ![채팅방 나가기 이미지](https://i.postimg.cc/sxZSCN54/2022-02-24-10-10-31.png) ~~~ ? Modal 을 이용하여 다른페이지로가는 불편함을 없애고 바로 방을나갈수있다 ~~~ ---- ### ▶️ 시스템메세지 ![시스템 메세지 이미지](https://i.postimg.cc/fTzC9w7G/2022-02-24-10-39-07.png) ~~~ ? 단체채팅방에서 시스템 메세지를 통해 입/퇴장 메시지를 출력한다. ~~~ --- ### ▶️ 유저 검색 ![유저 검색 이미지](https://i.postimg.cc/MKtgMP3p/unknown.png) ```html {% extends 'layout.html' %} {% block content %}

친구 추가하기

Paracord 닉네임을 입력하시면 친구추가를 할수있어요.

찾은 유저

{% if find_friend %}

친구를 찾았어요! 친구추가 버튼을 누르면 우린 친구!

{% for i in find_friend %}

{% endfor %} {% else %}

검색된 친구가 없어요.. 외롭네요ㅠㅠ

{% endif %}

{% endblock %} ``` ``` ? kw(user.nickname)를 입력받는 input 창을 출력하는 Tailwind, Daisy Ui를 사용한 HTML 코드 ``` ___ ```python # accounts/views.py def searching_user(request): kw = request.GET.get('kw') find_friend = User.objects.filter(nickname__icontains=kw) | User.objects.filter(nickname__startswith=kw) return render(request, 'friend_search.html', {'find_friend': find_friend}) ``` ``` ? 입력받은 kw에 해당되는 user object를 찾아 html로 넘겨주는 python 코드 ``` --- ### ▶️ 모든 유저 목록 ![https://i.postimg.cc/YC8xpT9t/unknown.png](https://i.postimg.cc/YC8xpT9t/unknown.png) ```html {% extends 'layout.html' %} {% block content %}

모든유저

Paracord 모든 유저 목록이에요!

{% for use in users %}

{% endfor %} {% endblock %} ``` ``` ?user objects를 출력하는 Tailwind, Daisy Ui를 사용한 HTML 코드 ``` ___ ```py # accounts/views.py def user_list_all(request): users = User.objects.all() context = {'users': users} return render(request, 'all_user_list.html', context) ``` ``` ? 모든 user object를 HTML로 넘겨주는 python 코드 ``` --- ### ▶️ 친구 목록 ![https://i.postimg.cc/D0qqRMHk/unknown.png](https://i.postimg.cc/D0qqRMHk/unknown.png) ```html {% extends 'layout.html' %} {% block content %}

친구

나의 친구들이에요!

{% for friend in user.friends.all %} {% endfor %}

{% endblock %} ``` ``` ? 로그인 유저의 friends 필터에 존재하는 user object를 출력하는 Tailwind, Daisy Ui를 사용한 HTML 코드 ``` ___ ```py # accounts/views.py def user_list(request):\ return render(request, 'friend_list.html') ``` ``` ?friend_list.html로 이동시키는 python 코드 ``` --- ### ▶️ 온라인 유저 목록 ![https://i.postimg.cc/8cDFfPK9/unknown.png](https://i.postimg.cc/8cDFfPK9/unknown.png) ```html {% extends 'layout.html' %} {% block content %}

온라인

온라인 상태인 사람들이예요!

{% for use in users %}

{% endfor %} {% endblock %} ``` ``` ?user objects를 출력하는 Tailwind를 사용한 HTML 코드 ``` ___ ```py # accounts/views.py def user_list_online(request): users = User.objects.filter(is_active=1) context = {'users': users} return render(request, 'online_user_list.html', context) ``` ``` ?모든 user object 중 is_active값이 1인 object만 필터링하여 HTML로 넘겨주는 python 코드 ``` --- ## ⚙ 기능 테스트 ### ? 회원 - ✅회원가입 : 2022-02-23 - ✅로그인 : 2022-02-23 - ✅로그아웃 : 2022-02-23 - ✅로그인 로그아웃 상태 표시 : 2022-02-23 - ✅유저 검색 : 2022-02-23 - ✅안내 메시지 : 2022-02-23 - ✅모든 회원 리스팅 : 2022-02-23 - ✅모든 친구 리스팅 : 2022-02-23 - ✅모든 온라인 유저 리스팅 : 2022-02-23 ### ? 채팅 - ✅채팅방 만들기 : 2022-02-23 - ✅채팅방 나가기 : 2022-02-23 - ✅채팅방 삭제 : 2022-02-23 - ✅채팅방 찾기 : 2022-02-23 - ✅단체 채팅 : 2022-02-23 - ✅다이렉트 메세지 채팅 : 2022-02-23 - ✅친구찾기 : 2022-02-23 - ✅친구추가 : 2022-02-23 - ✅시스템 메시지 추가 : 2022-02-23 - ✅모든 채팅방 리스팅 : 2022-02-23 - ✅내가 참가중인 채팅방 리스팅 : 2022-02-23 - ✅내가 만든 채팅방 리스팅 : 2022-02-23

게시글 상세