put api 작성 오류

최수민·2023년 8월 21일
0

TIL

목록 보기
21/41

board-column의 put api를 연결하는데 자꾸 500 서버 에러가 나거나 아니면 body값을 주라고 오류가 나서 골치가 아팠습니다.

put api를 따로 함수로 빼서 사용하려는데 안되서 필요한곳에 직접적으로 넣었습니다.

  • 수정 전 필요한 곳과 put api 함수
// 바뀐 순서 출력 (여기서 순서 update api 사용할듯)
function KanbanListReorder() {
  const columns = document.querySelectorAll('.kanban-list');
  Object.values(columns).forEach(async (column, index) => {
    // console.log('testest: ', column, index + 1);
    // console.log('columnId : ', column.getAttribute('data-columnid'));
    const columnId = column.getAttribute('data-columnid');
    if (columnId != 0) {
      SequenceUpdate(columnId, index + 1);
    }
  });
  // console.dir($('.kanban-list'));
}

...

// 순서 변경 api
async function SequenceUpdate(columnId, sequence) {
  //data: {boardId: boardId}
  console.log('sequence: ', sequence, typeof sequence);
  await $.ajax({
    type: 'PUT',
    data: {boardId: 1},
    url: `/board-columns/${columnId}/sequence`,
    headers: {
      Accept: 'application/json',
    },
    body: { sequence },
    success: (data) => {
      console.log(data.message);
    },
    error: (error) => {
      console.log(error);
    },
  });
}
  • 수정 후
function KanbanListReorder() {
  const columns = document.querySelectorAll('.kanban-list');
  Object.values(columns).forEach(async (column, index) => {
    // console.log('testest: ', column, index + 1);
    // console.log('columnId : ', column.getAttribute('data-columnid'));
    const columnId = column.getAttribute('data-columnid');
    if (columnId != 0) {
      //컬럼 순서 저장
      //url: `/board-columns/${columnId}/sequence?boardId=` + boardId
      const sequence = index + 1;
      await $.ajax({
        type: 'PUT',
        url: `/board-columns/${columnId}/sequence?boardId=` + 1,
        headers: {
          Accept: 'application/json',
        },
        data: { sequence },
        success: (data) => {
          console.log(data.message);
        },
        error: (error) => {
          console.log(error);
        },
      });
    }
  });
  // console.dir($('.kanban-list'));
}

AuthGuard에 대한 오류에 대해서는 성민님이 확인후 알려주신다고 하셔서 주석처리 이후 작업을 이어갔습니다. 그래서 column get, post, sequence update API를 작성했습니다.

성민님이 수정을 해주셨어서 이제 AuthGuard를 주석처리를 하지 않아도 잘 작동합니다.

그런데 문제가 이제 put과 post때 data값이 잘 들어가지 않습니다.

  • 수정 전
    처음 작성했을땐 type이 number라서 들어가졌는데, 로그인 확인을 위한 beforeSend가 들어가고나서부턴 에러가 났습니다.
type: 'PUT',
    url: `/board-columns/${columnId}/sequence?boardId=` + 1,
    data: { sequence },
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.setRequestHeader('authorization', `Bearer ${accessToken}`);
    },

  • 1차 수정 후
    수정을 해봤지만 에러 메세지는 비슷하게 나왔습니다.
type: 'PUT',
    url: `/board-columns/${columnId}/sequence?boardId=` + 1,
    data: JSON.stringify(sequence),
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.setRequestHeader('authorization', `Bearer ${accessToken}`);
    },

찾아보다 JSON.stringify는 객체를 넣는것을 확인했습니다. 그래서 아래와같이 수정하니 다행히 잘 작동했습니다.

  • 2차 수정 후
type: 'PUT',
    url: `/board-columns/${columnId}/sequence?boardId=` + 1,
    data: JSON.stringify({ sequence }),
    beforeSend: function (xhr) {
      xhr.setRequestHeader('Content-type', 'application/json');
      xhr.setRequestHeader('authorization', `Bearer ${accessToken}`);
    },

