Mike Cavaliere와 함께하는 스매싱 팟캐스트 에피소드 40: React용 차크라 UI란?

이 에피소드는 원하는 방식으로 웹 존재를 생성, 디자인, 관리 및 개발할 수 있는 자유를 제공하는 것으로 알려진 Wix의 친애하는 친구들의 친절한 지원을 받았습니다. 감사합니다!

이 에피소드에서는 차크라 UI에 대해 이야기합니다. 그것이 무엇이며 어떻게 React 프로젝트에 도움이 될 수 있습니까? Drew McLellan이 전문가 Mike Cavaliere와 대화하여 알아냅니다.

메모 표시

• 차크라 UI
• 트위터의 마이크
• 마이크의 개인 웹사이트
• Cut Into The Jamstack 책

주간 업데이트

• 코드로 디자인하기: 디자인에 대한 현대적인 접근
  글작가 미콜라이 도브루키
• Auto VO를 사용하여 macOS에서 스크린 리더 테스트 자동화
  카메론 커디프가 쓴
• 문제 해결 전략으로서의 디자인 씽킹의 부상
  조시 싱어가 쓴
• 주요 EdTech 플랫폼에 대한 UX 감사를 실행하는 방법
  저자 마크 랭밀리에
• Next.js로 다중 작성자 블로그 만들기
  저자 Dom Habersack

성적 증명서

Drew McLellan: 그는 Echobind라는 에이전시의 선임 소프트웨어 엔지니어입니다. 그는 20년 동안 코드를 작성했으며 내내 JavaScript를 사용했습니다. 그는 Jamstack을 사랑하고 그의 새 책 Cut Into The Jamstack은 독자들에게 처음부터 SaaS(Software as a Service) 앱을 빌드하는 방법을 가르칩니다. 우리는 그가 Jamstack 주변에서 자신의 길을 알고 있다는 것을 알고 있지만 그가 한 번 땅콩 버터 통로에서 길을 잃었다는 것을 알고 있습니까? 내 멋진 친구들이여, Mike Cavaliere를 환영하십시오. 안녕, 마이크. 잘 지내고 있나요?

Mike Cavaliere: 오늘은 정말 스매싱입니다.

드류: 반갑 습니다. 저는 오늘 Jamstack 책에서 접하기 전까지는 전혀 들어보지 못한 프로젝트에 대해 이야기하고 싶었습니다. 성숙하고 잘 문서화되어 있고 실제적이기 때문에 어떻게 놓쳤는지 잘 모르겠습니다. 그냥 훌륭한 프로젝트입니다. 나는 오늘 우리가 그것에 대해 이야기할 수 있기를 바라고 있고, 내가 지금까지 알고 있어야 했던 것을 찾기 위해 따라잡을 수 있기를 바랍니다. 물론 차크라 UI에 대해 이야기하고 있습니다. 차크라 UI가 무엇인지 알려주세요. 그것은 어떤 공간에 있으며 우리에게 어떤 문제를 해결하고 있습니까?

Mike: Chakra UI는 React 또는 UI 툴킷을 위한 UI 프레임워크입니다. 모든 애플리케이션 스택에서 요즘은 UI를 처음부터 발명하고 싶지 않습니다. 당신은 약간의 툴킷을 잡고 싶어합니다. 한동안 그랬다.

Mike: Chakra UI는 React UI 툴킷에 대한 훌륭한 접근 방식입니다. 여기에는 여러 가지 특전이 있지만 그 중 하나는... 우선, 강력합니다. 즉, 상상할 수 있는 모든 UI 요소가 있습니다. 스위치가 있습니다. 그리드 주위에 래퍼가 있습니다. 모든 유형의 것들이 요소를 형성합니다.

Mike: 매우 구성 가능하도록 만들어졌기 때문에 모든 것이 스타일 소품을 사용했습니다. 귀하의 구성 요소는 즉시 사용할 수 있습니다. 버리고 그대로 사용할 수 있습니다. 그러나 미세 조정을 하고 싶다면 일부 스타일 속성을 전달하는 것이 매우 쉽습니다. 그들은 완전히 액세스할 수 있습니다. 모두가 이야기하지만 항상 구현하는 것을 잊어 버리거나 구현하는 데 약간의 노력이 필요한 접근성이 내장되어 있습니다.

Mike: Chakra UI로 무언가를 조합하고 아주 좋은 Lighthouse 점수를 얻는 것은 드문 일이 아닙니다. 사실 오늘 컷 인투 잼스택 홈페이지에서 확인해보니 접근성 점수가 매우 높다. 또한 매우 완벽하게 테마를 지정할 수 있습니다. 테마 구성은 처음부터 설정할 수 있습니다. 그것에는 혜택의 긴 목록이 있습니다.

Mike: 개발 속도가 매우 빨라서 원래 끌렸습니다. Echobind, 우리는 그것을 내부적으로 사용합니다. 하지만 저에게는 디자인 감각이 없습니다. 조금, 그러나 나는 결코 디자이너가 아닙니다. 차크라에서 구성 요소를 가져와서 일관성을 유지하고 상자에서 꺼내기 좋게 보이도록 약간 변경할 수 있습니다. 빠르게 발전할 수 있습니다. 개발자 경험은 훌륭합니다. 정말 많은 수준에서 굉장합니다.

Mike: 계속해서 횡설수설하기 전에 마지막으로 하고 싶은 말. 그러나 사용 중인 이러한 요소와 함께 제공되는 매우 일반적인 기능에 대한 도우미인 React Hook도 많이 있습니다. 예를 들어 다크 모드에서. 밝은 어두운 모드를 사용하기 위한 내장 후크가 있어 테마의 색상을 매우 눈에 띄게 전환할 수 있습니다.

Mike: 모듈과 같은 것들을 토글하기 위한 사용된 공개를 위한 또 다른 것이 있습니다. 항상 켜짐, 꺼짐 상태가 필요합니다. 그러나 Hook은 프레임워크가 자동으로 추론할 수 없는 것에 집중할 수 있도록 훨씬 더 단순화합니다. 양이 많기 때문에 여기서 끊겠습니다.

드류: 정말 좋네요. 이해를 하자면 먼저 차크라가 아니라 샤크라인가요? 샤크라?

Mike: 나는 그것에 대해 전문가가 아닙니다. 나는 요가 때문에 샤크라를 말해왔다. 그러나 우리는 설립자들에게 ​​재확인을 요청해야 합니다.

Drew: 프로젝트의 UI를 구축하기 위해 들를 수 있는 기성품 디자인 시스템입니다.

마이크: 네.

Drew: 특히 React 프로젝트를 위한 것입니다.

마이크: 네. Chakra Vue 프로젝트가 있습니다. 나는 Vue 사람이 아니지만 그것이 존재한다는 것을 알고 있습니다. 다른 프레임에도 있을 수 있지만 저는 매우 매우 React에 집중하기 때문에 Chakra 기본 React를 사용하고 있습니다.

드류: 네. 나는 과거에 React에 대해 잘 알고 있었습니다. Netlify에서 일할 때 React를 사용했습니다. 이제 Vue에서 모든 작업을 수행합니다. 그것은 내가 처음 본 것 중 하나였습니다. 오, 뷰가 있나요? 이것은 좋아 보인다. Vue 버전이 있습니까? 나는 그것의 Vue 버전을 찾았고 그것은 꽤 뒤쳐진 것 같습니다. 1.6이나 현재 React 버전이 무엇이든 간에 0.9나 그 이상에 있다고 생각합니다. 그것이 얼마나 최신인지 잘 모르겠습니다.

Drew: 우리는 상당히 오래된 프레임워크를 가지고 있습니다. Foundation UI, Bootstrap, Bulma와 같은 것들. 그들은 오랫동안 사용되어 왔으며 이전 세대의 프레임워크인 것 같습니다. 그런 다음 좀 더 현대적인 접근 방식이 있습니다. 테일윈드와 테일윈드 UI 프로젝트는 많은 청취자분들이 익숙하실 거라 생각합니다. 차크라 UI는 그 풍경 중 어디에 속합니까? Tailwind가 취할 수 있는 접근 방식에 더 가깝습니다. Tailwind가 취할 수 있는 접근 방식입니다. 그 맞습니까?

마이크: 그런 것 같아요. 물론 저는 Tailwind가 지금 인기가 많다는 이유만으로 Tailwind를 더 깊이 파고들려고 했습니다. 그러나 나는 Tailwind 자체의 안팎과 어떻게... 차크라와 Tailwind가 대안적인 접근 방식인지에 대해 현명하게 말할 수 없습니다. 당신은 분명히 동시에 둘 다가 아니라 하나를 잡습니다.

Mike: 둘 다 장단점이 무엇인지 아직 모릅니다. 차크라에 너무 매료되어 기본적으로 계속 사용하고 있습니다. 나는 "좋아, 이제 이것을 아주 잘 안다. 나는 그것을 좋아한다. 나중에 하나 더 배우겠습니다.” 그러나 Tailwind는 분명히 매우 인기가 있습니다. Tailwind에는 UI 툴킷에 기본 프레임워크가 있다고 생각합니다. 공정한가요?

드류: 맞아. 응.

마이크: 알았어. 이것은 Tailwind의 UI 툴킷과 더 비슷할 것입니다. Chakra 홈페이지에서, 그들은 당신이 하나 또는 다른 것에 도달하기를 원하는 이유에 대한 비교를 가지고 있지만, 나는 그것을 내재화하지 않았습니다.

드류: 네. 좋아요. 우리가 언급했듯이 React 프로젝트와 HTML에 넣을 클래스 이름의 전체 로드를 제공하고 일부 HTML 구조를 사용해야 하는 이러한 보다 전통적인 디자인 시스템보다 스스로를 나타내는 방식의 경우 올바른 클래스를 그것. 이것이 프로젝트에서 UI 매니페스트를 얻는 방법입니다. Chakra를 사용하면 React를 기반으로 하기 때문에 각 요소에 대한 전체 구성 요소를 제공합니다. 프로젝트로 가져올 수 있습니다. 이러한 구성 요소는 고유한 마크업과 스타일을 캡슐화합니다. 그렇죠?

마이크: 네. 실제로 Chakra를 사용하여 클래스를 작성할 필요는 없습니다. 나는하지 않았다. 가능한지조차 모르겠습니다. 전체 React 패러다임은 구성 요소 구성 및 속성입니다. 구성 요소의 캡슐화는 특정 속성을 구성 요소에 전달하는 것을 의미합니다. 차크라에는 글로벌 패러다임인 테마라는 개념이 있습니다. 기본 테마가 있고 색상과 간격에 대한 값과 모든 일반적인 사항에 대한 특정 단위가 있습니다.

