$$config title: New Title keywords: - IT - ... $$ $$config title: 내 할일은 내가 해 기술 설명서 keywords: - 장고 - 파이썬 - 기술서 $$ # ?사이트 기술서 ## ? 개요 ``` ☝ Django Framework를 통하여 게시판 형태의 TodoList 구현 ``` ``` ✌ Todolist 의 기능 및 계획 작성에 필요한 기능을 구현 ``` ### ? 링크 GitHub Repository : [https://github.com/solsolsol11/mytodo_project](https://github.com/solsolsol11/mytodo_project) 내 할일은 내가 해 링크 : [https://mytodo.phsol.site/](https://mytodo.phsol.site/) ## 1. 사용 기술 ### 1-1 버전 관리 ``` ⚓ - git & Github ``` ### 1-2 배포 ``` ⚓ - GITHUB - Jenkins - Docker ``` ### 1-3 개발 환경 ``` ⚓ - Anaconda - Pycham - SQLYog - Crome - PIP - MariaDB - Windows 10 ``` ### 1-4 서비스 환경 ``` ⚓ - NGINX - MariaDB - Docker - CentOS7 ``` ### 1-5 기술 스택 ``` ⚓ - Python 3 - Django 4 - Django MTV - MariaDB - HTML, CSS, JS - JQuery - Tailwind - BootStrap 5 ``` ### 1-6 ERD ![ERD](https://raw.githubusercontent.com/solsolsol11/cv_img/fccb57cb33c263f6172716ef65a31cb76bf5ec83/rgrg/docs/graphviz.svg) ## ? 기능 ### ?회원 ``` - 회원가입가능 - 회원가입 시 환영메일 발송 - 로그인이 가능 - 카카오 소셜 로그인가능 - 로그아웃 - 아이디찾기 - 비밀번호찾기(이메일 전송) - 프로필 수정 (이름 , 이메일, 성별, 프로필 이미지) - 비밀번호 변경 - 회원탈퇴 ``` ### ?계획 하기 ``` - TodoList 추가 - TodoList 추가 클릭 시 팝업창을 통해 계획 작성 - TodoList 추가 시 내용이 비었을 때 알림 - TodoList 삭제 - TodoList 선택삭제 가능 - TodoList 선택삭제 시 체크박스 체크 없을 때 알림창 - TodoList 각 게시판 별 선택삭제 가능 ``` ## ? 내부 폴더 및 파일 ``` - accounts : 회원앱 - base : 프로젝트 - su_list : 게획하기 앱 - media : 동적으로 발생하는 정적파일들을 담는 폴더 - static : 정적으로 발생하는 정적파일들을 담는 폴더 - node_modules : node 패키지 - .env : 설정파일 - tailwind.config.js : 테일윈드 설정파일 ``` ## ⌛ 배포구조 ``` - 커밋, 푸시, 젠킨스 빌드 유발, 컨테이너 내의 소스코드 리빌드 ``` ## ? 요구사항 ### 요구사항 분석표 | RQ-ID | 화면명 | 요구사항명| 요구사항내용 | 날짜 | 작성자 | 진행사항 | 버전명 | | --- | -- | --- | --- | --- | -- | --- | --- | | RQ-0001 | 공통 | 상단 메뉴 바 | 계획하기 게시판, 로그인, 회원가입, 아이디찾기, 비밀번호 찾기 탭으로 이동이 가능하다.| 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0002 | 공통 | 하단 영역 | 사이트 이름의 푸터가 있다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0003 | 메인 화면 | 가운데 영역 | 해당 TodoList의 설명과 계획하기 게시판 이동 버튼이 있다 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0004 | 계획하기 | 가운데 영역 | TodoList를 작성할 수 있는 게시판이 있다 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0005 | 계획하기 | 가운데 영역 | 추가 버튼을 누르고 계획을 추가할 수 있다 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0006 | 계획하기 | 가운데 영역 | 추가버튼 누를 시 계획을 추가할 수 있는 팝업창이 뜬다 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0007 | 계획하기 | 가운데 영역 | 내용이 없이 추가버튼을 클릭 시 알림 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0008 | 계획하기 | 가운데 영역 | 체크박스를 클릭하여 TodoList의 선택삭제 및 삭제가 가능하다 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0009 | 계획하기 | 가운데 영역 | 체크박스 없이 삭제버튼 클릭 시 알림 | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0010 | 프로필 | 상단 메뉴바 | 로그인후 프로필을 클릭하면 프로필 정보가 뜬다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0011 | 프로필 | 가운데 영역 | 프로필 수정 버튼을 클릭하여 프로필 수정이 가능하다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0012 | 비밀번호변경 | 가운데 영역 | 프로필 수정 폼에서 비밀번호 변경이 가능하다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0013 | 회원탈퇴 | 가운데 영역 | 비밀번호 찾기 폼이 있다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0014 | 로그인 화면 | 가운데 영역 | 로그인 폼이 있다.| 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0015 | 로그인 화면 | 가운데 영역 | 로그인 버튼 옆에 카카오 로그인 버튼이 있다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0016 | 아이디찾기 | 가운데 영역 | 아이디 찾기 폼이 있다. | 2/24 | 박한솔 | 반영 | 0.01 | | RQ-0017 | 비밀번호찾기 | 가운데 영역 | 비밀번호 찾기 폼이 있다. | 2/24 | 박한솔 | 반영 | 0.01 | ## ?Release ### 2022-02-24 v0.02 - 게시판 이모지 입력오류 수정 ### 2022-02-23 v0.01 - 회원가입 - 회원가입환영메일 - 카카오톡로그인 - 로그인 - 로그아웃 - 아이디찾기 - 비밀번호찾기(비밀번호리셋메일 발송) - 계획하기 게시판 작성 - 프로필 - 프로필 수정 - 비밀번호 변경 - 회원탈퇴 ## ?서버 구조 ![https://user-images.githubusercontent.com/85653591/156701224-e71ab1b5-c4a9-4cbf-9c2c-e02a2fb1c92c.png](https://user-images.githubusercontent.com/85653591/156701224-e71ab1b5-c4a9-4cbf-9c2c-e02a2fb1c92c.png) $$uml !theme mars frame 작업자PC { frame Windows10 { frame Chrome { } } } frame 운영서버머신 { frame CentOS7(public．phsol．site,_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 서버 { circle 서버――8000 } frame 서버――test { } } } } Chrome --> "172．17．0．1――443":1． https://mytodo．phsol．site 로 접속 "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" --> "서버――8000" : 4． 외부 8000 => 서버 내부 8000 "서버――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 되었는지 확인 $$ ## ? 기술설명 ### ?카카오톡 로그인 $$uml @startuml 사용자 -> 장고: 로그인버튼클릭 장고 --> 카카오톡로그인: 카카오톡로그인유도 카카오톡로그인 -> 장고: 인증키 장고 <-- 카카오톡로그인: 유효한지체크 @enduml $$ ![카카오톡 로그인](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/kakao_login.png) ```py # accounts/models.py class User(AbstractUser): ... @staticmethod def login_with_kakao(request: HttpRequest, provider_accounts_id): provider_type_code = User.ProviderTypeCodeChoices.KAKAO qs: QuerySet = User.objects.filter(provider_type_code=provider_type_code, provider_accounts_id=provider_accounts_id) if not qs.exists(): username = provider_type_code + "__" + str(provider_accounts_id) name = provider_type_code + "__" + str(provider_accounts_id) email = "" password = "" user = User.join(username=username, email=email, password=password, first_name=name, provider_type_code=provider_type_code, provider_accounts_id=provider_accounts_id) else: user: User = qs.first() login(request, user) ``` ### ?회원가입 ![회원가입](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/sign_up.png) ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %} {% endblock %} ``` ```py # accounts/forms.py class SignupForm(UserCreationForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['name'].required = True self.fields['username'].label = '아이디' self.fields['profile_img'].widget.attrs['accept'] = 'image/png, image/gif, image/jpeg' class Meta(UserCreationForm.Meta): model = User fields = ['username', 'password1', 'password2', 'email', 'name', 'gender', 'profile_img'] def clean_email(self): email = self.cleaned_data.get('email') if email: qs = User.objects.filter(email=email) if qs.exists(): raise forms.ValidationError("이미 등록된 이메일 주소입니다.") return email ``` ### ?아이디 찾기 ![아이디찾기](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/find_username.png) ```py # accounts/forms.py class FindUsernameForm(forms.ModelForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['name'].required = True class Meta: model = User fields = ['name', 'email'] ``` ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %} {% endblock %} ``` ### ?비밀번호 찾기(이메일발송) ![비밀번호찾기 (이메일발송)](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/pw_reset.png) ![비밀번호찾기버튼클릭](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/pw_reset_btn.png) ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %} {% endblock %} ``` ### ?비밀번호 찾기 후 이메일에 도착한 링크 클릭 시 ![비밀번호변경](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/change_pw.png) ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% load i18n static %} {% block content %} {% if validlink %}

