Woongjae Lee
Daangn - Frontend Core Team ex) NHN Dooray - Frontend Team Leader ex) ProtoPie - Studio Team
Lead Software Engineer @ProtoPie
Microsoft MVP
TypeScript Korea User Group Organizer
Marktube (Youtube)
이 웅재
1-1) What is Sanity?
1-2) Sanity Project 만들고 Deploy 하기
1-3) Schema 만들기 (1) - author
1-4) Schema 만들기 (2) - post
1-5) Schema 만들기 (3) - home
1-6) Schema 만들기 (4) - blockContent
1-7) Studio 의 input 창 커스터마이징
1-8) query 사용하기
Sanity
Studio
Sanity
Dataset
Client
(Next.js)
GROQ query
GraphQL
npm i @sanity/cli -g
sanity login
mkdir my-blog-contents
cd my-blog-contents
sanity initsanity startsanity deploy// schemas/author.js
export default {
  name: "author",
  title: "Author",
  type: "document",
  fields: [
    {
      name: "name",
      title: "Name",
      type: "string",
      validation: (Rule) => Rule.required(),
    },
    {
      name: "role",
      title: "Role",
      type: "string",
    },
    {
      name: "image",
      title: "Image",
      type: "image",
      options: {
        hotspot: true,
      },
      validation: (Rule) => Rule.required(),
    },
  ],
  preview: {
    select: {
      title: "name",
      media: "image",
    },
  },
};
*[_type == 'home'][0]{'mainPostUrl': mainPost -> slug.current}*[_type == 'post']{
  title, 
  subtitle, 
  createdAt, 
  'content': content[]{
  	...,
  	...select(_type == 'imageGallery' => {'images': images[]{..., 'url': asset -> url}})
	},
  'slug': slug.current,
  'thumbnail': {
    'alt': thumbnail.alt,
    'imageUrl': thumbnail.asset -> url
  },
  'author': author -> {
    name,
    role,
    'image': image.asset -> url
  },
  'tag': tag -> {
    title,
    'slug': slug.current
  }
}2-1) What is Next.js?
2-2) Next.js 프로젝트 만들기
2-3) 라우팅 설정하기
2-4) Sanity 연결하고 데이터 가져오기
2-5) 스타일 작업 (1) - Blog Home
2-6) 스타일 작업 (2) - Post
2-7) next.config.js
2-8) Next.js 배포 이해하기
By Woongjae Lee
넥스트제이에스 2021
Daangn - Frontend Core Team ex) NHN Dooray - Frontend Team Leader ex) ProtoPie - Studio Team