GitHub 프로젝트 repo에 파일 구조 추가하기 (with README)
프로젝트가 끝나면 README에 해당 프로젝트에 관련된 상세한 내용을 정리하게 되는데, 그 중에 추가하게 되는 요소가 바로 파일의 트리구조이다. SeSAC 2차 프로젝트 당시에 README 파일을 내가 작성하면서 파일의 트리구조 만드는 방법을 알게 되었는데, 3차 프로젝트도 README를 내가 정리하며 트리구조까지 만들게 되었다.🌳
벌써 두 번이나 만들어봤지만, 혹시 나중에 까먹을 수도 있으니 미리 정리해두는게 좋을 것 같아서 하는 기록!✍
파일의 트리구조를 만드는 방법은 2가지가 있다.
하나는 window OS 기준으로 cmd 창에서 tree 명령어를 사용하는 방법이고, 이것보다 쉬운 방법은 VS code에서 file-tree-generator 라는 익스텐션을 사용하는 것이다.
이걸 어떻게 활용하냐면,
1. VS code에서 트리구조를 만들 파일을 열고, 마우스 우클릭하여 'Generate to Tree' 라는 항목을 클릭한다.
2. 그럼 잠깐의 시간 뒤에 아래 사진(왼쪽)과 같은 트리 구조가 자동으로 생성된다.
아이콘은 ON/OFF가 되는데, 나는 켜놓는게 시각적으로 훨씬 직관적인 것 같아서 켜두는 편이다.🙂
주의해야할 부분은, 개발하던 디렉토리 이하의 모든 파일들이 추가된 트리를 만들려면, 해당 디렉토리의 상위 디렉토리를 열어야 한다. 아래 사진(오른쪽)처럼 개발하던 디렉토리가 열린 상태에서는 마우스 우클릭을 해도 'Generate to Tree' 항목이 나오지 않는다!
3. 이렇게 만든 트리 구조에서 삭제할 부분은 메모장으로 복사해와서 수정하면 된다.
메모장에 붙여도 아래 사진처럼 귀엽게 나온다.😆
4. 정리가 끝난 트리 구조를 README에 붙일 때에는 아래 사진처럼 마크다운 문법을 따라서, 트리구조 앞/뒤로 백틱 기호 3개를 입력하고 bash 키워드를 작성하면 된다.
그나저나 2차 프로젝트는 HTML, CSS, JS만 사용해서 전체 트리구조 추출했을 때 삭제해야하는 내용이 그리 많지 않았는데, 3차 프로젝트는 React 기반이어서 전체 트리구조 만들었더니 삭제할게 많더라.. 드래그하고 스크롤 내리는데 너무 길어서 자꾸 렉 걸림..😂
아무튼 트리구조 만들어서 README에 추가하는 방법은 여기까지!🙋♂️