웹에 업로드한 바닥도면을 호스팅하기 위해, lib 폴더 내에 새로운 파일을 만들어서 pewter.hosting.ts라고 이름을 지을 수 있습니다.

이 파일은 페테르 호스팅 도메인으로 이미지 업로드를 처리할 것입니다.

이 파일 안에서, 저희는 pewter 데이터베이스라는 키-값 저장소에 서브도메인이 존재하는지 확인하는 함수를 만들어야 합니다. 만약 없다면, 새로운 서브도메인을 생성해야 합니다.

서브 도메인을 키-값 쌍으로 저장하도록 하겠습니다. 이제 내보내기 상수를 사용하여 새로운 함수를 생성해 보겠습니다. export const get 이라고요.

혹은 호스팅 설정을 만들고, 그러면 이 값은 비동기 함수가 반환하는 값과 같아질 것입니다.

그런 약속은 호스팅 설정에서 다음과 같이 해결되거나, 존재하지 않을 경우 null 값으로 처리될 수 있습니다. 그리고 여기에서 함수 블록을 열 수 있습니다.

이제 이 호스팅 설정은 여기에서 직접 선언할 수 있는 타입입니다. 호스팅 설정 타입은 문자열 형태의 서브 도메인을 포함하는 객체와 같을 것입니다.

그리고 호스팅 자산에 대한 새로운 유형도 추가할 예정인데, 문자열 형식의 URL을 포함하게 됩니다.

알겠습니다. 이제 실제로 이 함수를 구현해야겠네요.

이 함수 시작 부분에서, 기존 데이터베이스에 접근을 시도하거나, pewter에서 오는 키-값 쌍의 체인을 가져올 수 있습니다. 예를 들어, `existing`라는 상수를 정의하고, 괄호 안에 넣어서 표현하겠습니다.

그리고 await pewter라고 하는데, kv.get을 가져와서 사용해야 하고, 호스팅을 전달해야 합니다.

이 설정 키는 여기서 새로운 파일 아래 lib 폴더 안에 만들 수 있습니다. utils.ts라고 이름을 지을 수 있습니다.

여기서는 이 새로운 호스팅 구성 키를 내보내고 생성할 수 있습니다. 이 값은 룸피라이 호스팅 구성과 같이 설정될 것입니다.

그리고 이 자리에 있는 동안, 호스팅 도메인 서픽스를 내보낼 수도 있습니다. 이는 .puter.site와 같을 것입니다.

자꾸 반복할 필요가 없으니까요. 문자열을 반복하면 오타나 실수를 할 수도 있잖아요.

만약 이런 변수가 있다면, 항상 정확할 거예요.

이제 여기로 돌아가서 이 호스팅 설정 키를 유틸리티에서 가져와서 전달할 수 있어요.

호스팅 설정이거나 널이라고 말할 수도 있습니다.

네, 좋습니다. 이제 서브 도메인이 존재하는지 확인하는 것 외에는 아무것도 할 필요가 없습니다.

기존 질문표 더하기 점 더하기 서브도메인이 있는 경우, 서브도메인이라고 하는 객체를 간단히 반환하고, 기존 점 더하기 서브도메인으로 설정할 것입니다.

물론, 여기 이 부분도 반환해야 합니다.

하지만 서브도메인이 존재하지 않는다면, const subdomain을 create hosting slug와 같다고 말할 거예요. 이 함수는 저희가 만들겠지만, 이 파일을 모든 로직으로 어지럽히고 싶지는 않아요.

그래서 대신, utils 폴더 안에 이 새로운 함수를 만들 거예요. 그럼 lib 폴더 안으로 가서, utils 폴더에서 create hosting slug라는 새로운 export를 만들어야 하는데, 바로 반환하도록 할 거예요.

그럼 중괄호는 필요 없어요. roomify-로 시작하는 템플릿 문자열을 사용하면 돼요. 그리고 date dot now dot to string 36 dash를 사용할 수 있어요.

그리고 다시 무작위로 만들 수 있습니다. 수학 랜덤 점을 문자열로 변환한 후 36번 슬라이스를 사용해서요. 2부터 8까지 해보겠습니다. 이렇게 호스팅 슬러그를 완전히 무작위화했습니다.

이제 이걸 내보내고 있는데, 위쪽 유틸리티에서 가져올 수도 있습니다. 그리고 이 새로운 서브도메인을 생성한 후에 try-catch 블록을 열 수 있습니다.

오류가 발생하면 콘솔 경고를 사용하여, '서브 도메인을 찾을 수 없습니다' 또는 '호스팅 생성에 실패했습니다'와 같은 메시지를 표시할 수 있습니다.

그리고 나서 null 값을 반환하거나, 성공적으로 서브 도메인을 얻은 후에 새로운 것을 생성할 수 있습니다.

페외터 호스팅을 생성한다고 할 때, const 생성은 await pewter.hosting.create와 같으며, 그 안에 인자를 전달할 수 있습니다.

서브 도메인을 만들고, 점(.)의 두 번째 파라미터로 사용하겠습니다. 호버하면 디렉토리 경로를 전달할 수 있는데, 저는 간단하게 점(.)으로 설정해서 현재 디렉토리에서 처리하도록 하겠습니다.

그리고 나서 저희는 서브 도메인이 될 레코드를 접근할 수 있게 됩니다. 지금은 기존에 있던 것 대신에 '생성된 서브 도메인'으로 설정할 건데요. 마지막으로…

기존 데이터를 활용하든, 새로 만들든 어떤 방식이든 돌려줘야 합니다. 돌려줘야 하는 것이 원칙이며, 그렇게 하기 위해서는 '레코드 반환'이라고 명시해야 합니다. 그 경우 확인하실 수 있습니다.

이 함수는 여기에서 호스팅 구성을 성공적으로 반환하므로 불평하지 않을 것입니다. 이 변수를 만드는 것은 불필요하므로, 객체를 직접 반환하는 것이 좋습니다. 그러면 됩니다.

여기 바로 아래에 호스팅 설정을 가져오거나 새로 만들어서, Blob이나 Base64 문자열을 받아 업로드하는 기능을 구현할 수 있습니다. 업로드는 피터 서브도메인으로 이루어질 것입니다.

자, 여기에서 바로 export const upload image to hosting이라고 말씀드리겠습니다.

그리고 그것은 호스팅, URL, 프로젝트 ID, 그리고 레이블과 같은 몇 가지 파라미터를 받는 비동기 함수와 같을 것입니다.

그리고 그것은 호스팅된 이미지 파라미터를 담고 있는 특정 타입의 스토어일 것이며, 호스팅된 에셋으로 해결되는 프로미스를 반환할 것입니다.

바로 위에 호스팅된 자산이 있거나 null인 경우에, 함수 블록을 열 수 있습니다. 여기에는 다양한 종류가 많이 있습니다.

물론 저희는 호스팅을 문자열, URL을 문자열처럼 이렇게 타입들을 정의할 수도 있었겠지만, 이 파일을 불필요한 타입들로 복잡하게 만들고 싶지는 않습니다.

그러니 대신 이 타입을 `type.d.ts` 파일 내에서 직접 선언할 수 있습니다.

스토어 호스팅 파라미터에 대한 인터페이스가 될 겁니다. 하지만 이 모든 타입을 직접 입력하는 대신, 최종 type.d.ts 파일을 보여드리겠습니다.

이것을 통해 저희가 이 애플리케이션 전체에서 사용할 모든 종류를 다 얻게 됩니다.

처음에는 저희가 이미 가지고 있던 인증 상태부터 시작하고, 사용할 재료, 디자인 항목, 이 모든 것들, 그리고 앱 내 다양한 상태들이 표시됩니다. 여기에 현재 추가하고 있는 스토어 호스팅 파라미터들도 함께 보이시죠.

여기서 사용하는 호스팅 설정과 호스팅 자산이 이 두 가지가 있는데, 더 이상 여기에서 정의할 필요가 없게 되었어요. 타입.d.ts 안에 포함되어 있어서 자동으로 가져오고 있답니다.

그래서 애플리케이션 전체에서 이 값들을 사용할 수 있습니다.

이제 이미지를 호스팅에 업로드하기 위해 이 기능을 구현하려면, 호스팅 구현을 더 쉽게 만들어줄 많은 추가 유틸리티 함수가 필요합니다.

utils.ts 파일로 들어가시면, 방금 상수들을 만들었고 기본적인 호스팅 슬러그 생성 함수도 있습니다. 설명란에 있는 비디오 키트 링크에서 전체 utils.ts 파일을 찾으실 수 있습니다.

이러한 기능들을 통합하게 되면, URL에서 데이터를 blob 형태로 변환하고 이미지 확장자를 얻는 데 도움을 주는 유틸리티 함수들을 포함하고 있다는 것을 알 수 있습니다.

JPEG 또는 SVG와 같은 형식인지 확인하신 후, 호스팅된 URL을 가져와 주시면 됩니다.

여기 있는 이 부분은 여러 애플리케이션에서 많이 사용되는 코드들이 대부분이고, 이것은 거의 보일러플레이트 코드를 포함하고 있습니다. 사실 저는 AI를 이용해서 이걸 생성했어요. 이걸 여기 가져온 후에, 이 파일로 다시 돌아가서 이 함수를 만들기 시작할 수 있습니다.

먼저 몇 가지 확인을 진행해 보겠습니다. 호스팅이 없거나 URL이 없을 경우, 간단히 null 값을 반환하면 됩니다.

그렇지 않으면 업로드를 할 수 없습니다. 또한, URL을 전달해야 하는 호스팅 URL이 있다면 해당 URL을 반환하면 됩니다.

필요한 모든 것을 다 하고 있습니다. 그 다음에 try-catch 블록을 열 수 있습니다. catch 구문 안에서는 console.warn을 사용하여 에러를 간단하게 경고할 수 있습니다.

호스팅 URL을 사용하거나, 호스팅된 이미지를 저장하는 데 실패했다는 메시지를 표시하고 오류를 띄운 후 null을 반환할 수도 있습니다.

하지만 모든 것이 순조롭게 진행된다면, 여기서 시도해 볼 수 있는 일은 URL에서 이미지의 PNG 형식으로 변환하는 문제를 해결하는 것입니다.

그것은 `resolved` 또는 `resolved transformation`이라고 표현함으로써 할 수 있습니다. 그리고 라벨이 렌더링된 값과 일치하는지 확인하겠습니다.

만약 그렇다면, 이미지 URL을 PNG 블롭으로 변환해서 기다린 후, 해당 URL을 전달하도록 하겠습니다.

이 부분은 라이브러리에서 가져온 것이고, 실제로 새로운 줄에 넣어서 더 잘 보이도록 하겠습니다.

그리고 점을 찍어서 호출할 겁니다. 그러면 블롭에 접근할 수 있습니다.

만약 블롭이 존재한다면, 우리는 블롭과 콘텐츠 유형을 이미지 슬래시 PNG로 설정한 객체를 반환하고 싶습니다.

그렇지 않으면 null을 반환하고 싶습니다. 따라서 여러 줄로 나누어 작성해 보겠습니다.

먼저, 렌더링은 문자열로 처리되어야 합니다. 따라서 레이블이 렌더링되면 이미지 URL을 블롭으로 가져온 뒤에 호출하는 과정을 거치게 됩니다.

그런 다음 그것에 적용하고, 만약 지금 렌더링되지 않는다면, fetch blob from url을 사용하여 URL을 전달할 수 있습니다.

