반응형

Sanity & Next.js 3

[Sanity] input 창 커스터마이징 해보기

studio를 구성할 때, 사용자로부터 입력값을 받을 수 있는 input창을 많이 만들 것입니다 이번에는 그러한 input 창을 커스터마이징에 대해 알아봅시다 !!! input창은 개발자들이 블로그에서 가장 많이 사용하는 게 code 이기 때문에 code의 input 창을 github의 테마를 사용하여 커스터마이징 하겠습니다. blockContent.js 파일에 type을 code로 가지는 요소를 하나 만들어 줍니다. { type: 'code' } 이제 code.js 파일을 만들어주고, 넣고자 하는 요소들을 만들어줍니다. 여기서 커스터마이징을 위한 파일을 만들 것인데, 기본적으로 sanity에서는 react를 지원하기 때문에 react를 사용할 수 있습니다. component 폴더를 생성 -> jsx 파..

Sanity & Next.js 2022.08.12

[Sanity] author.js 수정 해보기

Sanity studio의 contents 중 author을 수정해봅시다 !! schemas 폴더에 보면 author.js 파일이 있습니다. fields 배열에는 객체로 자신이 사용하고자 하는 항목들을 name,title,type과 함께 입력하여 사용할 수 있습니다. validation은 필수 항목을 나타내는 코드로 항목에 입력을 주지 않으면 publish할 수 없습니다. 저는 fields에 name, role, image이 세가지 항목을 줬기 때문에 다음과 같은 화면을 볼 수 있습니다. 속성에 preview가 있는데, preview는 말그대로 author가 어떤 author인지 항목들을 보지 않고도 알 수 있도록 미리 보여주는 속성입니다. preview를 설정하면, 왼쪽과 같이 만들어둔 author의 ..

Sanity & Next.js 2022.08.11

[Sanity] 프로젝트 만들고 deploy 하기

Sanity Project 생성 및 배포 Sanity studio을 사용하면 굉장히 편리하게 컨텐츠들을 관리할 수 있습니다. cli tool npm i @sanity/cli -g Sanity Login sanity login sanity login을 입력하면, login type이 뜨는데 자신이 편한 것으로 로그인하면 되고, modal 창이 뜨는데 동의를 하면 다음과 같은 창을 볼 수 있습니다. command line으로 돌아오면 Login successful이 출력된 것을 볼 수 있습니다. Project 생성 mkdir '프로젝트 디렉토리' cd '프로젝트 디렉토리' sanity init 위 명령어를 입력하면 command line에서 project name을 설정할 수 있습니다. Use the def..

Sanity & Next.js 2022.08.10
반응형