로컬에서 yarn dev하면 400에러 및 vercel 배포 에러

[jungsikjeong]

안녕하세요

vercel에서 배포할 때 다음 사진과 같이 에러가납니다.

로컬에서 yarn dev로 테스트해보면 400에러가 나오고있습니다.

제 파일문제인가 싶어서 @2skydev 님의 깃허브 블로그 주소를 클론해서 테스트해봤는데 똑같이 400에러가 발생하는것 같습니다.

혹시 저만 문제가있는건지 궁금합니다.

[jungsikjeong]

@jeonghyeon00 안녕하세요. 혹시 저와같은 현상 없으실까요?

[jeonghyeon00]

@jeonghyeon00 안녕하세요. 혹시 저와같은 현상 없으실까요?

제가 해외와서 확인을 못할 것 같습니다!

[jungsikjeong]

@jeonghyeon00 안녕하세요. 저와 같은 것이 없을까요?

내가 해외와서 확인을 하는 것 같습니다!

@jeonghyeon00 앗 그렇군여 혹시 나중에라도 시간괜찮으시면 확인해주시고 답변부탁드릴게요! ㅠㅠ

[IceCream0910]

@jungsikjeong 저도 동일 이슈 발생합니다.

[jungsikjeong]

@jungsikjeong 저도 동일 이슈 발생합니다.

@IceCream0910 갑자기 이러는거보면 노션 데이터를 요청하고 응답받는 api쪽 문제같은데.. 어떻게 접근해야할지 도무지 모르겠네여

[IceCream0910]

@IceCream0910 갑자기 이러는거보면 노션 데이터를 요청하고 응답받는 api쪽 문제같은데.. 어떻게 접근해야할지 도무지 모르겠네여