마침내, 해결되지 않았다면 null을 반환할 수 있습니다.

물론, fetch blob from URL은 가져와야 합니다.

그리고 그 URL은 소문자로 된 URL을 전달해야 합니다.

네, 좋습니다. 그런데, 저희가 업로드한 이미지를 해결했다면, resolved.contenttype 또는 resolved.blob.type으로 설정하여 콘텐츠 유형에 접근할 수 있습니다.

혹시 그것이 존재하지 않는다면, 음, 그러면 빈 문자열이 됩니다. 그리고 이미지 확장자를 얻기 위해 const ext는 get image extension과 같다고 할 수 있습니다.

이것은 lib utils에서 만든 유틸리티 함수 중 또 하나입니다. 콘텐츠 유형과 URL을 전달해서 실제 확장자를 추출해야 합니다.

그럼 프로젝트 슬래시 그리고 프로젝트 ID라고 말해서 디렉토리를 추출할 수 있습니다. 바로 여기에 이미지가 저장될 거예요.

그리고 마지막으로 전체 파일 경로인데, 이는 해당 디렉터리와 같고, 실제로는 레이블 점 확장자입니다.

따라서, 지금까지 언급했던 모든 것을 하나의 최종 파일 경로로 합쳐야 합니다. 그리고 어떤 파일을 업로드할지 결정하고 새로운 파일을 만들 수 있습니다.

접근 권한을 얻기 위해 파일 비트를 전달하여 얻은 이러한 데이터 덩어리에서 파일을 추출합니다. 이 파일은 'resolved.blob'으로 해결됩니다.

그리고 두 번째 파라미터는 파일 이름을 전달해야 하는데, 이는 label.extension으로 한 번 더 전달해야 합니다.

그리고 세 번째 파라미터로는 몇 가지 추가 옵션을 전달할 수 있습니다. 타입은 콘텐츠 타입으로 설정되어 있는데, 방금 전에 추출했던 내용입니다. 기본적으로 여기에서 이미지를 만들 때 정의되어 있습니다.

마지막으로, 주석(pewter)을 사용하여 업로드해야 합니다. 바로 아래에 'await pewter.fs'라고 적을 텐데요, 여기서 fs는 파일 시스템을 의미합니다. 디렉토리를 새로 생성하기 위해 'mkdir'을 사용합니다.

디렉터리를 처음 생성하는 경우, 부모가 존재하지 않는다는 설정이 True로 설정될 것입니다. 이후 pewter.fs를 다시 사용하여 파일 시스템에 접근하겠지만, 이번에는 쓰기 작업을 수행할 예정입니다.

그 안에서 우리는 특정 파일 경로에 무언가를 쓰게 될 것이고, 추가할 데이터는 저희에게 접근 권한을 제공할 업로드 파일이 될 것입니다.

업로드된 이미지의 호스팅 URL을 가져와서, hosted url 이라는 상수에는 그 호스팅 URL을 할당하겠다고 말씀드리겠습니다.

우리 라이브러리를 정의한 다음, 호스팅 서브도메인을 설정할 수 있습니다. 두 번째 파라미터로는 파일 경로를 제공하여 정확히 어디에서 가져오는지를 알 수 있습니다.

그리고 그 상태가 괜찮아지면, 호스팅된 URL을 반환하면 됩니다.

만약 존재한다면, hosted URL로 설정될 것이고, 그렇지 않다면 null로 설정될 것입니다. 그리고 이 값은 hosted URL처럼 이렇게 되어야 했습니다.

훌륭합니다. 이제 Tabscript에서 오류가 발생하지 않고, Pewter에서 제공하는 파일 저장소에 이미지를 업로드할 수 있도록 하는 기능을 구현했습니다.

하지만 당연히 업로드 기능은 아직 완료되지 않았습니다. 왜냐하면 이 함수를 어딘가에서 호출해야 하기 때문입니다.

그럼 다음 강의에서 그렇게 해 보겠습니다.