🤍

코드 - 패캠 수업 코드 참고 (패캠 수업 정리)

<이전 글>

https://silvercoding.tistory.com/19

- 클래스 확장 

이번에는 클래스에 인스턴스 메소드, 클래스 메소드 , 스테이틱 메소드를 구현을 해 본다. 

class Student(object):
    """
    Student Class
    Author : Kim
    Date : 2021. 6. 28 
    Description : Class, Static, Instance Method
    """

    # Class Variable
    tuition_per = 1.0

    def __init__(self, id, first_name, last_name, email, grade, tuition, gpa):
        self._id = id
        self._first_name = first_name
        self._last_name = last_name
        self._email = email
        self._grade = grade
        self._tuition = tuition
        self._gpa = gpa

    # Instance Method 
    def full_name(self):
        return "{}, {}".format(self._first_name, self._last_name)
    
    # Instance Method
    def detail_info(self):
        return 'Student Detail Info : {}, {}, {}, {}, {}, {}'.format(self._id, self.full_name(), self._email, self._grade, self._tuition, self._gpa)

    # Instance Method
    def get_fee(self):
        return 'Beforoe Tuition -> Id : {}, fee : {}'.format(self._id, self._tuition)

    # Instance Method
    def get_fee_culc(self):
        return 'After tuition -> Id : {}, fee : {}'.format(self._id, self._tuition * Student.tuition_per) 
    
    # Instance Method
    def __str__(self):
        return 'Student Info -> name : {} grade : {} email : {}'.format(self.full_name(), self._grade, self._email)
        
    # Class Method
    @classmethod
    def raise_fee(cls, per):
        if per <= 1:
            print('Please Enter 1 or More')
            return 
        Student.tuition_per = per
        print('Succeed! tuition increased.')

    # Class Method
    @classmethod
    def student_const(cls, id, first_name, last_name, email, grade, tuition, gpa):
        return cls(id, first_name, last_name, email, grade, tuition * cls.tuition_per, gpa)

    # Static Method
    @staticmethod # ---> 요새는 잘 쓰진 않는다. 
    def is_scolarship_st(inst):
        if inst._gpa >= 4.3:
            return '{} is a scholarship recipient'.format(inst._last_name)
        return 'Sorry, Not a scholarship recipient'

Instance Method는 self의 접근자(개개인, 고유한 객체)를 이용하여 속성에 접근할 수 있다. 첫번째 인자에 self가 들어가는 것은 인스턴스 메소드라고 생각을 하면 된다. 

Class Method 첫번째 인자로 클래스를 받아주어야 한다. 대부분 cls라고 쓴다. 또 , 메소드를 작성하기 전에 데코레이터를 작성해 주어야 한다. (@classmethod) 클래스 자체로 접근할 수 있다. 

Static Method 일반 함수의 기능을 하는 메소드이다. 즉, 클래스 안에 굳이 넣지 않아도 되고 클래스 밖에서 생성해도 되는 메소드이다. 그래도 위에처럼 장학금 받는지에 대한 여부는 student클래스와 연관이 되어있으므로 안에 써주는 것이 더 보기 편할 것이다. 

- 인스턴스 생성 

student_1 = Student(1, 'Kim', "silver", 'student1@naver.com', '1', 400, 3.5)
student_2 = Student(2, 'Han', "golye", 'student2@daum.net', '2', 500, 4.3)

# 기본정보 
print(student_1)
print(student_2)

print()

# 전체 정보
print(student_1.detail_info())
print(student_2.detail_info())

- 등록금 

# 학비 정보 (등록금 인상 전)
print(student_1.get_fee())
print(student_2.get_fee())

* 학비 인상 (클래스 메소드 사용)

# 학비 인상 (클래스 메소드 미사용) ---> 이렇게 직접 접근하는 거 좋지 않다. 
# Student.tuition_per = 1.2

# 학비 인상 (클래스 메소드 사용) 
Student.raise_fee(1.2)

* 인상 시킨 후의 학비 정보 

print(student_1.get_fee_culc())
print(student_2.get_fee_culc())

- 클래스 메소드를 이용하여 인스턴스 생성하기 

student_3 = Student.student_const(3, 'Park', 'silver', 'Student3@gmail.com', '3', 550, 4.5)
student_4 = Student.student_const(4, 'Cho', 'golye', 'student4@gmail.com', '4', 600, 4.1)

Class Method로 생성해 놓았던 student_const를 이용하여 인스턴스를 생성할 수도 있다.  

*** 똑같이 실습 

# 전체 정보 
print(student_3.detail_info())
print(student_4.detail_info())
print()

# 학생 학비 변경 확인
print(student_3._tuition)
print(student_4._tuition)
print()

- Static Method 를 이용하여 장학금 혜택 여부 알아보기 