Mike: 해당 테마를 사용자 지정할 수 있습니다. 전 세계적으로 사용자 정의합니다. 필요에 따라 확장할 수 있습니다. 구성 요소 자체를 호출하는 경우(예: 텍스트 입력). 입력 구성 요소입니다. 테마에 정의된 기본 색상과 테두리 반경, 패딩 및 여백을 갖게 됩니다. 더 스타일을 지정하고 싶을 때 전역적으로 하고 싶지 않다면 예를 들어 하단 여백을 지정할 때 케이스 바이 케이스로 합니다. 나는 그것이 재앙으로 이어질 수 있기 때문에 전 세계적인 수준에서 그것을 하지 않습니다. 프롬프트로 전달하면 됩니다.

Mike: 바로 가기 프롬프트가 있습니다. 입력 구성 요소가 있는 경우 MB가 같음을 말한 다음 값을 입력하면 여백 하단이 적용됩니다. 또는 수직 및 수평에 대한 MX 및 MY가 있습니다. 또는 M을 지정하고 여백 CSS 속성과 같이 문자열을 전달할 수 있습니다. 클래스 이름이 없습니다. 클래스 이름을 모두 동적으로 수행하고 사용자로부터 멀어지도록 난독화합니다.

드류: 네. 그것이 Tailwind와의 비교가 필요한 부분이라고 생각합니다. Tailwind가 작동하는 방식 때문에 전체 로드를 제공하는 것입니다. 여백을 늘리고 싶다면 여백을 늘리기 위해 추가할 수 있는 클래스가 있습니다. 실제로 동일한 방식을 취하고 있는 것처럼 들립니다. 구현 방식은 다르지만 아키텍처 방식에 대한 접근 방식은 동일합니다. 우리는 실제로 소품을 사용하고 있으며 이러한 것들을 조정하기 위해 소품을 전달하고 있습니다.

Drew: 디자인을 사용자 정의하는 것이 얼마나 쉽습니까? 색상과 여백, 패딩을 조정하여 약간 다르게 보이게 할 수 있는 경우입니까? 아니면 실제로 차크라로 테마를 브랜드화할 수 있습니까?

Mike: 오, 당신은 당신이 원하는 무엇이든 할 수 있습니다. 대단해 구성 요소 수준 또는 테마 수준에서 스타일을 지정할 수 있습니다. 그것은 당신이 그것으로 얼마나 창의적이고 싶은지에 달려 있습니다. 나는 그럭저럭 일부 구성 요소를 가져 와서 그들과 함께 약간의 거친 일을했습니다. 정말 스타일리시하게 만드는 부분 중 하나는 이러한 구성 요소가 매우 원자적이라는 것입니다.

Mike: 텍스트 상자 예제를 다시 사용하면 텍스트 상자가 필요하면 구성 요소가 바로 그것입니다. 주변의 모든 항목에 스타일을 지정하거나 텍스트 상자 자체에 스타일을 지정할 수 있습니다. 또는 테마를 변경할 수 있습니다. 색상을 설정하여 모든 것을 전 세계적으로 리브랜딩합니다.

Mike: 실제로 Chakra UI의 제작자인 Seg를 트윗했는데 사이트가 정말 훌륭하기 때문에 사이트에 갤러리를 넣어야 한다고 말했습니다. 그것으로 아름다운 디자인을 만들 수 있습니다. 그것들은 매우 다양하며 표면적으로는 알지 못할 수도 있습니다. Chakra UI에 사이트에 Chakra UI를 사용하고 있음을 분명히 하는 정보가 있는지 모르겠습니다.

Mike: 꽤 괜찮은 물건을 봤습니다. 그러나 당신은 그것으로 무엇이든 할 수 있습니다. 나는 정적 웹 사이트를 만들었습니다. Cut Into Jamstack 홈페이지가 완성되었습니다. 하나의 예처럼. Echobind에서 많이 사용했습니다. 우리가 echobind.com에 그것을 사용했는지 기억이 나지 않습니다. 그러나 확실히 많은 고객 사이트가 있습니다. 그리고 제가 만든 앱 JamShots가 바로 앱입니다. 아직 마케팅 페이지가 없습니다. 그러나 그것은 모두 UI일 뿐이며 모든 UI는 Chakra를 사용하여 구축됩니다.

Mike: 제가 Chakra를 찬양하는 동안 또 다른 한가지는 제가 최근에 많이 사용하고 있는 또 다른 웹사이트가 있다는 것입니다. 그리고 제가 사용하는… Chakratemplates.net. 차크라-템플릿.net. 기여하는 사람이 영웅 단위 또는 가격 단위를 찾는 것이 일반적인 디자인 패턴입니다. 차크라 코드를 복사하여 붙여넣기만 하면 됩니다.

Mike: 나는 그것을 개발하는 데 많은 시간을 절약했기 때문에 책 홈페이지에 그것을 전적으로 사용합니다. 가격 책정 모델이 있는 것과 같습니다. 복사해서 붙여넣기 하도록 하겠습니다. 내 사이트에서 모든 것이 일관되도록 스타일 소품을 약간 조정하겠습니다. 그게 다야 그것은 차크라 자체와 별개의 또 다른 일이지만 많은 웹 사이트에서 이러한 것들이 필요하고 매번 바퀴를 재발명하고 싶어하기 때문에 시간을 절약할 수 있습니다.

Drew: 신속하게 출시하려는 개인 프로젝트뿐만 아니라 에이전시 상황에서도 시간을 정말 절약할 수 있을 것 같습니다.

마이크: 아, 네. 전적으로.

Drew: 앱 인터페이스와 마케팅 사이트에 동일하게 적용됩니까? 어느 한쪽으로 치우치거나 구축하는 것이 무엇이든 일반적으로 유용합니까?

