10/4 오늘의 시간표
09:00 ~ 10:00 [프로젝트] 장고 클론코딩 프로젝트1
10:00 ~ 11:00 [프로젝트] 장고 클론코딩 프로젝트1
11:00 ~ 12:00 [프로젝트] 장고 클론코딩 프로젝트1
12:00 ~ 13:00 [프로젝트] 장고 클론코딩 프로젝트1
13:00 ~ 14:00 점심식사
14:00 ~ 15:00 [프로젝트] 장고 클론코딩 프로젝트1
15:00 ~ 16:00 [프로젝트] 장고 클론코딩 프로젝트1
16:00 ~ 17:00 [프로젝트] 장고 클론코딩 프로젝트1
17:00 ~ 18:00 [프로젝트] 장고 클론코딩 프로젝트1
18:00 ~ 19:00 저녁식사
19:00 ~ 20:00 [프로젝트] 장고 클론코딩 프로젝트1
20:00 ~ 21:00 [프로젝트] 장고 클론코딩 프로젝트1
장고 인스타그램 클론코딩 프로젝트가 진행되고 있기 때문에 별도의 학습없이 하루종일 프로젝트에만 집중하였다.
장고 인스타그램 클론코딩 프로젝트
내가 맡은 역할은 백엔드 작업이기 때문에 저번주에 만들어둔 데이터베이스를 토대로 필요한 기능들을 만드는 것이 내가 할 일이다.
다양한 기능들이 있지만 그 중에서 내가 만들게 된 기능은 회원가입기능이었다.
회원가입 기능 제작
makeuser.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Make user</title>
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.welcome {
margin-left: auto;
margin-top: 50px;
height: 300px;
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcrKYSP%2FbtrNs3uwYh3%2FWkoTcfCdIzeTKPqtsIveT1%2Fimg.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.welcome_msg {
margin-top: 60px;
}
.idpwd_input {
margin: auto;
margin-top: 50px;
width: 500px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid palevioletred;
border-radius: 5px;
}
.container {
margin: 100px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 5px;
}
#create_user {
width: 22%;
background-color: palevioletred;
border-color: transparent;
color: white;
}
.account {
display: block;
margin-bottom: 3px;
padding: 3px;
border: 1px solid palevioletred;
border-radius: 3px;
}
#alert {
border-color: transparent;
}
.back_login_btn {
max-width: 300px;
margin-left: 2000px;
width: 100%;
color: darkslateblue;
align-items: center;
justify-content: center;
display: flex;
flex-direction: row;
}
.back_login_btn>button {
width: 200px;
height: 50px;
background-color: rgb(128, 116, 201);
color: white;
border-radius: 50px;
border: 1px solid palevioletred;
margin-top: 10px;
}
.back_login_btn>button:hover {
border: 2px solid white;
}
</style>
</head>
<body>
<div class="make_user"></div>
<div class="welcome">
<div class="welcome_msg">
<h1 style="color:white;"><img src={% static "feelsns/images/feel.png" %} width="250" /></h1>
</div>
<div class="back_login_btn">
<button> Login</button>
</div>
</div>
<div class="idpwd_input">
<div class="container">
<div class="wrap">
<form class="form-area" method="post" action="/make_user/">
{% csrf_token %}
<div class="form-group mt-2 mb-2">
<h5>아이디</h5>
<input type="text" placeholder="ID" id="username" class="form-control" name="username">
</div>
<hr/>
<div class="form-group mt-2 mb-2">
<h5>비밀번호</h5>
<input type="password" placeholder="Password" id="password" class="form-control"
name="password">
</div>
<hr/>
<div class="form-group mt-2 mb-2">
<h5>비밀번호 재확인</h5>
<input type="password" placeholder="Password" id="password2" class="form-control"
name="password2">
</div>
<hr/>
<div class="form-group mt-2 mb-2">
<h5>닉네임</h5>
<input type="text" placeholder="Nickname" id="nickname" class="form-control" name="nickname">
</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="{% url 'users:login_page' %}" class="btn btn-primary">로그인 페이지로</a>
</div>
</div>
</div>
</body>
</html>혜원님이 만들어주신 우리 홈페이지의 회원가입 페이지 양식이다.
홈페이지 상으로 보면 이런 형태를 띄고있다.
여기서 회원가입 기능을 활성화 하기위해 user앱 안에있는 views.py에 회원가입기능을 하는 함수를 만들어주었다.
def make_user(request):
if request.method == 'GET':
user = request.user.is_authenticated
if user:
return redirect('/')
else:
return render(request, 'make_user.html')
elif request.method == 'POST':
username = request.POST.get('username', '')
password = request.POST.get('password', '')
password2 = request.POST.get('password2', '')
nickname = request.POST.get('nickname', '')
if password != password2:
return render(request, 'make_user.html', {'error': '패스워드를 확인 해 주세요!'})
else:
if username == '' or password == '':
return render(request, 'make_user.html', {'error': '사용자 이름과 비밀번호는 필수 값 입니다!'})
exist_user = UserModel.objects.filter(username=username)
if exist_user:
return render(request, 'make_user.html', {'error': '사용자가 존재합니다'})
else:
UserModel.objects.create_user(username=username, password=password, nickname=nickname)
return redirect('/login_page')POST 방식을 사용해 데이터베이스에 아이디와 비밀번호 닉네임을 받도록하였고 로그인이 이미 되어있는 상태라면 메인페이지로 넘어가고 아닐경우 회원가입페이지로 이동하게 함수를 설정해두었다. 비밀번호와 2차비밀번호가 다를경우 에러메세지를 출력하고 아이디와 패스워드가 공백일 경우 역시 에러메세지를 출력한다. 그리고 중복된 사용자가 존재하지 않도록 아이디 중복을 막아두었다.
from django.urls import path
from users import views
app_name = 'users'
urlpatterns = [
path('', views.home, name='home'),
path('make_user/', views.make_user, name='make_user'),
]사이트내에서 해당 기능이 작동할 수 있게 urls.py에 코드도 입력해 두었다.
이후 지금까지의 과정을 커밋해 메인 레포지토리에 PR했고 다른분들도 각자 기능의 작업을 하셨는데 팔로우 팔로워 기능을 맡으신 동근님은 해당 내용이 어려워서인지 시간이 많이 걸리시는 것 같고 선미님이 로그인 로그아웃 기능을 해 주셔서 오늘은 팔로우 팔로워를 제외한 대부분의 user앱 내 기능들이 완성되었고 프론트엔드 작업도 거의 끝이 보이는 수준이었다.
이 페이지에서 회원가입을 하고
해당 페이지에서 가입한 아이디로 로그인을 하면
이렇게 메인페이지로 이동한다. 아직은 게시글이 없어 비어있지만 누군가 게시글을 작성하면 페이지에 나오도록 되어있다. SNS의 로고를 클릭하면 home으로 이동이되는데 home은 로그인이 안되어있을시 로그인 페이지로, 로그인이 되어있을시 메인페이지로 이동하게 되어있다. 우측 상단을 보면 버튼이 세개가 있는데 각각 게시글작성(현재 미구현), 프로필페이지, 로그아웃 버튼이다.
이것이 프로필 페이지인데 지금당장은 정보가 아무것도 없다. 하지만 프로필 편집 버튼을 누르면
이렇게 프로필이 편집 가능하고
프로필을 편집하면 이렇게 프로필창이 업데이트가 된다. 오른쪽의 빈 공간은 팔로우 팔로워 기능이 들어가게 될 것이고 아직은 미구현 상태이다.
오늘 하루를 마치며
오늘의 작업내용은 이정도인데 그렇게 어려운 작업내용은 아닌것 같지만 막상 직접 하면서 오류를 내보고 오류가 왜 나는지 찾아보면서 수정하다보니 시간이 순식간에 지나갔다. 이제 post앱의 기능들을 만들어야하는데 남은 시간이 많지가 않아 솔직히 다 해낼 수 있을지 걱정이 되지만 마지막 순간까지 최선을 다해보기로 했다.