(1) static method 미사용 

def is_scholarship(inst):
    if inst._gpa >= 4.3:
        return '{} is a scholarship recipient'.format(inst._last_name)
    return 'Sorry, Not a scholarship recipient'

이처럼 클래스 안에 굳이 넣지 않아도 사용 가능하다. 

* 사용

print(is_scholarship(student_1))
print(is_scholarship(student_2))
print(is_scholarship(student_3))
print(is_scholarship(student_4))

이렇게 함수에 인스턴스를 넣어주면 장학금 대상 여부가 반환된다. 

(2) static method 사용 

Student 클래스 안에 구현해 놓은 static method에 접근하는 방법이다. 

print(Student.is_scolarship_st(student_1))
print(Student.is_scolarship_st(student_2))
print(Student.is_scolarship_st(student_3))
print(Student.is_scolarship_st(student_4))


print(student_1.is_scolarship_st(student_1))
print(student_2.is_scolarship_st(student_2))
print(student_3.is_scolarship_st(student_3))
print(student_4.is_scolarship_st(student_4))

Student 클래스 자체로 접근이 가능하고, 객체를 통한 접근 또한 가능하다. 

코드 - 패캠 수업 코드 참고 (패캠 수업 정리)

<이전 글>

https://silvercoding.tistory.com/18

클래스 확장 

Student 클래스에 클래스 변수와 인스턴스 변수를 생성하여 이에 대한 개념을 이해 해보자.

- 클래스 생성 

class Student():
    """
    Student Class
    Author : silver
    Date : 2021. 06. 30 
    """

    # 클래스 변수 
    student_count = 0 

    def __init__(self, name, number, grade, details, email=None):
        # 인스턴스 변수
        self._name = name
        self._number = number
        self._grade = grade
        self._details = details
        self._email = email

        Student.student_count += 1 

    def __str__(self):
        return 'str {}'.format(self._name)

    def __repr__(self):
        return 'repr {}'.format(self._name)

    def detail_info(self):
        print('Current Id : {}'.format(id(self)))
        print('Student Detail Info : {} {} {}'.format(self._name, self._email, self._details))

    def __del__(self):
        Student.student_count -= 1 

우선 클래스를 생성해 준다. 주석으로 클래스 변수와 인스턴스 변수를 구분해 놓았다. 

말그대로 클래스 변수는 클래스 자체에서 접근이 가능한 변수, 인스턴스 변수는 생성된 인스턴스로 접근이 가능한 변수이다. 따라서 클래스 안에 student_count 클래스 변수를 선언하고, 생성자 메서드에서 쓴 것과 같이 Student.student_count += 1 처럼 클래스로 접근하여 사용이 가능하다. 인스턴스 변수는 self가 붙어 있다. 객체를 통하여 접근이 가능하기 때문이다. 

- 객체 생성 

studt1 = Student('Cho', 2, 3, {'gender': 'Male', 'score1': 65, 'score2': 44})
studt2 = Student('chang', 4, 1, {'gender': 'Female', 'score1': 85, 'score2': 74}, "onestein@google.com")

 두 개의 객체를 생성해 준다. 

- id 확인 

print(id(studt1))
print(id(studt2))

*** == , is 의 차이 

== : 값을 비교 

print(studt1._name == studt2._name)

is : id 값을 비교 

print(studt1 is studt2)

- dir & __dict__ & __doc__

(1) 내장함수 dir 

https://wikidocs.net/10307

dir() 내장 함수는 어떤 객체를 인자로 넣어주면 해당 객체가 어떤 변수와 메소드(method)를 가지고 있는지 나열해 준다. 

print(dir(studt1))
print(dir(studt2))

따라서 Student의 객체 studt1, studt2를 dir 인자에 넣어서 변수와 메소드를 확인할 수 있다. 

인스턴스 변수와 클래스변수까지 모두 나오는 것을 볼 수 있다. 

(2) __dict__ 

https://wikidocs.net/1743

클래스 또는 인스턴스에 대한 네임스페이스를 확인한다. 

print(studt1.__dict__)
print(studt2.__dict__)

이렇게 dictionary 구조로 나오게 된다. 

(3) __doc__ 

print(Student.__doc__)

__doc__ 클래스 안에있는 설명 주석을 보여준다. 

- 메소드 실행해보기 

# 인스턴스로 접근 
studt1.detail_info()
studt2.detail_info()


# Student.detail_info() ---> 에러 남 


# 클래스로 접근
Student.detail_info(studt1)
Student.detail_info(studt2)

인스턴스로 접근하는 것이 일반적인 방법이고, 클래스로도 접근할 수 있다. 클래스로 접근하면 인자에 객체를 넣어주어야 한다. self를 채워주어야 하기 때문이다. 

- __class__ 

print(studt1.__class__, studt2.__class__)
print(id(studt1.__class__) == id(studt2.__class__))

Student 클래스를 반환한다. 객체는 각각 다른 id값을 가지지만, 클래스는 같은 id값을 가지고 있다는 것을 알 수 있다. (당연한 소리) 

- 인스턴스 변수와 클래스 변수의 접근 

(1) 인스턴스 변수 접근

print(studt1._name, studt2._name)
print(studt1._email, studt2._email)

이렇게 인스턴스를 통하여 접근할 수 있다. 

studt1._name = "Lee" 이런 식으로 직접 접근으로 값을 바꾸는 코드는 문법적으로 권장하지 않는다고 한다. 

(2) 클래스 변수 접근 

print(studt1.student_count)
print(studt2.student_count)
print(Student.student_count)

클래스 변수는 인스턴스로도 , 클래스 자체로도 접근이 가능하다. 인스턴스로 접근을 할 때에는 인스턴스 네임스페이스에 없으면 상위(클래스) 에서 검색한다. 인스턴스 검색 -> 상위 검색 (클래스, 부모 클래스) 순서이기 때문에 동일한 이름으로 변수 생성도 가능하다. 

- __del__ 호출

del studt2

print(studt1.student_count)
print(Student.student_count)

__del__ 메소드를 호출했을 때 student_count도 줄어들도록 만들었으므로 출력해 보면 1이 되어있다. 

코드 - 패캠 수업 코드 참고

1. 객체지향 vs 절차지향 간단한 비교

파이썬은 OOP (객체지향) 언어이다.  

객체지향과 절차지향은 때에 따라 장점과 단점이 있다. 

객체지향을 사용함으로써 코드의 재사용과 코드 중복을 방지할 수 있다. 

절차지향은 위에서부터 아래로 실행한다. 실행속도가 빠르지만 유지보수 , 개선시키는 작업이 어렵다. 그래서 순서가 바뀌면 에러가 발생하며, 디버깅도 어렵다는 단점이 있다. 

하지만 무조건 객체지향이 좋은 것은 아니다. 빠른 속도를 보장하기 때문에 단순하고 목적이 명확한 경우에는 절차지향이 유리하다고 한다. 

2.  객체지향 언어 파이썬 - 클래스 사용하기 

만약 학생의 정보를 저장하기 위한 코드를 짜야 한다고 했을 때, 번호, 학년을 포함한다고 하면 , 학생마다 따로 변수를 선언해주어야 한다. 이렇게 리스트 구조로 짠다면 반복되는 코드도 많아지고, 유지보수가 쉽지 않다. 따라서 class를 이용하여 생성을 해보도록 한다. 

class Student():
    def __init__(self, name, number, grade, details):
        self._name = name 
        self._number = number
        self._grade = grade
        self._details = details

    def __str__(self):  
        return 'str : {} - {}'.format(self._name, self._number)

    ### str 이 없을 떈 이것이 호출 됨 
    def __repr__(self):
        return 'repr : {} - {}'.format(self._name, self._number)

 Student 클래스의 객체를 생성할 때는 name, number, grade, details를 기입해 주어야 한다. 

__str__ 은 클래스 객체를 출력하면 호출이 되는 함수이다. __repr__ 은 비슷한데 , __str__이 없으면 이 함수가 호출된다. 

- 객체 생성 

student1 = Student('Kim', 1, 1, {'gender' : 'Male', 'score1' : 95, 'score2' : 88})
student2 = Student('Lee', 2, 2, {'gender' : 'Female', 'score1' : 77, 'score2' : 92})

학생 두명의 객체를 생성해 준다. 

- 객체의 정보를 딕셔너리 형태로 보기

print(student1.__dict__)
print(student2.__dict__)

- __str__, __repr__ 호출

students_list = []
students_list.append(student1)
students_list.append(student2)
students_list.append(student3)


for x in students_list:
    print(repr(x))
    print(x) # 지정한 str이 나옴 

한번에 출력하기 위해 객체를 리스트에 넣어주고, for문으로 출력해준다. 그냥 출력을 하면 str이 나오고, repr을 호출하고 싶다면 repr(객체)를 출력해주면 된다. 

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/16

이전 글까지 회원가입과 로그인 기능을 만들었는데, 두개의 template html이 거의 유사했다. 이번 글에서 이렇게 겹치는 html을 효율적으로 관리하기 위하여 간단히 상속받는 코드를 구현해본다. 

1. 기본이 되는 html 파일 생성 

community ---> user ---> templates ---> base.html 생성 

<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="/static/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npms/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        {% block contents %}
        {% endblock %}
    </div>
</body>

</html>

body부분의 container 까지만 남겨두고, 

{% block contents %} {% endblock %} 를 작성해준다. 