비밀번호 변경

{% translate "정확한 비밀번호 입력 확인을 위해 두번 씩 입력해주시기 바랍니다." %}

{% else %} {% endif %} {% endblock %} ``` ### ?프로필 수정 ![프로필 수정](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/profile.png) ```py # accounts/forms.py class CustomUserChangeForm(UserChangeForm): def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) self.fields['email'].required = True self.fields['name'].required = True self.fields['username'].label = '아이디' self.fields['username'].widget.attrs['readonly'] = True self.fields['profile_img'].widget.attrs['accept'] = 'image/png, image/gif, image/jpeg' self.fields['password'].widget = forms.HiddenInput() class Meta(UserChangeForm.Meta): model = User fields = ['username', 'name', 'email', 'gender', 'profile_img'] def clean_email(self): username = self.cleaned_data.get('username') email = self.cleaned_data.get('email') if email: qs = User.objects.filter(email=email).exclude(username=username) if qs.exists(): raise forms.ValidationError("이미 등록된 이메일 주소입니다.") return email ``` ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

회원정보

정보수정

{% if user.profile_img %}

{% else %}

{% endif %}

성명 :

이메일 :

성별 :

{% endblock %} ``` ### ?비밀번호 변경 ![비밀번호변경](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/change_pw.png) ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

비밀번호 변경

메인 페이지로

{% endblock%} ``` ### ?회원탈퇴 ![회원탈퇴](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/user_del.png) ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