마이크: 둘 다라고 할 수 있습니다. 확실히 그렇습니다. 나는 둘 다에 그것을 사용했다. 우리 회사는 둘 다 사용했습니다. 우리는 전체 스택 응용 프로그램 및 모바일 응용 프로그램을 구축하는 데 크게 의존하고 있습니다. 우리는 마케팅보다 UI가 훨씬 더 많이 필요합니다. 우리는 때때로 그것을 구축하기도 하지만. 둘 다 유용합니다.

Mike: 사이트에 차크라를 사용하고 싶지 않은 경우와 같이 언급한 내용이 있습니다. 그들은 이 인터페이스 CSS를 단순화하는 방식 때문에 그렇게 말합니다. 화면에 많은 데이터가 있는 경우 문제가 있을 수 있습니다. 수많은 DOM 요소를 생성하고 실시간 업데이트를 많이 수행하는 경우 성능 문제가 발생할 수도 있고 발생하지 않을 수도 있습니다.

Mike: 성능 문제를 본 적이 없습니다. 그러나 나는 또한 실시간으로 데이터 집약적 인 것을 구축하지 않았습니다. 걱정입니다. 만약 제가 그런 앱을 만들 계획이라면 아마도 두 가지 다른 접근 방식을 사용하고 싶을 것입니다. 하지만 그래. 이 두 경우 모두에 보편적으로 유용합니다.

Drew: 기술 선택에는 항상 절충점이 있는 것 같아요. 그렇지 않습니까? 정말 간단하게 만드는 것. 구현이 정말 빠릅니다. 절충안은 페이지에 1,000개의 데이터 포인트 또는 무엇이든 만들 때 해당 작업 방법이 제대로 수행되지 않고 속도가 느려질 수 있다는 것입니다.

드류: 네. 공정하다고 생각합니다. 나는 기술 선택에서 찾는 경향이 있습니다. 가장 중요한 것은 단지 아는 것입니다. 절충점이 무엇인지, 그리고 한계가 무엇인지 알기만 하면 됩니다. 그들 중 어느 것도 좋지도 나쁘지도 않습니다. 자신의 상황에 맞는 적절한 균형을 찾으면 됩니다.

Drew: 이런 종류의 디자인 시스템에서 기대할 수 있듯이 타이포그래피용 구성 요소가 함께 제공됩니다. 레이아웃용. 그런 다음 버튼과 양식 요소의 핵심으로 내려가면 아이콘 라이브러리가 있습니다. 디자인 시스템의 주방 싱크 페이지에서 볼 수 있을 것으로 예상되는 거의 모든 것이 있습니다. 당신은 거기에 모든 것을 가지고 있습니다. 그것은 나에게 꽤 현대적으로 보인다. 레이아웃 그리드 컴포넌트는 실제로 CSS 그리드를 사용하는데, 이는 항상 보기 좋습니다. 그것은 단지 약간의 플렉스 상자를 제공하지 않습니다.

마이크: 아, 네. 완전히.

Drew: 일반적으로 작업하기에 매우 유연합니까? 필요한 모든 유형의 UI를 빌드할 수 있는 레이아웃 요소를 찾았습니까?

마이크: 네. 응. 전적으로. 좋은 점은 어떤 경우에는 둘 이상의 추상화 수준을 제공한다는 것입니다. CSS 그리드의 경우, 간단한 그리드가 있습니다. 당신은 그것을 놓기를 원하고 여기에 당신의 그리드가 있습니다. 당신은 그 안에 물건을 넣고 당신이 지정합니다. 제 생각에는 열의 수 또는 그와 비슷한 것입니다. 그런 다음 그리드가 있습니다.

Mike: 하지만 그리드의 동작에 대해 좀 더 유연해야 하는 경우 일반 그리드 구성 요소가 있습니다. 아마도... 단순 그리드 구성 요소는 다른 그리드 구성 요소를 래핑할 것입니다. 그것은 그 자체의 또 다른 정면일 뿐입니다.

Mike: 컴포넌트의 구성에 대한 접근 방식은 같은 것이기 때문에 React 세계에서 가치 있는 패러다임입니다. 매우 다재다능하고 많은 소품이 있는 구성 요소가 있는 경우 상당히 일반적으로 구성 요소를 한 가지 방법으로 사용하려는 사용 사례 집합이 있을 수 있습니다. 보다 강력한 구성 요소를 위해 정적 또는 미리 지정된 소품을 사용하여 다른 구성 요소로 래핑하기만 하면 됩니다.

Mike: 그들은 차크라에서 그 접근 방식을 아주 잘 사용합니다. 나는 아직 그것으로 할 수 없는 일에 부딪치지 않았다. 어딘가에 있을 거라고 확신합니다. 아니면 조금 더 번거로운 일입니다. 그러나 일반적으로 아직 발생하지 않았습니다. 적어도 내가 생각할 수 있는 것은 아니다.

Drew: 글쎄요, 제가 보기에 정말 기뻤던 것 중 하나와 앞서 언급하신 것도 있는데, 접근성에 대해 상당히 중점을 두고 있는 것 같습니다.

마이크: 네.

Drew: 확실히 판촉 정보에서요. 그것은 코드 자체에서 태어난 것입니까? 그들은 그들이 설교하는 것을 실천합니까? 실제로 좋은 접근성이 내장되어 있습니까?