header도 수정이 끝마쳤다고해서 index.ejs파일과 마찬가지로 kanban.ejs파일에서 main위로 아래코드로 변경해주었는데 오류가 났습니다.

  • 수정한 코드
<%- include('includes/header') %>
  <main class="main-content">
    ...
  • 오류 메세지
[Nest] 13408  - 2023. 08. 21. 오후 8:35:39   ERROR [ExceptionsHandler] C:\Users\tnals\OneDrive\바탕 화면\NBD_Sparta\node\nodejs_7\workflow-service\src\views\kanban.ejs:3
    1| <!doctype html>
    2| <html lang="en" dir="ltr">
 >> 3|    <%- include('includes/header') %>
    4|     <main class="main-content">
    5|
    6|        <div class="sidebar-wrapper">

C:\Users\tnals\OneDrive\바탕 화면\NBD_Sparta\node\nodejs_7\workflow-service\src\views\includes\header.ejs:201
    199|         </div>
    200|         <!-- ends: navbar-left -->
 >> 201|         <% if(header.isLogin) { %>
    202|         <div class="navbar-right">
    203|           <ul class="navbar-right__menu">
    204|             <li class="nav-search">

header is not defined
ReferenceError: C:\Users\tnals\OneDrive\바탕 화면\NBD_Sparta\node\nodejs_7\workflow-service\src\views\kanban.ejs:3
    1| <!doctype html>
    2| <html lang="en" dir="ltr">
 >> 3|    <%- include('includes/header') %>
    4|     <main class="main-content">
    5|
    6|        <div class="sidebar-wrapper">

C:\Users\tnals\OneDrive\바탕 화면\NBD_Sparta\node\nodejs_7\workflow-service\src\views\includes\header.ejs:201
    199|         </div>
    200|         <!-- ends: navbar-left -->
 >> 201|         <% if(header.isLogin) { %>
    202|         <div class="navbar-right">
    203|           <ul class="navbar-right__menu">
    204|             <li class="nav-search">

header is not defined

index.ejs에서는 잘나왔는데 kanban.ejs에서는 잘 안나오니 일단 저 header를 찾아봤습니다.

아래 사진과 같은 부분인걸로 보입니다. 하지만 값이 잘 들어가는지는 모르겠습니다.

왜 오류가 났는지 리더분과 부리더분께 물어본 결과 제가 view.controller를 수정하지 않아 오류가 났습니다.
그리고 ejs 파일에서도 잘못 적용했습니다.

  • 수정 후 board.ejs
<%- include('includes/header') %>
       <div class="contents">
...
       </div>
       
    <script src="./assets/js/board.js" defer></script>
<%- include('includes/footer') %>
  • 수정 후 view.controller
  @Get('board')
  @Render('board.ejs')
  async board(@Req() req: AccessPayload) {
    const user: AccessPayload = req.user;
    const header = await this.viewService.header(user);
    return { title: 'Work Flow', subtitle: 'board', header };
  }

수정 후 잘 적용됬습니다. 이제 column delete와 nameupdate api를 마저 작업 후 card에 대한 api를 간단히만 작업하고 오늘은 마무리하려고 합니다.


기술 면접 top30
4. Primary Key, Foreign Key에 대해 설명해주세요.

-> 기본키(Primary key)는 data table에서 유일하게 구분이 되는 기본 키입니다. 유일한 값이기 때문에 중복된 값을 가질수 없고, 후보키의 성질을 갖고있어 유일성과 최소성을 가지며 튜플을 식별하기 위해 반드시 필요한 키입니다. 그렇기 때문에 null값을 가질 수 없습니다. 그리고 외래키(Foreign Key)는 다른 릴레이션과 연결해주는 역할을 합니다. 즉 외래키는 하나의 릴레이션을 다른 릴레이션에 의존하게 만듭니다. 외래키 설정 방법은 두가지가 있는데 릴레이션을 생성할때 만드는 방법과 이미 생성된 릴레이션에 ALTER 명령어를 이용해서 설정하는 방법이 있습니다.



참고 자료

headers Response Header 확인 방법(답변참고)

0개의 댓글