회원탈퇴

{% csrf_token %}

{{ user.name }} 회원님의 계정이 삭제됩니다.
탈퇴시 개인정보 및 이용정보가 삭제되며 복구할 수 없습니다.
본인의 비밀번호를 입력한 후 하단의 유의사항 동의에 체크하세요.

{{ password_form.password.label }} {{ password_form.password }} {% if password_form.password.errors %} {% for error in password_form.password.errors %}

{% endfor %} {% endif %} 본인인증을 위해 비밀번호를 입력해주세요.

유의사항 동의

{% endblock %} ``` ### ?메인화면 ![메인화면](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/main.png) ### ?계획하기 ![계획하기](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/todolist.png) ```py # su_list/forms.py class SeriousNoUrgentListForm(ModelForm): class Meta: model = SeriousNoUrgentList fields = ['serious_no_urgent'] class SeriousYesUrgentListForm(ModelForm): class Meta: model = SeriousYesUrgentList fields = ['serious_yes_urgent'] class NoSeriousNoUrgentForm(ModelForm): class Meta: model = NoSeriousNoUrgent fields = ['no_serious_no_urgent'] class NoSeriousYesUrgentForm(ModelForm): class Meta: model = NoSeriousYesUrgent fields = ['no_serious_yes_urgent'] ``` ```py # su_list/models.py # 중요하지만 급하지 않아 리스트 모델 class SeriousNoUrgentList(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE) serious_no_urgent = models.TextField('중요and안급함', null=True) # 중요하고 급해 리스트 모델 class SeriousYesUrgentList(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE) serious_yes_urgent = models.TextField('중요and급함', null=True) # 중요하지도 않고 급하지도 않아 리스트 모델 class NoSeriousNoUrgent(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE) no_serious_no_urgent = models.TextField('안중요and안급함', null=True) # 중요하진 않은데 급해 리스트 모델 class NoSeriousYesUrgent(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE) no_serious_yes_urgent = models.TextField('안중요and급함', null=True) ``` ### ?계획하기 팝업창 ![계획하기 팝업창](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/todo_pop_up.png) ```js # base/static/common.js function a1__show_green(){ console.log("성공"); $('.modal1').css('display', 'block') } function a1__show_red(){ console.log("성공"); $('.modal2').css('display', 'block') } function a1__show_gray(){ console.log("성공"); $('.modal3').css('display', 'block') } function a1__show_gold(){ console.log("성공"); $('.modal4').css('display', 'block') } $('.add-green').click(a1__show_green); $('.add-red').click(a1__show_red); $('.add-gray').click(a1__show_gray); $('.add-gold').click(a1__show_gold); function a1__hide_green(){ $('.modal1').css('display', 'none'); console.log("성공2"); } function a1__hide_red(){ $('.modal2').css('display', 'none'); console.log("성공2"); } function a1__hide_gray(){ $('.modal3').css('display', 'none'); console.log("성공2"); } function a1__hide_gold(){ $('.modal4').css('display', 'none'); console.log("성공2"); } $('.cancel').click(a1__hide_green); $('.cancel').click(a1__hide_red); $('.cancel').click(a1__hide_gray); $('.cancel').click(a1__hide_gold); function action_add__green(){ var text_add1 = $("#text_add1").val(); //입력할 글씨 var ul_list1 = $("#ul_list1"); //ul_list선언 ul_list1.append("

"+text_add1+"

"); //ul_list안쪽에 li추가 $('.modal1').css('display', 'none'); console.log("성공4"); } function action_add__red(){ var text_add2 = $("#text_add2").val(); //입력할 글씨 var ul_list2 = $("#ul_list2"); //ul_list선언 ul_list2.append("

"+text_add2+"

"); //ul_list안쪽에 li추가 $('.modal2').css('display', 'none'); console.log("성공4"); } function action_add__gray(){ var text_add3 = $("#text_add3").val(); //입력할 글씨 var ul_list3 = $("#ul_list3"); //ul_list선언 ul_list3.append("

"+text_add3+"

"); //ul_list안쪽에 li추가 $('.modal3').css('display', 'none'); console.log("성공4"); } function action_add__gold(){ var text_add4 = $("#text_add4").val(); //입력할 글씨 var ul_list4 = $("#ul_list4"); //ul_list선언 ul_list4.append("

"+text_add4+"