마이크: 그런 것 같아요. 테스트에 가장 가까운 방법은 Lighthouse를 실행하는 것입니다. 접근성에 대해 지속적으로 높은 점수를 제공합니다. 나는 일반적으로 Chakra Next.js를 사용합니다. Next.js는 바로 성능입니다. 높은 점수와 모든 것을 보게 되는 경우가 많습니다. 나는 오늘 책의 홈페이지에 4개의 Lighthouse 점수 중 3개가 있는 방법에 대해 트윗했습니다. 접근성, 모범 사례, 성능 및 1/4이 있습니다. 지금은 생각하고 있지 않습니다.

Mike: 성능을 제외한 모든 것이 100%에 가깝습니다. 성능 부분은 페이지에 많은 것을 넣었고 아직 최적화하지 않았기 때문에 나에게 있습니다. 그렇게 하는 경향이 있습니다. Lighthouse의 접근성 점수는 Chakra UI를 사용할 때마다 좋습니다.

드류: 굉장해 . 당신은 그들이 서버 측 렌더링을 사용하고 있으며 당신이 무엇을 가지고 있다고 언급했습니다. 넥스트나 개츠비 같은 것들, 그리고 내가 가지고 있는 것들은 전혀 문제가 되지 않죠, 그렇죠? 그것들과 함께 차크라를 사용할 때 주의해야 할 장애물은 없습니까?

마이크: 아, 아니. 별말씀을 요. 나는 그것을 사용하지 않았다. 저는 Next.js에 집중하는 경향이 있습니다. 저는 Gatsby나 다른 SSR 도구에 연결하지 않았습니다. 그러나 프레임워크가 사용하는 것을 차단하는 요소가 없는 한 괜찮을 것입니다.

Mike: React의 경우 Chakra는 컨텍스트 API 공급자를 제공합니다. 예를 들어 내 Next.js 앱에서... Next.js에는 애플리케이션의 모든 페이지를 감싸는 밑줄 앱 JS 또는 TS 파일이 있습니다. 거기에 테마 공급자를 연결하기만 하면 Chakra가 나머지 작업을 수행하고 모든 곳에서 사용할 수 있게 됩니다. Next.js에 추가하는 데에는 장애물이 없습니다. 하지만 차크라도 마찬가지라고 생각합니다.

Drew: Chakra는 TypeScript를 사용합니까? 나는 그것을 믿는다, 그렇지?

마이크: 지원합니다. 네.

드류: 지원합니다. 이는 이미 프로젝트에서 TypeScript를 사용하는 사람들에게 큰 장점입니다. 사람들이 이미 TypeScript를 사용하고 있지 않다면 그에 대한 단점이 있습니까?

마이크: 그렇게 생각하지 않습니다. 내 모든 프로젝트에서 기본적으로 TypeScript를 사용하고 Echobind도 마찬가지입니다. 하지만 개인적인 차원에서 일을 할 때 저는... TypeScript를 뿌리는 것을 좋아합니다. Typescript는 정적 유형을 생성하여 오류를 줄이는 데 매우 유용합니다. 그러나 그것에 대한 지식에 따라 TypeScript가 실제 장애물이 될 수 있는 캐리어가 있습니다.

Mike: 제가 사용하는 TypeScript의 최소 기준은... 기본 타이핑으로 TypeScript에서 많은 가치를 얻을 수 있기 때문에 제가 사용하는 TypeScript의 엄격함은 상당히 낮습니다. 그것은 많은 일반적인 사고를 예방할 것입니다. 고급 타이핑에 들어갈 때 그 내용이 매우 편안하지 않으면 속도가 느려지고 좌절할 수 있습니다.

Mike: Chakra와 TypeScript에 대해서도 마찬가지입니다. 나는 프로젝트를 실제로 구체화하고 안정화할 때까지 최소한 초기에는 약간의 TypeScript를 사용하는 경향이 있습니다. 그러나 TypeScript를 사용하거나 사용하지 않고 Chakra를 사용하는 데 문제가 없습니다. 그것은 훌륭합니다. 나는 그것을 좋아하지만 당신은 확실히 그것 없이도 사용할 수 있습니다.

드류: 네. TypeScript를 사용하면 말씀하신 대로 몇 가지 유형만 사용하여 80%의 이점을 얻을 수 있습니다. 토끼굴로 너무 깊이 들어가면 대부분 TypeScript인 스크립트로 끝납니다. 그런 다음 약간의 JavaScript가 맨 아래에 있습니다.

Mike: 아니면 올바른 타이핑 방법을 찾는 데 너무 많은 시간을 할애하여 뇌가 폭발합니다. 그것이 당신이 어떤 또는 알려지지 않은 것을 넣는 방법입니다. 당신은 그것을 바로 가기. 나는 그런 경우에 옹호합니다. 무언가를 완료하는 데 너무 많은 시간이 걸린다면 당길 수 있는 레버가 있습니다.

Drew: Chakra 문서는 다음과 같이 정말 잘 나온 것 같습니다. 각 구성 요소에 대한 개요가 포함되어 있습니다. 그런 다음 해당 구성 요소를 구현할 때 고려한 설계 고려 사항에 대한 모든 기술 정보를 매우 유용하게 포함합니다. 프론트 엔드 엔지니어로서 대단한 일이라고 생각합니다. 그들은 내 언어로 말하고 있습니다. 이해 했어요. 구성 요소가 약간 아래에서 수행하는 작업을 알고 있습니다.

Drew: 그것은 단지 내 관점에서, 내가 작업하고 있는 실제 프로젝트 없이 문서를 탐색하는 것입니다. 실제로 프로젝트에서 작업 중이고 그 작업의 깊숙한 곳에서 작업할 때 문서만 유지됩니까? 그것이 보이는 것만큼 유용합니까?

