자기소개 웹사이트 만들기

첫 미니 프로젝트

스파르타 코딩클럽 부트캠프에서 첫 미니 프로젝트를 진행하였다.

처음 진행하는 프로젝트였고 부족한 부분이 많았다.

팀 프로젝트로 5명의 인원이 한 팀이 되어 진행하였다.

 

 

 

HTML,CSS,JavaScript, Bootstrap을 이용하여 디자인 하였다.

 

HTML, CSS 만을 이용해 이미지 슬라이드를 구현해보았다.

ajax, DBmongo연동을 통해 방명록 기능을, 하트<button> tag를 이용해 좋아요를 구현하였다.

@app.route("/api/ikhyeon", methods=["POST"])
def ikhyeon_post():
    comment_receive = request.form['comment_give']
    name_receive = request.form['name_give']
    doc = {
        'comment': comment_receive,
        'name': name_receive
    }
    db.ikhyeon.insert_one(doc)
    return jsonify({'msg': '업로드 완료!'})


@app.route("/api/ikhyeon", methods=["GET"])
def ikhyeon_get():
    ikhyeon_list = list(db.ikhyeon.find({}, {'_id': False}))
    return jsonify({'ikhyeon': ikhyeon_list})

$(document).ready(function(){
    show_comment()
});
function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()

    $.ajax({
        type: 'POST',
        url: '/api/ikhyeon',
        data: { name_give: name, comment_give: comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

function show_comment(){
    $.ajax({
        type: "GET",
        url: "/api/ikhyeon",
        data: {},
        success: function (response) {
            let rows = response['ikhyeon']

            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let comment = rows[i]['comment']

                let temp_html = ` <div class="card">
                                        <div class="card-body">
                                            <blockquote class="blockquote mb-0">
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                            </blockquote>
                                        </div>
                                       </div>`
                $("#comment-list").append(temp_html)
            }
        }
    });

위 코드를 통해 방명록을 구현하였다.

 

 

<잘한점>

• -RESTAPI를 참고하여 사용하려고 시도 하였다 (RESTAPI에 대한 공부는 지속적으로)
• Github readme 파일을 잘 작성하였다.  ㅡ>  이를 통해 하고자 하는 프로젝트의 배경과 정보를 한눈에 알 수 있다.     (추가적인 readme 형식은 추후 공부 해야할 과제 ex) markdown)

 

<못한점>

• 미니 프로젝트를 진행하면서 학습 목표가 뚜렷하지 않았다.
• 백엔드에 대한 구현보다 프론트엔드 구현에 더 집중했다.

 

 

<추가적인 전체 피드백>

• 무엇을 배웠는지 한 페이지에 정리하여 발표하는 것이 좋다. (추후 기업에서도)
• API 통신에 대해서 공부해야한다.
• 10^n 단위로 트레픽 TEST를 해야한다 (추후 면접 질문 가능성)
• Troble shooting , refectoring 을 알고 있어야 한다.
• TIC 를 잘 작성해야 한다.
• 우리팀의 약속을 정해 효율적 으로 일 해야 한다.

 

 

<느낀점>

1. 다음 프로젝트에서는 다양한 서버 통신 기능을 추가해 봐야겠다.
2. 피드백을 참고하여 더욱 발전한 프로젝트를 만들어야 겠다.  

 

 

 

감사합니다.