GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
변화는 피할 수 없으며, 때때로 일어납니다. 지난 몇 년 동안 우리에게 강요된 변화가 있었고, 우리가 직접 통제할 수 없었던 변화들이 있었습니다. 그러나 Layer0/Edgio에서, 최근의 변화는 우리 자신의 제작 중 하나이며, Edgio 문서의 완전한 재 작성과 재 설계가 매우 필요했습니다.
이 정밀 검사는 기초적이고 제어 가능하도록 의도되었습니다. 사실, 우리는 전에 해본 적이 없는 것처럼 문제를 우리 자신의 손에 맡기고 싶었습니다. 그래서 React 베타 문서에서 크게 영감을 받은 우리는 기본 리포지토리의 인스턴스를 만들고 특정 사용 사례에 맞게 미세 조정함으로써 거인들의 어깨에 착수했습니다.
먼저 해야 할 일
첫 번째 단계는 Reactifux Discord 채널이었습니다. 간단히 말해서, 커뮤니티는 React의 베타 문서 저장소를 식별하는 데 도움을 주었습니다.
헤드 스타트로서 React 베타 리포지토리
우리는 며칠 동안 React docs 베타 사이트가 어떻게 만들어졌는지, 어떤 기술을 사용하는지, 그리고 이 스택을 기반으로 어떻게 활용하고 구축할 수 있는지 연구했습니다. MDX와 Next.js에 대한 우리의 예감은 옳았고 우리는 헤드 스타트를 발견했습니다.
기술
다음은 사용되는 몇 가지 주요 기술입니다.
- MDX: 임베디드 React 컴포넌트를 사용한 기능 마크다운
- next.js: 리액트 프레임워크
- 웹팩: 모듈 번들러
- 스타일 구성 요소: 스타일
- 알골리아: 검색
- PRISM: 코드 구문 강조 표시
MDX : MDX는 구성 요소 시대에 대한 Markdown의 확장 된 형태입니다. 마크다운을 사용하면 모든 마크다운 문서에 JSX를 임베드할 수 있어 마크다운을 통해 콘텐츠 작성을 새로운 수준으로 끌어올릴 수 있습니다.
우리는 MDX, 비밀 요소, 프런트 엔드 문서, 스타일 가이드, MDX의 부상과 같은 기사를 통해 MDX가 무엇이고 얼마나 강력한지 이미 알고 있었습니다. 이것은 우리가 만든 일부 사용자 정의 부품의 길을 열었습니다.
next.js: MDX와 Next.js를 페어링하는 것은 새로운 것이 아니므로 첫 번째 본능은 공식 문서나 이 블로그 게시물을 읽는 것이었습니다. next.js 페이지에 마크다운을 가져오는 방법은 몇 가지가 있습니다. 예를 들어 로컬 마크다운 문서를 가지고 getStaticProps, getStaticPaths 또는 getServerSideProps 중 하나에 있는 remark 및 remark-html과 같은 패키지를 사용하여 HTML로 변환하는 것과 같습니다.
또 다른 접근법은 `.md’ 또는 `.mdx’ 파일을 @next/mdx 패키지를 사용하여 Next.js 페이지로 직접 정의하거나, 낮은 수준의 것들을 다루고 싶다면 React의 팀 접근법과 DIY를 따르는 것입니다.
웹팩: next.config.js (또는 next.config.mjs)는 Next.js 서버 및 빌드 단계에서 사용됩니다. 여기서 mdx 파일 확장자를 pages 디렉토리에서 읽어 Next.js 페이지로 로드하는 것과 같은 고급 사용 사례를 위해 Next.js를 구성할 수 있습니다.
웹팩은 로더를 사용하여 파일을 전처리합니다. 가장 일반적인 사용 사례 중 하나는 트랜스퍼링이며, 그러한 일반적인 패키지 중 하나는 바벨 로더 (Babel을 사용하여 ES2015+ 코드와 트랜스파일을 ES5로 로드)입니다. Next.js에서 Webpack과 함께 `.mdx’ 파일을 로드하려면 @mdx-js/loader를 사용합니다.
@mdx-js/loader는 리마크/재입력 플러그인의 풍부한 생태계를 통해 마크다운을 HTML로 미세하게 변환할 수 있습니다.
스타일 구성 요소: Next.js에서 CSS를 작성하는 방법은 많지만 스타일 구성 요소를 선택했습니다. Styled Components를 사용하면 보다 교차 배치되고 모듈화되고 결합된 방식으로 컴포넌트 스타일을 작성할 수 있습니다. Styled Components에 대한 자세한 내용을 보려면 React에서 Styled-Components 사용 방법을 알아보거나 Styled-components Happy Path를 살펴보십시오.
Algolia: Algolia AutoComplete를 기반으로 구축된 DocSearch v3의 최신 버전으로 업그레이드하여 데스크탑과 모바일 장치 모두에서 보다 원활한 환경을 제공하는 접근성 및 응답성을 향상시켰습니다. 그와 함께 Algolia 크롤러는 검색을 수행 할 때 가장 관련있는 정보를 추출합니다.
Prism: Prism은 잘 테스트되고 신뢰할 수 있는 코드 구문 형광펜입니다. 시작하는 것이 더 쉬울 뿐만 아니라, 풍부한 플러그인 생태계를 가지고 있으며, 테마와 같은 작업에 대한 합리적인 기본값으로 확장 가능합니다.
기능
재설계는 액면가에서 외형적으로 크게 변경되지만 다음과 같은 다른 기능이 있습니다.
중요한 세부 정보가 있는 새 홈페이지
Layer0/Edgio 플랫폼의 네 가지 기둥으로 시작하여 Layer0/Edgio가 제공하는 더 많은 기능으로 방법을 구축하십시오.
테마 지정
클릭 한 번으로 테마 간에 전환할 수 있습니다. 라이트 모드에서 다크 모드로 또는 그 반대로 이동하거나 운영 체제에서 결정하도록 하십시오.
향상된 탐색 기능
메뉴(왼쪽)와 목차(오른쪽)의 두 가지 주요 탐색 모드가 더 나은 탐색 및 스캔을 위해 새롭게 디자인되었습니다. 아래쪽에 있는 새로운 페이지 매김 컨트롤을 사용하면 다음에 오는 안내선과 앞에 오는 안내선을 알 수 있습니다.
향상된 코드블록
PrismJS를 사용하면 구문 강조 표시와 사용자 정의가 매우 간단합니다.
향상된 검색
Algolia 검색은 v3로 업그레이드되어 결과에 대해 인덱싱되는 콘텐츠를 훨씬 더 많이 제어할 수 있습니다. 이것은 모바일 장치에서도 작동합니다.
하지만 잠깐, 더 있습니다.
React 베타 문서 리포지토리는 많은 일들이 일어나고 있으며, 우리는 이곳에서 오픈 소스의 힘을 활용할 수 있었습니다. 목차, 문서 페이지 매기기, 빵 부스러기, SEO 등과 같이 상자에서 거의 꺼낼 수 있는 것들이 있습니다. 이 중 일부는 상황에 더 잘 봉사하기 위해 조정했으며 일부는 여전히 탐구하고 있습니다.
기여
우리에게 이것은 새로운 문서는 올바른 방향으로 나아가는 단계이며 새로운 시작의 시작입니다. 개발자 경험을 저해하지 않으면서 웹 사이트를 더욱 빠르고 안전하게 만들 수 있도록 지원하기 위해 여러분도 이 여정에 동참해 주시기 바랍니다. Layer0 개발자 문서의 소스 코드는 GitHub의 오픈 리포지토리에 있으며 피드백과 풀 요청을 환영합니다. 오타나 더 나은 설명 방법을 찾았다면 풀 요청을 제출하거나 문제를 제출하십시오! 또한, 우리의 기여 가이드라인을 참조하십시오.