마이크: 오 예. 전적으로. 제 관점은 조금 다릅니다. 내부에서 무슨 일이 일어나고 있는지 항상 알 필요는 없지만 일반적으로 유추할 수 있다고 생각합니다. 내가 상자 구성 요소를 보고 있다면 지금은 문서를 보고 있는 동시에 재충전을 위해 이야기하고 있습니다. 상자 구성 요소를 보면 "알았어. 그것은 아마도 기본적으로 div 일 것입니다. 그래디언트 속성에서 전달되는 것을 봅니다."

Mike: CSS를 번역하는 그들의 마법을 완전히 이해하지 않고도 내부에서 무슨 일이 일어나고 있는지 어느 정도 이해할 수 있습니다. 소품을 CSS로 번역합니다. 그러나 문서는 매우 선형적이라는 점에서 훌륭합니다. 매우 일관성이 있습니다. 예제와 함께 모든 것을 나열합니다. 약간의 복사 및 붙여넣기.

Mike: 정말 좋은 공백을 사용하기 때문에 페이지를 보는 것이 압도적으로 보이지 않습니다. 필요한 것을 쉽게 찾을 수 있습니다. 그들의 검색도 훌륭합니다. 그들의 검색은 도움이 됩니다. 90%의 시간, 나는 그것이 내가 거기에 가는 이유라고 생각합니다. 거기에 들어가서 구성 요소가 무엇인가를 수행하는지 확인할 수 있습니다. 그것은 일반적으로 않습니다. 그리고 내가 몰랐던 유용한 다른 것을 우연히 발견했습니다. 또는 몇 가지 원칙에 대해 나 자신을 새로 고칩니다. 나는 항상 여기에서 내가 필요한 것을 거의 찾을 수 있습니다.

Drew: 문서를 둘러보면서 유일하게 마음에 들지 않는 점은 문서에 있는 광고의 수였습니다. Chakra UI Pro의 상업적 제공에 대한 모든 페이지.

마이크: 나는 그들을 본 적이 없습니다. 흥미로운. 나 그거 봤었 어. 나는 그것을 확실히 보았다. 하지만 지금은 보이지 않습니다. 오 예. 괜찮아. Chakra UI Pro가 있습니다. 정신적으로 걸러낸 것 같아요. 나는 당신을 듣습니다. 적어도 그것은 너무 크지 않고 당신의 얼굴에 있습니다.

드류: 너무 크지 않아요. 잘못된 위치에 있습니다. 그것은 당신이 정보를 찾는 곳입니다. 나는 그들이 그것을 한 이유라고 생각합니다. 생태계와 프로젝트 주변의 모든 것을 고려할 때 언급할 가치가 있는 것은 전문적인 구성 요소 세트가 있다는 것입니다. 이는 Tailwind UI에 있는 일부 항목과 동일하다고 생각합니다. 마케팅 페이지 및 여기에는 구성 요소 및 페이지 및 전체 페이지 및 레이아웃 및 사물의 구성 섹션이 있습니다. 그 당신은 차크라의 제작자로부터 구할 수 있지만 상업적으로 제공됩니다.

마이크: 네. 지금 간단히 살펴보기만 하면 됩니다. 이들 중 일부는 실제로 사용 가능합니다. 또는 차크라 템플릿과 같은 버전을 무료로 사용할 수 있습니다. Chakra 템플릿은 Chakra Pro 또는 오픈 소스 경쟁업체에 대한 오픈 소스 솔루션인 것 같습니다. 나는 당신이 이것을 지불함으로써 톤을 얻을 것이라고 확신합니다. 전문적인 비용을 지불해야 하는 경우 Chakra Pro가 매우 강력하고 합리적인 가격으로 보입니다. 프로젝트에는 몇 가지 옵션이 있습니다.

드류: 네. 주변에 생태계가 꽤 형성되어 있는 것 같습니다. 프로젝트가 얼마나 오래 진행되었고 다음이 무엇인지 아십니까? React 커뮤니티에서 널리 사용되고 있습니까?

마이크: 예라고 말하고 싶습니다. 어느 정도인지 모르겠습니다. 요즘 Tailwind와 Chakra의 시장 점유율이 어느 정도인지 궁금합니다. 나는 차크라가 비교적 최근에 상을 받았다는 것을 알고 있습니다. 커뮤니티에 가장 영향력 있는 프로젝트에 대해 GitNation React Award를 수상했습니다. 나는 그것이 꽤 크고 꽤 잘 받아들여졌다고 말하고 싶다. 좋은 이유가 있습니다. 사람들은 확실히 그것을 즐기고 있습니다. 나는 유일한 사람이 아니예요.

Drew: 프로젝트에 종속성을 가져올 때 항상 생각할 가치가 있는 한 가지는 해당 종속성을 업데이트해야 할 때 발생하는 일입니다.

마이크: 네.

Drew: 차크라는 항상 개선되고 있다고 생각합니다. 일단 가져와서 빌드하면 특정 버전에서 잠긴 상태로 두는 경우입니까? 아니면 업데이트를 유지하는 것이 일반적으로 안전한가요? Chakra 업데이트에 따라 사이트의 디자인과 요소가 변경되지 않는 측면에서 상대적으로 안정적입니까?

마이크: 지금까지였습니다. 응. 주로 개발의 진행 때문이라고 말하고 싶습니다. 그들은 지금 버전 1.6.3에 있습니다. 몇 달 전에 그들은 0에서 1로 바뀌었습니다. 그것은 그들이 획기적인 변화를 가졌던 유일한 시간이었습니다. 그 이후로 그들은 계속해서 기능 릴리스와 버그 수정을 해왔습니다.

