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

어제 내가 계속 헤맸었는데

https://99geo.tistory.com/65

AJAX란 무엇인가 ?

준영이의 말을 듣고 ajax에 대해 다시 한번 봤다.

애초에 ajax는 페이지 이동이 없는 통신인데 나는 ajax 요청을 해놓고 서버에서 페이지를 이동시키려고 했다.

그리고 페이지 이동이 안된다고 당황햇음;

준영이가 왜 ssr은 ajax 쓸 일이 잘 없다고 한지 알겠다.

csr만 하다보니 그 방식대로 하려고 했나보다...

이제 정신차리고 다시 이어서 해보겠음

 

이 틈에 다시 한번 정리를 한다.

웹 통신 방식에는 http와 socket이 있고

https://junojunho.tistory.com/3

비동기 http 통신으로 ajax가 있다.

https://ghost4551.tistory.com/139

일반적인 페이지 이동은 동기식 처리다.

그래서 비동기 통신인 ajax로 페이지 이동이 불가하다.

애초에 redirect를 하면 페이지 자체가 변하는데 ajax는 페이지 안에서만 데이터 받고 하니까

애초에 안되는 게 맞는거삼

 

일단 어제의 문제를 해결해야겟음

 

<마이페이지>

$.get('/userdel')                                                                                                                           

요 코드를

location.href='/userdel'

요 코드로 바꿨다.

이렇게 편한 코드가 있는데 잘 안 쓰다보니 저런 게 있는 줄 모르고 뭐만 하면 ajax 쓰려고 한 나 바보...

처음에 location.href='~~.html'을 접했기에 location은 html으로만 이동 가능한 줄 알았다.ㅜㅜ;;

 

<검색결과 페이지>

app.post('/search', async(요청,응답)=>{

  let text = 요청.body.text

  let data = {}

  data.name = "'"+요청.body.text+"'의 검색결과"

  data.market = await db.collection('market').find({$or : [{업종 : {$regex: text}}, {업소명 : {$regex: text}}, {주요품목 : {$regex: text}}, {주소 : {$regex: text}} ]}).toArray()

  응답.render('search.ejs', { data : data })

})

ajax말고 폼태그로 처리하니까 아무런 문제 없음

업종이랑 업소명, 주요품목, 주소를 검색 가능하게 함

 

<카테고리 창>

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

  let text = 요청.params.where

  let data = {}

  data.name = '<'+text+"> 카테고리"

  if(text=='식당'){

    data.market = await db.collection('market').find({$or : [{업종 : '한식_일반' },

      {업종 : '한식_한정식' }, {업종 : '한식_면류' }, {업종 : '한식_육류' }, {업종 : '한식_찌개류' },

      {업종 : '한식_해산물' }, {업종 : '한식_분식' }, {업종 : '한식_기타' }, {업종 : '일식' },

      {업종 : '양식' }, {업종 : '중식' }]}).toArray()

  }

  else if(text=='카페'){

    data.market = await db.collection('market').find({$or : [{업종 : '기타서비스업' }, {업종 : '기타양식'}]}).toArray()

  }

  else if(text=='미용실'){

    data.market = await db.collection('market').find({업종 : '이미용업' }).toArray()

  }

  else if(text=='기타서비스'){

    data.market = await db.collection('market').find({$or : [{업종 : '세탁업' }, {업종 : '목욕업'}, {업종 : '숙박업'}]}).toArray()

  }

  응답.render('search.ejs', { data : data })

})

얘도 렌더링 아주 잘되고 모든 기능 문제도 없고 css도 잘 들어갔는데 아주 이상한 문제가 있다...

타이틀에 글씨체가 적용되지 않았고, 검색 이미지가 뜨지 않는다.

아니 둘이 코드가 똑같은데 대체 왜...

너무 어렵다ㅠㅠㅠㅠ 일단 이거 보류,,,

 

<업소 상세페이지>

ㅎㅎㅎ.. 얘도 그렇다...

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

  let data = {}

  data.user = 요청.user

  data.market = await db.collection('market').findOne({번호 : 1})

  응답.render('detail.ejs',{data : data})

})

이렇게 작성했다.

근데 얜 심지어 번호 뒤에 요청.params.num을 하니까 안돼서 1 입력하니까 된다;;

웃긴 건 console.log(요청.params.num)하면 제대로 된 번호가 나옴...

아무래도 뭔가 문제가 있는 것 같으니 오늘 낮에 학교에서 한번 해봐야겠다.

 

또 뭐가 문젠지 기대되는 걸 ^.^