읽기 설정
이번 강의에서는 Pewter.js의 서버리스 워커를 설정할 거예요. 그들은 클라우드에서 자바스크립트 코드를 실행하는 서버리스 함수들이랍니다.
이들은 HTTP 요청을 처리하기 위한 라우터 기반 시스템으로 생각하실 수 있으며, Pewter의 클라우드 서비스, 예를 들어 파일 저장, 키-값 데이터베이스, 그리고 AI API와 통합될 수 있습니다.
이들은 백엔드 서비스, REST API, 웹훅, 또는 데이터 처리 파이프라인을 구축하는 데 매우 적합하며, 저희가 활용할 바로 그 용도로 사용될 것입니다.
저희의 경우, 공개 데이터와 사용자 간의 교차 조회를 위해 서비스 측 권한이 필요하기 때문에 작업자를 사용하고 있습니다.
클라이언트 측 SDK는 현재 사용자의 개인 키 값 쌍만 읽고 쓸 수 있습니다. 하지만 작업자(worker)는 서비스를 위한 컨텍스트, 즉 'me.puter'를 통해 실행되며, 공개 키나 공유 키를 저장하고 가져오는 역할을 합니다.
모든 사용자를 위한 프로젝트입니다. 정확히 그거 사용할 거예요. 코드 내에서 새로운 파일을 lib 폴더 안에 만들고 pewter.worker.js라고 이름을 지을 수 있습니다.
여기서 pewter.kvStorage를 이용해서 프로젝트를 저장하는 워커 라우트를 정의할 거예요. 자, 새로운 router.post를 만들어 보세요.
API 슬래시, 프로젝트 슬래시, 세이브로 이동하면 활성화될 수 있습니다.
이것을 여러분만의 REST API를 구축하는 것으로 생각하실 수 있습니다. 그리고 나서 params로부터 요청과 응답을 분해할 새로운 비동기 코드 블록을 열겠습니다.
그리고 새로운 코드 블록을 열 수도 있습니다. 그 안에서 try-catch 블록도 열겠습니다.
catch 부분에서는 에러를 간단히 받아 JSON 에러를 반환할 수 있습니다.
이것은 제가 지금 만들게 될 도우미 함수입니다. 그리고 이것은 500 프로젝트 저장 실패로 이어질 것입니다. 또한 메시지가 에러라는 추가 옵션과 같은 것들을 전달할 수도 있습니다.
이런 E dot 메시지, 또는 그런 기능이 없다면, 알 수 없는 오류, 대략 이런 상황입니다.
이제 이 오류 메시지 또는 JSON 메시지 유틸리티 함수를 만들어야 할 것 같습니다.
우리는 const JSON 에러가 함수를 받아 상태, 메시지, 그리고 몇 가지 추가 옵션과 같은 것을 반환하는 것 바로 위에 만들 수 있습니다.
그런 다음 오류 메시지를 문자열로 변환한 내용을 바탕으로 새로운 응답을 생성합니다.
여기서는 JSON.stringify를 호출하여 에러 메시지로 사용할 객체를 전달하고, 나머지 속성들을 함께 전달할 수 있습니다.
혹시 필요하시다면, 상태 정보나 헤더와 같은 추가적인 옵션도 제공해 드릴 수 있습니다.
애플리케이션 JSON 형태의 콘텐츠로 제공될 예정이며, 접근 제어는 'Origin'에 대해 별표(*)로 설정될 것입니다. 이는 모든 접근을 허용한다는 의미입니다.
이제 나중에 에러를 만들 때 이 부분을 다시 활용할 수 있게 될 것입니다.
저희는 또한 사용자 ID를 더 쉽게 가져올 수 있도록 돕는 다른 함수를 만들 수도 있습니다. 그래서 `getUserID`라는 비동기 함수를 정의하는데, 이 함수는 사용자 페이퍼를 인자로 받습니다.
그리고 나서 catch 블록 내에서 try-catch 구문을 열어, 만약 실패할 경우 null 값을 반환할 수 있습니다.
여기서 시도해 볼 수 있습니다. 'await user pewter dot auth dot get user'라고 말하여 사용자를 가져올 수 있습니다.
사용자를 확보한 후에는 user.uid에서 ID를 가져와 반환하거나, 없을 경우 null을 반환할 수 있습니다.
이 내용을 프로젝트를 살리기 위해 게시글에 활용할 때, 여기 제가 'const user pewter'라고 말씀드리겠습니다.
저것은 user.pewter와 같습니다. 접근 권한이 없을 경우, 간단히 JSON 에러를 반환할 수 있습니다. 이제 왜 저희가 이것을 만들었는지 감이 오실 거라고 생각합니다. 저희는 이것을 여러 번 사용하고 있고, 훨씬 더 편리하기 때문입니다.
하나의 상태를 제공한 후, 인증 실패와 같은 메시지를 전달하는 것이 더 효율적일 수 있습니다.
하지만 성공적으로 가져왔다면 await request.json이라고 말해서 그 내용을 추출할 수 있습니다. 그리고 body question mark dot project라고 말해서 body에서 프로젝트를 가져올 수 있습니다.
그런데, 이 사용자분께서 여기 존재하지 않는다고 불만을 제기하시는 것을 지금 알게 되었네요.
그래서 이건 여기로 통과될 것으로 예상되었어요. 요청 후에 사용자요. 그런데 응답이 여기에서 받지 못하고 있어요. 그래서 본문과 물음표.프로젝트요.
프로젝트 ID가 없거나, 프로젝트 질문점, 소스 이미지 등이 없는지 확인하여 성공적으로 완료되었는지 확인할 수 있습니다.
그렇다면, 400 상태 코드를 반환하는 JSON 에러를 보내고, 프로젝트를 찾을 수 없다는 메시지를 함께 전달할 수 있습니다.
하지만 프로젝트를 확보하고, 성공적으로 ID를 찾게 된다면, 현재 프로젝트에 대한 모든 정보를 담은 새로운 페이로드를 생성할 수 있습니다.
그리고 업데이트된 '업데이트 시간' 필드를 추가할 수도 있습니다. 이 필드에는 새로운 날짜가 포함될 것입니다.
그럼 저희는 헬퍼 함수, 사용자 ID를 가져오기를 이용해서 사용자 ID를 추출할 수 있습니다. 그리고 또 한번, 간단한 확인을 해봐야 합니다.
사용자 ID에 접근할 수 없다면, 401 오류를 반환할 수 있습니다. 인증에 실패했다는 의미입니다.
그리고 이건 pewter user가 아니라 user pewter라고 부르는 방식이죠, 여기에서요. 마지막으로, key value 데이터베이스에 저장할 수 있는 키를 이렇게 정의할 수 있습니다. const key는 같다는 의미로,
처음에 상수(constant)로 프로젝트(project)라는 접두사(prefix)를 정의해두면 나중에 재사용할 수 있습니다.
접두사는 roomify_project로 설정되어 있고, 그 뒤에 고유 ID를 추가할 수 있습니다.
이 키 바로 아래에서, 이걸 템플릿 문자열로 만들어서 프로젝트 접두사로 시작하게 할 수 있습니다.
바로 뒤에 프로젝트 ID를 추가하여 고유하게 만드십시오.
키를 확보하면 await userputer.kv.set이라고 해서 데이터베이스에 설정할 수 있습니다. 그 키 아래에 전체 프로젝트와 업데이트된 추가 필드를 포함하는 전체 페이로드를 설정해야 합니다.
마침내, 저장된 것을 true로 설정하고 ID를 project.id로 설정하며 프로젝트를 payload에 설정하여 프론트엔드로 모두 반환할 수 있습니다. 그래서 이 부분은 실제로 프로젝트를 저장하거나 키를 설정하는 부분입니다.
하지만 이제 이것을 군중 운영이라고 생각해보세요. 저희는 키를 가져오고 나열할 수 있어야 합니다. 그래서 여기에서 추가 경로를 만들 수도 있고, 아니면 Junie에게 만들어 달라고 요청할 수도 있습니다.
그래서 그냥 주니어나 다른 AI 에이전트를 열고 이걸 하도록 시키세요. 영상 키트 링크 설명란 아래에 이 프롬프트를 제공해 드릴게요.
피터 워커 JS 파일에서 피터 워커 라우터 엔드포인트 두 개를 생성해주세요.
첫 번째 엔드포인트는 프로젝트 목록을 가져오는 GET 요청으로, 사용자 피터의 권한을 사용하여 'project' 접두사로 시작하는 모든 키를 나열해야 합니다.
KV 스토어에서 데이터를 가져와서 해당 값들의 배열을 포함하는 객체를 반환하고, 두 번째는 요청 검색 파라미터에서 ID를 추출하여 특정 값을 가져오는 것입니다.
사용자 pewter kv 님의 프로젝트입니다. 접두사 키를 사용하며, 양쪽 엔드포인트 모두 적절한 오류 처리가 필요합니다. 엔터키를 눌러 얼마나 잘 작동하는지 확인해 보고, 실시간으로 처음 작동하는 모습을 살펴볼 수 있습니다.
우선, 코드 베이스에 대해 알아보고, 이 파일을 실시간으로 수정하는 것이죠.
자, 됐네요. 정말 빠르네요. 이제 이걸 한번 살펴봐서 제대로 구현되었는지 확인해 봅시다.
먼저 사용자 정보를 가져오고, 사용자 ID를 가져온 다음, 해당 사용자의 프로젝트들을 가져오고 있습니다. await userputer.kv.list를 사용해서, 지정된 프로젝트 접두사로 가져오고 있습니다.
그리고 values를 true라고 말하는 대신, 그것이 존재하지 않으니까, 두 번째 파라미터를 true로 설정해서 반환 값을 프로젝트에 넣을 수 있도록 할 수 있습니다.
그리고 이 데이터에 대해서도 map을 사용할 수 있습니다.
따라서, 이 전체 await 호출을 감싸고, 그 다음에 .map() 메서드를 호출할 텐데요. 이 과정에서 구조 분해할 각 개별 값을 얻게 될 겁니다.
그리고 각 항목에 대해, 즉시 새로운 객체를 반환할 텐데, 이 객체에서는 값을 펼쳐서 isPublic 속성을 참(true)으로 설정할 것입니다.
그리고 이 프로젝트들을 그냥 반환하면 돼요. 자, 이제 두 번째 건데, .get을 사용해 보려고 하는데, 이 부분은 괜찮은 것 같아요.
이제 pewter.com에 접속해서 이 워커를 배포할 수 있습니다. 간단히 바탕화면에서 오른쪽 클릭을 해서 새로운 워커를 생성하시면 됩니다.
roomify.js라고 부르셔도 괜찮아요. 그리고 코딩 프로그램에서 열어보면, 컴퓨터 안에서 새로운 텍스트 편집기가 바로 열리는 것을 확인할 수 있습니다.
지금 이 세 개의 라우트는 'Hello, World'라고만 표시되어 있는데, 여기서 애플리케이션에서 가져온 워커를 옮겨야 합니다.
이 세 개의 경로와 헬퍼 함수들을 모두 복사해서 이 세 개의 경로 위에 붙여넣어 주세요. 그렇게 하면 우리가 만들었던 모든 기능들을 이 페테르 워커 안에 바로 가져올 수 있습니다.
그러면 이 창을 최소화하고, 오른쪽 클릭해서 'Worker로 게시'를 선택할 수 있습니다. 워커의 이름을 지정할 수 있게 되고, 게시를 클릭하면 URL이 주어집니다.
복사해서 거기에 들어가시면 됩니다. 그리고 Hello World를 보실 수 있을 거예요. 믿기 어렵겠지만, 고객님께서 직접 백엔드 API를 배포하신 겁니다.
그래서 워커 URL을 복사하셨다면, 이제 저희 환경 파일에 옮겨볼게요.
처음에 말씀드렸듯이 환경 파일은 아주 조금밖에 없을 거예요. 하나 정도인 것 같아요.
새로운 파일 하나를 만드세요, 이름은 .env.local로 해주세요. 그리고 거기에 veet_pewter_worker_URL이라고 적고, 배포된 백엔드 URL을 붙여넣으세요.
다음 강의에서는 이 워커들을 프론트엔드와 연결해서 프로젝트 정보를 생성하거나, 저장하거나, 가져오도록 할 거예요.