Mike: 지난 몇 달 동안 모든 것이 추가되었습니다. 추가 및 수정 사항. 주요 변경 사항은 없습니다. 로드맵이 어떻게 생겼는지 모르지만 앞으로도 그럴 것이라고 생각합니다. 이 마이너 버전 중 하나를 업그레이드할 때마다 문제가 없습니다. 나는 그것에서 무언가가 깨지는 것을 본 적이 없습니다. 그러나 1.0이 나왔을 때 몇 가지 주요 변경 사항이 있었습니다. 그래도 비극적이었는지는 기억나지 않는다.

Drew: 번들 크기와 트리 쉐이크 차크라의 능력이 어떤 상황인지 아십니까? 프로젝트에 많은 무게를 추가합니까 아니면 물건을 사용할 때만 가져옵니까?

Mike: 솔직히 기억이 잘 나지 않습니다. 나는 아마 그것을 알고 있어야합니다. 나는 그것이 많은 무게를 추가하는 것을 눈치 채지 못했습니다. 주로 구성 요소를 개별적으로 가져오기 때문입니다. 모든 차크라 또는 이와 유사한 것을 가져오지 않습니다. 트리 쉐이킹을 지원하는 라인에 있다고 말하고 싶지만 테스트를 해보지는 않았습니다. 지금까지 나는 그것에서 특별히 나오는 엄청난 무게를 가진 물건을 가지고 있지 않았습니다.

드류: 네. 그것은 항상 중요한 고려 사항입니다. 그렇지 않습니까?

마이크: 네.

Drew: 바로 뛰어들어 프로젝트에 사용하기 전에 차크라 UI에 대해 알아야 할 다른 것이 있습니까?

마이크: 아니요. 훌륭합니다. 꽤 활발한 커뮤니티도 있습니다. 업데이트를 자주 봅니다. 지금 문서를 보고 있고 전에 보지 못했던 구성 요소를 보고 있습니다. 많은 기능 추가가 진행 중인 것을 알 수 있습니다. 대단해.

드류: 네. 좋아요. 미리 보기 릴리스인 Cut Into The Jamstack이라는 책이 있습니다. 현재 베타 릴리스입니다. 당신은 그것을 자체 출판하고 있습니다. 맞나요?

마이크: 네. 응. 나는. 테크니컬 북에 대한 나의 첫 번째 시도였다. 저는 그냥 형식적인 것 같은 것에 전념하지 않고 그것을 공개하고 싶습니다. 나는 또한 특히 물건을 만들 때 격식을 차리지 않는 것을 좋아하는 사람입니다. 그렇게 함으로써 내 방식대로 할 수 있는 능력을 줍니다.

Drew: 이 책은 말 그대로 SaaS(Software as a Service) 앱을 구축하는 과정을 독자에게 안내합니다.

마이크: 네.

Drew: Jamstack의 모든 것. 왜 지금 이 글을 쓰기로 결정하고 이 책에서 이러한 접근 방식을 취하기로 결정하셨습니까?

마이크: 좋은 질문입니다. 저는 이제 20년 정도 코딩을 해왔고, 얼마 전에 책을 쓰려고 시도했는데 모양이 제대로 나오지 않은 것 같습니다. 저는 제 경력에서 더 많은 지식을 공유하고 싶은 시점에 있습니다. 나는 그것을 수년 동안 사용해 왔으며 실제로 더 많이 사용하고 다른 사람들을 돕고 싶은 가려움을 느낍니다.

Mike: 작년 10월경에 저는 이것을 가지고 있었습니다. 저는 제품인 무언가를 거기에 내놓고 싶었습니다. 전자책은 시작하기에 정말 좋은 방법이라고 느꼈습니다. 저는 Next.js와 여러분이 할 수 있는 일에 정말 열정적입니다. 저는 Jamstack이라는 용어를 사용하고 Next.js를 Jamstack의 일부로 간주합니다. 왜냐하면 기본적으로 정적 사이트 생성이 있기 때문입니다.

Mike: 하지만 제 생각에는 충분히 논의되지 않았거나 추가 설명을 사용할 수 있는 한 가지 방법은 소프트웨어를 사용하여 서비스 응용 프로그램으로 소프트웨어를 구축하는 것입니다. Jamstack은 웹사이트만을 위한 것이 아니기 때문입니다. 정적이고 빠르고 SEO 친화적이기 때문에 콘텐츠 기반 웹 사이트에서 정말 잘 작동합니다.

Mike: 하지만 거기에는 풍부한 기능이 있습니다. 특히 Vercel이 어제 Next.js 컨퍼런스를 갖고 거기에서 점점 더 많은 놀라운 기능을 출시하고 있었던 Next.js에는 더욱 그렇습니다. 저는 SaaS(Software as a Service)를 만드는 데 열정적입니다. 소프트웨어 웹사이트는 훌륭하지만 소프트웨어는 일을 하기 위한 것입니다.

Mike: 나에게 이 스택은 SaaS(Software as a Service) 개발의 미래입니다. Ruby on Rails가 나왔을 때를 떠올리게 합니다. 말하자면 진화였다. 수동으로 수행해야 했던 많은 작업을 자동화하고 단순화했습니다. 개발 속도를 높이고 품질을 높였습니다.

