WIL 2-2. 웹개발 종합반 5주차(7월 1주차)

< WIL이란? >

Weekly I Learend의 약자로, 주간 학습한 내용을 정리 후 공유하기 위해 작성하는 글이다.
 
아래는 웹 개발 종합반 강의 5주차를 1회독하면서 정리한 내용이다.
 

---

 

- 프로젝트 세팅

1. app.py 파일 생성 + 가상환경 잡아주기
2. 라이브러리(flask, pymongo, dnspython) 설치
* MongoDB 연결을 위해 certifi 패키지까지 추가로 설치한다.
3. templates 폴더 생성, index.html 파일 생성
4. 뼈대 코드(코드 스니펫) 붙여넣기(정렬: Sh+Alt+F), MongoDB 홈페이지 접속
*코드스니펫의 포트번호는 5000으로, Mac은 5001번으로 코드 수정
5. 파일 실행 후, localhost 접속
6. 웹페이지 접속시 Get 연결 확인, 댓글 남기기 버튼 눌러 POST 연결 확인
 

---

 

- 팬명록 프로젝트

좋아하는 연애인의 팬명록 홈페이지를 만들어,
이용자가 남긴 응원 댓글(+닉네임)을 DB에 저장,
이를 다시 웹페이지로 불러와 전시하는 기능을 구현한다.
 
프로젝트 세팅을 비롯해, 연습해본 프로젝트가
구현하는 기능이 비슷하여 이제 어느정도의 흐름은 익숙해진다.
 

 

---

 

- 서울 날씨 API 호출하기

기존의 프로젝트에서 구현하던 기능에 덧붙여, 실시간 온도를 알려주는 기능을 API 호출을 통해 구현한다.
기온 API에서 온도를 받아와 홈페이지에 붙인다.

        function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                console.log(data['temp'])
            });
        }

 
콘솔에 잘 찍혔는지 확인해준다.

콘솔에 잘 찍혔으면, 웹 페이지로 전시할 수 있도록 한다.
 
 
온도가 들어가야할 곳의 id가 temp 이므로, 코드를 다음과 같이 수정한다.
(Jquery + text)

        function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                let temp = data['temp']
                $('#temp').text(temp)
            });
        }

 

---

 

- 댓글 달기 기능 구현

1. 서버 만들기

- 닉네임(name), 응원댓글(comment)를 DB에 넘기는 기능 구현하기

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    doc = {
        'name':name_receive,
        'comment':comment_receive
    }
    db.fan.insert_one(doc)

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

 
dbprac.py 파일로부터 from, import문을 복사해온다.
fan collection에 저장될 수 있도록 하고, 출력되는 메시지를 수정한다.
 

2. 클라이언트 만들기

닉네임 해당 id = name
댓글 해당 id = comment
 
save_comment() 함수를 수정한다.
 
 
변수 name, comment에 값을 받을 수 있도록 하고,
이 받은 값을 fetch를 통해 /guestbook 으로 전달한다.

        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }

메시지(저장완료)가 뜨면, 웹페이지는 새로 고침된다.
 
 

---

 

< 댓글 보여주기 기능 구현>

1. 서버 만들기

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result': all_comments})

웹페이지에 GET요청을 하면 DB로부터 데이터를 불러온다.
*jsonify 가 뭐였지?
 
 

2. 클라이언트 만들기

        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                console.log(rows)
            })
        }

rows 변수에 DB로 부터 받아온 모든 댓글들을 받아주고, 
rows가 정상 작동하는지 콘솔을 찍어본다.
 

정상 작동하면, forEach 문을 통해 하나씩 돌려주도록한다. 

        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                rows.forEach((a)=>{
                    let name = a['name']
                    let comment = a['comment']

                    console.log(name, comment)
                })
            })
        }

 
 
다시 콘솔확인

 
 
이제 temp_html을 통해 붙여준다. (+ forEach 문이 돌기 전 empty 실행)

        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#comment-list').empty()
                rows.forEach((a)=>{
                    let name = a['name']
                    let comment = a['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)
                })
            })
        }

 
서버만들기는 여기서 완료된다.
 

---

 

<og 태그>

og 태그를 잘 넣어두면, sns에서 웹페이지를 공유할때 자동으로 정보를 보여줄 수 있다.
 

    <title>초미니홈피 - 팬명록</title>

    <meta property="og:title" content="아이유 팬명록" />
    <meta property="og:description" content="아티스트에게 응원 한마디!" />
    <meta property="og:image" content="https://dimg.donga.com/wps/NEWS/IMAGE/2022/09/19/115530960.1.jpg" />

title 태그 밑에 og태그를 달아주고, 태그에 맞는 정보와 이미지 주소를 넣어준다.
생각보다 간단하게 만들 수 있는 것이었다.
 
홈페이지 배경화면도 원하는 이미지 주소로 바꿔준다.
(background-image 의 url 변경)
덕질하는 가수/연애인이 없어서 강의처럼 아이유로…
 

 
 

---

 

<배포>

직접 서버용 컴퓨터를 구매하여 물리적으로 환경을 구성하는 것이 아니라, 클라우드 환경에서 서버를 대여함. 이곳에 파일을 업로드하고, 이 서버를 켜놓음.
클라우드 서비스 중 AWS Elastic Beanstalk를 이용함.
 
(배포과정은 하나하나 외우는 것이 아닌, 큰 얼개로 이해하기… 따로 정리는 하지 않겠다.)
 
마지막 주차 숙제는 배포한 페이지를 공유하는 것이다. 
http://myweb.eba-ibjqecca.ap-northeast-2.elasticbeanstalk.com/

 
 

강의를 잘 따라했다면 1년간은 문제 없지만, 1년 경과 후
애플리케이션이 1개를 초과하면 과금 된다고 한다.
관련된 설정을 찾아볼 필요가 있겠다.

23.10.20.부로 배포를 중단했다.
 

- 학습 포인트(보완 사항 도출)

• 코드를 이해하려는 시도를 계속해야한다. (2,3조 통합 스터디-코드 리뷰에 꾸준히 참여해야겠다.)
• 사전스터디 기간도 이제 많이 남지는 않았다.(~7.24) 웹개발 종합반 강의 2회독이 최소 학습 목표이지만,  혼자서 더 할 수 있는 것도 찾아보고 학습계획을 잘 세워야겠다.