이 사이에 다른 파일에서 코드를 작성할 수 있다. 

2. 상속받기 

community ---> user ---> templates ---> login.html

{% extends "base.html" %} 
{% block contents %}
<div class="row mt-5">
    <div class="col-12 text-center">
        <h1>로그인</h1>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        {{ error }}
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        <form method="POST" , action=".">
            {% csrf_token %}
            <div class="form-group mb-3">
                <label for="username" class="form-label">사용자 이름</label>
                <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username">
            </div>
            <div class="form group mb-3">
                <label for="password" class="form-label">비밀번호</label>
                <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
            </div>
            <button type="submit" class="btn btn-primary">로그인</button>
        </form>
    </div>
</div>
{% endblock %}

우선 {% extends "base.html" %} 를 가장 상단에 작성해준다. 

그다음 지정하는 부분에 들어갈 수 있도록 base.html에서 작성한 것과 동일하게 입력해주면 된다. 

서버에 접속하여 확인했을 때 전과 같이 잘 동작한다면 성공! 

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/15

세션 

클라이언트 <------------------> 서버 

클라이언트 안에 쿠키가 들어있다. 여기서 쿠키는 저장소와 같다.  웹 브라우저 안에 쿠키라는 저장공간이 있는데 이 저장공간을 활용해서 데이터를 유지하는 것이다. 

브라우저를 켜서 서버에 요청을하고, 응답을 받는다. 서버에서는 헤더에 쿠키 정보를 넣어서 클라이언트에게 전달한다.  클라이언트는 그 정보를 쿠키에 저장한다. 

서버 안에서는 쿠키로 사용할 키를 만든다. 이걸 데이터베이스에 저장하고 클라이언트에 알려준다. 클라이언트는 자기 쿠키 저장소에 저장한다. 웹사이트 별로 나누어서 저장하게 된다.  

 총정리 --->  1. (클라이언트) 사이트에 들어가면 서버에 요청

2. (서버) 서버 안에서는 새로운 키를 생성해서 데이터베이스에 넣은 후, 그 키를 클라이언트에 전달한다. 

3. (클라이언트) 클라이언트는 각각의 웹사이트에 해당하는 키를 쿠키에 저장한다.

4. (클라이언트) 다음부터 웹사이트에 들어가면 클라이언트가 하는 모든 요청에 이 쿠키를 같이 보낸다.

5. (서버) 그럼 서버는 그 쿠키에 해당하는 데이터베이스를 꺼내와서 사용할 수 있게 되는 것이다. 

어렵고 복잡해보인다. 하지만 장고에서 실제로 사용하는 것은 굉장히 쉬워보인다.

로그인 페이지 구현

1. Template 작성 

templates ---> login.html  파일 생성 

회원가입 페이지와 비슷한 구성이므로 register.html  을 복붙해와서 수정을 조금 해준다. 

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row-mt5">
            <div class="col-12 text-center">
                <h1>로그인</h1>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-12">
                {{error}}
            </div>
        </div>
        <div class="row mt-5">
            <form method="POST" action=".">
                {% csrf_token %}
                <div class="form-group mb-3">
                    <label for="username" class="form-label">사용자 이름</label>
                    <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username">
                </div>
                <div class="form-group mb-3">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
                </div>
                <button type="submit" class="btn btn-primary">로그인</button>
            </form>
        </div>
    </div>

</body>

</html>

사용자 이름, 비밀번호만 남겨놓는다. 

2. View 작성

community ---> user ---> views.py 

login 함수를 생성 해준다. 

def login(request):
    return render(request, 'login.html')

우선 login.html 과 연결해주었다. 

3. Url 연결 

community ---> user ---> urls.py

urlpatterns = [
	...
    path('login/', views.login),
]

어떤 주소를 연결했을 때 위에서 만든 view를 연결해 줄건지 작성하는 코드이다. 이렇게 작성하면 .../user/login/ 이라는 주소를 치면 로그인 페이지로 들어가게 된다. 

우선 여기까지 해서 확인해보자. 

해당 주소에 로그인 페이지가 생성되었다. 

4. 로그인 기능 작성 

--- check password 

community ---> user ---> views.py 

check_password import해서 비밀번호를 확인해준다. 

def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    elif request.method == 'POST':
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)

        res_data = {}
        if not (username and password):
            res_data['error'] = "모든 값을 입력해주세요."
        else:
            fcuser = User.objects.get(username = username)
            if check_password(password, fcuser.password):
                pass
            
            else: 
                res_data['error'] = "비밀번호가 틀렸습니다."

        return render(request, 'login.html', res_data)

값을 모두 입력하지 않거나, 비밀번호를 틀리게 입력했을 경우 에러 메시지를 띄운다. 

