Python - Django를 이용한 인스타그램 클론 - 7
2022. 11. 8. 01:31ㆍHow to become a real programmer/Back-End
이전에 회원가입, 로그인 과정을 만들었으니 이제 로그인하여 만든 글을 볼 수 있는 '내 프로필' 화면과 로그아웃을 만들면 될 것 같다.
우선, 이전에 세션을 통해 사용자 정보를 인식하는 것은 했으니, 프로필과 로그아웃을 만들어야 하는데. 인스타그램은 사용자 창을 누르면 프로필-로그아웃 순으로 드롭다운 방식으로 내려오는 ui를 가지고 있다.
드롭다운을 구현하는 것은 bootstrap에서 카피해 사용하면 될 것 같다.
<main.html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %} <!--불러오기-->
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!--Google Icon-->
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
<!-- Jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js">
<link href="css/bootstrap.css" rel="stylesheet">
</script>
<style>
.box {
width: 50px;
height: 50px;
border-radius: 70%;
overflow: hidden;
}
.profile {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed_box {
margin: 20px 0;
border: solid 1px gray;
background-color: white;
}
.modal_overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
}
.modal_window {
background: white;
backdrop-filter: blur(13.5px);
-webkit-backdrop-filter: blur(13.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
width: 800px;
height: 600px;
position: relative;
padding: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position: fixed; width:100%;">
<!--flex의 space-between 활용해서, 또 밑으로 새지 않게 nowrap, 반응형이 아니어도 되기에 최소 화면크기를 1000픽셀 -->
<div class="container-fluid" style="justify-content: space-between; flex-wrap: nowrap; min-width: 1000px"/>
<img style="height: 30px; object-fit: contain"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
<input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
<div style="display:flex;">
<span class="material-icons" style="padding-right: 10px">home</span>
<span id="nav_bar_add_box" class="material-icons-outlined" style="padding-right: 10px">add_box</span>
<div class="dropdown">
<a id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="box" style="width: 25px; height: 25px">
<img class="profile"
src="data:image/jpeg;base64,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">
</div>
</a>
<div class="dropdown-menu" style="left: -158px" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">프로필</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/user/logout">로그아웃</a>
</div>
</div>
</div>
</nav>
<div style="display: flex; flex-direction: row; justify-content: center; padding-top: 60px; background-color: #fafafa">
<div style="padding: 20px 60px">
<div class="box" style="width: 175px; height: 175px;">
<img class="profile"
src="data:image/jpeg;base64,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">
</div>
</div>
<div>
<div>
프로필
</div>
<div>
게시물 팔로워
</div>
<div>
이름
</div>
</div>
</div>
<!-- 첫 번째 모달 : 이미지 업로드 용 -->
<div id="first_modal" class="modal_overlay">
<div class="modal_window">
<div style="display: flex; flex-direction: row; justify-content: space-between">
<div style="width: 40px">
</div>
<div>
새 이미지 업로드
</div>
<div>
<span class="material-icons">close</span>
</div>
</div>
<div class="img_upload_space" style="border-top: solid 1px gray; margin-top: 10px; width:778px; height: 540px;">
</div>
</div>
</div>
<!-- 두 번째 모달 : 내용 탑재용 -->
<div id="second_modal" class="modal_overlay">
<div class="modal_window">
<div style="display: flex; flex-direction: row; justify-content: space-between">
<div style="width: 40px">
</div>
<div>
새 이미지 업로드
</div>
<div>
<span class="material-icons">close</span>
</div>
</div>
<div style="border-top: solid 1px gray; margin-top:10px; display: flex; flex-direction: row;">
<div class="img_upload_space" style="width:500px; height: 540px;">
</div>
<div style="border-left: 1px solid gray">
<div>
<textarea id="input_feed_content" style="width: 276px; height: 400px" class="form-control"
rows="5"></textarea>
</div>
<button id="feed_create_button" type="button" class="btn btn-primary" style="width:100%">공유하기</button>
</div>
</div>
</div>
</div>
<!-- Jquery -->
<script>
let files;
$('#feed_create_button').click(function () {
let file = files[0];
let image = files[0].image;
let content = $('#input_feed_content').val();
let user_id = "Jin.99";
let profile_image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBYWFRYVFhUYGBUYGBgSFRgVGBgYGBgYGBUZGRgYGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHhISHjQhJCQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDE0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzE/NP/AABEIAN8A4gMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAEAAIDBQYBBwj/xAA2EAABAwMDAwIDBwQCAwEAAAABAAIRAwQhBRIxQVFhBiJxgZETFDJCobHBFVLR4fDxI2JyB//EABgBAAMBAQAAAAAAAAAAAAAAAAABAgME/8QAIBEBAQEBAAMBAAMBAQAAAAAAAAERAhIhMUEDIlFhMv/aAAwDAQACEQMRAD8A8b3nuUt57lNSQDt57lLee5TUkA8VD3KRee5TIXSgO7z3KW89ympIB289yu7z3KYuzwgO7z3KW89ymlJAO3nuUt57lNSQDt57lLee5TVJSZJA7mEBaaZSdBfOeGo9kzkkHqmUaYADR0EBHUaZOCwkf86rG3WsmHB+OZIHQ5hCayHfd2kHh0fVS3VuWkOaYMcfwmao7daE9nifqlJ/aHflZjccZTd57lNSK3Ynbz3KW89ympIB289ylvPcpqSAdvPcpbz3KaClKAdvPcpJspIBJJJIBJJBdAQHEinEJAIBqS6uIBJJBdhAcJSSKSASSSSAStNHtg509W5+aq1faLbkAu4DuFPVyK5+rWnbvb0aeqPoV3dfafP4fqFWfbFphPZeDjp1CyajL6oRkj65BQN8ybZ4A7O/VKpXlpaMiZE9Cn0MsczoWOnxAlTfWUffTGJFOcE0rpYEknQuQgOJJwC4QgOJLpC5CASSUJIBJJJIBJzQk1pPCkaxAd2QuBqKZRkJpowSgBnMSoDKKNFRstXcxiYQEdWjHCglGOZBIyhCEBwLpXEggEkkkgHN5V9a1jsaPoqCFZ2tUYCnqL5q0YzcYf8AIpXNqW5HgqGrcAcZUbdUP4T8p/ZZSVXpI6ph3wDs9OU+hWhjzP5XT8Y5Q1Os17H4iJHy8plIwMOxHXsnef8AS1UuamSioAc7IgZ8fBcNAnMRPE9VqihpSldLV1qZGpSnFcIQClPY2ZTAnsKRwxJPlJAMA8J9Nkq2Zph7KYaQeQEaSrZbkZ6Kyo2gdBhWVppTo4lXNno3UJWniloacegUtTSzg7THwW2stNAgEKybprYiEvJXi80/pjh0U7LOGnC9CGjN8Jj9CHZPSx5hVtJGR5+aob+3LHERjkL2C49ODbMZCwHrPTnsLCR7QIlEpWMoUkklREkpTTIaHRgmAfI6LlMDqgONYTwEZTtnN9xgeExt0BAA4Ura+9wEwOsqbqpiRrOhPkJjngDP4hwUQ61xDXHvOP0QrbN5LQe/KmYKOtmhwcYiR06HgoK4pQzxjlXd8W0WNEZIg+Z7qCw0p9wZg7G5x1RL+nZ+KmysXVMtHXthG3FE7XE/kwe09luPTOhkucxzIA/5Cg13QdjS0Nw5xMdPmjy0Zjz3bP4h58hMNAxOCrzU9P8Asgwu/E/2gdlWXT2thoGRyeqqVOK8pBEVqRBkZ+CKttLc/JIA6p3qT6JNANZKKsbF7z7WkjueFobLSqbSMbj+/wAld0bTsIxEBZ3+TfUXOP8AWZ/oXkfVJbD7kf7R9ElP9lekttpY7forClpLeyLpMhFsenek4Ap6cGnARtG3A4GVNKcwpXpUhMpohjU1pTtyUosTMKkYEOx6nY9OUYm2DsgdW0RldhY4DIhWDHhTMCuJsfP3qn0y+1ecEs6FZxfS+r6UyuxzHgEQvEPVnpp1u8lgJZnpwrlTZin04tM03HD+PDuhTXWDpI6jjyO4UFswlwwVr7a13sG78Qj/AL+aXXWCTWaZZ4JPI6dYRl7p7WUgQPc+IHULTU9J3CY93SByFV6rRgsnhp2+QfKi9W1U5ihFg8Cd0fMqWxvHUXgOy08z+4U9e8AO04EZKdVph1Dd5O0nBhV9ntPy+l8dJ+8vY8GWY/2t9pVgxgDGtEAQsv6GYfu7fiVr9JdL4WXv41z9XNvatZLoyUJcWjXNcSMc57o+s7pK7UpSzb4VRDyr1LUpmqGNy5gkCPzLz55LnOMSZPyXrvqHQWt31uu2D8F5xbWjS5xE9jnA/wAqpcK+0NlQDmEHBHfqra1YcbsNiAIz9Fz7PaPaJPIJwP8AaJtRvEzuPVR1V8xbWNFvYfHr9VcUGNbzhUtnULennKuadQPb0/we6OR0L3hJVW1/9p+oSWms8XDHhO+1CAY9OLlz3ptiwZWCmbWVQ16Ipko0YtmVQuuqSgabvKeamUDBlNyIYgGvRts9PmkLY1FU3KJgU7GLSFUpbyq3UtHZWYQ4BWjU9wAHhXEvIdV0FlJ52NyOgH7LlhSO4Hp8Iwtr6ltAcgfTlZtjIPn9D/gqaOYt7C3b1HMH/aZrXppldpj2PPXv2TbK5j2kK6oV5wo1WPMb70bXaZLGvHdpz8wqTVaT6cMe0tx7QeF7XWfhZzWdOZVEOaCeQf8AafkWBvSdttt2A4gLQ6Ow7yUBZUA0BowAIhXenNAIHCn6r4s205yiXtCe0ABAahesY0lxAEdVp8T9ZP1/qLGW7mzLnGAByvPNHtnBpe4Q3MT+4Wk131DbPcWH3x1jH1VRd12vpn7FzTA/D1A+CnyvzBk+q770xzwJ3dOc/RT2YDHkAGD2Kz9GjDg4d5K0LB72nr8EdTBzdXjLUuG5sY6HBU1ldAOj8LuCDwVALmG7Z6f2yotIaKj9pjnHn49lM9RS43/+h+qSO/o7v7h9Uk9o2BGnCY56iL/KjL1B4KpZR9NqqaTshW1E4QYpjEPXEFEsUF2EAxj88qytnrGXl6WPiYV9ol4X4KIq83Nau2cjmqutjhWFNy15+MqlYEyu5SdFV3FX3x0V/CiHV2Etkc8rK1on3AtPccfNafWakMjussK2YJd8wCFHQiWg3vB7Oaj2P4I+YQTNvIEHx/hSNdJ5hw/VRVRZufLeIVJfVoMSrAXBiCcjqsrUrbqzmOd+b2g9VOtOOdrQ6e8xMrQWEHPCzljIAHBWg09v4Qfiq5+n3xizvtQZSpl7zDQvG/UOtPu3n3FtIEhrRyf/AKXr+pac2vTLHD25WC9RejvsmB9EElo9w5JWlYPPqrGBwaPhM/wmXVu6kQ8TGM/wU+xsx9tuefaHEkHmf4VjrNw1zfsmQ5ziOMwFVxMlKjatqMNUQMSfBT6LwCzc4R+3xVdetfbtazdId+IKetUa6i1zeZHzWeK1bOut52Akt4JGPotBa16NqwvdAcGktEZnpKzmn1W0aRqESfyg9Ss7q+svrD3nqcBHPO0XrEtb1BcOc529wkl0TxJlJUSS08YjXqgK6mvfATKdWVzY3E0hBVjRdhAsZMIykExqyouTLkLtBqfcU8I/C/Wc1CxkzHyUuiHa+OMq6ZQ3IN9kWvBHCJGk69Y1loAQEexqrtMcC1WrIW/MYdOu4VPcNh0q0rPgKluKkynRLgLV7mcBZ6q2TJx/KunUyVXXlAjKz6VA9O4bxEeeUSKmM/UcoJtOcjnwmvtHDIJUnzN9DjUjvHRVFyxv2weenuz37KQ3D2jIkKKk/wC0fBG2MtHf4pOn+PnPa1/qQphri0vLjMN5AWn0GvvdIYQ2OXYP0VRptozqM+VqbaGCAMeFXLP+XqX1FmxgAQ9xRBkHqlSecQZ/dEOK1k1zW48y9Uem6e7eWEc5bwskDSoy5jC5w79/mvWvUdMOaQQYjkf7XmuoW5G72SJ5jKm84PL/ABlNVuTVJJPTHgdAo9Oksg8T5VhcUWhpOyOg6GVBSZtaTxjhE+YV+6D1K5PtZMBvbuqt7p/VT3v4uUKtImuykuJJk9MvSYKDsasOyratS3DhVLKUPXJG7RW/RG02IK04CtLdiqcnoiixEhkhMYxFsYnhWhaQhyKdSBC4+nlSsbhOQtMtnbSrOnWwqk8oiiVpydn6nr1ZwgzRRbWSphT8I6/4zVv2CFubWQQrw01DWpqLDlZG2pbXFpEfyjnWsoq8tfduHKmtiDgjKnF6o61hMoM6Y4HcOR45Ww+7CeikFqD0R4tOf5LJik098jIz1V3bOPQ9eCkzTRMo+laAcrScVl13EluJ6QVPUMJNAC5UdhbczGXV1Q6reBshwlp5WZum0mtc8DHg/wALRawwH+VlNTtC9jmgkdJHTtIWffuq59Mhd1N7yGPgCcOEZ7SEE/dJnjxlWzNOLJ69yOCqSvTducGyCTAjulIVqnuq253AgYGOygLuwVrc03MLd7N0ckiD+iCqUNziW/EtOCFSQkpKTZ4KSYet0myobi2zICmtXIx1OQufxb6jshwFb27VV027UdQqqpCqzplE00A2sEQyqFWJFkKJ2FG64Q1S4lFhxMjranCrrR0lWlN0BA660S2E8FCtfKe1yCTOCjcxPa5dLkAFVpDsgn2xGQrUhRuACWDQtvUI5RTLkcqBzQhajDwqJdsuG84Ujrgd1lnVHtM/oiqNQu6q50Vi1rXYhCffIx9CqjVrk0mhxEj9VmrjX9w/8b/d/a7qeUbS9NZfV2mZPPTus1d3eSBgqqttYfUdnHIcP7SOoPYqR9MVH/jy08A4+BKjrpUmiaFrvyceRhHMpW7HCQ0u4k9U2lwAOApKdqyZLZPdZ3q6ucwa/T7eoILW/RY71H6S2Q6m0kEy4/8AS2dB7eitKBDhnjhXz0i8vEvuj/P0/wBJL15/p1hJMcklJXsT41mLZ6sqT1QW1XCOpXQ7rPGmrV+UO6tBUX3oHhQVqiMEq0pV1O24VLTrIqmTKIdWhqEwn02ZQ1J6LoGSmB9szhH9EJRRgCLfSXWhP3JsqKo9Ikj60IOrekKCvuP/AGom0ClqsENvnKX70T1+SHbTUhARoshzqkjz5TZJz2SARFJg5VT6monMbEmFAQJx8lPdVOxXbGmHESrILf0DUplhHwP+V5PrFk5jnDBziF7lfPpsYd4gHqvKtXtm1Kp2QRzPieVVmRP2qChULGOe7G5sT2dwrn0jZltIue73EnHUFVetPBpuYMBsEfLkqrttSe3aWugOw74hZz+y/wDy9GqVQ0xwmfauP4RM9VX6ZU+0YC7JCNNyG/wB+yx63WkuiLG0qAkveCDwB0V5YP8Ayzn9lRCjXqNO1wZ+6tdEtHsEPfud3Sh2TF7lJSwktPbJ4ey/hoKazUc8rP0LuBB4UjbiYWmFrRU9SO6CcIx18IyVmadQE8okPJSsOXGotrkR+JWVCsD1WUtmkD9VZUa7sBTitaqi8KwoPWctrknocfqiGVHuxloQNai1uGkkNMxyj21FR6VQ2DyeVaBFpCnPUD5T2NT/ALNLQG+zTms8KfYnBqQRhgUbmIkhRPb2VBxjcp1xUDRhcYO6HuXz14VT4V9hHVCSrLTOVTVa2cY/lSsvtgOc/FE69i8+nfUt24EtkRyd3ELA6xqLGYbieSOqn9Q6yX1NgJDRkjysprLzhyfXXlcKTJrt7cTgnkfuqRryGkTkGR/KOpgva09Z/QINtKXuaM88I5mC3V/6W1dwfse72nIlbe1oAvJPHT/K8maxzXAcOBHxC9U0+m5lNjjMwM/JT3yfPX409qICsKLg3Jws9bXxjjKjfUq1ZaDAnlZfGjWffB4SWfbYOge/9UlWlkeDrrVxdaVuxSMeZRjLoB0oFrS44ElWtnpJMF307JXDgu2utxEcStFYsmMfVAW+ntaAAM9+5V5RYQB3PZQpZ2VAfJWLKckeOELbDa1T06sQkFnQARbAgaT8o2k7CALEJwCiYVM1ANTmrsLoCMBrgoXKZ6h6oDoZhCXREHojnjHdVN00E5MeFX4UVlTnlC1hgourk44UZpLOtIwuq27m1JH5u/CEuWQ0bxjyMLb3+mb4Ofh3VRdaTvGx0wU59TWRbBd4jBbACH+41A7eB5kfutVZaGGAtMuI4xmOgK0mk+jnVWgmQMdFpPaKyHp70o+4aXmZJ56hep6LorwwNeMARnwFfaZpNK2pwIAAkrLep/VzWAsYYI4j83z6LSTJ7RaZq1hTYSQ4YyRKor31LSoNIBkrG6p6me8mXFxP6LNV7hzjLjKzvPNutJ1cbV3rYyclJYZcT8YW0lZWGn7+6m0/SXOy4Y55C1VnZbRgBK0SBNO0prQMZVwy28KWlS8I1lPwpVA1K1z+yNpUI+KmYxE0mICF7DACbTpO7KwbRUoooCOgcqwpIZtBTsBQBTCp2oZgUzSkEzU5RyU5p8IJx6Y1qkjKcxuU5DRPdCpLx0nnlaC4YNqqX2zd3xKdhRXUqEHhF07XjEKwo2fzVjRsx9UTnR5K5ljI4XDpAPRaKlbgDhSNaOy08YjyZ2h6cbv3Hp/yFeFzKbcQAOnUqaoSGkjkDH0XgfrD1hcC5e1ry1odEDsFWSFtrYf/AKPr72s2sMNPYrya81BzmwXT5Vnq/qR1xQaHD3g5PdZlT1dpyGkpJFJIySSSQH//2Q==";
// 우선 user_id와 profile_image는 우리가 html에 데이터로 불러온게 아닌 그냥 삽입해둔 상태라 다른 방식을 거치지 않고 그대로 작성해주었다.
let fd = new FormData();
fd.append('file', file);
fd.append('image', image);
fd.append('content', content);
fd.append('user_id', user_id);
fd.append('profile_image', profile_image);
// form data에 데이터 추가
$.ajax({
url: "/content/upload",
data: fd,
method: "post",
processData: false,
contentType: false,
success: function (data) {
console.log("성공");
},
error: function (request, status, error) {
console.log("에러");
},
complete: function () {
console.log("완료");
location.replace("/main");
}
})
});
$('#nav_bar_add_box').click(function () {
$('#first_modal').css({
display: 'flex'
});
$(document.body).css({
overflowY: 'hidden'
})
});
$('.img_upload_space')
.on("dragover", dragOver)
.on("dragleave", dragOver)
.on("drop", uploadFiles);
function dragOver(e) {
e.stopPropagation(); // img_upload_space와 겹쳐진 부분에 탑재되는 것을 막는 역할
e.preventDefault();
if (e.type == "dragover") {
$(e.target).css({
"background-color": "black",
"outline-offset": "-20px"
});
} else { // dragleave 인 경우
$(e.target).css({
"outline-offset": "-10px"
});
}
}
function uploadFiles(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer = e.originalEvent.dataTransfer; // 올린 파일을 업로드 하는
files = e.target.files || e.dataTransfer.files;
console.log("뭔가 이미 파일을 올렸네 " + files[0].name); // 파일을 드래그 해서 여러개 올릴 수도 있기에 files내 리스트처럼 접근해야한다
if (files.length > 1) {
alert('하나만 올려라.');
return;
}
if (files[0].type.match(/image.*/)) {
$('#first_modal').css({
display: 'none'
});
$('#second_modal').css({
display: 'flex'
});
$('.img_upload_space').css({
"background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
"outline": "none",
"background-size": "100%",
"background-position": "center",
"background-repeat": "no-repeat"
}); // 이미지 파일인 경우 그걸로 배경설정
} else {
alert('이미지가 아닙니다.');
return;
}
}
</script>
<!-- Bootstrap Bundle-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>위 코드를 보면, 드롭다운 메뉴로 프로필로 갈 수 있는 부분 하나랑 로그아웃 버튼을 구현해두었는데
<해당 부분>
<div class="dropdown-menu" style="left: -158px" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">프로필</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/user/logout">로그아웃</a>
</div>a 태그로, /user/logout으로 가게 설정해두었다. 아직 /user/logout 을 만들지 않았기에 만들어준다.
user - <views.py>
class LogOut(APIView):
def get(self, request):
request.session.flush()
return render(request, 'user/login.html')view에서 logout 클래스를 만들어주면 된다. get으로 받아오는 방식이고 우리가 로그인 정보를 세션에 넘겨주어 인스타그램 로그인이 가능하였던 것이기에 해당 세션을 flush()함수를 통해서 없애주면 된다. 그리고 user/login.html을 렌더해주면 된다.
view에 맞게 url 또한 경로 설정해준다.
이렇게 하면 로그아웃이 잘 구현될 것이다.
그리고 내 프로필 창에 들어가면 사용자 프로필도 보여주어야 하므로 template-content내에 profile.html 파일을 하나 만들어주고, bootstrap 기본 설정과 nav bar까지 붙여넣어준다.
<profile.html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position: fixed; width:100%;">
<!--flex의 space-between 활용해서, 또 밑으로 새지 않게 nowrap, 반응형이 아니어도 되기에 최소 화면크기를 1000픽셀 -->
<div class="container-fluid" style="justify-content: space-between; flex-wrap: nowrap; min-width: 1000px"/>
<img style="height: 30px; object-fit: contain"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
<input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
<div style="display:flex;">
<span class="material-icons" style="padding-right: 10px">home</span>
<span id="nav_bar_add_box" class="material-icons-outlined" style="padding-right: 10px">add_box</span>
<div class="dropdown">
<a id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="box" style="width: 25px; height: 25px">
<img class="profile"
src="data:image/jpeg;base64,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">
</div>
</a>
<div class="dropdown-menu" style="left: -158px" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">프로필</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/user/logout">로그아웃</a>
</div>
</div>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>이렇게 우선 해주고,
content의 views.py에 아래 클래스를 추가
class Profile(APIView):
def get(self, request):
return render(request, 'content/profile.html')클래스를 추가해줬으니 url.py에서도
from django.urls import path
from .views import Main, UploadFeed, Profile
urlpatterns = [
path('upload', UploadFeed.as_view()),
path('profile', Profile.as_view())
]profile을 경로로 등록해주면 로컬호스트:8000/content/profile로 들어가질것이다.
기본적인 형태를 만들었다. 현재 까지 profile.html을 실행해보면
킹받고 귀여운 고양이가 반겨주는 기본적인 프레임이다.
저기 사용자 이름이랑 팔로워 등등을 가져오기 위해서 get으로 호출할 때 세션정보를 불러와야한다.
content/views.py에 profile 클래스에 세션정보를 불러올 수 있게 아래와 같이 해주고
class Profile(APIView):
def get(self, request):
email = request.session.get('email', None)
if email is None:
return render(request, "user/login.html")
user = User.objects.filter(email=email).first() # 웹 서버 세션에 등록된 이메일 정보를 통해 유저 데이터 불러온다
if user is None:
return render(request, "user/login.html")
return render(request, 'content/profile.html', context=dict(user=user))profile.html에서는 각 닉네임 부분이나 이름부분을
{{ user.nickname }}
{{ user.name }}으로 가져와 해당 부분에 적용해주면 된다.
그리고 이름 크기를 키우고, 마진을 좀 주고 하는 등의 사소한 처리를 거친 후,
위 '프로필 편집' 부분을 누르면 바로 이미지를 변경할 수 있도록 하고싶은데, 이를 위해선 type이 file인 input을 만들어서 display:none으로 설정 후, 프로필 편집 버튼이 눌러졌을 때 함께 실행되도록 해주면 되겠다.
<button id="button_profile_upload" style="margin-right: 40px">프로필 편집</button>
<input type="file" id="input_fileupload" style="display: none;">$('#button_profile_upload').click(function(){
$('#input_fileupload').click();
});그러고 나면,
위와같이 파일 선택창이 나온다.
실제로 이러한 파일 선택창에서 이미지 파일을 선택을 해도 프로필은 아직 바뀌지 않는다. 프로필 사진을 바꾸기 위해서는 제이쿼리의 onchange함수를 써서 파일이 탑재될 때 해당 이미지 파일을 불러와서 적용시켜주는 절차를 추가해줘야 한다.
<input type="file" id="input_fileupload" style="display: none;" onchange="profile_upload();">$('#button_profile_upload').click(function(){
$('#input_fileupload').click();
});
function profile_upload(){
let file = $('#input_fileupload')[0].files[0]
console.log(file);
}이렇게 한 후 콘솔로그로 file명이 잘 찍히나 확인해본다
찍힌다. 솔직히 $('#input_fileupload')에서 왜 [0]으로, 첫 번째 인자를 지정해줘야하는진 모르겠지만 리스트 형태로 불러와지는 것 같다. 쨌든 이렇게 파일을 불러와지는건 확인했으므로, 계속한다.
내 계정의 이미지 파일을 변경하려면 파일만 탑재하는게 아니라 내 아이디 정보 또한 함께 실어줘야한다.
$('#button_profile_upload').click(function(){
$('#input_fileupload').click();
});
function profile_upload(){
let file = $('#input_fileupload')[0].files[0]
let email = "{{ user.email }}";
let fd = new FormData()
fd.append('file', file);
fd.append('email', email);
$.ajax({
url: "/user/profile/upload",
data: fd,
method: "post",
processData: false,
contentType: false,
success: function (data) {
console.log("성공");
},
error: function (request, status, error) {
console.log("에러");
},
complete: function () {
console.log("완료");
location.replace("/content/profile");
}
})
}요로코롬 function 코드에 email 정보를 추가해주고 FormData를 통해서 두 정보를 FormData에 추가한다.
그리고 이미지 파일을 변경하기 위해서 user/views.py에 UploadProfile 클래스를 추가해준다
class UploadProfile(APIView):
def post(self, request):
# 일단 파일 불러와
file = request.FILES['file']
email = request.data.get('email')
uuid_name = uuid4().hex # 이미지에 고유한 id부여를 위해 랜덤하게 글자를 정함
save_path = os.path.join(MEDIA_ROOT, uuid_name)
with open(save_path, "wb+") as destination: # with open~ 부분이 실제로 파일을 저장하는 부분, save_path에 파일을 열어 조각조각 가져와 쓴다 - 그냥 알고만 있기
for chunk in file.chunks(): # 파일변수명.chunks로 가져올 수 있다잉
destination.write(chunk)
# 이렇게 저장된 경로를 담아주기 - 이미지에
profile_image = uuid_name
user = User.objects.filter(email=email).first()
user.profile_image = profile_image
user.save() # create일 때는 안해두 되지만 객체를 불러와서 수정과정을 거친 후에는 save()를 해주어야 한다
return Response(status=200) #http response -- http:200(=success를 의미)위와 같이 추가한다. 잠깐 설명을 하자면 files로 넘어오는 변수 'file'을 변수 'file'에 저장하고, email이라는 이름으로 받은 정보를 email 변수에 저장. 이후 파일은 이름을 변경하고 MEDIA 폴더에 저장해놓는다. 이후에 profile_image를 해당 이미지로 설정, 이를 user의 사용자 정보를 email로 불러온 user변수를 활용해 profile_image로 설정해준다. 이후에 save()까지 해주면 변경된 사용자 이미지가 저장될 것이다.
그리고 이러한 view를 불러올 수 있게 url에도 추가해준다.
from django.urls import path
from .views import Join, Login, LogOut, UploadProfile
urlpatterns=[
path('join', Join.as_view()),
path('login', Login.as_view()),
path('logout', LogOut.as_view()),
path('profile/upload', UploadProfile.as_view())
]
<profile.html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %} <!--불러오기-->
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!--Google Icon-->
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js">
<link href="css/bootstrap.css" rel="stylesheet">
</script>
<style>
.box {
width: 50px;
height: 50px;
border-radius: 70%;
overflow: hidden;
}
.profile {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed_box {
margin: 20px 0;
border: solid 1px gray;
background-color: white;
}
.modal_overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
}
.modal_window {
background: white;
backdrop-filter: blur(13.5px);
-webkit-backdrop-filter: blur(13.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
width: 800px;
height: 600px;
position: relative;
padding: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="position: fixed; width:100%;">
<!--flex의 space-between 활용해서, 또 밑으로 새지 않게 nowrap, 반응형이 아니어도 되기에 최소 화면크기를 1000픽셀 -->
<div class="container-fluid" style="justify-content: space-between; flex-wrap: nowrap; min-width: 1000px"/>
<img style="height: 30px; object-fit: contain"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo-2x.png/1b47f9d0e595.png">
<input class="form-control" style="width: 200px" type="search" placeholder="Search" aria-label="Search">
<div style="display:flex;">
<span class="material-icons" style="padding-right: 10px">home</span>
<span id="nav_bar_add_box" class="material-icons-outlined" style="padding-right: 10px">add_box</span>
<div class="dropdown">
<a id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="box" style="width: 25px; height: 25px">
<img class="profile"
src="data:image/jpeg;base64,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">
</div>
</a>
<div class="dropdown-menu" style="left: -158px" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">프로필</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/user/logout">로그아웃</a>
</div>
</div>
</div>
</nav>
<div style="display: flex; flex-direction: row; justify-content: center; padding-top: 60px; background-color: #fafafa">
<div style="padding: 20px 60px">
<div class="box" style="width: 175px; height: 175px;">
<img class="profile"
src="data:image/jpeg;base64,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">
</div>
</div>
<div style="text-align: left;">
<div style="display: flex; flex-display:row; margin: 20px 0px;">
<div style="font-size: 26px; margin-right: 40px">
{{ user.nickname }}
</div>
<button id="button_profile_upload" style="margin-right: 40px">프로필 사진 편집</button>
<input type="file" id="input_fileupload" style="display: none;" onchange="profile_upload;">
<span style="margin-right:40px;" class="material-symbols-outlined">settings</span>
</div>
<div style="margin-bottom: 20px">
게시물 내 게시물 건수 팔로워 111 팔로잉 111
</div>
<div>
<b>{{ user.name }}</b>
</div>
</div>
</div>
<!-- 첫 번째 모달 : 이미지 업로드 용 -->
<div id="first_modal" class="modal_overlay">
<div class="modal_window">
<div style="display: flex; flex-direction: row; justify-content: space-between">
<div style="width: 40px">
</div>
<div>
새 이미지 업로드
</div>
<div>
<span class="material-icons">close</span>
</div>
</div>
<div class="img_upload_space" style="border-top: solid 1px gray; margin-top: 10px; width:778px; height: 540px;">
</div>
</div>
</div>
<!-- 두 번째 모달 : 내용 탑재용 -->
<div id="second_modal" class="modal_overlay">
<div class="modal_window">
<div style="display: flex; flex-direction: row; justify-content: space-between">
<div style="width: 40px">
</div>
<div>
새 이미지 업로드
</div>
<div>
<span class="material-icons">close</span>
</div>
</div>
<div style="border-top: solid 1px gray; margin-top:10px; display: flex; flex-direction: row;">
<div class="img_upload_space" style="width:500px; height: 540px;">
</div>
<div style="border-left: 1px solid gray">
<div>
<textarea id="input_feed_content" style="width: 276px; height: 400px" class="form-control"
rows="5"></textarea>
</div>
<button id="feed_create_button" type="button" class="btn btn-primary" style="width:100%">공유하기</button>
</div>
</div>
</div>
</div>
<!-- Jquery -->
<script>
let files;
$('#feed_create_button').click(function () {
let file = files[0];
let image = files[0].image;
let content = $('#input_feed_content').val();
let user_id = "Jin.99";
let profile_image = "data:image/jpeg;base64,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";
// 우선 user_id와 profile_image는 우리가 html에 데이터로 불러온게 아닌 그냥 삽입해둔 상태라 다른 방식을 거치지 않고 그대로 작성해주었다.
let fd = new FormData();
fd.append('file', file);
fd.append('image', image);
fd.append('content', content);
fd.append('user_id', user_id);
fd.append('profile_image', profile_image);
// form data에 데이터 추가
$.ajax({
url: "/content/upload",
data: fd,
method: "post",
processData: false,
contentType: false,
success: function (data) {
console.log("성공");
},
error: function (request, status, error) {
console.log("에러");
},
complete: function () {
console.log("완료");
location.replace("/main");
}
})
});
$('#nav_bar_add_box').click(function () {
$('#first_modal').css({
display: 'flex'
});
$(document.body).css({
overflowY: 'hidden'
})
});
$('.img_upload_space')
.on("dragover", dragOver)
.on("dragleave", dragOver)
.on("drop", uploadFiles);
function dragOver(e) {
e.stopPropagation(); // img_upload_space와 겹쳐진 부분에 탑재되는 것을 막는 역할
e.preventDefault();
if (e.type == "dragover") {
$(e.target).css({
"background-color": "black",
"outline-offset": "-20px"
});
} else { // dragleave 인 경우
$(e.target).css({
"outline-offset": "-10px"
});
}
}
function uploadFiles(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer = e.originalEvent.dataTransfer; // 올린 파일을 업로드 하는
files = e.target.files || e.dataTransfer.files;
console.log("뭔가 이미 파일을 올렸네 " + files[0].name); // 파일을 드래그 해서 여러개 올릴 수도 있기에 files내 리스트처럼 접근해야한다
if (files.length > 1) {
alert('하나만 올려라.');
return;
}
if (files[0].type.match(/image.*/)) {
$('#first_modal').css({
display: 'none'
});
$('#second_modal').css({
display: 'flex'
});
$('.img_upload_space').css({
"background-image": "url(" + window.URL.createObjectURL(files[0]) + ")",
"outline": "none",
"background-size": "100%",
"background-position": "center",
"background-repeat": "no-repeat"
}); // 이미지 파일인 경우 그걸로 배경설정
} else {
alert('이미지가 아닙니다.');
return;
}
}
$('#button_profile_upload').click(function(){
$('#input_fileupload').click();
});
function profile_upload(){
let file = $('#input_fileupload')[0].files[0]
let email = "{{ user.email }}";
let fd = new FormData()
fd.append('file', file);
fd.append('email', email);
$.ajax({
url: "/user/profile/upload",
data: fd,
method: "post",
processData: false,
contentType: false,
success: function (data) {
console.log("성공");
},
error: function (request, status, error) {
console.log("에러");
},
complete: function () {
console.log("완료");
location.replace("/content/profile");
}
})
}
</script>
<!-- Bootstrap Bundle-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
</body>
</html>
잘 수행되었다는 200번 코드를 확인할 수 있다.
이제 우리가 확인해야할 것은 프로필이 바뀌었는지 db에서 확인해본다. 바로 프로필 페이지에 안뜨는 이유는 하드코딩해두었기 때문이다.
DB의 user에 가보면 profile_image가 기존 default_profile이 아닌 다른 파일명으로 바뀐것을 볼 수 있다.
나머지 부분은 재빨리 다음 포스트에서 올리겠다.
시험기간을 핑계로 며칠 글을 쓰지 못했는데 더 부지런하고 똑똑하게 블로그를 써야겠다.
'How to become a real programmer > Back-End' 카테고리의 다른 글
| Node.js, React 익히기 - 1(시작) (0) | 2022.11.13 |
|---|---|
| Python - Django를 이용한 인스타그램 클론 - 8 (0) | 2022.11.10 |
| Python - Django를 이용한 인스타그램 클론 - 6 (0) | 2022.10.02 |
| Python - Django를 이용한 인스타그램 클론 - 5 (2) | 2022.09.26 |
| Python - Django를 이용한 인스타그램 클론 - 4 (2) | 2022.09.21 |