나의 개발일지 TIL(Today I learned) - 미니프로젝트 2일차

오늘은 내일배움캠프에서 미니프로젝트를 진행한지 2일차이다.

S.A를 참고하면서 프로젝트를 진행했다.

기능구현을 팀원을 추가하는 기능 추가된 기능을 출력해주는 기능 프로필을 자세하게 볼 수 있게 하는 기능이다.

 

 

팀프로젝트 기능구현

팀원을 추가

script.js

$(".save_button").click(function () {
        //제이쿼리를 이용해 입력한 정보의 value를 가져온다.
        const image = $("#my_image").val();
        const name = $("#my_name").val();
        const yourself = $("#my_yourself").val();
        const strong = $("#my_strong").val();
        const style = $("#my_style").val();
        const goals = $("#my_goals").val();
        const appointment = $("#my_appointment").val();
        const sns = $("#my_sns").val();

        //ajax를 통해서 서버와 연결한다.
        $.ajax({
            //정보를 추가하기 때문에 POST를 사용한다.
            //data를 모두 보내고 성공했으면 창을 새로고침 합니다.
            type: "post",
            url: "/creat-member",
            data: {
                image_give: image,
                name_give: name,
                yourself_give: yourself,
                strong_give: strong,
                style_give: style,
                goals_give: goals,
                appointment_give: appointment,
                sns_give: sns
            },
            success: function (response) {
                alert(response["msg"]);
                window.location.reload();
            }
        });
    });

app.py

def creat_member():
    # 데이터베이스 안에서 members안에 문서를 카운트한다
    # 문서가 비었으면 id를 초기화 한다
    if (db.members.count_documents({}) == 0):
        id = 0
    # 문서가 있다면 제일 최근 작성한 문서의 id를 받아온다.
    else:
        id = db.members.find().sort("_id", -1)[0]["id"]

    # 입력받은 값들을 받아서 변수 저장
    image_receive = request.form["image_give"]
    name_receive = request.form["name_give"]
    yourself_receive = request.form["yourself_give"]
    strong_receive = request.form["strong_give"]
    style_receive = request.form["style_give"]
    goals_receive = request.form["goals_give"]
    appointment_receive = request.form["appointment_give"]
    sns_receive = request.form["sns_give"]
    # id가 겹치지 않게 1씩 더해서 id값을 증가시킨다.
    id += 1
    # 조회수를 위해 cnt를 미리 만들어 둔다
    cnt = 0

    # 받아온 값들을 문서로 만든다.
    doc = {
        "id": id,
        "image": image_receive,
        "name": name_receive,
        "yourself": yourself_receive,
        "strong": strong_receive,
        "style": style_receive,
        "goals": goals_receive,
        "appointment": appointment_receive,
        "sns": sns_receive,
        "viewcnt": cnt
    }

    # 작성된 문서를 데이터베이스에 밀어넣는다
    db.members.insert_one(doc)

    # 완료된 메세지를 보낸다
    return jsonify({"msg": "추가 완료!"})

팀원들의 이름이 중복이 발생해도 원하는 팀원을 찾을 수 있게 중복이 안되는 id값을 저장합니다.

count_documents를 사용하면 데이터베이스의 컬렉션의 데이터수를 카운트 할 수 있다.

sort("_id", -1)[0]는 _id를 기준으로 역순으로 정렬하고 첫번째 값을 가져온다.

 

팀원리스트 출력

script.js