로그인에 성공했을 때는 우선 pass로 남겨놓고 확인을 해보자. 

실험을 해보니 모두 잘 나오는 것을 볼 수 있다. 

--- Session 활용하여 로그인 

그다음 비밀번호 일치했을 때의 코드를 작성해준다. 여기서 세션을 활용한다.

community ---> user ---> views.py

 ...
 if check_password(password, fcuser.password):
                request.session['user'] = user.id 
                
                return redirect('/')
 ...

전 코드에서 pass부분만 고쳐준다. 비밀번호가 일치하면 로그인 처리를 해주는 코드이다. request.session은 딕셔너리 처럼 사용하면 된다. user라는 key에 user의 id 값을 넣어 주고, 페이지의 홈화면으로 가는 코드 redirect('/')를 작성해 주었다. 내부적으로 로그인이 되는 과정은 복잡해보였지만, 장고를 활용하면 이렇게 데이터 저장만 해주면 알아서 처리가 되기 때문에 편리하다. 

community ---> user ---> views.py

home 함수를 작성해준다. 

def home(request):
    user_id = request.session.get('user')
    if user_id:
        user = User.objects.get(pk=user_id)
        return HttpResponse(user.username + "님 환영합니다!")

    return HttpResponse("Home!")

session에서 저장해두었던 user key를 받아와 user_id에 저장해주고, 그에 해당하는 User모델 객체를 user에 저장한다. h로그인에 성공한다면 그 user의 username을 HttpResponse로 띄워주는 코드이다. 

community ---> urls.py 

이번엔 user안의 url이 아닌 community 안의 url 파일을 열어준다.

urlpatterns = [
   ...
    path('', home)
]

url에 아무것도 붙이지 않았을 때 home 뷰를 불러오는 코드까지 마쳤다. 확인해보자!

그냥 서버에 들어가면 Home!, 로그인을 하면 username이 잘 띄워진다. 

*** 내부적으로는

개발자도구(F12) 를 키면 application 탭 ---> cookie ---> sessionid ---> 하나의 식별자 가 저장되어 있다.

웹페이지가 클라이언트를 식별하는 식별자인 것이다. 

간단한 로그아웃 구현 

community ---> user ---> view.py 

logout 함수 작성 

def logout(request):
    if request.session.get('user'):
        del (request.session['user'])

    return redirect('/')

간단하게 세션에 user 키값이 저장되어 있으면 그것을 지우는 코드이다. 

user ---> urls.py 

아직 화면을 구성하지 않았으므로 url에 logout 을 치면 로그아웃 되는 코드를 써준다. 

urlpatterns = [
	...
    path('logout/', views.logout),
]

이제 .../user/logout 이라고 치면 로그아웃이 되고 홈화면으로 돌아가게 될 것이다. 

결과

로그인이 된 채로 logout 주소를 쳤더니 성공했다! 

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/14

CDN 

부트스트랩 CDN은 Content Delivery Network의 약자로, 외부에 있는 CSS또는 Javascript주소를 가져올 수 있도록 해주는 서비스이다. 

간략한 개념을 보고 넘어가도록 하자. CSS나 Javascript와 같은 파일이 원본 서버에 들어가있고 여러개의 서버로 분산되어 있는 것이다. 만약 우리나라에서 글로벌 서비스를 하게 되면 서버가 한국에 있게 되고, 그럼 원본이 한국에 있게 된다. 그렇게 되면 미국에 있는 사용자는 멀리 있는 서버 탓에 느린 서비스를 제공받게 된다. 그래서 중간에 여러 서버들을 두는 것이다. 나라별로 서버를 뿌려놓는 것이다. 이처럼 자신에게 빠른 곳으로 접속해서 받아가는 서비스가 CDN 이다. 

본 프로젝트에서 쓰인 CSS 링크도 원본에 있는 데이터를 가져온 게 아니라 현재 pc에서 가장 빠른 서버에서 가져온 것이다. 

(더 자세히 알아보려면)

CDN 참고 문서 

https://docs.microsoft.com/ko-kr/azure/cdn/cdn-overview

기존에 이러한 CDN을 사용하여 CSS를 사용하였다. 이번 글에서는 CDN을 쓰지 않으면서 CSS를 적용하는 방법을 알아볼 것이다. 

직접 만든 CSS 파일을 적용하려면  

1. static 폴더 만들기 

community ---> static 폴더 생성

생성한 static 폴더에서 css, javascript 파일 관리를 하게된다.

settings.py 

...
import os

...

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

...

이미 STATIC_URL 작성되어있다. 이제 css파일에 접근했을 때 그게 어디파일에 있는지를 알려주어야 한다. 

STATICFILES_DIRS = [] 리스트를 만들어 폴더를 넣어주면 된다. BASE_DIR 는 프로젝트 폴더인 community이고, 생성한 static 폴더와 join해준다. os를 import하는 것도 잊지 말자.

2. CSS 파일 준비

백엔드 중심의 프로젝트이므로 직접 CSS 파일을 만들지 않고 부트스트랩의 테마를 사용할 것이다. 

<bootstrap 4.3 themes free>

https://bootswatch.com/

이곳에서 마음에 드는 테마를 골라서 

bootstrap.min.css 를 다운받아준다. 

다운받은 파일을 static폴더에 옮겨준다. 

이제 모든 준비를 마쳤고, html에 적용해준 다음 결과 확인을 해본다.

3. html에 CSS 적용해주기

user ---> templates --->  register.html

원래 코드

...

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

...

CSS 테마 적용 코드

...

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

...

link 태그만 바꾼다. static 폴더의 css 파일을 연결 해주면 된다. 

모두 마친 후 서버에 들어가보면 이렇게 화려한 테마가 적용이 된 것을 볼 수 있다!

다음 글에서는 세션 및 로그인을 알아 보도록 한다. 

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/13

Tamplate은 Bootstrap 을 이용하여 작성해준다. 

작업을 할 때 저장하는 습관을 꼭 들여야 할 것 같다. 저장 안하고 페이지 실행해서 에러뜬것만 오천만번이다.

Bootstrap 이용을 위해 다음 링크에서 코드를 가져오면 된다. 

https://getbootstrap.com/docs/5.0/getting-started/introduction/

회원가입 창 만들기 

1. Template 작성하기

•  user 폴더 ---> templates 폴더  ---> register.html  

Getting started -- CSS 부분과 Javascript 부분을 head태그 안에 넣어준다. starter template 에서 meta태그도 가져와 준다. 

<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">    

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    </head>

    <body>
    </body> 

</html>

그럼 우선 이런 모양을 띈다. 

Forms --- Overview 코드를 가져온다!

<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="container">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row">
            <form>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </body>

</html>

회원가입 글씨 넣어주고 그 밑에 회원가입 form을 넣어주었다. 

폴더에 저장된 register.html 을 열어보면 다음과 같이 실행이 된다. 

디자인이 마음에 안드니 바꾸어 준다. 

- 한글로 바꾸기, container 적용, placeholder 작성해주기

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row-mt5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row mt-5">
            <form>
                <div class="form-group mb-3">
                    <label for="username" class="form-label">사용자 이름</label>
                    <input type="text" class="form-control" id="username" placeholder="사용자 이름">
                </div>
                <div class="form-group mb-3">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호">
                </div>
                <div class="form-group mb-3">
                    <label for="re-password" class="form-label">비밀번호 확인</label>
                    <input type="password" class="form-control" id="re-password" placeholder="비밀번호 확인">
                </div>
                <button type="submit" class="btn btn-primary">등록</button>
            </form>
        </div>
    </div>

</body>

</html>

원하는 대로 작성이 완료 되었다. 

2. View 작성하기 

- community ---> user ---> views.py 

from django.shortcuts import render

def register(request):
    return render(request, "register.html")

register 함수 작성하기. request를 꼭 같이 전달해 주어야 하고, 반환하고자 하는 html 파일을 작성해 준다.

- community --> urls.py 

urlpatterns = [
    ...
    path('user/', include('user.urls'))

]

urlpatterns 안에 user 경로를 지정해준다. 

- community ---> user ---> urls.py 

user 폴더 안에 urls.py를 생성한다. 

from django.urls import path
from . import views


urlpatterns = [
    path('register/', views.register)
]

views.py의 register 함수를 import 하여 전달해준다. 이렇게 작성을 해놓으면 .../user/register 경로를 치면 register.html이 렌더링 될 것이다. 

- 개발자 서버 들어가보기 

터미널

python manage.py runserver

이제 서버로 들어가서 확인을 해보자. 

터미널에 뜨는 주소 뒤에 /user/register 작성을 해준다. 

그러면 이렇게 잘 연결이 된 것을 볼 수 있다. 

데이터를 파이썬 쪽으로 전달 

주소를 쳐서 회원가입 창으로 들어갈 수 있게 되었으니, 이제는 POST요청을 하여 데이터를 서버로 전달해주는 작업을 해야한다. 

1. Template 작성하기

community ---> user ---> register.html  

  ...
  		 <form method="POST" , action=".">
                    {% csrf_token %}
                    <div class="form-group mb-3">
                        <label for="username" class="form-label">사용자 이름</label>
                        <input type="text" class="form-control" id="username" placeholder="사용자 이름" name="username">
                    </div>
                    <div class="form group mb-3">
                        <label for="password" class="form-label">비밀번호</label>
                        <input type="password" class="form-control" id="password" placeholder="비밀번호" name="password">
                    </div>
                    <div class="form group mb-3">
                        <label for="re-password" class="form-label">비밀번호 확인</label>
                        <input type="password" class="form-control" id="re-password" placeholder="비밀번호 확인" name="re-password">
                    </div>
                    <button type="submit" class="btn btn-primary">등록</button>
                </form>
  ...

