{TIL 2} 웹 개발 미니 프로젝트 : 글쓰기 페이지

내가 하게 된 글쓰기 페이지 만들기

• 처음으로 찾아서 사용해 본 css Double line

border-style: double;

• div 태그에 대해서 정말 의도치 않게 많이 헤맸지만.. 정말 오랜시간동안 붙잡고 어떻게든지 정확한 비율을 맞추고 싶어 해냈다.. 느낀 점은 안되는 걸 같은 방법으로 오랫동안 붙잡고 해결을 하는 것도 정말 좋지만 시간 안에 해내야 하는 부분들이 있다 보니 꼭 같은 방법이 아니더라도 다르게 더 예쁘게 다른 느낌으로 깔끔하게 원하는 것을 해내는 능력도 중요하다는 걸 조금이지만 알게 되었다...🔽🔽🔽

<div class="box1">
    <div class="title_box">
        <textarea class="form-control" placeholder="제목" id="title" style="padding-right: 380px"></textarea>
    </div>
    <div class="comments-box">
        <textarea class="form-control" placeholder="내용" id="desc"
                  style="padding-right: 380px; height: 100px;"></textarea>
    </div>
    <div class="link_box">
        <textarea class="form-control" placeholder="링크" id="link" style="padding-right: 380px;"></textarea>
    </div>
    <button onclick="save_writing()" type="button" class="btn btn-dark btn-lg" style="margin-left: 209px">작성하기</button>
    <button type="button" class="btn btn-dark btn-lg" onclick="location.href='https://www.naver.com/'">작성취소</button>
</div>

• 바보 같겠지만 jQuary 와 Ajax의 개념에 대해 몇번이고 강의를 듣고 다르게 바꿔서도 해보고 자체적으로 만들면서 해보고 해봤지만 이해가 안되는 부분이 있어서 고구마 10개를 한꺼번에 먹은 느낌이었는데...
  오늘 드디어 !!!!!!!!!!! 어느정도 느낌을 알게 되었고 어디서 어떻게 전달을 하고 받고 하는 지에 대해서 느낌이 생겼다..
  그리고 jQuary는 단순하게 body 태그 안에 있는 id 값을 script 태그 안에서 처리를 해주는 거라는 걸 몸소 이해하게 돼서 기쁘다 .. 🤣🔽🔽🔽

<script>
        function save_writing() {
            let title = $('#title').val()
            let desc = $('#desc').val()
            let link = $('#link').val()

            $.ajax({
                type: "POST",
                url: "/api/write",
                data: {title_give: title, desc_give: desc, link_give: link},
                success: function (response) {
                    alert(response['msg'])
                }
            })
        }

    </script>

• 마지막으로 GET 과 POST 의 개념에 대해서도 너무나도 이해가 안되었는데 .. 드디어 오늘!! 좀 알게 되어서 너무너무너무 기분이 좋다 🤣🤣🔽🔽🔽

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


@app.route("/api/write", methods=["POST"])
def write_post():
    title_receive = request.form['title_give']
    desc_receive = request.form['desc_give']
    link_receive = request.form['link_give']

    # doc = {
    #     'title': title_receive,
    #     'desc': desc_receive,
    #     'link': link_receive
    #     }
    # db.write.insert_one(doc)

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

• 아래 화면에 보이듯이 작성하기 버튼을 누르면 저장완료! 라는 알림을 띄워준다.(이제 조원들과 다 합쳐지게 되면 DB서버에 저장을 할 예정이다!)🔽🔽🔽
  
• 그리고 작성취소 버튼을 클릭하면 다른 페이지로 전환되도록 설정을 해놓은 상태이다. (인트로 페이지2 페이지를 맡은 조원의 url 을 받아서 입력할 예정이다)

오늘의 총평 :

	이제 항해를 시작한 지 2일째다.. 화이팅😂😂😂😂😂😂😂😂😂😂😂