$$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-C|선수가 최소 100명 이상 등록되어야 한다|운영자|등록|✅| |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 세나라 ``` --- ### 로그인 --- #### ?‍동작화면

![img](https://i.imgur.com/sQfa8NW.png) --- ### ?주요 소스코드 - ?시퀀스 다이어그램

- ?유저모델 수정 ```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 진행✅ - 배포 성공 시퀀스 다이어그램✅

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