"); //ul_list안쪽에 li추가 $('.modal4').css('display', 'none'); console.log("성공4"); } $('.add1').click(action_add__green); $('.add2').click(action_add__red); $('.add3').click(action_add__gray); $('.add4').click(action_add__gold); /* 중요하지만 급하지 않아 체크박스 전체 선택 */ $('.green__check_all').change(function(el) { if ( this.checked ) { $('.green_check__item:not(:checked)').prop('checked', true); } else{ $('.green_check__item:checked').prop('checked', false); } }); $('.green_check__item').change(function(){ const allChecked = $('.green_check__item:not(:checked)').length == 0; $('.green__check_all').prop('checked', allChecked); }); /* 중요하지만 급하지 않아 체크박스 전체 선택 끝 */ /* 중요하고 급해 체크박스 전체 선택 */ $('.red__check_all').change(function() { if ( this.checked ) { $('.red_check__item:not(:checked)').prop('checked', true); } else{ $('.red_check__item:checked').prop('checked', false); } }); $('.red_check__item').change(function(){ let allChecked = $('.red_check__item:not(:checked)').length == 0; $('.red__check_all').prop('checked', allChecked); }); /* 중요하고 급해 체크박스 전체 선택 끝 */ /* 중요하지도 않고 급하지도 않아 체크박스 전체 선택 */ $('.gray__check_all').change(function() { if ( this.checked ) { $('.gray_check__item:not(:checked)').prop('checked', true); } else{ $('.gray_check__item:checked').prop('checked', false); } }); $('.gray_check__item').change(function(){ let allChecked = $('.gray_check__item:not(:checked)').length == 0; $('.gray__check_all').prop('checked', allChecked); }); /* 중요하지도 않고 급하지도 않아 체크박스 전체 선택 끝 */ /* 중요하진 않은데 급해 체크박스 전체 선택 */ $('.gold__check_all').change(function() { if ( this.checked ) { $('.gold_check__item:not(:checked)').prop('checked', true); } else{ $('.gold_check__item:checked').prop('checked', false); } }); $('.gold_check__item').change(function(){ let allChecked = $('.gold_check__item:not(:checked)').length == 0; $('.gold__check_all').prop('checked', allChecked); }); /* 중요하진 않은데 급해 체크박스 전체 선택 끝 */ // 체크박스 끝 ``` ```html {% extends "layout.html" %} {% load django_bootstrap5 %} {% block content %}

중요하지만 급하지 않아

중요하고 급해

중요하지도 않고 급하지도 않아

중요하진 않은데 급해

