SW-jungle/Week-00💡

Haein Lee·2022년 9월 23일

22/09/19~09/22

정글 시작!

정글에 들어오기 전에는 무언가를 꾸준하게 해본 적이 별로 없는 거 같다. 그리고 내가 찾아서 한다기보다는 누가 시켜서 한 적이 많았는데 이번엔 내가 선택한 길이니까 끝까지 열심히 해보고 싶다.

재밌게 즐길 수 있다면 즐기면서 열심히 하면 잘되지 않을까??! 지금은 구글 없이는 아무것도 할 수 없는 코딩 어린이지만 5개월이 지나고 나서는 그래도 지금과는 많이 바뀌어있기를~~ :) 아자아자

정글 0주차:

입학시험 때 배운 기술들을 토대로, 3박 4일간 미니 프로젝트를 완성

필수포함 사항
로그인 기능
Jinja2 템플릿 엔진을 이용한 서버사이드 렌더링
더 고민해볼 키워드
Bootstrap을 대체할 CSS 라이브러리 사용하기 (Bulma, Tailwind 등)
JWT 인증 방식으로 로그인을 구현하기 (쿠키/세션 대비 등장하게 된 배경은?)

발표 PPT

<!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">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/0d71430ac6.js" crossorigin="anonymous"></script>
        <title>SW 사관학교 정글 - 로그인 </title>
        <script>    
            function post_login() {
                console.log('post login 실행')

                let email = document.getElementById("email").value
                let pw = document.getElementById("pw").value
                if ( !email || !pw ) {
                    return alert("이메일과 비밀번호를 모두 입력해주세요!☹️")
                }

                $.ajax({
                    type: "post",
                    url:"/login",
                    data:{email_give: email, pw_give: pw},
                    success: function(response){
                        if (response.msg == 'found') {
                            console.log(response.result.name)
                            alert("웰컴! 오늘도 열코 합시다! 👻 ")
                            window.location.href = "/";
                        } else if (response.msg == 'not_found') {
                            alert("이메일과 비밀번호를 다시 확인해주세요 🥺")
                            window.location.reload();
                            console.log(response.result.name)
                        }
                    } } )
                }
        </script>
</head>
<body>
    <section class="login-form">
        <h1>Login</h1>
        <div>
            <div class="int-area">
                <input type="email" name="email" id="email" autocomplete="off" required>
                <label for="email">EMAIL</label>
            </div>
            <div class="int-area">
                <input type="password" name="pw" id="pw" autocomplete="off" required>
                <label for="pw">PASSWORD</label>
            </div>
            <div class="btn-area">
                <button id="btn" type="submit" onclick="post_login()">LOGIN</button>
                <button id="sp" type="button" onclick="location.href='/signup'">회원가입</button>
            </div>
    </section>
</body>
</html>

