수정 페이지를 가져오지 못합니다.

[칼있으마]

선생님~

아래와 같이 리스트에서 평가하기(수정기능)버튼을 클릭하면 '/edit/글번호' Get 요청을 하려고 구현중에 있습니다. 

//=================================================================
[list.ejs] 리스트 폼 내용과 Ajax 동작 구현 입니다.
//=================================================================
...중략...

      <div class="container">
        <!-- aria-current="true" -->
        <div class="list-group">
          <% for (let i = 0 ; i < people.length ; i++) { %>
          
            <P>글번호 : <%= people[i]._id %> </P>
            <h4>이름 : <%= people[i].name %> </h4>
            <P>기관 : <%= people[i].institution %> </P>
            <P>평가 횟수 : <%= people[i].counter %> </P>
            <button class="btn btn-info put" data-id="<%= people[i]._id %>">평가하기</button>
            <button class="btn btn-danger delete" data-id="<%= people[i]._id %>">삭제</button>
            <!-- <button class="btn btn-danger chat" data-id="<%= people[i]._id %>" data-id-user="<%= people[i].작성자 %>">채팅하기</button> -->
          
          <% } %>
        </div>
      </div>
...중략...

      <script>

...중략...

          $('.put').click(function(e){
            var 임시글번호 = e.target.dataset.id; 
            //var 방금누른거 = $(this);
            var 임시유알엘 = '/edit/' + 임시글번호;
            
            //console.log("글번호 : ", e.target.dataset.id);
            // console.log("임시유알엘 : ", 임시유알엘);
            //alert(e.target.dataset.id);
            alert(임시유알엘);

            $.ajax({
              method : 'GET',
              url : 임시유알엘,
              data : {_id : 임시글번호 },
            }).done(function(결과){
              // 페이지를 강제로 새로고침해주세요 
              //alert('수정 페이지를 잘띄웠다고 서버에서 응답이 왔어요');
              //방금누른거.parent('a').fadeOut();
            }).fail(function(xhr, textStatus, errorThrown){
              console.log(xhr, textStatus, errorThrown);
            });
          });

...중략...

      </script>

//---------------------------------------------------------------------------------------------------------------



//=================================================================
[server.js] '/edit/:id'의 경로로 get 요청에 대한 처리입니다. 
//=================================================================
...중략...

// 목록페이지(List.ejs) 수정버튼이 눌러졌을 때 수정 페이지(해당 글번호의 값을 불러와서 폼)를 띄우는 기능 구현
app.get('/edit/:id', function(요청, 응답) { 
    // var id = parseInt(요청.body._id);
    var id = parseInt(요청.params.id);
    console.log('id : ',id);

    Eval_Collect_People.findOne({_id : id}, function(에러, 결과){
        if (에러) 
            return 응답.status(400).send({message : '실패했습니다.'});       // 2XX : 요청 성공, 4XX : 잘못된 요청으로 실패, 5XX : 서버의 문제  
        
        console.log('결과1 : ', 결과);
        if (!결과)
        {
            console.log('결과가 없습니다');

            //return 응답.redirect('/list');
            return 응답.status(400).send({message : '결과가 없습니다.'});
        }

        console.log('결과2 : ', 결과);

        응답.render('edit.ejs', {data : 결과});
    });
});

...중략...

//---------------------------------------------------------------------------------------------------------------
[terminal의 내용] - server.js
id :  8
결과1 :  { _id: 8, name: '홍길중', institution: '관리국', age: '35', counter: 0 }
결과2 :  { _id: 8, name: '홍길중', institution: '관리국', age: '35', counter: 0 }
//---------------------------------------------------------------------------------------------------------------

서버에서 응답.render가 동작하지 않습니다. 
(참고로 해당 구문 바로 위에서 console.log('결과2:', 결과); 한 내용은 로그가 잘 찍힙니다. )
 
 
 

 




//=================================================================
[edit.ejs] 혹시 몰라서 edit.ejs내용도 함께 보내봅니다. 
//=================================================================
...중략...

  <h4 class="container mt-4">평가</h4>

  <div class="container mt-3">
    <form action="/edit?_method=PUT" method="POST">
      <input type="text" style="display: none;" name="id" value="<%= data._id %>">
      <input type="text" style="display: none;" name="counter" value="<%= data.counter %>">
      <div class="form-group">
        <label>평가 대상자</label>
        <input type="text" class="form-control" name="name" value="<%= data.name %>">
      </div>
      <div class="form-group">
        <label>기관</label>
        <input type="text" class="form-control" name="institution" value="<%= data.institution %>">
      </div>
      <div class="form-group">
        <label>나이</label>
        <input type="text" class="form-control" name="age" value="<%= data.age %>">
      </div>    

      <button type="submit" class="btn btn-outline-primary">수정하기</button>
    </form>
  </div>

...중략...
//---------------------------------------------------------------------------------------------------------------

[codingapple]