{% endblock %} ``` ## ?이모지 ![이모지](https://raw.githubusercontent.com/solsolsol11/cv_img/master/img_list/cv_img/emoji.png) --- ## ?기술 테스트 ### ✨회원 | 기술테스트 | | | | | | | | | | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | 회원가입 | ✅2022-02-17 | ✅2022-02-28 | | | | | | | | | 회원가입 시 환영메일 발송| ✅2022-02-21 | ✅2022-02-28 | | | | | | | | | 로그인 | ✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 카카오로그인 | ✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 로그아웃 | ✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 아이디찾기 | ✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 비밀번호찾기(이메일 전송)|✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 프로필 수정 |✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 비밀번호 변경 | ✅2022-02-23 | ✅2022-02-28 | | | | | | | | | 회원탈퇴 |✅2022-02-23 | ✅2022-02-28 | | | | | | | | ### ✨계획 하기 | 기술테스트 | | | | | | | | | | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | TodoList| ✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 추가 클릭 시 팝업창을 통해 계획 작성| ✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 추가 시 내용이 비었을 때 알림| ✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 삭제 | ✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 선택삭제 가능 | ✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 선택삭제 시 체크박스 체크 없을 때 알림창 | ✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 각 게시판 별 선택삭제 가능|✅2022-02-20 | ✅2022-02-28 | | | | | | | | | TodoList 각 게시판 이모지 출력|✅2022-02-24 | ✅2022-02-28 | | | | | | | | $$config title: [포토폴리오]?Django 커뮤니티 사이트 기술서 keywords: - 유용재 - 풀스택 - 테니스 라켓 리뷰 - 선수 응원 $$ # ?개요 ## 가. 소개 - **사이트 명 : 세상에 나쁜 라켓은 없다** - 장고를 이용한 테니스 라켓 리뷰 커뮤니티 사이트 제작 - 테니스 라켓을 리뷰하고 관리자 점수와 방문객 점수(별점)를 비교하여 테니스 라켓 정보 제공 - 선수 목록을 만들고 선수별 특성으로 흥미 부여. 방문객의 응원 댓글 기능 부여. ## 나. 사이트 주소 - [세상에 나쁜 라켓은 없다](tennis.uyong.site) --- # ?환경 ## 가. 형상관리 - [깃허브 형상관리 : https://github.com/HiImYong/projectSNR](https://github.com/HiImYong/projectSNR) ## 나. 기술스택 ``` - Django - HTML/CSS/JS - CentOS - jQuery - MariaDB - Figma - Bootstrap - Tailwind - Fabicon - Jenkins CI / CD ``` ## 다. 개발환경 ``` - SQLyog - Pycham - Window 10 ``` # ?요구사항과 기능구현 여부 |목록|요구사항|이용대상|기능종류|구현여부|비고 | --- | --- | --- | --- |---|---| |RQ-001-C|라켓이 최소 500종 이상이어야 한다 |운영자|등록|✅| |RQ-002-R|라켓 이름 검색이 가능하다 | 회원|검색|✅| |RQ-003-R|라켓 브랜드별 검색이 가능하다|회원|검색|✅| |RQ-004-C-R-D|사용자 평점 등록이 가능하다|회원|등록|✅| |RQ-005-C-R-U-D|사용자 리뷰 등록이 가능하다|회원|등록|✅| |RQ-006-C-D|사용자의 라켓 좋아요 등록이 가능하다|회원|등록|✅| |RQ-007-R|사용자의 라켓 평점이 평균으로 출력되어 나와야한다|회원, 운영자|출력|✅| |RQ-008-R|사용자의 라켓 평점 등록 순 정렬이 가능하다|회원|정렬|✅| |RQ-009-R|운영자의 라켓 평점 등록 순 정렬이 가능하다|회원|정렬|✅| |RQ-010-R|사용자의 라켓 댓글 개수 순 정렬이 가능하다|회원|정렬|✅| |RQ-011-R|게시글 작성자가 출력되어 나와야한다.|회원|정렬|✅| |RQ-012-R|게시글의 댓글 수가 출력되어 나와야한다.|회원|등록|✅| |RQ-013-R|선수 이름 검색이 가능하다|회원|검색|✅| |RQ-014-C|선수별 특징이 나타나야 한다|운영자|등록|✅| |RQ-015-C-D|선수별 좋아요 등록이 가능하다|회원|등록|✅| |RQ-016-C-R-U-D|선수별 응원 등록이 가능하다|회원|등록|✅| |RQ-017-R|사용자의 선수 좋아요 등록 순 정렬이 가능하다|회원|정렬|✅| |RQ-018-R|사용자의 선수 댓글 순 개수 순 정렬이 가능하다|회원|정렬|❎|미구현 |RQ-019-C-D|로그인이 가능해야한다|회원|로그인|⚠|로그인 수단이 하나밖에 없음(카카오톡) |RQ-020-C-R-U-D|운영자와 접촉할 수 있는 수단이 존재한다|회원|등록|⚠|댓글기록을 통한 기록으로 변경 필요 --- # ?모델 구성과 주요 동작 알고리즘 ## ?Entity Relationship Diagram ![https://i.imgur.com/3Ka1UNY.png](https://i.imgur.com/3Ka1UNY.png) --- ## ?주요 동작 알고리즘 ### 라켓 리스트에서 라켓 선택, 리뷰 등록 알고리즘

--- # ?기능 ## 동작 화면과 소스코드 ### 홈 --- #### ?‍동작화면 - ?사이트 대문

--- #### ?주요 소스코드 - ?base > static 폴더 내부의 스타일 시트 등 정적 파일 사용을 위해 기입하는 템플릿태그 - {% load static %} --- - ?base > static 폴더 내부 정적파일 가져오기 ```python ``` --- - ?사용자 알림 표시 ```python {% if messages %} {% for message in messages %}

