jargons.dev 시리즈의 두 번째 기사에 오신 것을 환영합니다!

시작해 봅시다!

초기 커밋에 이어 "포크 스크립트" 작업을 시작했습니다(이것이 무엇인지 궁금하시죠? 나중에 시리즈에서 알게 되겠죠?). 하지만 고백해야 할 점은 커밋 기록에서 찾을 수 있듯이, jargons.dev 작업을 잠시 쉬었다(3개월). 이 시간 동안 나는 프로젝트에 아주 좋은 잠재의식적 성찰을 할 기회를 가졌습니다.

성찰의 기회

저는 잠시 동안 jargons.dev 작업을 중단했습니다. 의도한 것은 아니지만 Hearts 작업에 너무 몰입해서 jargons.dev에 대해 생각조차 하지 못했습니다. 글쎄, 그 달 동안 새해가 왔고(물론 새로운 목표도 함께), 나는 또한 몇 가지 새로운 기술을 경험하고 접하게 되었습니다. 한 가지 기술이 눈에 띄었는데 바로 Astro였습니다.

Astro는 jargons.dev에 공감합니다.

지난 1월 '문서를 통해 새로운 기술을 배운다'는 목표를 세웠고, Astro에 대한 좋은 소식을 듣고 이를 시작하게 되었습니다.

3월을 앞둔 저는 완전히 다른 사이드 프로젝트(wp-theme)를 작업하고 있었습니다. Eddie Jaoude YT 스트림을 보고 있었는데 Eddie에게 이 사실을 알렸지만 그의 반응으로 인해 다시 작업을 시작하게 되었습니다. 전문 용어.dev

사이드 프로젝트가 꽤 많은데... 어떤 프로젝트인지 모르겠습니다.

이 말은 제가 정말 열심히 생각하게 만들었기 때문에 많은 사이드 프로젝트를 모두 중단하고 즉시 중요한 일부 프로젝트에 집중하기로 결정했고, jargons.dev가 쉽게 마음에 떠올랐습니다.

이 시점에서 저는 이미 Astro에 어느 정도 익숙했습니다. 매우 간단한 파일 시스템, i18n 지원, 훌륭한 SEO(프로젝트에 중요)를 갖춘 SSG, 성능, 성능을 갖춘 콘텐츠 기반 웹 앱을 위한 프레임워크입니다. 섬이 포함된 ReactJS와 같은 다른 프런트엔드 라이브러리 지원(특히 이 라이브러리가 마음에 듭니다) 그것은 jargons.dev를 구축하기 위해 하늘에서 만들어진 도구였습니다.

글쎄, 다음 주말에 빨리 작업에 착수했습니다. 프로젝트의 기본 사전 부분 작업을 해야 했습니다.

기본 사전

아래 명령을 실행하고 프롬프트를 따르는 것만으로 간단하게 새 Astro 프로젝트를 초기화했습니다...

npm create astro@latest

스타일링을 위해 tailwindcss 통합도 추가했습니다. 콘텐츠를 위한 mdx 통합; 각각 명령을 실행하여 구성하는 것도 매우 쉬웠습니다.

npx astro add tailwind
npx astro add mdx

나는 계속해서 다음 작업을 완료했습니다.

• 정적 검색 양식을 사용하여 상용구 홈페이지를 만들었습니다.
• src/pages/word 디렉터리를 사전의 각 단어를 mdx 파일로 보관해야 하는 디렉터리로 사용하도록 일시적으로 해결되었습니다.
• src/pages/word/ 디렉토리 내부의 단어에 대한 모든 .mdx 파일의 콘텐츠가 frontmatter를 사용하여 렌더링될 수 있는 프레임 역할을 하는 word.astro 레이아웃을 구현했습니다.
• 또한 단어 레이아웃 탐색 모음에 정적 미니 검색 양식을 추가했습니다.

이 기능을 사용하면 이미 jargons.dev/word/[word] 경로에서 사전 단어를 볼 수 있습니다. 이는 tuple.mdx 파일이 src/pages/word/디렉토리에 있을 때 jargons.dev/word/tuple

홍보

특기: 기본 사전 구현 #4

바블비 게시일: 2024년 3월 24일

이 풀 요청은 AstroJS를 사용하여 기본 사전 앱을 구현합니다.

변경사항

• 새로운 천체 프로젝트 시작
• 홈페이지 생성됨
• 2개의 레이아웃 구현
  • 기본 - 모든 페이지 및 레이아웃에 대한 기본 기본 래퍼
  • 단어 - 단어 페이지에 사용되는 레이아웃
• 홈페이지와 Word 레이아웃에 정적 검색 양식 트리거가 구현되었습니다.

스크린샷

홈페이지

단어 페이지

GitHub에서 보기