app.get('/edit/:id' 같은거 하나 더있나 확인해보거나 크롬콘솔창 에러메세지같은거 뜨나 확인해봅시다

[칼있으마]

app.get('/edit/:id' 이거는 하나밖에 없고

(맨처음 답글을 봤을 때 '저런게 두개일수도 있겠다' 라는 생각을 하시는거에 감탄했습니다)
(하지만 안타깝게도 해당 내용은 하나밖에 없었습니다)



야속하게도... 버튼 클릭 했을 때 크롬 콘솔창 에러메세지 같은거는 없었는습니다만

아무것도 안하고 5분정도 지나니까 다음과 같은 에러가 1개 발생했습니다. 


//====================================================================================
Error in event handler: TypeError: Cannot read properties of undefined (reading 'g')
    at chrome-extension://hjhklbomhmbfockimpldchgpbnccmbgp/content/sef/agent.js:4:453
(참고로 굵은 부분(chrome-extension.....) 클릭하면 ajent.js라는 제가 만들지 않은 js 파일로 링크 되었습니다. )
(해당 내용은 구글에서 찾아보니까 React나 Vue.js쪽으로 설명을 하는게 대부분 이었습니다.)

list#:1(마우스 over시 ToolTip내용 : http://127.0.0.1:8080/list#)

(참고로 굵은 부분(list#:1) 클릭하면 서버에서 번역(반복문 반복이 되어진)된 list.ejs 파일이 링크되어 소스 탭에서 열렸습니다.  )
//====================================================================================



참고로 List.ejs의 버튼 클릭시에 Ajax로 구현되어 있는  
alert(임시유알엘); 
이라는 구문도 정상적으로 표현됩니다(내용 : /edit/2 )만...
해당 Alert 창을 클릭하면 주소란이 http://127.0.0.1:8080/edit/2로 바뀌어야 할 것 같은데 
그것은 바뀌지 않으면서 

app.get('/edit/:id', function(요청, 응답) { 

함수는 실행된듯 실행 결과에 로그가 정상적으로 찍히고...

[terminal의 내용] - server.js
id :  8
결과1 :  { _id: 8, name: '홍길중', institution: '관리국', age: '35', counter: 0 }
결과2 :  { _id: 8, name: '홍길중', institution: '관리국', age: '35', counter: 0 }

랜더링만 되지 않는다는 것이 이상한것 같습니다.

참고로 브라우저의 주소란에 강제로        http://127.0.0.1:8080/edit/2       라고 적으면 
정상적으로 edit.ejs의 내용이 표현됩니다.(글번호 2에 맞는 데이터로...)

정리해서 다시 여쭤보자면 ...
1. 혹시 웹 페이지가 동작 및 표현하는 순서가 제가 생각하는 것이 맞는건가요?(추가 궁금증)
[브라우저]list.ejs에서 get 요청 -> [브라우저]주소란 변경('/edit/2') -> [서버]server.js의 app.get('/edit/:id', 함수 실행 
-> [서버]server.js의 app.get('/edit/:id', 함수 내의 render 함수 실행(edit.ejs) 
-> [서버]랜더링 된 edit.ejs를 웹 [브라우저]로 전송
-> [브라우저] edit.ejs를 표현

2. 1번에 굵은 글씨로 표현된 내용이 혹시 맨 나중에 실행되는 것인가요?(추가 궁금증)

3. 5분뒤에 발생하는 저 에러의 내용에 대해서 아신다면 알려주실수 있을까요?
   (Error in event handler: ........)
4. edit.ejs가 랜더링되지 않는 이유?
   (바로 윗줄의 내용까지 정상적으로 로그 찍힘)

[codingapple]

edit.ejs말고 다른페이지 보내보거나 data 변수 빼고 보내봅시다 
브라우저 주소창변경은 가장 나중에 실행될듯요 
크롬부가기능에러같은데 개발시 부가기능은 끕시다

[칼있으마]

해결 되었습니다.

목록에서 [평가하기]버튼을 클릭하면  Ajax를 이용해서 Get 요청을 하던것을 
목록을 바로 Click 해서 평가하기 페이지가 로딩 되도록 수정하였습니다. 

[기존 List.ejs 내용]
//================================================================================
... 중략...
      <div class="container">
        <!-- aria-current="true" -->
        <div class="list-group">
          <% for (let i = 0 ; i < people.length ; i++) { %>
          "#" class="list-group-item list-group-item-action">
            <P>글번호 : <%= people[i]._id %> </P>
            <h4>이름 : <%= people[i].name %> </h4>
            <P>기관 : <%= people[i].institution %> </P>
            <P>평가 횟수 : <%= people[i].counter %> </P>
            <button class="btn btn-info put" data-id="<%= people[i]._id %>">평가하기</button>
            <button class="btn btn-danger delete" data-id="<%= people[i]._id %>">삭제</button>
            <!-- <button class="btn btn-danger chat" data-id="<%= people[i]._id %>" data-id-user="<%= people[i].작성자 %>">채팅하기</button> -->
          
          <% } %>
        </div>
      </div>
... 중략...
//================================================================================


[수정 List.ejs 내용]
//-----------------------------------------------------------------------------------------------------------------------------------------

... 중략...

      <div class="container">
        <!-- aria-current="true" -->
        <div class="list-group">
          <% for (let i = 0 ; i < people.length ; i++) { %>
          "/edit/<%= people[i]._id %>" class="list-group-item list-group-item-action">
            <P>글번호 : <%= people[i]._id %> </P>
            <h4>이름 : <%= people[i].name %> </h4>
            <P>기관 : <%= people[i].institution %> </P>
            <P>평가 횟수 : <%= people[i].counter %> </P>
            <!-- <button class="btn btn-info put" data-id="<%= people[i]._id %>">평가하기</button> -->
            <button class="btn btn-danger delete" data-id="<%= people[i]._id %>">삭제</button>
            <!-- <button class="btn btn-danger chat" data-id="<%= people[i]._id %>" data-id-user="<%= people[i].작성자 %>">채팅하기</button> -->
          
          <% } %>
        </div>
      </div>

... 중략...

//-----------------------------------------------------------------------------------------------------------------------------------------







마지막 궁금증 : Ajax로 Get요청을 하면 Render를 쓸 수 없는 것인가요?
(return 응답.status(400).~~ 로만 해야 하는 것인가요?)
 
항상 가르쳐주셔서 감사합니다^^

[codingapple]

프론트엔드에서 단순 페이지변경은 window.location.href = '/url' 실행하면 됩니다

[칼있으마]

넵^^ 항상 감사합니다^^

[글쓴이]

글