데이터를 파이썬 쪽으로 전달해주는 코드이다. POST method로 전달하고, action="."은 현재 주소로 전달하겠다는 뜻이다.           

form 안에 {% csrf_token %}  이것을 꼭 넣어주어야 한다. 

form 은 data 를 서버에 전달하는 것인데, 안좋게 사용하는 사람들이 다른 웹사이트에서 데이터 전달을 하는 경우가 있기 때문에 이를 방지하기 위한 코드라고 한다.  크로스 도메인을 막기 위해 암호화된 키를 숨겨놓는다. 그래서 키가 없으면 잘못된 요청으로 받아들여 요청을 거절하게 된다. 필수적인 코드이기 때문에 안써주면 에러가 난다!

그리고 input 태그에 name 속성도 추가해준다. 이 name 값으로 정보가 전달이 될 것이다.

2. View 작성하기 

community ---> user ---> view.py 

from django.shortcuts import render
from .models import User

def register(request):
    if request.method == 'GET':
        return render(request, "register.html")
    elif request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']

    user = User(
                Username = username,
                password = password
            )

    user.save()

    return render(request, "register.html")

요청 방법이 GET일 때와 POST 일 때를 다르게 작성해 주어야 한다. 

여기까지 해서 silver 123456 으로 회원가입을 하고 admin에 들어가 보니 user 생성이 잘 되어있다.

3. 비밀번호 확인하기 

community ---> user ---> view.py .py

from django.shortcuts import render
from .models import User

def register(request):
    if request.method == 'GET':
        return render(request, "register.html")
    elif request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        re_password = request.POST['re-password']

        res_data = {}

        if password != re_password:
            res_data['error'] = "비밀번호가 다릅니다."
        else:
            user = User(
                Username = username,
                password = password
            )

            user.save()
            
        return render(request, "register.html", res_data)

res_data라는 dictionary를 생성해주고 password와 re_password의 값이 다르면 res_data의 키값을 error, value값을 문자열로 저장해준다. 그다음 render 함수에 res_data를 전달해 준다. 

community ---> user ---> register.html  

...
	<div class="row-mt5">
            <div class="col-12 text-center">
                <h1>회원가입</h1>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-12">
                {{error}}
            </div>
        </div>
...

그다음 회원가입 밑에 에러 문자열을 그려줄 부분을 하나 만든다. {{}} 안에 res_data의 키 값을 넣어주면 된다. 

register.html 을 랜더링을 할때 res_data라는 값을 넘기면 res_data의 키와 {{error}}가 매핑이 된다.

--- 확인해보기 

비밀번호를 다르게 치면 위와같이 나오는 것을 확인 해 보았다. 

4. 모든 값이 입력되지 않았을 때 처리 & 비밀번호 암호화 

위에까지 작업을 마쳤을 때 문제점이 있다. 

사용자 이름, 비밀번호, 비밀번호 확인을 작성하지 않아도 에러 메시지가 뜨지 않으며, 

사진과 같이 비밀번호가 공개되므로 문제가 될 수 있다. 따라서 비밀번호 암호화까지 작성을 해준다. 

community ---> user ---> view.py .py

from django.shortcuts import render
from .models import User
from django.contrib.auth.hashers import make_password

def register(request):
    if request.method == 'GET':
        return render(request, "register.html")
    elif request.method == 'POST':
        username = request.POST.get('username', None) ## 기본 값 설정
        password = request.POST.get('password', None)
        re_password = request.POST.get('re-password', None)

        res_data = {}


        if not (username and password and re_password):
            res_data['error'] = "모든 값을 입력해주세요."
        elif password != re_password:
            res_data['error'] = "비밀번호가 다릅니다."
        else:
            user = User(
                Username = username,
                password = make_password(password)
            )

            user.save()
            
        return render(request, "register.html", res_data)

최종적으로 이렇게 작성 완료. makepassword를 import하여 password를 넣어주면 비밀번호 암호화가 된다. 그리고 request.POST에 get함수를 이용하여 기본 값을 None으로 설정해준다. 그다음 username, password, re_password를 and로 연결해주어 하나라도 작성이 되지 않으면 error 메시지가 뜨게 작성해준다. 

결과 확인

모든 값을 입력하지 않았더니 에러 메시지가 뜬다. 

silver2로 가입을 다시 해주었더니 암호화된 비밀번호로 뜨는 것을 알 수 있다. 

