현재 구현된 기능

• 로그인 / 로그아웃 / 회원가입 / 회원탈퇴

• 약속 생성 / 초대 권한 부여 / 약속 초대 / 멤버 강퇴

---

디자인 도입

settings

BASE_DIR = Path(__file__).resolve().parent.parent

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 이 DIRS 리스트 안에 BASE_DIR / 'templates'를 추가해야 최상위 폴더의 templates를 인식함
        'DIRS': [BASE_DIR / 'templates'],
        # 각 앱 폴더 내부의 templates 폴더도 자동으로 검색하도록 설정
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

---

로그인

view

from django.shortcuts import render


def login_page(request):
    """로그인 화면(HTML)을 렌더링합니다."""
    return render(request, "user/login.html")

urls

urlpatterns = [
				...
    # 브라우저 접속용
    path("login-page/", login_page, name="login_page"),
]

화면 테스트

---

회원가입

view

def signup_page(request):
    """회원가입 화면(HTML)을 렌더링합니다."""
    return render(request, "user/signup.html")

urls

urlpatterns = [
				...
    # 브라우저 접속용
    path("signup-page/", signup_page, name="signup_page"),
]

화면 테스트

---

마이페이지 및 회원탈퇴

• 자신의 프로필을 확인하고, 더 이상 앱을 사용하지 않을 때 계정을 지우는 회원탈퇴 기능이 담긴 화면
  • 사용자를 데이터베이스에서 완전히 날려버리지 않고
  • 비활성화만 시키는 논리적 삭제(Soft Delete) 기법을 사용
    • 프론트엔드에서는 탈퇴 API 호출 직후 localStorage.clear()를 통해
    • 브라우저에 남은 흔적(토큰)을 모두 지워버림으로써
    • 백엔드와 프론트엔드 양쪽에서 사용자의 접근을 완벽하게 차단

view

def mypage(request):
    """마이페이지 화면(HTML)을 렌더링합니다."""
    return render(request, "user/mypage.html")

urls

urlpatterns = [
				...
    # 브라우저 접속용
    path("mypage/", mypage, name="mypage_page"),
]

화면테스트

---

기본 홈 페이지

• 리액트(React) 같은 최신 프론트엔드 도구들이 사용하는 핵심 원리를 자바스크립트로 직접 구현한 것
  • 서버에 매번 새로운 HTML을 요청하지 않고도
  • 브라우저가 스스로 금고(로컬 스토리지)를 검사하여 토큰이 있으면
    • 유저 대시보드(display: flex)를 켜고
    • 없으면 손님용 환영 카드(display: block)를 켜는 방식으로 화면을 유연하게 조작

view

def home_page(request):
    return render(request, "home.html")

urls

urlpatterns: list[URLPattern | URLResolver] = [
    path('', home_page, name='home'),
 			   ...
]

화면 테스트

---

약속 생성

view

def create_promise(request):
    """약속생성 페이지(HTML)를 렌더링합니다."""
    return render(request, "event/create.html")

urls

urlpatterns = [
    path("create-page/", create_promise, name="create_page"),
]

화면 테스트

DB테스트

---

문제 발생

회원가입 문제

• 회원가입 하면 404뜸

  

• 이유

  • 자바스크립트 통신 주소 부분 오류
  • 현재 나의 프로젝트 설정은 사용자 관련 주소 앞에 /api/v1/user/ 붙여놓음
  • 하지만 현재 HTML 파일의 자바스크립트 코드는 데이터를 /User/signup/ 여기로 보냄
  • 즉, 프론트가 데이터를 이상한 주소로 보내기 때문에 404 발생함

• 해결

        try {
            const response = await fetch('/User/signup/', {
                			...
            });
            
            const data = await response.json();
            
            if (response.ok) {
							...
                window.location.href = "/login-page/";
            				...
                            
——————————————————————————————————————[비교]—————————————————————————————————————————
        try {
            const response = await fetch('/api/v1/user/signup/', {
                			...
            });
            
            const data = await response.json();
            
            if (response.ok) {
							...
                window.location.href = "/api/v1/user/signup/";
            				...

• DB 체크

  

• 로그인 화면 체크

  

---