스파르타 코딩클럽 웹개발 4주차 개발일지

안녕하십니까, 퓨어워터맨입니다. 

 

이제 많이 어려워 졌습니다. 그래도 더 열심히 하여 스킬업을 하도록 하겠습니다. 

모두 화이팅입니다. 

1.  Prac Flask : 연습코드 작성
2.  mars: 회성땅 공동구매하기
3.  movie:스파르타피디아
4. homework: 팬명록 -> 4주차 마지막 과제
5.  bucket:버킷리스트

PyCharm에 몇가지의 준비 과정을 거쳐야 합니다.

프로젝트 만들기 -> 패키지 설치 -> 디렉토리 만들기

그중에 패키지 설치는 잊으면 작업을 할 수 없으므로 필수 사항이라 할 수 있다.

 

#서버와의 통신을 위한 패키지 설치는 Flash,Pymongo,dnspython 설치가 그것이다.

1) Flask 설치 2) Pymongo 설치 3) dnspython 설치의 참조 화면은 다음과 같으며, 마지막 과정의 '+'버튼 누른 후, 입력하는 패키지명 만 다르다.

최상단 메뉴의 파일 -> 설정 -> 프로젝트 -> python인터프리터 -> '+'버튼 선택 후 필요한 패키지명 입력

 

# 크롤링 기능 사용을 위한 패키지 설치는 requests, BS4 2가지이며, 설치 과정은 서버와 동일한 과정으로 가능하다.

 

다음은 해당 프로젝트의 생성이다. homework라는 마지막 과제 중심으로 설명하도록 해야겠다.

이때 디렉토리를 엉뚱한 곳에 생성하여 한참동안 에러에서 헤멧던 기억이 아직도 생생하다.

위에 보이듯이 homework 하위로 app.py를 생성해야 하며, homework하위에는 static, templates 를 생성해 두어야 한다.

특히, homework/templates 하위에 index.html을 만들어야 하는데 상위에 만들어두어 한참동안 곤궁함에 힘들었음을 기억해야 한다.

 

여기서 오타 주의해야 합니다. 

저는 templates를 templetes로 하여 서버 실행이 안되었습니다.

 

#코드 작성 후 확인 과정

app.py 점검을 위한 실행은 app.py화면에서 마우스 우클릭으로 실행을 선택하면 된다. 다음과 같다.

app.py화면에서 마우스 우클릭하면 위의 메뉴가 뜨고, 실행을 선택하면 '중지 후 실행'선택하면 됩니다.

화면 하단의 내용으로 뜨면 정상이고, 그 이오ㅔ에는 에러라고 봐야겠지요.

index.html을 실행하려면, 역시 index.html 을 띄워둔 상태에서 마우스 우클릭하여 실행 버큰을 누르면 됩니다.

다른 창으로 결과물이 뜨는 것을 확인할 수 있습니다.

이 상황에서는 DB에 입력되는 상황도 함께 점검 해야하므로 다음과 같이 3~4개 화면을 확인해야 하는 번거로움이 뒤따릅니다.

여기까지는 4주차 개발 환경 구축하기와 개발 완료 후 점검하기 환경 살펴보기입니다.

 

개발이 진행되는 절차는 1) 요청 정보 확인하기: URL, 디렉토리명, POST/GET 등 2) 서버(flask) 만들기 3)클라이언트(ajax) 만들기

4)클라이언트(ajax)와 서버(flask) 연결 확인->console을 띄워두고 메시지 확인이며, 중간 결과물의 검증이므로 매우 중요한 과정 중 하나입니다.

1차로 클라이언트 -> 서버로 주는 정보가 있다면 확인하고, 없다면 반대의 경우를 확인하면 된다,

해당 출력 화면 상에서 마우스 우 클릭하고, 검사 선택->console 선택하면 됩니다.

특히, 이 경우에 로컬 개발 환경의 확인이 중요하며, 이를 위해 접속 경로는 반드시 http://localhost:5000/으로 하여야 합니다.

아무 생각없이 index.html로 실행하였으며, 계속되는 않되는 상황이지만 원인을 추적하기 힘에 부쳤으며, 결국 튜터님의 도움으로 살아 납니다.

아직도 정확히는 모르겠지만 현재로 보면 배포판이 아니므로 발생하는 상황이 아닌가 미루어 짐작해 봅니다.

5) 완성 결과 확인 하기로 마무리되겠으나,

시작 전에 개발 대상을 위한 코드 중 제일 중요한 기능을 조각으로 확인 하는 절차를 거침이 프로젝트의 승패를 결정짓는 중요한 요인중 하나인 것같습니다.

 

이번 개발의 경우엔

해당 URL을 입력하여 접속한다면

1) 화면이 뜬다. - index.html의 show 가 보여지기 전에 DB에서 정보를 Get 하여 보여줍니다.

index.html 의 show 수행
function show_comment(){
    $('#comment-list').empty()
    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            let rows = response['comments']
            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>새로운 앨범 너무 멋져요!</p>
                                            <footer class="blockquote-footer">호빵맨</footer>
                                        </blockquote>
                                    </div>
                                </div>`
                $('#comment-list').append(temp_html)
            }
        }
    });
}
app.py - GET 수행
@app.route("/homework", methods=["GET"])
def homework_get():
    comment_list = list(db.homework.find({},{'_id':False}))
    return jsonify({'comments':comment_list})

 

2)화면에서 입력을 기다립니다.

 

3)닉네임과 코멘트를 입력하면, DB에 저장 후 화면에 다시 보여줍니다.

 

index.html 에서 입력 받아 DB 저장 후, 화면에 재 출력

<div class="mypic">
    <h1>에일리  팬명록</h1>
    <p>현재기온: <span id="temp">36</span>도</p>
</div>
<div class="mypost">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="name" placeholder="url"> 닉네임 입력
        <label for="floatingInput">닉네임</label>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="comment"  -> 응원 메시지 입력
            style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
    </div>
    <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button> -> 버튼 눌러서 저장
</div>
<div class="mycards" id="comment-list">
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p>새로운 앨범 너무 멋져요!</p>
                <footer class="blockquote-footer">호빵맨</footer>
            </blockquote>
        </div>
    </div>
</div>
app.py 의 DB 저장 기능 
@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form["name_give"]
    comment_receive = request.form["comment_give"]

    doc = {
        'name':name_receive,
        'comment':comment_receive
    }

    db.homework.insert_one(doc)   -> DB에 저장

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

 

드디어 마지막 한 주가 남았습니다. 

마지막까지 화이팅입니다.