``` --- - ?네비게이션 바 메뉴 ```html 라켓 선수도감 스트링 About 세나라 ``` --- ### 로그인 --- #### ?‍동작화면

--- ### ?주요 소스코드 - ?시퀀스 다이어그램

- ?유저모델 수정 ```python class User(AbstractUser): class loginType(models.TextChoices): GOOGLE = "google", "구글" KAKAO = "kakao", "카카오" providerType = models.CharField('연계 회원가입 기능 제공자인 프로바이더의 타입코드', max_length=20, choices=loginType.choices, default='unknown') providerAccountsId = models.PositiveIntegerField('연계 회원가입 기능 제공자인 프로바이더의 회원번호', default=0) name = models.CharField('이름', max_length=100) profile_img = models.ImageField('프로필이미지', blank=True, upload_to="accounts/profile_img/%Y/%m/%d", help_text="gif/png/jpg 이미지를 업로드해주세요.") reg_date = models.DateTimeField('등록날짜', auto_now_add=True) update_date = models.DateTimeField('갱신날짜', auto_now=True) @staticmethod def dbRegisterAndLoginKakao(request: HttpRequest, account_id: int, provider_accounts_nickname: str, provider_accounts_thumbnail_image_url: str): getProviderType = User.loginType.KAKAO qs: QuerySet = User.objects.filter(providerType=getProviderType, providerAccountsId=account_id) if qs.exists(): user: User = qs.first() else: username = account_id name = provider_accounts_nickname if provider_accounts_nickname else username email = "" password = "" user: User = User.objects.create_user(username=username, email=email, password=password, name=name, providerType=getProviderType, providerAccountsId=account_id) if provider_accounts_thumbnail_image_url: provider_accounts_thumbnail_image_url_parsed = urlparse(provider_accounts_thumbnail_image_url) provider_accounts_thumbnail_image_file_name = os.path.basename( provider_accounts_thumbnail_image_url_parsed.path) response = urlopen(provider_accounts_thumbnail_image_url) io = BytesIO(response.read()) user.profile_img.save(provider_accounts_thumbnail_image_file_name, File(io)) login(request, user) ``` --- - ?로그인앱 views.py ```python import os from django.contrib import messages from django.contrib.auth.views import logout_then_login from django.http import HttpRequest, HttpResponseRedirect from django.shortcuts import render, redirect import requests # Create your views here. from account.models import User def logOut(request: HttpRequest): messages.success(request, "로그아웃 되었습니다.") return logout_then_login(request, login_url='/racket') def kakaoLogin(request: HttpRequest): REST_API_KEY = os.environ.get("KAKAO_APP__REST_API_KEY") REDIRECT_URI = os.environ.get("KAKAO_APP__LOGIN__REDIRECT_URI") # dotenv를 통해 저장된 REST_API KEY 값과 LOGIN REDIRECT URL 을 가져옴 return redirect( f"https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code" # client_id를 통해 인증 코드 요청. 받아온 코드를 REDIRECT_URI로 전달. ) def kakaoLoginCallBack(request): code = request.GET.get("code") REST_API_KEY = os.environ.get("KAKAO_APP__REST_API_KEY") REDIRECT_URI = os.environ.get("KAKAO_APP__LOGIN__REDIRECT_URI") token_request = requests.get( f"https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&code={code}" # 인증 코드를 합쳐서 인증 토큰을 요청 ) token_json = token_request.json() error = token_json.get("error", None) if error is not None: raise Exception("에러가 발생하였습니다.") access_token = token_json.get("access_token") profile_request = requests.get( "https://kapi.kakao.com/v2/user/me", headers={"Authorization": f"Bearer {access_token}"}, # 가져온 토큰을 통해 API를 호출 ) profile_json = profile_request.json() # 유효성이 확인된 토큰에 대해 응답 전달 account_id = profile_json.get("id") profile: dict = profile_json.get("kakao_account").get("profile") nickname = profile.get("nickname", "") thumbnail_image_url = profile.get("thumbnail_image_url", "") User.dbRegisterAndLoginKakao(request, account_id, nickname, thumbnail_image_url) messages.success(request, f"{nickname}님 환영합니다. 카카오톡 계정으로 로그인되었습니다") return redirect("racket:racketMain") ``` --- ### 라켓 리스트 --- #### ?‍동작화면 - ?라켓 컨텐츠

--- #### ?주요 소스코드 - ?라켓 리스트 출력 ```python racket > views.py def racketMain(request: HttpRequest): getBrand = RacketBrand.objects.all() # 전체 라켓 get ORM getSearchKeyword = request.GET.get('searchKeyword', '') # 검색 키워드 받아오기 sortBrandId = request.GET.get('sortBrand', '') # 브랜드별 소팅을 위한 키 받아오기 sort = request.GET.get('sort', '') # 그 외 소팅방법 받아오기 page = request.GET.get('page', '1') # 페이지네이터 getRacket = Racket.objects.order_by('name') if getSearchKeyword: getRacket = getRacket.filter(name__icontains=getSearchKeyword) if getSearchKeyword and not sortBrandId: getRacket = getRacket.filter(name__icontains=getSearchKeyword) if sortBrandId: getRacket = getRacket.filter(brand_id=sortBrandId) if sort == 'names': getRacket = getRacket.order_by('name') elif sort == 'adminScore': getRacket = getRacket.order_by(F('detail__adminAvgScore').desc(nulls_last=True)) elif sort == 'visitorScore': getRacket = getRacket.order_by(F('visitorAvgScore').desc(nulls_last=True)) elif sort == 'countLike': getRacket = getRacket.order_by(F('countLike').desc(nulls_last=True)) paginator = Paginator(getRacket, 10) # 페이지당 10개씩 보여주기 getRacket = paginator.get_page(page) return render(request, "racket/racketMain.html", {'racketItems': getRacket, 'racketBrandItems': getBrand}) ``` #### 온라인 API와 파이썬 소스코드를 이용한 크롤링 - 크롤링 소스코드 통하여 구글 이미지 다운로드 --- - ?1차 작업 : https://api.racketlogger.com/rackets 접속하여 라켓 800여종 API 접근 - JSON 형식 파일 파이썬을 통해서 데이터베이스에 삽입

--- - ?2차 작업 : SQLyog를 사용하여 파일 CVS 추출

--- - ?3차 작업 : 스프레드시트 함수 이용하여 크롤링시 넣어줄 파일 형식(쉼표구분)으로 조작

--- - ?4차 작업 : 크롤링 프로그램에 구문 삽입하여 라켓 800여종 사진 다운로드