@jungsikjeong 확인해보니 notion api에서 getUsers(https://www.notion.so/api/v3/getRecordValues) 할 때 400 오류가 반환되는 것 같습니다. 우선 packages/notion-client/notion.api.ts에 getUsers 부분을 무력화시키면 오류는 안 납니다. 물론 게시글 페이지에서 작성자는 표시되지 않습니다.

// const users = await this.getUsers([authorId]);
const author = null;

왜 400이 반환되는지 좀 더 확인해봐야 될 것 같네요..

[IceCream0910]

@IceCream0910 왜 400이 반환되는지 좀 더 확인해봐야 될 것 같네요..

@jungsikjeong @2skydev
내부 API 구조가 변경되었거나 등의 이유로 일부 페이지에서 authorId(pageBlock.created_by_id)가 undefined인 경우가 발생합니다. getUsers API 호출 시 userIds 파라미터로 이 authorId를 넘겨주는데, undefined를 body로 전송하기 때문에 400 error가 나는 것으로 보입니다. 이를 해결하기 위해 authorId가 없는 경우를 예외처리 해주면 됩니다.

/packages/notion-client/notion.api.ts:74-75 부분을 변경하면 됩니다.

기존 코드

    // CUSTOM: 작성자 유저 정보 가져오도록 처리
    const pageBlockId = Object.keys(recordMap.block)[0];
    const pageBlock = recordMap.block[pageBlockId].value;
    const authorId = pageBlock.created_by_id;
    const users = await this.getUsers([authorId]);
    const author = users.results[0];

변경 코드

    // CUSTOM: 작성자 유저 정보 가져오도록 처리
    const pageBlockId = Object.keys(recordMap.block)[0];
    const pageBlock = recordMap.block[pageBlockId].value;
    const authorId = pageBlock.created_by_id;
    // FIX: 작성자 정보가 없는 경우 예외 처리
    const author = authorId ? (await this.getUsers([authorId])).results[0] : null;

[jungsikjeong]

@IceCream0910 왜 400이 반환되는지 좀 더 확인해봐야 될 것 같네요..

@jungsikjeong @2skydev

내부 API 구조가 변경되었거나 등의 이유로 일부 페이지에서 authorId(pageBlock.created_by_id)가 undefined인 경우가 발생합니다. getUsers API 호출 시 userIds 파라미터로 이 authorId를 넘겨주는데, undefined를 body로 전송하기 때문에 400 error가 나는 것으로 보입니다. 이를 해결하기 위해 authorId가 없는 경우를 예외처리 해주면 됩니다.

/packages/notion-client/notion.api.ts:74-75 부분을 변경하면 됩니다.

기존 코드

    // CUSTOM: 작성자 유저 정보 가져오도록 처리

    const pageBlockId = Object.keys(recordMap.block)[0];

    const pageBlock = recordMap.block[pageBlockId].value;

    const authorId = pageBlock.created_by_id;

    const users = await this.getUsers([authorId]);

    const author = users.results[0];

변경 코드

    // CUSTOM: 작성자 유저 정보 가져오도록 처리

    const pageBlockId = Object.keys(recordMap.block)[0];

    const pageBlock = recordMap.block[pageBlockId].value;

    const authorId = pageBlock.created_by_id;

    // FIX: 작성자 정보가 없는 경우 예외 처리

    const author = authorId ? (await this.getUsers([authorId])).results[0] : null;

@IceCream0910 오 당장의 에러는 해결되겠네요!! 정말감사합니다

[jeonghyeon00]

아 저도 방금 해결했는데 이미 해결되어 있었군요 ㅋㅋ

[jungsikjeong]

@IceCream0910
@jeonghyeon00

두분 안녕하세요
이슈 게시글이랑은 내용이 좀 동떨어지긴하지만
이번 이슈도 그렇고 지금 노션연동중인 블로그 api가 정석적인 api는 아닌걸로 알고있어서 나중에 노션측 업데이트나 기타 관련해서 또다시 아떤 이슈가 터질지 불안한 상황에서 티스토리로 블로그를 옮겨야하나.. 그냥 써야하나 하는 고민이되서요..

그래서 질문드립니다.

1. 두분은 노션 vercel 블로그로 하시는 이유가 있으실까요?

2. 노션블로그 외에 따로 운영중인건없으신가요? (공부기록용이라던가..)

[IceCream0910]

두분 안녕하세요 이슈 게시글이랑은 내용이 좀 동떨어지긴하지만 이번 이슈도 그렇고 지금 노션연동중인 블로그 api가 정석적인 api는 아닌걸로 알고있어서 나중에 노션측 업데이트나 기타 관련해서 또다시 아떤 이슈가 터질지 불안한 상황에서 티스토리로 블로그를 옮겨야하나.. 그냥 써야하나 하는 고민이되서요..

그래서 질문드립니다.

1. 두분은 노션 vercel 블로그로 하시는 이유가 있으실까요?
2. 노션블로그 외에 따로 운영중인건없으신가요? (공부기록용이라던가..)

@jungsikjeong
말씀하신 것처럼 react-notion-x는 Notion 공식 API가 아닌 Publish된 웹사이트에서 데이터를 가져오는 방식이기 때문에 이로 인한 리스크는 존재합니다. 실제로 해당 프로젝트의 마지막 commit이 1년 전이기도 하고요. 다만, 적지 않은 유저들이 해당 프로젝트를 사용하고 기여하고 있는 것으로 보입니다. NotionX/react-notion-x#544

무엇보다 Notion은 markdown 문법을 지원하고 있으며, markdown 파일로 일괄 내보내기도 가능합니다. 저도 Github Pages를 이용해 블로그를 운영하다가, notion 연동 블로그로 넘어온건데요. Github Pages를 포함해 대부분의 정적 사이트 생성기들이 markdown 문법을 지원하고 있기 때문에 문제가 발생하더라도 비교적 쉽게 마이그레이션이 가능할 것 같습니다.

다만, 티스토리나 velog 등의 플랫폼을 사용하는 것이 자체 블로그보다 운영 상의 편리함이나 검색엔진 노출 등에서 상대적으로 이점을 가지는 것은 사실이기 때문에, 좋은 선택지 중 하나가 될 수 있다고 봅니다.

운영 중인 다른 블로그는 없습니다. 다만 Notion 내의 다른 workspace를 만들어 개인 메모 용도로 사용하고 있긴 합니다.

[jungsikjeong]

두분 안녕하세요 이슈 게시글이랑은 내용이 많은 동지긴하지만 이번 문제도 굉장해요 지금 노션연동하는 블로그 api가 정석적인 api는 아니라 오히려 알고 있고 나중에 노션측 업데이트나 기타 관련해서 또 다시 아붐 문제가 터질지 불안한 상황에서 티스토리로 블로그를 그냥야 하나.. 나만의 활동 중이 되서요..
질문드립니다.

1. 두분은 노션 vercel 블로그로 찾기를 원하십니까?
2. 노션블로그를 하려고 하지 않겠습니까? (공부기록용이라던가..)

@jungsikjeong 말도 안되는 것처럼 React-notion-x 는 Notion 공식 API가 게시되지 않은 웹 사이트에서 데이터를 가져오는 방식으로이기 때문에 교체 서비스를 제공합니다. 실제로 해당 프로젝트의 마지막 commit이 1년 전 하고요. 상대방, 적지 않은 사용자가 해당 프로젝트를 사용하고 기여하고 있는 것 같습니다. NotionX/react-notion-x#544

보다 어떤 개념이 markdown 파일을 지원하고 있는지, markdown 파일로 고려하는 것이 가능합니다. 분기 Github Pages를 항해하는 블로그를 운영하는 것, notion 캐스팅 블로그로 온건데요. Github 페이지를 포함해 대부분의 정적 사이트 생성이 markdown 호출을 지원하고 시작하기 때문에 문제가 발생하는 경우에도 마이그레이션이 가능하다는 것입니다.

활력, 티스토리나 vlog 등의 플랫폼을 사용하는 것이 자체 블로그보다 운영 효율성이나 검색 엔진과 같은 것에서 상대적으로 이점을 얻을 수 있다는 사실이기 때문에, 좋은 선택 중 하나가 될 수 있다고 할 수 있습니다.

운영중인 다른 블로그는 없습니다. 감지 Notion을 통해 다른 작업 공간을 만들어 개인 메모를 사용자로 사용하고 요청합니다.

그렇군요..! 답변 감사합니다!

[jeonghyeon00]

@IceCream0910 @jeonghyeon00

두분 안녕하세요 이슈 게시글이랑은 내용이 좀 동떨어지긴하지만 이번 이슈도 그렇고 지금 노션연동중인 블로그 api가 정석적인 api는 아닌걸로 알고있어서 나중에 노션측 업데이트나 기타 관련해서 또다시 아떤 이슈가 터질지 불안한 상황에서 티스토리로 블로그를 옮겨야하나.. 그냥 써야하나 하는 고민이되서요..

그래서 질문드립니다.

1. 두분은 노션 vercel 블로그로 하시는 이유가 있으실까요?
2. 노션블로그 외에 따로 운영중인건없으신가요? (공부기록용이라던가..)

@jungsikjeong
저도 공식적인 api를 사용하는게 아닌 것 같아 걱정은 했지만 크게 개인 취미용으로 운영을 하는거라 크게 신경쓰지 않았습니다. 저도 그냥 따로 노션에만 기록하고 있고 추가로 기록하고 있지는 않습니다