$$config title: 기술서 예시(1) - 내 할일은 내가 해 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 %}

회원탈퇴

{% 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 | | | | | | | |

회원정보

성명 :

{{ user.name }}

이메일 :

{{ user.email }}

성별 :

{{ user.gender }}