```python from google_images_download import google_images_download response = google_images_download.googleimagesdownload() arguments = {"keywords": "라켓이름1, 라켓이름2", # 검색 키워드 "limit": 1, # 검색 건당 사진 수 "print_urls": True, "format": "jpg"} # 사진포멧 paths = response.download(arguments) print(paths) ``` --- - ?5차 작업 : 파일 이름 조작 프로그램 통해 일괄 파일명 수정

--- ### 라켓 세부 내용 --- #### ?‍동작화면 - ?라켓 정보 표출 및 좋아요

--- - ?라켓 설명과 평점

--- - ?라켓 평점 등록 전

--- - ?라켓 평점 등록 후

--- #### ?주요 소스코드 - ?라켓 정보 표출 ```python def racketDetail(request, parameter): getRacketQs = Racket.objects.filter(id=parameter) getRacket = getRacketQs.first() getRacketDetail = RacketDetail.objects.filter(racket_id=parameter) getReviewForm = racketReview.forms.ReviewForm() getReivewList = RacketReviewModel.objects.filter(visitorRacket_id=parameter) getAvgScore = RacketReviewModel.objects.filter(visitorRacket_id=parameter).aggregate(Avg('visitorScore')) return render(request, 'racket/racketDetail.html', {'racketItems': getRacket, 'racketDetailItems': getRacketDetail, 'racketReviewForm': getReviewForm, 'racketReivewListItems': getReivewList, 'racketAvgScoreItem': getAvgScore }) ``` - ?좋아요 ```python def like(request, parameter, self=None): getRacketQs = Racket.objects.filter(id=parameter) # 딕셔너리 변수에 파라미터를 받아와 라켓들 넣어줌 getRacket = getRacketQs.first() # 혹시 모르니까 첫번째 라켓만 딕셔너리에서 빼냄 checkUser = getRacket.like.filter(id=request.user.id) # name이 와서는 안되나요? # 리퀘스트와 함께 온 라켓정보와 유저 정보 중 디비를 뒤져서 id를 통해 좋아요한 유저 빼냄. if checkUser.exists(): # 만약에 해당 라켓에 이전에 그 유저가 좋아요를 했다면 getRacket.like.remove(request.user) # 해당 유저 정보를 삭제함. 이 때 else: getRacket.like.add(request.user) getLikeCount = getRacket.like.all().aggregate(Count('id'))['id__count'] print(getLikeCount) getRacket.countLike = getLikeCount getRacket.save(self) return redirect('racket:racketDetail', parameter=parameter) ``` - ?라켓 평점 등록 ```html templates > racket > racketDetail 라켓 디테일 템플릿입니다.

별을 눌러서 점수를 매겨주세요!

``` ```python racketReview > forms.py 제출 폼입니다. class ReviewForm(forms.Form): # 모델 폼은 이너 클래스인 Meta 클래스가 반드시 필요하다. # Meta 클래스에는 사용할 모델과 모델의 속성을 적어야 한다. visitorReview = forms.CharField( max_length=100, label='한줄평', widget=forms.TextInput(attrs={ 'class': 'textReview', }) ) visitorScore = forms.IntegerField( label='한줄평', widget=forms.NumberInput(attrs={ 'class': 'scoreReview', }) ) ``` ```python racket > signals.py 라켓시그널입니다. 라켓 리뷰에서 리뷰 작성시 평균을 산정하여 라켓모델에 전달합니다. @receiver(post_save, sender=RacketReviewModel) def on_post_product_save(sender, instance: RacketReviewModel, created: bool, raw: bool, using, update_fields, **kwargs): racket: Racket = instance.visitorRacket getVisitorAvgScore = racket.racketreviewmodel_set.aggregate(Avg('visitorScore'))['visitorScore__avg'] racket.visitorAvgScore = getVisitorAvgScore racket.save() ``` --- ### 선수 리스트 --- #### ?‍동작화면

#### ?주요 소스코드 - ?선수 리스트 ```python def playerMain(request: HttpRequest): getSearchKeyword = request.GET.get('searchKeyword', '') sort = request.GET.get('sort', '') getPlayers = Player.objects.order_by('name') if getSearchKeyword: getPlayers = getPlayers.filter(name__icontains=getSearchKeyword) if sort == 'names': getPlayers = getPlayers.order_by('name') elif sort == 'countLike': getPlayers = getPlayers.order_by(F('countLike').desc(nulls_last=True)) getPlayerCharacteristic = playerCharacteristic.objects.all() return render(request, "player/playerMain.html", {'playerItems': getPlayers, 'characteristicItems': getPlayerCharacteristic }) ``` --- ### 선수 세부 내용 --- #### ?‍동작화면 - ?선수 정보 표출

--- - ?선수 특성과 좋아요

--- - ?선수 응원 등록 전

--- - ?선수 응원 등록 후

