(김유선) 개인프로젝트 SSR로 처음부터 끝까지 진행하기 - 상세 페이지 제작

이제 모든 페이지는 연결됐고, 상세페이지만 하면 된다.

 

상세 페이지 같은 경우에는 팀플에서 백엔드 쪽에서 쿼리스트링을 사용해서 api를 만들었는데,

문제는 내가 쿼리스트링이 익숙하지 않다는 거다.

 

http://localhost:8080/category/food 에서 .detailbtn을 클릭하면 'http://localhost:8080/detail&name=가게명' 이런식으로 이동해야하는데

'http://localhost:8080/category/detail&name=가게명' <- 여기로 이동하게 된다.

아마 카테고리의 url이 유지되면서 그런 것 같은데

$('.detailbtn').click(function() {

        window.location.replace('/detail?name=' + $(this).parent().data('num'));

        // location.href='/detail/'+$(this).parent().data('num') // 상대경로라서 현재 URL의 경로를 유지하면서 /detail/ 경로로 이동

    });

뤼튼의 도움을 받아보니 location.href가 상대경로라서 현재 url을 유지한다고 했는데,

뤼튼이 준대로 location.replace로 입력해도 상대경로로 인지하나보다.

잘 모르겠다... 그래서 일단 파라미터로 작성하기로 했다.

다음에 쿼리 스트링 써봐야지

 

다시 확인해보니 저 코드가 아니었다 ㅋㅋ

그리고 뤼튼이 말하는 것도 헛소리같음...

 

(마커 코드)

kakao.maps.event.addListener(marker, 'click', function () {

            window.location.href = '/detail' + '?name=' + encodeURIComponent(data.상호 || data.업소명);

        });

이건 

요 마커를 클릭했을 때 이동하는 것 같은데,

원하는대로 잘 이동한다. 근데 문제는 오른쪽에 있는 목록인데,

 

(목록 코드)

searchResultItem.addEventListener('click', function() {

                        window.location.href = 'detail&name=' + encodeURIComponent(select_name);

                    });

얘는

이 목록을 클릭하면 이동하는 코드인데,

얘가 문제다, 카테고리 안에서 경로가 추가된다.

 

이 둘의 코드에서 다른 점은 '/detail' + '?name='<- 이게' detail&name= '  <- 이렇게 됐다는 것이다.

 

이거 한번 바꿔보겠다. 아니 알겠다, 그냥 오른쪽에 있는 경로는 걍 잘못됐다 ㅋㅋ

? 기호가 아니라 & 기호고, 앞에 / 요것도 없다.

'/detail?name='으로 고치고 다시 해보겠다.

 

고쳐보니까 아주 잘된다 ㅎㅎ

 

그러면 이제 서버에서 경로로 get 요청을 하면 받아줘야 한다.

쿼리 스트링은 처음이라서 우선 뤼튼에게 어떻게 받는지 물어봤다.

 

뤼튼의 힘을 빌려 아래와 같이 작성했다.

// '/detail?name=업소명' 경로에 대한 GET 요청 처리

app.get('/detail', async(요청, 응답) => {

  const name = decodeURIComponent(요청.query.name); // 요청.query 객체에서 name 파라미터 값 가져오고 디코딩해주기

  let data = {}

  data.user = 요청.user

  data.market = await db.collection('market').findOne({'업소명' : name})

  응답.render('detail.ejs',{data : data});  // 응답 보내기

});

 

http://localhost:8080/category/cafe 페이지에서

검색 후에도 이게 체크되어있는 오류가 있었다.

(검색 결과는 이상이 없었음)

그래서 검색버튼을 눌렀을 때 실행되는 함수에

$('#restaurant').prop('checked', false);

$('#cafe').prop('checked', false);

$('#salon').prop('checked', false);

$('#service').prop('checked', false);

요걸 추가해서 검색을 하면 체크가 다 풀리게 해뒀다.