2022. 05. 14.

미니 프로젝트가 끝났다.
미니 프로젝트를 진행하면서 나는 배움에 있어서 다른 동료들보다 느리다는것을 느꼈고, 간극을 채우기 위해서 더 공부해야겠다고 생각했던 일주일이었다.

미니 프로젝트 중 내가 맡은 기능은 상세 페이지 구현으로 토큰값으로 사용자의 정보를 받아오고, jinja2언어를 이용한 서버사이드 렌더링을 통해 상세페이지를 구현했다.

처음에는 메인페이지에 상품이 등록 될 때마다 클릭한 상품의 정보를 어떻게 가져와야할지 막막했고, 혼자서는 도저히 해결되지 않았다. 웹개발 종합반 강의 중 count를 이용해 버킷리스트 완료, 취소 버튼 구현 부분을 반복해서 보았지만, 상품 마다 페이지가 다른 상황에서 이것을 어떻게 해결해야할지 감이 잡히지 않았다.

같은 조원인 '윤'님(미니프로젝트를 통틀어서 거의 멱살잡고 나를 끌어주셔서 감사의 말씀을 드린다.)이 리스팅 부분에 a태그 를 이용해 페이지의 index 값을 가져오면 된다고 알려주셨고 무사히 기능 구현을 할 수 있었다.

<a href="/main/${index}">

=========== 아래는 전체 코드 ==========

function listing() {
        $.ajax({
            type: "GET",
            url: "/main",
            data: {},
            success: function (response) {
                let capingtems = response['all_capingtem']
                for (let i = 0; i < capingtems.length; i++) {
                    let index = capingtems[i]['num']
                    let title = capingtems[i]['title']
                    let category = capingtems[i]['category']
                    let price = capingtems[i]['price']
                    let comment = capingtems[i]['comment']
                    let img = capingtems[i]['img']
                    let starpoints = capingtems[i]['category']
                    let temp_html = `<div class="card h-100">
                                        <img width="250" height="200" alt="${title}"
                                             src="../static/${img}">
                                        <div class="card-body">
                                            <a href="/main/${index}">
                                            <h5 class="card-title">${title}</h5>
                                            <p class="card-category">${category}</p>
                                            <p class="card-price">${price}</p>
                                            <p class="card-star">${starpoints}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div></a>`
                    $('#cards-box').append(temp_html)
                }
            }
        })
    }

참조 링크 [youtube]: https://www.youtube.com/watch?v=TyEwrWIQjaY

어찌 되었던 미니프로젝트가 끝이났고, 팀원들이 아니었으면 나는 진작 개발자의 꿈을 접었을지도 모르겠다. 같은 강의를 듣고 같이 공부했는데 왜 나만 이해가 되지 않는지, 막상 강의를 들을때는 이해가 되었는지 실제로 해보려니 코드 한줄 적지 못하는지 무수한 자책의 연속이었지만 팀원들을 내색하지 않고 괜찮다며 따뜻한 말을 전해주었다. 여러모로 후회가 많이 되는 미니프로젝트 주간이었지만 개발자 간 협업을 간접적으로 체험할 수 있는 좋은 기회였다.