Mike: Next.js와 Jamstack, Vercel 및 Chakra UI는 모두 사용자를 위해 많은 것을 단순화하는 것을 생성하고 있습니다. Next.js는 속도 관련 문제 및 접근성 관련 문제를 많이 단순화합니다. 내장화. 이것이 전부입니다. 라우팅은 당신을 위해 수행됩니다. 클라이언트 측 또는 서비스 측 라우팅에 대해 걱정할 필요가 없습니다. 자동입니다. Chakra UI는 접근성과 테마로 이를 수행합니다. 이러한 도구를 결합하면... 개발자 경험이 정말 좋아지고 모든 것이... 정말 소프트웨어를 만들 수 있는 자유를 줍니다.

마이크: 귀하의 질문에 대답하기 위해. 제가 지금 책을 낸 이유는 제가 정말로 무언가를 내고 싶어 하고 Jamstack 생태계가 결실을 맺기 시작하고 성장하기 시작하는 시기이기 때문입니다. 또한 Jamstack에 더 많은 코드를 작성할 수 있는 기회를 주었습니다.

Drew: 말씀하신 것처럼 웹사이트와 일반적으로 가벼운 웹사이트에 대해 생각할 때 Jamstack이라는 아이디어에 쉽게 합류할 수 있다고 생각합니다. 그러나 이 접근 방식을 사용하여 완전한 웹 애플리케이션을 구축할 수 있는 방법에 대해 다음 단계로 넘어가면 훨씬 더 어렵습니다. 서버 측 사고 방식에 익숙해지면 극복하는 것이 더 큰 장애물이라고 생각합니다.

마이크: 네.

Drew: 보기에는 훨씬 더 큰 점프입니다. 알겠습니다. 내 인증을 서비스에 넣을 수 있습니다.

마이크: 네.

Drew: ... 그리고 나는 할 수 있습니다... 독자들을 위해, 당신 책에 대한 독자의 관점에서, 이 예제를 살펴보고 구축하고, 당신과 함께 따라가면 아마도 도움을 주기 위해 그 장애물을 극복하는 좋은 방법일 것입니다. 천천히 마음을 바꿔, 알았어. 이것이 내가 이 모든 일을 할 수 있는 방법이지만 Jamstack에서. 동의하시겠습니까?

마이크: 네. 그것이 내가 바라는 것입니다. 나는 그렇게 생각한다. 그것이 정말로 의도한 것입니다. 저는 최근에 다음과 같은 강연에 서명했습니다. 컨퍼런스 강연은... 주제에 대한 동기와 이 책에서 가르치기로 결정한 방법 중 하나는 제가 여러분에게 하나의 프로그래밍 언어를 가르칠 수 있다는 것입니다. 프레임워크이지만 경험이 풍부한 개발자라면 누구나 문서화, 인터넷 검색, 스택 오버플로 사용에 능숙하기 때문에 스택을 직접 소개하는 것이 더 좋습니다. 내가 당신에게 그것을 가르치는 데 왜 시간을 낭비하겠습니까?

Mike: 스택과 스택으로 할 수 있는 작업에 대해 빠르고 자세히 알려드리고자 합니다. 각각의 개별 조각에 대한 훌륭한 점을 선택하게 될 것입니다. NextOFF와 프리즈마. Next.js와 차크라. 몇 번의 클릭을 절약할 수 있도록 문서에 연결해 드리겠습니다. 그러나 대화식 예제를 통해 이러한 조각이 서로 연결되는 방식을 보게 될 것입니다. 어려운 부분도 이해하게 될 것입니다.

Mike: 예를 들어, 제가 심층적으로 다룰 한 가지는 비동기식 다중 파일 업로드를 위해 구축 중인 이 기능입니다. Next.js에는 프론트 엔드와 백엔드가 있습니다. 프론트 엔드의 전면과 프론트 엔드의 후면에 있지만 그 비유를 사용하면 React 레이어가 있습니다. 그런 다음 노드 계층이 있습니다. 이러한 API 경로가 있습니다.

Mike: 그걸로 다중 파일 업로드를 하고 서비스를 사용하고 싶다면 책에서 Cloudinary를 사용합니다. 그러나 이미지 및 미디어 업로드에 API 서비스를 사용해야 하는 경우에는 거기에 많은 감동적인 부분이 있습니다. 사용자가 상호 작용하는 클라이언트 측이 있습니다. Cloudinary 또는 다른 공급자에 대한 API 요청이 있습니다. 그러나 효율적으로 만들려면 여러 API 요청을 해야 합니다. API 호출이 필요한 Cloudinary에 대해 일부 서명을 수행해야 합니다.

Mike: 그 표시를 잡고 업로드를 수행해야 합니다. 업로드는 브라우저에서 이동하여 API를 우회하고 Cloudinary로 직접 이동합니다. 그런 다음 프런트 엔드의 프런트 엔드 백엔드를 사용하는 데이터베이스에 저장해야 합니다. 많은 부분이 있고 Next.js가 있습니다. Next.js 커뮤니티에는 아직 이에 대한 오픈 소스 플러그인이 없습니다. 다른 사람들이 이것을 가질 것이기 때문에 앱을 구축하고 하나에 넣을 수 있는 앱에서 지금 추출할 수 있습니다.

Mike: 어쨌든, 그것은 단지 그것을 말하는 것뿐입니다. 저는 그것이 사람들에게 가르치는 것이 정말로 가치 있는 것이라고 생각합니다. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. 응. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

드류: 훌륭합니다.

Mike: I've got another one coming up in probably a couple of weeks. 응. 응. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. Create, Read, Update, Delete. So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. 그게 다야

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. 마이크. 이별의 말은 없었나요?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.