항해99 개강 전 사전 스터디 후기 - 1

[항해99 7기 개강 전 사전 스터디 9조]

• '웹 개발 종합반' 강의를 듣고 개강 전에 혼자 공부해도 좋지만 사전 스터디를 신청해서 팀원들과 같이 의지를 다질 수 있을 거 같아서 사전 스터디 신청을 하였다. 다 같은 목적으로 항해99를 신청한 분들이라서 그런지 의지들도 대단했다. 그런 모습을 보면서 나 또한 열심히 해야겠다는 마음을 다 잡았다.

 

• 우리의 첫 번째 프로젝트는 '웹 개발 종합반' 강의를 듣고 토이 프로젝트를 만들어 보는 거였다. 어떤 걸 만들어야 할지 얘기를 나누다가 한분께서 좋아하는 연예인 투표할 수 있는 페이지 만드는 게 어떻겠냐고 해서 다들 좋은 아이디어라고 해서 <첫 번째 토이 프로젝트는 좋아하는 연예인 투표 페이지> 만들기로 했다.

---

<사전 스터디 첫 번째 토이 프로젝트>

 

• 일단 역할을 나누는 게 어려웠다. 다들 처음 해보는 프로젝트라서 기능별로 나눠야 할지 프론트엔드, 백엔드로 나눠서 만들어야 할지 감이 잡히지 않았었다. 같이 논의해본 결과 프론트엔드, 백엔드로 나누어보자로 결론이 났다. 나는 프론트엔드 쪽을 해보기로 했다.

 

• 먼저 강의를 들은 거를 참고하면서 대문 페이지도 만들고 포스팅할 수 있는 박스도 만들고 연예인들 투표할 수 있는 박스도 만들어보았다. 배운 그대로 해서 이거까지는 어렵지 않았다.
  프론트엔드는 다 만들었고 프론트엔드 같이 하기로 하신 분들도 다하셔서 서로 합쳐보았다. 그런데 서로 의견을 들어보니 배운 대로 하다 보니깐 어디까지가 프론트엔드이고 백엔드인지 몰라서 일단 배운 대로 하다 보니 포스팅 등록하기랑 연예인 DB 저장도 하게 되었다고 했다. 그래서 이왕 이렇게 된 거 첫 번째 토이 프로젝트는 배운 대로 다 해보고 다시 중간쯤에 합쳐보자는 의견이 나왔다.

 

• HTML, CSS, JavaScript 다루는 클라이언트와 파이썬으로 다루는 서버를 서로 연결하고 DB 쪽도 연결해서 다시 모였다. 대부분 배운 대로 만들다 보니 비슷하게 만들었고 거기서 더 잘하신 분 거로 추가해서 페이지에 포스팅한 박스 보이는 거와 연예인들 포스팅 하기 기능들을 다 만들었다.

 

• 그런데 여기서 문제!! 우리가 투표를 누르면 투표 수가 올라가는 기능을 배우지는 않았다. 이거는 우리에게 제일 어려운 문제라서 또 기한을 주고 구글링 해서 각자 찾아보기로 했다. 쉽지가 않았다. 머리로는 이해가 되는데 막상 코드로 적을려니깐 손이 움직이지 않는다. 코드를 적어도 에러가 나고 왜 안되는 지도 모르겠고 머리가 정말 복잡했다. 그렇게 나는 아무거도 못하고 다시 만나는 날이 돌아왔다. 다른 팀원 분들은 정말 많이 찾았고 성공 하신 분들도 있었다. 성공 하신 분 코드를 보면 정말 이해가 잘 되었다. 나는 이걸 왜 못 찾았지.. 왜 몰랐지 싶은 거였다. 정말 대단해 보였다. 그거를 참고해서 페이지를 정리하다보니 정말 잘 되었다.

↓서버에 작성한 투표 수 함수

@app.route("/star/vote", methods=["POST"])
def vote_star():
    num_receive = request.form['num_give']

    db.stars.update_one({'num': int(num_receive)}, {'$inc': {'vote': 1}})

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

↓클라이언트에 작성한 투표 수 함수

function voted(num) {
            $.ajax({
                type: "POST",
                url: "/star/vote",
                data: {num_give: num},
                success: function (response) {

                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

 

 

 

• 그리고 여기에 하나의 기능을 더 추가 하고 싶었다. 그건 바로 투표 수에 따른 순위 나타내기!! 이거 또한 시간을 주고 각자 알아보았지만 어려운 부분이라서 그런지 아무도 성공하지 못했다 ㅠㅠ 아쉽다. 다들 1등까지는 알아내었지만 순위로 자리 바꾸고 1등 표시하는 거는 못했다...

 

• 아래는 다 같이 만든 페이지를 올려보았다. 다른 분들이 봤을 때 이게 끝이라고?? 별로라고 생각할 수 있지만 우리 팀으로 처음 만든 페이지라서 그런지 우리 눈에는 예쁘고 대단해 보였다. ㅎㅎ
  투표 숫자는 그냥 임의이므로 누가 많다 적다는 신경 쓰지 말아 주세요. 그냥 투표하는 기능을 만들었다는 거에 칭찬해주세요!!

 

대문페이지와 좋아하는 연예인 추가할 수 있는 포스트박스

 

연예인 추가한 후에 투표하기 누르면 표 수가 올라간다.