20221101 TIL

오늘의 한 일

• 장고 심화 강의 복습 + 자바스크립트
• AWS 복습

 

자바스크립트에서도 하이퍼링크가 구현되어있다

일단 하이퍼링크 형식으로 간단하게 로그인과 함께 index화면으로 이동하게는 만들었는데 문제점이 한두개가 아니다

 

 

모크 api 출력시 consolelog 확인

 

 

 

 

구현하고 싶은 기능

 

 

• 로그인, 비로그인 구분하기

 

장고의 redirect 기능 이용시

def home(request):
    user = request.user.is_authenticated
    if user:
        return redirect('/tweet')
    else:
        return redirect('/sign-in')

이런 식으로 로그인 유저를 판별해서 비로그인 상태일 시 로그인페이지, 로그인 상태일 시  메인페이지로 이동시키는 방법을 자바스크립트로 구현하기

 

 

• 로그인 시 등등에 에러메세지 출력하기

ex) 이전 프로젝트인 인스타 클론코딩 프로젝트에서

user - views.py

def sign_in_view(request):
    if request.method == 'POST':
        username = request.POST.get('username', "")
        password = request.POST.get('password', "")

        me = auth.authenticate(request, username=username, password=password)  # 사용자 불러오기
        if me is not None:  # 저장된 사용자의 패스워드와 입력받은 패스워드 비교
            auth.login(request, me)
            return redirect('/')
        else:
            return render(request, 'user/signin.html', {'error': '유저이름 혹은 패스워드를 확인해주세요.'})  # 로그인 실패
    elif request.method == 'GET':
        user = request.user.is_authenticated
        if user:
            return redirect('/')
        else:
            return render(request, 'user/signin.html')

 

signin.html

<div class="wrap">
            <h2 class="title-center"> 로그인</h2>
            <form class="form-area" action="/sign-in/" method="post">
                {% csrf_token %}
                <div class="form-group mt-2 mb-2">
                    <label for="username">이름</label>
                    <input type="text" class="form-control" id="username" name="username">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" name="password">
                </div>
                <hr>
                {% if error %}
                    <div class="alert alert-danger" role="alert">
                        {{ error }}
                    </div>
                {% endif %}
                <div style="float: right">
                    <button type="submit" class="btn btn-primary">로그인</button>
                    <a href="/sign-up" class="btn btn-secondary">회원가입 페이지로</a>
                </div>
            </form>

 

자바스크립트도 크게 다른점은 없을거같긴 한데 실제로 해봐야 감이 잡힐듯..

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=battledocho&logNo=220055889843 

JavaScript - if 조건문, 함수 ( 로그인 체크화면 )

로그인이 아니고 회원가입 체크하는 방식을 구현해본 글을 찾아봤는데 alert 형식이 아니라 error를 정의해놓고 페이지로 띄우는 형식이 더 낫겠고, 이건 같은 형식으로 구현해낼 수 있을듯

 

 

api.js - 로그인 함수

async function handleLogin(){
    const email = document.getElementById("email").value
    const password = document.getElementById("password").value

    const response = await fetch('http://127.0.0.1:8000/users/api/token/', {
        headers:{
            'content-type':'application/json'
        },
        method:'POST',
        body: JSON.stringify({
            "email":email,
            "password":password
        })
    })

    const response_json = await response.json()

    console.log(response_json)

    localStorage.setItem("access", response_json.access);
    localStorage.setItem("refresh", response_json.refresh);

    const base64Url = response_json.access.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    localStorage.setItem("payload", jsonPayload);

    location.href="index.html"

}

 

일단 구상을 해보자면 fetch 이후에 if문을 붙여서

받아왔을 시 - 있던대로

에러가 났을 시 - 에러 메세지 만들기 ( var error = "아이디나 패스워드를 확인해주세요" 이런식?) 

 

해서 html에 if error 문을 올려놓으면 되려나? 자바스크립트에서 만든 변수도 장고 템플릿이 먹히긴 하는건가?

 

 

 

 

추가로 볼만한 장고 내에서 js를 이용한 좋아요 기능 동적 구현

 

https://tothefullest08.github.io/javascript/2019/07/03/JS05_JS_in_Django_like_function/

JavaScript 05 - Django 내에서 JS 적용하기 (좋아요 기능 동적 구현) · 해리의 데브로그

 

인스타그램 클론코딩 프로젝트때도 구현하고 싶었던 방법이지만 못했던 방식이다.. 이번 기회에 제대로 익히고 넘어가도록 하자