저번 글에서는 Astro 기본 템플릿으로
블로그를 설치하고 구조를 파악하는 과정까지 정리했었죠.
이번 편에서는
astro.build에 있는 테마를 직접 가져와서 적용하는 과정을
기록해볼게요.
중간에 오류도 두 번이나 만났는데,
해결하는 과정까지 같이 남겨볼게요!
1. 원하는 테마 고르기
Astro 홈페이지 상단 메뉴에서
Resources → Themes(astro.build/themes)로 들어가면
다양한 테마들을 볼 수 있어요.
마음에 드는 테마를 클릭하면
상세 페이지로 이동하는데,
거기서 "Get started"를 누르면
해당 테마의 깃허브 저장소로 연결돼요.
깃허브 페이지에서 초록색 <> Code 버튼을 누르면
로컬 탭에 HTTPS 주소가 나오는데,
이 주소를 복사해두면 돼요.
2. git clone으로 테마 가져오기
작업할 폴더(temp1)를 새로 만들고,
그 폴더에서 커서AI 터미널을 열어 아래 명령어를 입력했어요.
| 명령어 |
git clone https://github.com/themefisher/pinwheel-astro.git .
|
맨 끝에 점(.)을 꼭 붙여줘야 현재 폴더 안에 바로 파일들이
풀려요.
실행하면 깃허브에서 봤던 파일이랑 폴더들이 그대로 설치되는 걸 확인할 수 있어요.
▲ pinwheel-astro 테마 저장소를 git clone으로 가져온 후 생성된 파일/폴더 구조
3. 첫 번째 오류 — astro 명령어 인식 안 됨
구조 확인 후 바로 npm run dev를 실행했는데, 이런 오류가 떴어요.
▲ 'astro'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램... 오류
💡 원인. git clone으로 가져온 저장소에는
node_modules가 포함되어 있지 않아요. 즉, 코드 파일만 받아온
상태라 실제로 실행에 필요한 패키지들은 아직 설치가 안 된 거예요. 그래서 먼저
패키지 설치부터 해줘야 해요.
4. 두 번째 오류 — 의존성 충돌
패키지 설치를 위해 아래 명령어를 실행했어요.
| 명령어 |
npm install
|
그런데 이번엔 또 다른 오류가 났어요.
의존성 트리를 해결할 수 없다는 ERESOLVE 오류였습니다.
▲ npm install 실행 시 발생한 ERESOLVE unable to resolve dependency tree 오류
이런 오류는 처음 보면 뭐가 문제인지 감이 잘 안 오는데,
이럴 땐 그냥 오류 화면을 통째로 캡처해서 AI에게 보여주고
어떻게 해결하면 되는지 물어봤어요.
AI가 알려준 해결책은 아래 명령어로 다시 설치하는 거였어요.
| 명령어 |
npm install --legacy-peer-deps
|
💡 Tip. --legacy-peer-deps 옵션을 붙이면
패키지 간 버전 요구사항이 살짝 안 맞더라도 예전 방식대로 관대하게 설치를
진행해줘요. 테마처럼 남이 만든 프로젝트를 가져올 때 패키지 버전 충돌이 종종
생기는데, 이럴 때 유용한 옵션이에요.
5. 설치 완료 후 실행 성공
설치가 무사히 끝나고 다시 npm run dev를 실행하니,
이번엔 정상적으로 개발 서버가 켜졌어요.
▲ pinwheel-astro 테마의 개발 서버가 정상적으로 실행된 화면 (Local http://localhost:4321/)
로컬 주소를 컨트롤 클릭하니
테마로 만든 블로그가 그대로 실행됐어요.
처음부터 하나하나 디자인하지 않고도,
원하는 스타일의 테마를 가져와서 시작할 수 있다는 게
이 방법의 가장 큰 장점인 것 같아요.
오늘의 정리
- 테마 페이지에서 "Get started" → 깃허브 저장소 → Code 버튼으로 HTTPS 주소 복사
- 테마 가져오기는
git clone [주소] .(마지막 점 꼭 포함) - git clone 직후엔 node_modules가 없어서 실행 오류가 나는 게 정상 — 먼저 npm install부터
-
의존성 충돌(ERESOLVE) 오류가 나면
npm install --legacy-peer-deps로 재시도 - 오류 메시지는 이해하려 애쓰기보다 그대로 캡처해서 AI에게 물어보는 게 훨씬 빠름
이렇게 해서 Astro로 블로그 뼈대를 잡고,
원하는 테마까지 적용하는 과정을 정리해봤어요.
다음엔 또 새로운 작업 기록으로 찾아올게요! 🙌
댓글 없음:
댓글 쓰기