인덱스

          window.location.reload()
                } 
                }})}

        function makeCards(author,link,title,comment,category,image,like,created_at,liked_by) {
            let card_html = `
                <div class="card" style= "margin: 20px 10px; border-radius: 30px;width: 30%;">
                    <a href="${link}" target="_blank"> <img src="${image}" class="card-img-top" alt="..." style="height: 130px; object-fit: scale-down; border-bottom: 0.2px solid rgba(0,0,0,0.2);border-top-left-radius: 15px;border-top-right-radius: 15px;margin-top: 15px; padding-bottom :15px"> </a>
                    <div class="card-body">
                            <h5 class="card-title" id="card-title"> ${title} </h5>
                            <h6 class="card-subtitle mb-2 text-muted"> ${category} </h6>
                            <p class="card-text" id="card-text"> 
                                <span> ${author} :  </span>
                                <span> ${comment} </span>
                            </p>        
                            <div class="likes-holder" data-articleId=${created_at}>     
                                <button id="like-btn" type="button" class="btn btn-outline-success btn-sm" onclick="click_like_btn(this)"><i id="like-icon" class="fa-regular fa-heart fa-lg"></i></button>
                                <!-- <i class="fa-solid fa-heart"></i> -->
                                <span class="likes-total-num"> Likes: <span>${like}</span> </span>
                            </div>  
                    </div>
                </div>`
            $("#cards").append(card_html);
        
            const sessionId = document.getElementById("session-id").innerText
            const loggedinUser = sessionId

            index = liked_by.indexOf(loggedinUser)
            if (index>=0) {
                let btn = document.getElementById("cards").lastChild.lastElementChild.lastElementChild.firstElementChild
                btn.classList.add("btn-success");
                btn.classList.remove("btn-outline-success");
            }}

        function getMaterials() {
            $.ajax({
                type: "GET",
                url: "/materials",
                data: {},
                success: function (response) {
                    let materials = response.materials;
                    console.log(materials)
                    for (i = 0; i < materials.length; i++) {
                        makeCards(materials[i]['user'], materials[i]['link'], materials[i]['title'],materials[i]['comment'], materials[i]['category'], materials[i]['image'], materials[i]['like'], materials[i]['created_at'],materials[i]['liked_by'])
                    }
                } // success 시 함수 끝 
                }) // ajax 끝
        }    
    </script>
    <title> SW 사관학교 정글 - 학습 자료 확인하기 </title>
</head>

<body>
    <header>
        {% if session['id'] %}<p id="session-id" style="display:none">{{session['id']}}</p> {% endif %} 
        {% set user_id = session['id'] %}   
        {% set user_name = session['name'] %}   

        <div id="header-logo">
            <a href="/"><img src="{{ url_for('static', filename='jungle_logo.png') }}"/></a>
        </div>
        <div id="header-user">
            <p> {{user_name}}님 안녕하세요! </p>
            <a href="/upload"><button type="button" class="btn btn-outline-danger" onclick="openEditForm(this)"> 자료추가 </button></a>
            <button type="button" class="btn btn-outline-secondary" onclick="location.href='/logout'"> 로그아웃 </button>
        </div>
    </header>

    <main>
        <div id="cards" class="row"> </div>
    </main>
    
</body>
</html>

회원가입

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/0d71430ac6.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <title>SW 사관학교 정글 - 회원 가입</title>
    <script> 
    function makeSignup(){

        console.log("makeSignup")
        let email = $('#email').val();
        let pw = $('#pw').val();
        let name = $('#name').val();
        let class1 = $('input[name=class1]:checked').val();
   
        let arr =[email, pw, name, class1];
        let count = 0;
        for(let i=0; i < arr.length; i++) {
            if(arr[i] == "" || arr[i] == undefined) {
                count +=1 ;
            }}
            
        if (count >=2){
            return alert("모든 값을 입력해주세요 🥺")
        } else if(arr[0] == ""){
            alert("이메일을 입력해주세요 🥺")
        } else if(arr[1] == ""){
            alert("비밀번호를 입력해주세요 🥺")
        } else if(arr[2] == ""){
            alert("이름을 입력해주세요 🥺")
        } else if(arr[3] == undefined){
            alert("반을 체크해주세요 🥺")
        } else {
            $.ajax({
                type: "POST",
                url:"/signup",
                data:{email_give: email, pw_give: pw, name_give: name , class_give: class1},
                success: function(response){
                    console.log(response.msg)
                    if (response.msg == 'existing') {
                        alert ("이미 존재하는 이메일 입니다. ")
                        window.location.href = "/signup";
                    } else if (response.msg == 'not_found') {
                        alert ("정글 5기생이 아닙니다. 누구냐 넌!")
                        window.location.href = "/signup";
                    } else {
                        alert ("회원 가입이 완료되었습니다")
                        window.location.href = "/login";    
                    }}})
        } }
        </script>
   

