Next.js 책을 실습하려다가 실습 깃허브가 다음과 같은 것을 발견했다.
수많은 예제 폴더 중 내가 쓰고 싶은 것은 05번째 managing-local-and-global-state 폴더의 boilerplate 폴더였기 때문에
해당 특정 폴더만 클론하고자 stackoverflow에서 방법을 찾았다.
참고한 stackoverflow 링크: How do I clone a subdirectory only of a Git repository?
답변 중 첫 번째 방법은 실습 코드 전체를 클론해온 다음 선택한 폴더에 들어가 작업만 하는 방식으로, 실제 내 레포에 작업된 코드를 커밋하면 작업 중인 폴더뿐만 아니라 전체 실습 코드가 모두 들어갔다.
그래서 두 번째 답변(추천 수 약 1100개)을 참고해보니 내가 실습하고자 하는 특정 폴더만 개인 레포에 커밋할 수 있었다.👏
작성한 명령어는 다음과 같다.
실습 레포 (전체 코드): https://github.com/hanbit/practical-next.js
내가 클론해온 특정 폴더: 실습 레포의 /tree/main(main 브랜치의)/05-managing-local-and-global-states-in-nextjs/boilerplate 경로
cmd에 명령어 작성하기
(윈도우입니다)
git clone -n --depth=1 --filter=tree:0 https://github.com/hanbit/practical-next.js
'git clone -n --depth=1 --filter=tree:0' 뒤에 한 칸을 띄우고 실습 전체 레포의 주소를 넣었다.
참고로 stackoverflow의 답변에는 tree:0 뒤에 '\'가 포함되어 있었는데 실제 넣어보니 에러가 나서 '\'를 빼고 다시 작성했다.
cd practical-next.js
1번 명령어를 치면 실습 코드 전체를 '클론'해오는 게 아니라 폴더만 만들어지는 것 같다. 그래서인지 cd로 해당 폴더(= 1번 명령어의 맨 뒤 경로)로 이동해준다.
git sparse-checkout set --no-cone 05-managing-local-and-global-states-in-nextjs/boilerplate
여기서 특정 폴더 클론의 핵심 명령어인 git sparse-checkout를 입력해준다.
'set --no-cone'까지 치고, 실제 작업할 특정 폴더의 경로를
최상위부터(전체 실습 코드 첫 화면 main에 보이는 폴더 - 05-managing ~)부터 실제 작업할 폴더(boilerplate) 경로까지 넣어주었다.
여기서 뒤에 공백 한 칸을 더 띄우고 특정 폴더를 하나 더 추가하면 여러 개의 클론할 폴더를 지정할 수 있다고 한다.
git checkout
이후 (뒤에 아무 것도 붙이지 말고) git checkout만 입력해주면 드디어 실제 작업할 폴더만 클론해온다. 🎁
code 05-managing-local-and-global-states-in-nextjs
code 키워드를 사용하면 에디터를 마우스로 켜지 않고 바로 에디터에 클론해온 폴더를 띄울 수 있다.
처음에는 05-managing~ 폴더로 들어가졌는데 이 상태로 깃허브에 저장하면 main 첫 화면에 boilerplate 폴더만 보이게 된다.
따라서 boilerplate 폴더의 내부 components, pages 폴더들부터 보일 수 있도록 다음과 같이 boilerplate 폴더로 한 번 더 이동했다. (여기부터는 vscode 터미널에서 작성)
짜잔 --
이제 깃허브와 연결하고 넣으면 된다. 🙌🙌
내 계정으로 빈 레포를 만들고 다음과 같이 커밋을 진행했다.
그리고 나서 git push origin main를 하면..
🎉🎉 작업하려는 특정 폴더만 클론이 되어 내 깃허브에 저장했다.
이제 실습 시작하면 됨 (끝)