#### ?주요 소스코드 - ?선수 정보 표출 ```python def playerDetail(request, parameter): getPlayerQs = Player.objects.filter(id=parameter) getPlayer = getPlayerQs.first() getPlayerCharacteristic = playerCharacteristic.objects.filter(playerJoin_id=parameter) getPlayerReview = PlayerReviewModel.objects.filter(visitorPlayer_id=parameter) return render(request, "player/playerDetail.html", {'playerItems': getPlayer, 'characteristicItems': getPlayerCharacteristic, 'playerReviewItems': getPlayerReview, }) ``` - ?선수 특성과 좋아요 ```python def likePlayer(request, parameter, self=None): getPlayerQs = Player.objects.filter(id=parameter) # 딕셔너리 변수에 파라미터를 받아와 라켓들 넣어줌 getPlayer = getPlayerQs.first() # 혹시 모르니까 첫번째 라켓만 딕셔너리에서 빼냄 checkUser = getPlayer.like.filter(id=request.user.id) # name이 와서는 안되나요? # 리퀘스트와 함께 온 라켓정보와 유저 정보 중 디비를 뒤져서 id를 통해 좋아요한 유저 빼냄. if checkUser.exists(): # 만약에 해당 라켓에 이전에 그 유저가 좋아요를 했다면 getPlayer.like.remove(request.user) # 해당 유저 정보를 삭제함. 이 때 else: getPlayer.like.add(request.user) getLikeCount = getPlayer.like.all().aggregate(Count('id'))['id__count'] print(getLikeCount) getPlayer.countLike = getLikeCount getPlayer.save(self) return redirect('player:playerDetail', parameter=parameter) ``` - ?선수 응원 ```python 폼 속성 class ReviewForm(forms.Form): # 모델 폼은 이너 클래스인 Meta 클래스가 반드시 필요하다. # Meta 클래스에는 사용할 모델과 모델의 속성을 적어야 한다. visitorReview = forms.CharField( max_length=100, label='한줄평', widget=forms.TextInput(attrs={ 'class': 'textReview', }) ) ``` ```python 제출, 수정 삭제 @require_POST def newPlayerReview(request, parameter): if request.method == "POST": getForm = ReviewForm(request.POST) if getForm.is_valid(): savedText = getForm.cleaned_data['visitorReview'] PlayerReviewModel.objects.create(visitorAccount=request.user, visitorReview=savedText, visitorPlayer_id=parameter) messages.success(request, "리뷰가 등록되었습니다") print("저장완료") return redirect('{}#anchor{}'.format(resolve_url('player:playerDetail', parameter=parameter), 9998)) else: print("저장실패") return redirect('{}#anchor{}'.format(resolve_url('player:playerDetail', parameter=parameter), 9998)) else: getForm = ReviewForm() def modifyReview(request): jsonObject = json.loads(request.body) getReview = PlayerReviewModel.objects.filter(id=jsonObject.get('id')) context = { 'result': 'no' } if getReview is not None: getReview.update(visitorReview=jsonObject.get('content')) context = { 'result': 'ok' } return JsonResponse(context) return JsonResponse(context) def deleteReview(request): jsonObject = json.loads(request.body) getReview = PlayerReviewModel.objects.filter(id=jsonObject.get('id')) context = { 'result': 'no' } if getReview is not None: getReview.delete() context = { 'result': 'ok' } return JsonResponse(context) return JsonResponse(context) ``` --- # ?테스트 내용 |순번|테스트|결과|비고| |---|---|---|---| 1(R)|라켓리스트 출력|⭕ 2(R)|사진이 없는 라켓은 다른 이미지로 대체|⭕ 3(CR)|카카오톡 로그인|⭕ 4(RD)|카카오톡 로그아웃|⭕ 5(C)|리뷰와 별점 등록 동시에 작동|⭕ 6(U)|리뷰 수정시 창을 벗어나지 않음|⭕ 7(C)|리뷰 등록시 리뷰 목록으로 자동 이동|⭕ 8(D)|리뷰 삭제 가능|⭕ 9(R)|선수특성 선택시 설명 화살표 출력|⭕ 10(R)|특성 화살표는 항상 최상단|⭕ # ?배포 - 가. ?가비아 - 구매, 결제, 연장 진행 - 나. ?dnszi - 도메인관리 - 관리소유권 받아오기 - 다. ?네이버클라우드플랫폼 - CentOS로 진행 - 포트포워딩 진행 - 라. ?Nginx 프록시 서버 - 프록시 호스트 추가 - 프록시 호스트 추가시 데이터 송수신에 대한 캐시 설정 적용 - 타이머 다이어그램

- 설정내역 ``` set $srcRoot /data/site_projects/python__2/src; location /static { alias $srcRoot/static; expires 10m; } location /media { alias $srcRoot/media; expires 10m; } ``` - 마. ?배포 진행 - 도커를 통한 파이썬 설치✅ - github pull 진행 - migrations 진행 - 바. ?‍?젠킨스 내용 작성 - CI / CD 진행✅ - 배포 성공 시퀀스 다이어그램✅

- 배포 실패 시퀀스 다이어그램

회원정보

성명 :

{{ user.name }}

이메일 :

{{ user.email }}

성별 :

{{ user.gender }}