쇼핑몰처럼 상세페이지를 만들어보자 (URL parameter)

상세페이지를 어떻게 만들어야할까요?

 

일반 쇼핑몰들처럼 만들면 됩니다.

누군가 /detail/3 으로 접속하면 3번 게시물 데이터를 보여주면 되고

누군가 /detail/4 로 접속하면 4번 게시물 데이터를 보여주면 됩니다. 

그럼... 이렇게 코드 짜면 되겠네여?

 

app.get() 어쩌구를 상품 갯수만큼 만들면 되겠군요?

상품이 100개면 100개 만드시면 되겠습니다. 

 

 

 

 

 

싫다면 파라미터라는 문법을 이용하시면 되겠습니다.

파라미터는 쉽게 말하면 URL 뒤에 무작위의 문자를 붙일 수 있게 만들어주는 URL 작명 방식입니다.

제가 한번 만들어보겠습니다. 

 

 

저렇게 콜론 (:) 기호를 붙여주면 누군가 /detail/ 뒤에 아무 문자열이나 입력하면~ 이라는 소리입니다.

이제 사용자가 /detail/ 뒤에 어떤 숫자나 문자를 붙이든 위의 코드3줄로 인식할 수 있는 것이죠.

 

 

Q. 왜 id라고 썼는가?

땡땡 기호 뒤엔 여러분이 자유롭게 작명하시면 됩니다. 전 id라는 이름이 좋아서 그랬어요. 

그냥 detail 뒤의 무작위의 문자를 id라고 부르겠습니다~ 라는 뜻입니다. 

(참고로 파라미터는 두개 세개 계속 이어붙일 수도 있습니다.)

 

 

 

 

 

 

 

그럼 detail/2로 방문하면 2번 게시물을 보내야합니다.

 

그럼 일단 누군가 detail/2로 방문하면 _id가 2인 게시물을 DB에서 찾아와야합니다. (당연)

DB에서 게시물 찾기는 처음 하는 내용일 수 있으니 제가 한번 만들어보겠습니다.

 

db.어쩌구.findOne() 이라는 함수를 사용했습니다.

이 함수는 db에서 원하는 게시물 하나 찾고싶을 때 사용합니다. 

사용법은 .findOne({원하는게시물정보}, function(){ 완료시 실행할 코드 }) 이렇게 하시면 됩니다.

 

이제 위 코드에 사용자가 URL에 입력한 :id값을 그대로 넣어주면 되는데 어떻게 할까요?

이런건 생각해서 나오는게 아니라 구글 검색을 하셔야합니다.

검색하시면 아마 요청.params.id 라고 나올 것입니다. 

 

 

마지막으로 셋째 줄에서 DB에서 찾은 결과를 data라는 이름으로 ejs파일로 보내고 있습니다.

그럼 ejs파일 내에서 그 게시물 데이터를 가지고 HTML에 꽂아넣을 수 있겠죠?

 

 

 

 

 

하지만 결과를 출력해보니 null이 나오는데요?

그래서 위 코드처럼 parseInt()를 이용해서 제대로 사용하시면 됩니다.

왜냐면 요청.params.id를 출력해보면 '2' 이런 식으로 문자자료형으로 출력됩니다.

그런데 DB엔 _id가 '2'인 자료는 없죠? _id가 2인 자료는 있습니다. 

그래서 이걸 숫자로 변환하기 위해 parseInt를 쓴 것입니다.

 

 

 

 

다 해결되었으니 이제 EJS 파일에서 사용해봅시다

 

 

 

 

 

 

(참고) 예전에 했던 Ajax delete 요청도 

 

▲ 이런 식으로 data를 전달해서 요청.body로 꺼내쓰도록 만들었는데 

 

 

▲ 이런 식으로 url parameter로 원하는 데이터를 전달할 수도 있겠네요.

어떻게하든 정보만 전달된다면 상관은 없지만 delete 요청시엔 이게 약간 더 자주 쓰는 사용방법입니다.

원래 delete 요청으로 data를 전달하는게 일반적이진 않아서요 근데 보낼 정보가 길면 data로 전달해야죠 뭐 

 

 

 

 

<출처 : 코딩애플 : Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기>