</head>
<body>
  
    <section class="signup-form">
        <h3>회원가입</h3>
        <div action="">
            <div class="int-area">
                <input type="email" name="email" id="email" autocomplete="off" required>
                <label for="email">EMAIL :</label>
            </div>
            <div class="int-area">
                <input type="password" name="pw" id="pw" autocomplete="off" required>
                <label for="pw">PASSWORD :</label>
            </div>
            <div class="int-area">
                <input type="text" name="name" id="name" autocomplete="off" required>
                <label for="name">NAME :</label>
            </div>
            <form>
                <input type="radio" name="class1"  value="a" /> A반
                <input type="radio" name="class1"  value="b" /> B반
            </form>
        <div class="btn-area">
            <button onclick="location.href='login'" id="btn" type="button" style="background-color: gray;">돌아가기</button>
            <button onclick="makeSignup()" id="btn" type="button" >가입하기</button>
        </section>

</body>
</html>

업로드

<!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">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
        <style>  
            body {
                display:block;
                padding: 0 20%;
                margin-bottom: 50px;
                height: 110vh;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/0d71430ac6.js" crossorigin="anonymous"></script>

        <title> SW 사관학교 정글 - 학습 자료 올리기 </title>
        <script>
            function upload_url() {
                let user_id = $("#user").val();
                let link = $("#link").val();
                let title = $("#title").val();
                let comment = $("#comment").val();
                let category = $("#category").val();
             
                let arr =[user_id.length, link.length, title.length, comment.length, category.length];
                let count = 0;
                for(let i=0; i < arr.length; i++) {
                    if(arr[i] == 0) {
                        count +=1 ;
                    }}
                if (count >=2){
                    return alert("빈칸을 채워주세요")
                } else if(arr[0] == '0'){
                    alert("user_id를 채워주세요")
                } else if(arr[1] == '0'){
                    alert("링크를 채워주세요")
                } else if(arr[2] == '0'){
                    alert("제목을 채워주세요")
                } else if(arr[3] == '0'){
                    alert("코멘트를 채워주세요")
                } else if(arr[4] == '0'){
                    alert("카테고리를 채워주세요")  
                } else {
                $.ajax({
                    type:"POST",
                    url: "/upload",
                    data: {user: user_id, link:link, category:category, comment:comment, title:title},
                    success: function (response) {
                        if (response["result"] == "success") {
                            alert("업로드 완료 🥰 !");
                            document.location.href = "/";
                        } else {
                            alert("업로드 실패 😥 !");
                        } 
                    }})}}
        </script>
    </head>
<body>
    <header>
        {% if session['id'] %}<p id="session-id" style="display:none">{{session['id']}}</p> {% endif %} 
        {% set user_id = session['id'] %}   
        {% set user_name = session['name'] %}   

        <div id="header-logo">
            <a href="/"><img src="{{ url_for('static', filename='jungle_logo.png') }}"/></a>
        </div>
        <div id="header-user">
            <p> {{user_name}}님 안녕하세요! </p>
            <a href="/"><button type="button" class="btn btn-outline-success" onclick="openEditForm(this)"> 돌아가기 </button></a>
            <button type="button" class="btn btn-outline-secondary" onclick="location.href='/logout'"> 로그아웃 </button>
        </div>
    </header>


     

    <main>
        <h1>자료 올리기</h1>
        <div>
            <div class="form-group">
            <label for="user">작성자</label>
            <input type="text" disabled class="form-control" id="user" value="{{user_name}}" >
            </div>
            <div class="form-group">
            <label for="link">링크</label>
            <input type="text" class="form-control" id="link"  required>  
            </div>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title"  required>
            </div>
            <div class="form-group">
                <label for="comment">코멘트</label>
                <input type="text" class="form-control" id="comment" required>
            </div>
            <div class="form-group">
                <label for="category">카테고리</label>
                <input type="text" class="form-control" id="category" required>
            </div>
            <button type="submit" class="btn btn-primary" onclick="upload_url()">자료 저장</button>
        </div>
    </main >
    
</body>
</html>

.py

from flask import Flask, json, request, render_template, jsonify, redirect, url_for, session
from array import array
import requests
from flask_cors import CORS
from datetime import datetime, date,timedelta
from bs4 import BeautifulSoup
from pymongo import MongoClient
from unicodedata import category
from requests.adapters import HTTPAdapter
from urllib3.util.retry import Retry
import bcrypt
import time

app = Flask(__name__)
app.secret_key = 'jungleweek00team5isfreakingsmartanddope'
app.config["PERMANENT_SESSION_LIFETIME"] = timedelta(minutes=60)

client = MongoClient('mongodb://haein:haein@43.200.3.162',27017)
db = client.jungle



@app.route('/')
def home():
    if 'id' in session:
            id = session['id']
            print("session id :", id)
            return render_template('index.html')
    else: 
        return redirect(url_for('show_login'))

@app.route('/login')
def show_login():
    if 'id' in session:
        return redirect(url_for('home'))
    else: 
        return render_template('login.html')

@app.route('/login', methods=['POST'])
def check_login():
    email_receive = request.form['email_give']
    pw_receive = request.form['pw_give']
    user_found = db.signup.find_one({'email': email_receive},{'_id': 0})
    if user_found : 
        if bcrypt.checkpw(pw_receive.encode('utf-8'), user_found['pw'].encode('utf-8')) : 
            print("let me log you in")
            session['id'] = user_found['email']
            session['name'] = user_found['name']
            return jsonify({'msg': 'found', 'result': user_found})
        else: 
            return jsonify({'msg': 'not_found'})
    else : 
         return jsonify({'msg': 'not_found'})

@app.route('/signup')
def show_signup():
    if 'id' in session:
        return redirect(url_for('home'))
    else: 
        return render_template('signup.html')

@app.route('/signup', methods=['POST'])
def write_signup():
    email_receive = request.form['email_give']
    pw_receive = request.form['pw_give']

    pw_encoded = pw_receive.encode('utf-8')
    hashed_password = bcrypt.hashpw(pw_encoded, bcrypt.gensalt())
    pw_decoded = hashed_password.decode('utf-8')

    name_receive = request.form['name_give']
    class_receive = request.form['class_give']
    
    if db.signup.find_one({'email': email_receive}):
        return jsonify({'msg': 'existing'})
    if not db.members.find_one({'email': email_receive,'name': name_receive,'class': class_receive},{'_id': 0}) :
        return jsonify({'msg': 'not_found'})
 
    # 가져온 데이터를 DB에 저장하기
    doc = {
        'email': email_receive,
        'pw': pw_decoded,
        'name': name_receive,
        'class' : class_receive,
        'likes' : [],
    }
    db.signup.insert_one(doc)
    return jsonify({'msg': '저장 완료'})

@app.route('/materials', methods=['GET'])
def read_materials():
    print(session)
    result = list(db.materials.find({}, {'_id': 0}).sort("like",-1))
    return jsonify({'result': 'success', 'materials': result}) 
   
@app.route('/upload')
def upload():
    if 'id' in session: # 로그인된 상태이면 
        return render_template('upload.html')
    else: 
        return redirect(url_for('show_login'))

@app.route('/upload', methods=['POST'])
def upload1():
    # h = 'http://'
    user = request.form['user']
    link = request.form['link']
    # if not (h in link):
        # link = h + link
    title = request.form['title']
    comment = request.form['comment']
    category = request.form['category']
    
    headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    try: 
        data = requests.get(link, headers=headers)
    except: 
        time.sleep(1)
        data = requests.get(link, headers=headers)
    soup = BeautifulSoup(data.text, 'html.parser')
    og_image = soup.select_one('meta[property="og:image"]')
    print("og_image: ",og_image)
    if og_image == None:
        print("no og:image!")
        url_image = 'https://img.freepik.com/premium-vector/cute-monkey-character-swinging-and-holding-banana_324746-285.jpg?w=2000'
    else: 
        print("let's get the og_image")
        url_image = og_image['content']
    now = datetime.now().strftime("%d-%b-%Y-%H:%M:%S.%f") 
    liked_by = [] 
    upload_info = {'user':user, 'link':link, 'title':title,'comment':comment, 'category':category, 'image':url_image, 'like':0 , 'created_at': now, 'liked_by': liked_by}
    db.materials.insert_one(upload_info)
    return jsonify({'result': 'success'})








@app.route('/likes', methods=['POST'])
def change_likes():
    print("start!")
    id_received = request.form['created_at']
    material = db.materials.find_one({'created_at': id_received})
    loggedin_user = session['id']
    try:
        index_in_liked_by = material['liked_by'].index(loggedin_user)
    except:
        index_in_liked_by = -1 
    print("material['liked_by'] index is ", index_in_liked_by)

    if index_in_liked_by >= 0:
        print("# 배열에 존재하는 경우 -> 좋아요 차감")
        new_like = material['like'] - 1
        new_liked_by = material['liked_by'].pop(index_in_liked_by) 
        db.materials.update_one({'created_at': id_received}, {'$set': {'like': new_like,'liked_by' : material['liked_by']}})
    else:
        print("# 배열에 존재하지 않는 경우 -> 좋아요 추가 ")
        new_like = material['like'] + 1
        new_liked_by = material['liked_by'].append(loggedin_user)  
        db.materials.update_one({'created_at': id_received}, {'$set': {'like': new_like,'liked_by' : material['liked_by']}})
    return jsonify({'result': 'success'})

@app.route('/logout')
def logout():
    session.pop('id',None)
    session.pop('name',None)
    return redirect(url_for('home'))

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

    body {
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }

    .login-form h1 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 50px;
    }

    .int-area {
     width: 400px;
    position: relative;
    margin-top: 20px;
    }

    .int-area:first-child {
     margin-top: 0;
    }

    .int-area input {
     width: 100%;
    padding: 20px 10px 10px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    font-size: 18px;
    outline: none;
    }

    .int-area label {
    position: absolute;
    left: 10px;
    top: 15px;
    font-size: 18px;
    transition: top 0.5s ease;
    }

    .int-area label.warning {
     color: red !important;
    animation: warning 0.3s ease;
    animation-iteration-count: 3;
    }

    @keyframes warning {
     0% {
     transform: translateX(-8px);
    }
    25% {
     transform: translateX(8px);
    }
    50% {
    transform: translateX(-8px);
    }
    75% {
     transform: translateX(8px);
     }
    }

    .int-area input:focus + label,
    .int-area input:valid + label {
     top: -2px;
    font-size: 13px;
    color: #166caa;
    }

    .btn-area {
    margin-top: 20px;
    text-align: right;
    }

    .btn-area button {
    width: 30%;
    height: 50px;
    margin: 0px 10px;
    color: #fff;
    background: #008000;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
    
    }

    .caption {
    margin-top: 20px;
    text-align: center;
    }

    .caption a {
    margin: 0 20px;
    font-size: 15px;
    color: blue;
    text-decoration: none;
    }
    body {
    background-color: #f2f7fb
    }

    header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25vh;
    border-bottom: 1px solid green;
    margin-bottom: 60px;
}

#header-logo{
    width: 80%;
    text-align: center;
}
#header-logo img {
        width: 40%;
        margin-left: 15%;
      }

#header-user  {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#header-user a{
    margin-bottom: 10px;    
}


.likes-total-num {
    color: green;
    font-size:medium;
    margin-left: 5px;
}

Haein Lee

멋진 개발자가 될거야 :)

이전 포스트

백준 파이썬 기초 문제 풀기1

다음 포스트