$.ajax({
        type: "get",
        url: "/members",
        data: {},
        success: function (response) {
            // 가져온 response안에 members리스트를 변수에 저장
            // for of를 이용해 리스트를 반복
            const members = response["members"];
            for (const member of members) {
                const id = member["id"];
                const image = member["image"];
                const name = member["name"];
                const sns = member["sns"];
                const cnt = member["viewcnt"]

                // html구조를 작성하고 가져온 데이터를 삽입한다.
                temp_html = `<div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                    <div class="col-md-4">
                                        <img src="${image}"
                                             class="img-fluid rounded-start" alt="...">
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card-body">
                                            <h5 class="card-title title_color">${name}</h5>
                                            <p class="card-text temp"></p>
                                            <a href="${sns}" class="card-text">개발일지 블로그</a>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="card-body">
                                            <button><a href="/profile?id=${id}">프로필 보기</a></button>
                                            <p class="card-text">조회수: ${cnt}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

                //스파르타 코딩클럽에서 제공하는 api에서 지역 온도를 가져온다.
                // $.ajax({
                //     type: "get",
                //     url: "http://spartacodingclub.shop/sparta_api/weather/"+city,
                //     data: {},
                //     success: function (response) {
                //         $(".temp").text(response["temp"]);
                //     }
                // });

                // class members를 가지고 있는 요소에다가 작성해둔 temp_html을 추가한다.
                $(".members").append(temp_html);

            }
        }
    });

app.py

def members_get():
    # 데이터베이스에서 _id를 제외한 모든 데이터를 가지고와서 리스트로 만들어 members에 저장
    merbers = list(db.members.find({}, {"_id": False}))

    # 리턴으로 저장한 members를 넘긴다.
    return jsonify({"members": merbers})

데이터베이스에 있는 팀원 리스트를 보내서 출력을 한다.

 

프로필 상세보기

profile.js

// window.location.search로 url의 파라미터값을 가져온다.
    // URLSearchParams() 객체는 url 쿼리 문자열 작업을 할 수 있는 메서드를 제공한다.
    // get메서드를 이용해서 해당 파라미터의 value값을 가져온다
    const query = window.location.search;
    const param = new URLSearchParams(query);
    const id = param.get('id');

    $.ajax({
        // url에 파라미터값을 직접 넣어 팀원정보 요청시 필요한 id를 서버에 넘겨준다.
        type: "GET",
        url: "/profile-get?id_give=" + id,
        data: {},
        success: function (response) {
            const member = response["member"];

            const name = member["name"];
            const image = member["image"];
            const yourself = member["yourself"];
            const strong = member["strong"];
            const style = member["style"];
            const goals = member["goals"];
            const appointment = member["appointment"];
            const id = member["id"];

            const temp_html = `<div class="profile"></div>
                        <h1 class="main" value="${id}">${name}</h1>
                        <p class="sub">${yourself}</p>
                        <p class="userText">${strong}</p>
                        <p class="userText">${style}</p>
                        <p class="userText">${goals}</p>
                        <p class="userText">${appointment}</p>
                        <button onclick="open_comment()" type="button">방명록 남기기</button>`

            $(".wrap").append(temp_html);
            $(".profile").css("background-image", `url("${image}")`);
        }
    });

app.py

def profile_get():
    # ajax에서 url에 직접 보내준 id_give파라미터를 가져온다.
    id_receive = request.args.get('id_give')

    # 가져온 파라미터 값이 String으로 가져와진다 그렇기 때문에 데이터베이스 id와 같은 자료형으로 변환 시켜준다.
    id = int(id_receive)
    # 데이터베이스에서 _id를 제외한 id의 팀원 정보를 검색해서 가져온다.
    member = db.members.find_one({"id": id}, {"_id": False})
    cnt_receive = member["viewcnt"]
    cnt_receive += 1
    db.members.update_one({"id": id}, {"$set": {'viewcnt': cnt_receive}})

    # 리턴으로 저장한 member를 넘긴다.
    return jsonify({"member": member})

id를 계속해서 사용해야하기 떄문에 id를 url파라미터로 가져와서 사용한다. ajax에서 url로 id값을 보내

app.py에서 해당 id를 가진 팀원을 find_one으로 찾아서 가져온다

그리고 find_one으로 한 번 조회가 됬다면 조회수를 증가시킨다.

증가시킨 조회수는 update_one을 통해서 다시 데이터베이스에 저장합니다.

 

오늘의 느낀점

 

오늘은 계속해서 프로젝트만 진행했다. 팀원들과 기능의 분담이 처음에는 복잡했다

그래서 기능구현이 끝난 후 코드를 합치려고 할 때 꽤 많은 오류를 접했다

그래서 그것을 해결하기 위해 깃허브의 풀 리퀘스트라는 기능을 학습했다

풀리퀘스트를 사용해도 조금 더 편하게 코드를 합칠 수 있으면 좋겠다고 느꼈다

오늘은 프로젝트를 하면서 url로 파라미터 값을 보내서 활용 하는 방법을 배운게 기억에 남는다

계속해서 새로운 지식을 학습하면서 좋은 개발자가 되고싶다.