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

이제 마이페이지를 기능하게 해보겠다.

<마이페이지 이동>

<button class="mypage btn" onclick="location.href='/mypage'">마이페이지</button>

이렇게 작성해줬음

 

마이페이지는 이렇게 구성되어있고

필요한 데이터 : 닉네임, 내가쓴리뷰, 내가 찜한 상점

근데 아직 리뷰 기능과 찜 기능을 만들지 않았으니

닉네임을 보여주고 로그아웃, 로고 메인 기능, 회원탈퇴 기능을 구현한다.

 

회원탈퇴는 팝업으로 선택창을 띄워주고 예를 누르면 탈퇴할 수 있게 구현할 거다.

그래서 아래의 사이트를 참고했다.

https://coding-factory.tistory.com/198

[JavaScript] Alert(경고창), Prompt(입력창), Confirm(선택창)

 

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

  let deluser = 요청.user._id

  console.log(await db.collection('user').deleteOne({_id : deluser}))

  응답.redirect('/mypage')

})

$('.user-delete').click(function(){

        var result = confirm("정말 탈퇴하실 건가요? 작성된 리뷰는 사라지지 않습니다.");

        if(result){

            $.get('/userdel')

            .done(function(){

                alert("탈퇴되었습니다. 감사합니다.");

            })

        }

    })

이렇게 작성했는데, 탈퇴가 되고 나서 alert 창은 뜨지 않을 것을 알았다.

그런데 이렇게 되면 계정 삭제까지는 잘 이뤄지는데 로그아웃이 된 상태가 아니라 세션이 유지돼서 

사용자에게 계속 이 창이 뜨는 문제가 있다. 그럼 탈퇴 요청을 보냈을 때 먼저 로그아웃을 시켜주고 계정을 삭제하면 되겠다.

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

  let deluser = 요청.user._id

  요청.logout(async(err)=>{

    if (err) return next(err)

  })

  console.log(await db.collection('user').deleteOne({_id : deluser}))

  응답.redirect('/')

})

이렇게 수정했다.

세션도 지워지고 계정도 삭제되고 마지막에 '탈퇴되었습니다. 감사합니다' 까지 잘 뜨고 이 화면이 유지된 채로 에러가 뜨는데

C:\Users\A\Desktop\goodprice\server.js:170
  data.user = 요청.user.nickname
                      ^

TypeError: Cannot read properties of undefined (reading 'nickname')

라고 한다. 아무래도

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

  let data = []

  data.user = 요청.user.nickname

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

})

이렇게 마이페이지에 렌더할 데이터가 없어져서 그런 것 같은데

리다이렉트가 그냥 새로고침인 걸까?

메인페이지로 보내려고 한 거였는데 왜 여기로 다시 돌아오려는건지...

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

  let deluser = 요청.user._id

  요청.logout(async(err)=>{

    if (err) return next(err)

  })

  console.log(await db.collection('user').deleteOne({_id : deluser}))

  응답.render('index.ejs', { user : undefined })

})

그래서 이렇게 수정하고 다시 해봤다.

 

Error: Unable to find the session to touch

 

이 오류가 뜨면서 같은 결과가 나온다.

아무래도 서버의 응답과 클라이언트의 .done이 겹치는 건 아닐까 싶다.

그래서 .done을 없애봤다.

 

.done에 설정한 alert창이 뜨지 않을 뿐,,, 같은 결과가 나온다.

Error: Unable to find the session to touch 

에러도 같음

일단 포기..ㅎ

나머지 기능은 완성했다.

 

<검색결과창 만들기>

검색 내용을 작성하고 돋보기를 누르면 데이터를 보내서 이 페이지를 뜨게 할 것이다.

$('.search-button').click(function(){

        $.post('/search',{

            text : $('.search-box').val()

        })

    })

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

  console.log(요청.body.text)

  let data = {}

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

  data.market = await db.collection('market').find().toArray()

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

})

이렇게 작성했는데

돋보기를 눌러도 응답하질 않는다...

데이터가 인식이 안되나해서 콘솔해보니까 내용은 잘 콘솔되는데 왜 페이지 이동이 안되는지...

심지어 오류창도 없다 ㅜㅜ