웹 개발3분
Astro 프레임워크
정의
콘텐츠를 HTML로 먼저 만들고, 필요한 곳에만 JavaScript를 더하는 프레임워크입니다.
- MDX
- 빌드
- HTML
장바구니 버튼만 아일랜드로 따로 활성화합니다.질문 1
Why
문단 구분 없이 이어지는 긴 글, 표도 그림도 없는 설명. 세션이 끝나면 어디서 봤는지 다시 찾기도 어렵습니다. 이해한 것 같은데 남는 것이 없었습니다.
답변을 도식과 표가 있는 HTML 페이지로 받으니 훨씬 잘 읽혔습니다. 대신 페이지마다 모양이 제각각이고, 만든 산출물은 여기저기 흩어졌습니다.
공부한 개념을 같은 틀과 같은 컴포넌트로 모으고, 읽다가 생긴 질문은 그 문장에 바로 남깁니다.그렇게 만든 것이 이 프로젝트입니다.
Inline Comments
궁금한 문장은 선택해서 질문만 남기고 계속 읽습니다. 다 읽은 뒤 모아 둔 질문을 AI에게 넘기면, 답변은 그 문장 옆으로 돌아옵니다.
Astro는 페이지를 빌드 시점에 HTML로 미리 만들어 둡니다. 그래서 첫 화면이 빠르게 뜹니다. 장바구니 버튼처럼 반응이 필요한 부분만 아일랜드라는 작은 단위로 따로 활성화＋ 질문 남기기합니다.
상품 설명과 사진은 그대로 HTML로 남고, JavaScript는 필요한 곳에서만 내려받습니다＋ 질문 남기기. 덕분에 읽는 데 필요 없는 코드를 기다리지 않아도 됩니다.
콘텐츠 컬렉션은 Markdown과 MDX 파일을 하나의 목록처럼 다루게 해 줍니다.
본문에서 궁금한 문장을 드래그해 선택합니다.
Features
노트 하나가 MDX 파일 하나입니다. 파일을 추가하면 목록과 상세 페이지가 자동으로 생깁니다.
지금까지 0개의 노트
제목·영문명·태그로 검색하고, 카테고리로 걸러 봅니다. 목록에서 / 키를 누르면 바로 검색창으로 갑니다.
빌드할 때 HTML로 미리 만들어 둡니다. JavaScript는 질문 기능처럼 필요한 곳에만 붙습니다.
모든 노트가 같은 순서로 쓰여서, 처음 보는 개념도 어디를 읽어야 할지 압니다.
색과 서체는 토큰 몇 개로 정해집니다. 밤에는 다크 모드로 읽습니다.
Components
흐름은 Flow, 구성 관계는 Hub, 흔한 오해는 Callout. 매번 그림을 새로 그리지 않고 같은 컴포넌트를 다시 씁니다. 아래는 노트 본문에 쓰는 실제 컴포넌트입니다.
<Flow
steps={['질문', { label: '시각화', desc: '아티팩트' }, '아카이빙']}
highlight="시각화"
/><Hub
center="개념 노트"
centerDesc="공부한 개념 한 장"
items={['정의', '핵심 요약', '도식', '질문']}
/><Callout type="warn" title="오해 한 줄 요약">
왜 틀렸는지, 실제로는 어떤지 설명합니다.
</Callout>풀이 예시·사례 비교·이해 확인 같은 학습 컴포넌트도 컴포넌트 검토 페이지에서 다듬고 있습니다.
Process
질문 한 줄에서 시작해, 읽을수록 답이 더해지는 노트가 됩니다. 반복되는 일은 명령과 템플릿에 맡기고 내용에만 집중합니다.
“○○에 대해 설명해줘.” 답변은 터미널이 아니라 노트로 받습니다.
명령 한 줄이면 섹션 순서가 잡힌 MDX 파일이 생깁니다.
정의 한 줄, 핵심 2~4개. 흐름은 Flow로, 구성은 Hub로, 오해는 Callout으로.
draft: false로 바꾸고 빌드하면 검색과 카테고리 필터에 바로 잡힙니다.
문장마다 남긴 질문과 답변이 노트 옆에 함께 남아, 다음에 읽을 때 더 쉬워집니다.