--- 여기서 model의 field(ex, 사용자 이메일) 를 추가하기 위한 절차 (포스팅은 생략)

model field 작성 ---> migration ---> register.html 작성 ---> view.py 작성 

사용자 이메일 field를 추가한 결과이다. 

정말 긴 여정이었다. 다음에는 static 파일 관리와 CDN 에 대하여 알아볼 예정이다. 

본 프로젝트는 패캠 강의를 참고 합니다.

<이전 글>

https://silvercoding.tistory.com/12

admin이 무엇인가?

admin은 django를 사용하면 기본적으로 생성이 되어있다. 이를 확인해 보자.

1. community 폴더 ---> settings.py 

INSTALLED_APPS에 기본적으로 들어가 있다. (가장 첫번째 줄) 

2. community 폴더 ---> urls.py

여기에도 기본적으로 admin 이 생성되어 있다. 

jango 안의 admin이 경로 admin 아래에 연결되어 있다. 

관리자 페이지에서 여러 url들을 사용하기 때문에 jango의 admin 안에 여러가지 url 들이 정의가 되어있다. 이러한 사용되는 url들이 jango의 admin안에 정의가 되어있다는 소리이고, 그것들을 프로젝트 안에서 admin/ 경로 하위에 지정을 해놓는 것이다. 

주소를 입력할 때 (ex) silver.com/admin/..... 이렇게 사용한다면 ---> admin 하위에 들어가는 주소들(.....) 은 admin.site.urls 안에 정의된 url을 따라가는 것이다. 

단순하게 말하면 주소뒤에 admin을 붙이면 장고의 관리자 도구를 사용할 수 있다는 뜻이다. 복잡하니 이렇게 이해하는 것도 좋을 것 같다. 

개발 서버에 들어가보자

터미널

python manage.py runserver

이렇게 작성해주면 개발서버가 실행된다.

starting development ---- 뒤에 주소가 나온다. 이 주소/admin을 주소창에 치면

아이디 패스워드를 만들어준 적이 없는데 로그인을 하라고 한다. 

그래서 이걸 만들어 주어야 한다

개발서버는 ctrl + c 로 종료 할 수 있다. 

- 아이디 패스워드 만들기

터미널

python manage.py createsuperuser

이걸 쳐서 아이디, 패스워드를 만들어 준다. 

그다음 다시 실행시켜 로그인하면 기본적으로 이러한 창이 생겨져있다. 

Users에 들어가보면 방금 만든 user정보가 들어가져 있다. 

장고 admin에 만든 model 등록

1. user 폴더 --> admin.py 

...
from .models import User

class userAdmin(admin.ModelAdmin):
    pass

admin.site.register(User, userAdmin)

User 클래스를 import 해주고, 관리자에 쓸 내용들을 기입한다. 

----> runserver 다시 실행 후 들어가보면 

만든 모델이 적용되었다. 

User 의 Users에 Add 버튼을 눌러서 사용자를 한개 추가해준다. 

그러면 이렇게 생성이 된다. 그런데 Users는 위의 Users와 같아 혼동되기도 하고, 관리하기 좋게 한글로 바꾸어줄 것이다. User object (1) 이라고 적혀있는 것은 Username으로 바꾸어주는 것이 좋을 것 같다. 

2. Users 글씨 바꿔주기

user 폴더 ---> models.py ---> class Meta 

from django.db import models

class User(models.Model):
    
    
    ...
    

    class Meta:
        db_table = 'test_user'
        verbose_name = "사용자" 
        verbose_name_plural = "사용자"  ## 복수형 지정

지난 글에서 작성했던 Meta 클래스에서 verbose_name을 설정해주면 된다! 

3. User object 글씨 바꿔주기 

user 폴더 ---> models.py ---> def __str__(self)

class User(models.Model):
    
	...

    def __str__(self):
        return self.Username

이번에는 model.py 에 함수를 하나 작성해준다. 

전에 User object (1) 라고 사용자가 저장이 되어있었는데, 이는 User클래스를 문자열로 변환했을 때 나오는 값이다. 이 때 클래스를 문자로 변환할 때 어떤 문자로 변환시켜줄 지 정하는 내장함수가 __str__ 인 것이다. 

user 폴더 ---> admin.py  ---> class userAdmin

...

class userAdmin(admin.ModelAdmin):
    list_display = ('Username', 'password')
    
...

전에 pass로 남겨뒀던 부분을 list_display 튜플을 작성해주면 이 튜플 안에 있는 사용자의 정보가 나타나게 된다. 사용자명만 보였던 것이 비밀번호도 함께 보여질 것이다. 

이렇게 까지 해서 

최종화면

지정한 대로 모두 잘 변한 것을 볼 수 있다. 

다음에는 MTV 구조에서 T, V 작성을 해볼 것이다!