[20221115] onclick 함수에 매개변수 사용, dynamic routing

오늘 배운 것 & 짧은 소감

• 오늘은 풀스택 미니프로젝트를 진행하면서 html onclick 함수를 이용할때, 매개변수를 통해 다른 함수 스코프에서 받은 데이터를 넣어 주었다.
  • 이 부분은 항해99를 시작 전 사전스터디에서 진행했던 토이프로젝트에서 해결하지 못했던 같은 문제인데, 기술 매니저님이 매개변수 힌트를 주셨다...
  • 왜 이걸 스스로 생각 못했을까...?ㅠㅠ 계속 유저가 클릭한 html tag의 상세 값을 가져오려고만 했지만, ${this}.attr()을 하면 this는 항상 window를 가리켰다..ㅋㅋㅋㅋ 

$.ajax({
    type: "GET",
    url: "api/postings",
    data: {},
    success: function (response) {
        let rows = response["postings"]
        console.log(rows)
        for (let i = 0; i < rows.length; i++) {
            let img = rows[i]["img"];
            let count = rows[i]["count"];
            let temp_html = `
            <div class="card h-100">
                <img alt="${post_id}" src="${img}" onclick="routing(${post_id})"/>
                <button class='join-btn' onclick='addCount(${post_id})' alt="${post_id}">같이 먹자</button>
            </div>
            `;
            $("#cards-box").append(temp_html);
                        
function addCount(id) {
// 매개변수를 생각하기 전엔, ${this}.attr('alt')를 계속 시도했다...ㅋㅋㅋ => 반환값은 undefined
    $.ajax({
        type: "POST",
        url: "api/postings/add",
        data: { post_id_give: id }, // 매개변수로 받은 id = ${post_id} 값을 서버로 넘겨 이에 해당하는 db를 수정 
        success: function (response) {
            alert(response["msg"]);
            window.location.reload();
        },
    });
}

function routing(id) {
    location.href = `/detail_test?id=${id}` //qurey string으로 ?id=${post_id} 값을 넘겨 상세페이지에서 이를 이용해 해당 db를 불러올 수 있음
}

 

• 또, flask의 dynamic routing을 이용하여 url에 포함된 query string을 이용해서 value 값에 해당하는 데이터를 db에서 풀링해와 GET으로 클라이언트에 전달해주는 것도 배웠다.
  • 이 방법은 유저가 타이틀을 클릭했을 때, 해당 타이틀의 상세페이지로 넘어가도록 하기 위한 방법이었는데,
  • 예를들면, db에 각 데이터 뭉치마다 id 값을 저장하고, 유저가 어떤 id의 데이터가 담긴 html tag를 틀릭하면 url에 해당 id 값을 전달하고, 하나의 템플릿 html에서 해당 id 값에 맞는 데이터를 뿌려주는 방식이다.  

const query = location.search; // 라우팅 된 페이지의 url에서 query string을 가져오기 //?key=value 의 형태
const post_id = Number(query.split('=')[1]); // str으로 들어온 값을 split하고, = 뒤의 value만 취하기

//위에서 취득한 query string의 value를 이용해서 서버에 post_id 값으로 db 요청하기
function show() {
    $.ajax({
        type: "GET",
        url: `/detail_test/id=${post_id}`,
        data: {},
        success: function (response) {
            console.log(response)
        },
    });
}

//위의 자바스크립트에서 GET으로 보낸 요청을 받아 db 검색 값을 보내 줌
@app.route("/detail_test/id=<int: id>", methods=["GET"])
def post_id_get(id):
    post = db.postings.find_one(
        {'post_id': id}, {'_id': False})
    return jsonify({'post': post})

---

Dynamic Routes & Variable Rules

Static route URLs can only get us so far, as modern-day web applications are rarely straightforward. Let's say we want to create a profile page for every user that creates an account within our app or dynamically generate article URLs based on the publication date. Here is where variable rules come in.

@app.route('/user/<username>')
def profile(username):
    # Logic goes here

@app.route('/<int:year>/<int:month>/<title>')
def article(year, month, title):
    # Logic goes here

Dynamic values in route names

When defining our route, values within carrot brackets <> indicate a variable; this enables routes to be dynamically generated. Variables can be type-checked by adding a colon, followed by the data type constraint. Routes can accept the following variable types:

• string: Accepts any text without a slash (the default).
• int: Accepts integers.
• float: Accepts numerical values containing decimal points.
• path: Similar to a string, but accepts slashes.

Unlike static routes, routes created with variable rules do accept parameters, with those parameters being the route variables themselves.

 

The Art of Routing in Flask