TIL 2023-01-12 항해99 D+4

1. 문제점

메인페이지와 상세페이지를 연결하는 과정에서 특정값으로 get방식으로 넘겨서 주소에는 문제가 없었지만, 해당하는 음악 상세정보 페이지를 못 띄우다보니 굉장히 당황스러웠다.

2. 시도 해본 것들

혼자서 고민하고 구글링도 해보고 전 기수 미니프로젝트 github도 찾아보았다. 우선, 첫번째 방법으로는 jinja2라는 문법으로 상세페이지를 띄우는 방법인데 처음으로 보는 방법, 문법이라 낯설기도 하고 구현해보이는데 안나와 다른 방법을 알아보았다... 두번째로는 화면에 특정값 rank으로 기준 잡아서 띄우는 방법으로 생각했다. 메인페이지에서 rank라는 값을 가져와야하는데 여기서 막혔었다 ㅜㅜ

3. 해결법

팀원에게 먼저 헬프를 요청해서 같이 보면서 코드 리뷰를 했다. 팀원분께서 메인페이지에서 rank라는 값을 가져오는거 보면서 굉장히 신기하였다. rank라는 값을 못가져 와서 굉장히 멘붕 오고 했는데 쉽게 가져와서 상세페이지 띄우는데 한 발 다가와서 굉장히 즐거웠다. 그러면서

function get_rank() {
    const a = new URL(window.location.href);
    const b = a.searchParams;
    const rank = b.get('rank');
    return rank
}
function show_detail() {
    $('.allbox'). empty()
    $.ajax({
    type: "GET",
    url: "/posting",
    data: {},
    success: function (response) {

    let musics = response['musics'];

    for (let i = 0; i < 50; i++) {
    let rank = musics[i]['rank']

    if (rank == get_rank()) {
    let image = musics[i]['image']
    let singer = musics[i]['singer']
    let title = musics[i]['title']
    let album = musics[i]['album']

    let temp_html1 = `

rank를 가져온 후 musics for문 돌려서 안에 rank 기준으로 if문을 만들어 musics의 값을 가져오는데 성공했다.

4. 알게 된 점

비록 백엔드 개발자 지원하지만, 폭 넓은 문법과 언어의 이해가 필요하다고 생각했다. 자바스크립트라는 언어를 더욱더 매진해야겠습니다. 그리고 혼자 끙끙 앓지말고 팀원들과 좋은 대화로 하나의 어려운 문제를 풀어나가는데 도움이 된다는 것을 깨달았다.