스파르타코딩클럽웹개발플러스1주차 | 계속되는 코딩공부

34996 단어 코딩초보일본회사원웹개발플러스열코열코

코딩은 계속된다

왕초보시작반 5주를 완주하고
"많이 부족하다. 아직 잘 모르겠다."
라는 갈증이 웹개발플러스 강의 결제로 이어졌다.

왜 더 배우고 싶은지 이유는 크게 2가지.
1.혼자서 뭘 만들수 있는 수준까지는 배우고 싶다.
2.회사 인사쪽에 문의해서 개발쪽으로 가는 방법을 알아보니, 일단 테스트가 있다고...

그래,, 하고 싶다고 가고 싶다고 다 할 수 있는 일이 아니니
일단 실력으로 걸러내야겠지.

웹개발플러스1주차 소감

왕초보시작반에서 강의를 해줬던 튜터님이라 설명방식이나 진행방식이 적응이 되어있었고, 초보강의해서 5주에 걸쳐 했던 작업들은 1주차에 다시 복습하는 느낌?!

역시나 느낀건
'복습하고 계속 반복하지 않으면 금방 까먹구나,,'

내가 생각해서 코드를 쓰기보다는 강의시간엔 따라 쓰느라 바쁘기 때문에
내거가 되었나는 다른 문제이다.

따라가느라 거의 가랭이 찢어지는 기분이지만
나름 1주차는 무난하게 끝낸듯!!

과제

일기장을 만들었다.
사진이랑 간단한 일기를 쓰면 사진 데이터도 저장되고
나만의 일기가 카드로 생성되는 페이지.

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

from pymongo import MongoClient
# client = MongoClient('localhost', 27017)
client = MongoClient('mongodb://test:test@localhost', 27017)

db = client.dbsparta_plus_week1

from datetime import datetime


@app.route('/')
def home():
    return render_template('index.html')


@app.route('/diary', methods=['GET'])
def show_diary():
    diaries = list(db.diary.find({}, {'_id': False}))
    return jsonify({'all_diary': diaries})


@app.route('/diary', methods=['POST'])
def save_diary():
    title_receive = request.form['title_give']
    content_receive = request.form['content_give']

    file = request.files["file_give"]

    extension = file.filename.split('.')[-1]

    today = datetime.now()
    mytime = today.strftime('%Y-%m-%d-%H-%M-%S')

    filename = f'file-{mytime}'

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)

    doc = {
        'title': title_receive,
        'content': content_receive,
        'file': f'{filename}.{extension}',
        'time': today.strftime('%Y.%m.%d')
    }

    db.diary.insert_one(doc)

    return jsonify({'msg': '저장 완료!'})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }

        .posting-box {
            width: 500px;
            margin-top: 20px;
        }

        .wrap {
            width: 900px;
            margin: auto;
        }

        .container {
            padding-left: 50px;
        }

        .posting-box > .custom-file {
            margin-bottom: 20px;
        }

        .save-time {
            font-size: 5px;
            color: darkgray;
        }
    </style>
    <script>
        $(document).ready(function () {
            bsCustomFileInput.init()
            listing()
        })

        function listing() {
            $.ajax({
                type: "GET",
                url: "/diary",
                data: {},
                success: function (response) {
                    let diaries = response['all_diary']
                    for (let i = 0; i < diaries.length; i++) {
                        let title = diaries[i]['title']
                        let content = diaries[i]['content']
                        let file = diaries[i]['file']
                        let time = diaries[i]['time']

                        let temp_html = `<div class="card">
                                            <img src="../static/${file}" class="card-img-top">
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${content}</p>
                                                <p class="save-time">${time}</p>
                                            </div>
                                        </div>`

                        $('#cards-box').append(temp_html)

                    }
                }
            })
        }

        function posting() {
            let title = $('#title').val()
            let content = $("#content").val()

            let file = $('#file')[0].files[0]
            let form_data = new FormData()

            form_data.append("file_give", file)
            form_data.append("title_give", title)
            form_data.append("content_give", content)

            $.ajax({
                type: "POST",
                url: "/diary",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
    </script>
</head>

<body>
<div class="wrap">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1>나홀로일기장</h1>
            <div class="posting-box">
                <div class="custom-file">
                    <input type="file" class="custom-file-input" id="file">
                    <label class="custom-file-label" for="file">사진 선택하기</label>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control" id="title" placeholder="사진 제목">
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="content" rows="3" placeholder="내용 입력"></textarea>
                </div>
                <button onclick="posting()" type="button" class="btn btn-primary">저장하기</button>
            </div>
        </div>
    </div>
    <div class="card-columns" id="cards-box">
    </div>
</div>

</body>

</html>
5분 뒤에 시작하는 React with Docker
Vue + Spring Boot API호출

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage