-
사용자가 영어 회화 및 인터뷰를 연습할 수 있는 플랫폼
-
영어 인터뷰 준비가 있거나 영어 스피킹 실력을 기르고 싶은 사람을 위한 플랫폼
-
DRF 활용 웹 개발: 모든 구현은 Django Rest Framework를 사용하여 진행
-
API 기능 구현: 기존 OpenAI에서 제공하는 API 대신 직접 구축한 서버(DRF:Dangro Rest Framework)를 통해 요청
-
프론트와 백앤드 분리 : JS를 통해 HTTP/HTTPS 백엔드 서버 통신
-
사용자 인증: Simple JWT라이브러리를 활용한 회원가입 및 로그인 기능 구현
-
챗봇 API: Django 서버 내 ChatGPT API 구현
-
사용 제한: 각 사용자는 하루에 최대 5번 요청 가능
-
데이터베이스 관리: 채팅 내역 저장 및 조회 기능
-
FE:
✔ Tailwind 사용으로 css 간결화
-
BE:
-
Deployment:
✔ Github 프론트 배포, AWS Lightsail 백엔드 배포
📍Backend 배포용 : https://github.com/maxkim77/DRFChatService_BE
📍Frontend 배포용 : https://github.com/maxkim77/DRFChatService_FE
-
프론트엔드(Git 배포) : https://dev.maxworld7070.net/
-
백엔드(Nginx 배포) : https://back.maxworld7070.net/
- Tool : Mindmeister
-
DRF 활용: 모든 구현은 Django Rest Framework를 사용하여 진행
-
사용자 인증: 회원가입 및 로그인 기능 구현
-
챗봇 API: Django 서버 내 ChatGPT API 구현
-
사용 제한: 각 사용자는 하루에 최대 5번 요청 가능
-
데이터베이스 관리: 채팅 내역 저장 및 조회 기능
-
도메인 및 배포: 개인 도메인 등록 및 HTTPS 적용
-
OAuth2 연동: 카카오, GitHub 등 OAuth2 연결
-
Tool : Mermaid
| Scope | WBS Level | WBS ID | WBS Element Title | Completion (Completed Date) |
|---|---|---|---|---|
| Planning | 1 | plan1 | WBS, Model, Requirements | ✅ 11.21. |
| Planning | 1 | plan2 | ERD | ✅ 11.21. |
| Design | 2 | des1 | Screen Design | ✅ 11.21. |
| Design | 2 | des2 | URL Design | ✅ 11.21. |
| Development | 3 | dev1 | Page Implementation | ✅ 11.22. |
| Development | 3 | dev2 | CRUD Implementation | ✅ 11.22. |
| Development | 3 | dev3 | User Registration & Login | ✅ 11.25.(일반토큰->JWT 구현에서 시간을 많이 사용) |
| Development | 3 | dev4 | Unique User Permissions | ✅ 11.26 |
| Development | 3 | dev5 | ChatGPT Integration | ✅ 11.27. |
| UI/UX | 4 | ui1 | UI Implementation | ✅ 11.27. |
| Deployment | 5 | dep1 | Deployment | ✅ 11.28. |
| Final Preparations | 6 | prep1 | Readme Completion | ✅ 11.29. |
| Final Preparations | 6 | prep2 | Presentation Preparation | ✅ 11.30. |
| Presentation | 7 | pres1 | Final Presentation | ✅12.01. |
📦project
┣ 📂accounts
┃ ┣ 📂migrations
┃ ┣ 📜admin.py
┃ ┣ 📜apps.py
┃ ┣ 📜managers.py
┃ ┣ 📜models.py
┃ ┣ 📜tests.py
┃ ┣ 📜urls.py
┃ ┣ 📜views.py
┃ ┗ 📜__init__.py
┣ 📂chat
┃ ┣ 📂migrations
┃ ┣ 📂__pycache__
┃ ┣ 📜admin.py
┃ ┣ 📜apps.py
┃ ┣ 📜models.py
┃ ┣ 📜tests.py
┃ ┣ 📜urls.py
┃ ┣ 📜views.py
┃ ┗ 📜__init__.py
┣ 📂project
┃ ┣ 📜asgi.py
┃ ┣ 📜settings.env
┃ ┣ 📜settings.py
┃ ┣ 📜urls.py
┃ ┣ 📜wsgi.py
┃ ┗ 📜__init__.py
┣ 📂staticfiles
┣ 📜.env
┣ 📜.gitignore
┣ 📜db.sqlite3
┣ 📜manage.py
┗ 📜requirements.txt
📦env
📦FE
┣ 📂css
┣ 📂js
┣ 📂Repo
┗ 📜index.html
- Tool : draw.io
- 유저 요청에 관한 Pool을 나타낸 플로우 차트
- 각 특징에 맞게 Lane을 구분 함
| 엔드포인트 | HTTP 메서드 | 기능 | 앱 | 비고 |
|---|---|---|---|---|
| /admin/ | - | 관리자 패널 접속 | admin | |
| /account/join/ | POST | 사용자 등록 | accounts | |
| /account/login/ | POST | 로그인 | accounts | |
| /account/logout/ | POST | 로그아웃 | accounts | |
| /account/mypage/ | GET | 내정보조회 | accounts | * 로그인후 mypage로 리다이렉트 될 때 HTTP 응답 200 성공여부 테스트 용 url |
| /api/chat/gpt/ | POST | GPT 챗봇 API | chat | |
| /account/token/ | POST | JWT 토큰 획득 | accounts | |
| /account/token/refresh/ | POST | JWT 토큰 갱신 | accounts | * 프론트에서 처리할때 JS 코드에서 refresh url 부분도 fetch에 포함해주어야 accesstoken을 제대로 반환함 |
- HTTP 메서드 차이에 따라 페이지 특성에 맞게 선택
- GET 방식 : 데이터를 url에 포함시켜 전달 ex) 정보조회
- POST 방식 : 데이터를 HTTP요청 본문에 포함시켜 전달 ex) 데이터 제출 및 변경
📕 (참고사항) API 기능과 사용 방법을 명확히 전달 하기 위한 Swegger drf-yasg 사용하여 문서화
- 자동화된 문서 생성
- 인터렉티브한 테스팅 인터페이스
🎁 DRF API Document Pdf : https://drive.google.com/file/d/1kwkup07S1y43iVe64-FYTy0PvZ68nh5c/view?usp=sharing
- Tool : Uizard
-
와이어 프레임
-
UI
-
실제 구현 화면
-
User Table: CustomUser 모델에서 기본키 id, 고유 필드 email 포함 함.
-
Chat Table: role 필드 등 포함 하고, 외래키 id를 통해 사용자 테이블 참조함.
-
UserChatRequest Table: UserChatRequest 모델에서 외래키 user_id를 통해 사용자 테이블 참조하고, 요청 수, 날짜 포함.
-
Chat 모델과 UserChatRequest 모델에서 user 필드를 통해 사용자 테이블과 다대일 관계
- Tool : draw.io
(Back-End Deployment Stack Features)
-
AWS Lightsail: (Amazon Web Services의 가상 프라이빗 서버(VPS) 서비스) 서버, 스토리지, 네트워킹, 데이터베이스 관리에 유용.
-
Ubuntu: (Linux 기반 운영 체제) 서버 환경에 최적화되어 있으며, 안정성과 보안에 강점을 가짐.
-
Gunicorn: (Python WSGI HTTP 서버) Django 애플리케이션 실행과 웹 애플리케이션과 인터넷의 인터페이스 제공에 사용.
-
Nginx: (HTTP 및 리버스 프록시 서버) 클라이언트 요청을 Gunicorn 등 애플리케이션 서버로 전달하고 정적 파일 제공.
- '코드의 가치'와 '효율성'을 높이기 위해 아래의 방식을 채택해 개발 함.
- TDD : 기능 구현전 테스트 케이스를 먼저 작성하는 방법론
- DRF & Class View : DRF - API 구축을 위한 라이브러리, Class View - View를 정의 할때 클래스로 구성하는 방식
- Simple JWT : 일반 토큰에 비해 정보를 안전하게 전송하기 위해 Simple JWT 라이브러리를 활용함.
- 특별기능 : AI, Speech to Text
- 주요 페이지 구현
- Signup 기능
- Login 기능
- Logout 기능
- Chat Gpt - DRF 연결
Gpt.-.DRF.mp4
- 로그인을 한 유저만 사용가능
- 각 유저당 5번 요청 제한
- 채팅내역은 데이터베이스 저장 되며 재로그인후 조회 가능
(Front-End Deployment)
- Github 배포 커스텀 도메인 활성화 / Https 해제
(Back-End Deployment)
-
Nginx 배포:
- AWS Lightsail에서 Ubuntu 환경 vscode ssh 연결
- Django repository git clone
- Gunicorn 설치 및 연결
- Nginx 설치 / Gunicorn 연결 및 배포
⚒ 오류 1: "400 (Bad Request)" 오류 발생
-
원인: 프론트엔드와 백엔드 간의 데이터 불일치
-
해결책:
-
프론트엔드 수정:
필수 필드와 데이터 형식 확인 후 전송
fetch('http://127.0.0.1:8000/api/user/register/', { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: username, email: email, password: password, password2: confirmPassword }) })
-
프론트엔드에서 오류 메시지 처리 후 서버 로그 정상작동 확인
-
⚒ 오류 2: AssertionError in Allauth
-
사용자 인증, 등록, 로그인, 비밀번호 기능등 제대로 동작 하지 않을 때 발생하는 에러 네임
-
원인: ACCOUNT_USERNAME_REQUIRED 설정이 False로 되어 있음
-
해결책:
settings.py에서ACCOUNT_USERNAME_REQUIRED를 True로 설정
⚒ 오류 3: 토큰 저장 및 사용 오류
-
일반 token 인증 구현시 발생한 오류
-
해결책:
-
클라이언트 코드 수정:
토큰 키 일치 확인
localStorage.setItem('token', data.Token);
-
API 호출 시 토큰 포함:
Authorization 헤더에 토큰 추가
headers: { 'Content-Type': 'application/json', 'Authorization': `Token ${localStorage.getItem('token')}` }
-
⚒ 오류 4: Failed to Start A high performance web server and a reverse proxy server
-
nginx를 재시작 하는 상황에서 오류가 발생해 systemctl status nginx.service 명령어를 통해 확인해 보니 위 오류와 같이 발생함.
-
해결책:
- sudo nginx -t 를 통해 파일 문법 검사를 해봄 - nginx.conf 파일 68번째 줄 문제가 있음을 나타내서 확인 - include /etc/nginx/sites-enabled/*; 지시어가 중복되었기 때문에 삭제 - 다시 sudo nginx -t 를 통해 검사해보니 문제가 없어서 서버 재시작
💡 알게된 점:
-
토큰 관련 오류 해결 방법 및 토큰 관리 방식의 차이(JWT vs. Token Authentication)를 알게 됨.
-
클래스 설정 옵션에서 단일클래스에서 각각 아래와 같이 차이가 있음을 알게 됨.
-
Simple Jwt Authentication in Views
-
설정:
rest_framework_simplejwt.authentication.JWTAuthentication을authentication_classes에 추가 -
사용 예시:
from rest_framework_simplejwt.authentication import JWTAuthentication from rest_framework.permissions import IsAuthenticated from rest_framework.views import APIView class ExampleView(APIView): authentication_classes = [JWTAuthentication] permission_classes = [IsAuthenticated] def get(self, request): pass
-
-
Token Authentication in Views
-
설정: rest_framework.authentication.TokenAuthentication을 authentication_classes에 추가
-
사용 예시:
from rest_framework.authentication import TokenAuthentication
from rest_framework.permissions import IsAuthenticated
from rest_framework.views import APIView
class ExampleView(APIView):
authentication_classes = [TokenAuthentication]
permission_classes = [IsAuthenticated]
def get(self, request):
pass- DRF책을 집필하면서 개념만 공부를 했는데, 실제로 적용해보니 단순해보이면서도 매우 어렵게 느낌
- 특히 일반토큰을 통해 구현을 마쳤지만, JWT토큰도 한번 도전해봐야겠다는 생각에 WBS 계획보다 기간을 늘려 6번의 프로젝트 재생성을 끝에 통신에 성공함
- 백엔드 개발자로 공부를 하고 있지만, 프론트개발자와 소통하거나 오류를 해결하려면 Js 지식도 갖춰야 함을 느낌 추가적으로 Vanilla Js 말고도 React 등 다양한 공부를 해야겠다는 생각이 듬
- DRF를 하며 어려웠던 점: 생각보다 참고할 만한 강의나 영상이 적었던 점. 찾아보면 블로그 글이 있긴한데 에러 상황이 달라 적용할 수 없었던점. 영어로 된 강의나 문서가 많았던 점. DRF는 GPT의 할루시네이션이 조금 심했던 점
- 하지만 어려운 만큼 DRF는 희소성 있고 경쟁력 있는 기술이라는 생각이 듬
- 서버 배포를 하며 어려웠던 점: 마찬가지로 관련 한국어 강의 등이 적어 적용하기 어려웠음. 글만 보고 이해하기 부족하다는 느낌이 듬.
- 실제 백엔드 배포를 AWSlightsail Ubuntu, Gunicorn, Nginx 등을 통해 해보니 서버관련 각 스택들에 대해 개략적인 느낌을 익힐 수 있었음