프로젝트 파일 구조 명령어 - tree

기본적으로 mac에는 tree명령어가 없다
그래서 homebrew가 설치되었다는 가정하에 brew install tree 로 tree를 설치해준다
tree 설치
brew install tree

이제는 tree명령어를 사용할 수 있다
사용하기 전에 앞서서 도움말을 보자
tree 도움말
tree -help
또는
man tree
참고로 man(manual) 명령어를 이용한다면 q를 입력해서 나가야한다


tree 사용
cd(change directiory) 명령어로 위치를 옮겨서 실행하자
왜나하면 엄청..많이 나오기 때문에!
현재 경로의 폴더들은 이런 상황이다

tree

기본적으로 tree는 폴더를 만나면 recur(재귀)를 진행해서 가장 내부의 파일까지 출력한다
그럴때는 위에 tree -help 에서 봤었던 -L flag로 최대 depth를 설정할 수 있다
flag 사용
-L [depth]
-L 옵션은 주어진 depth에 따라 폴더만을 보여준다
tree -L 1

-I '폴더명 | 폴더명| 폴더명'
-I 옵션은 ignore-case 옵션이다
' ' 안에 | (pipe)로 인자를 여러개 줄 수 있다
보통 웹 개발에서 두가지 폴더 또는 세가지 폴더를 제외시켜서 프로젝트 트리를 나타낸다
node_modules(의존성 폴더), dist(빌드, 번들링된 결과 폴더), tests(테스트 폴더)
tree -I 'node_modules|dist|tests'

flag 조합
-L + -I
이 조합을 가장 많이 사용한다
최상단 루트 폴더 위치에서
2중첩된 폴더 내부의 파일까지만 보여주되, 의존성/빌드/테스트 폴더는 제외한다
tree -I 'node_modules|dist|tests' -L 2

그럼 이제 터미널을 긁어서
우리 프로젝트 구조는 이러이러합니다~ 라고 보여줄 수 있는 것이다
개꿀팁
노션에서 /code로 코드를 작성하고 붙여넣은다음에 YAML형식으로 작성하고 #을 붙이면
깔끔하게 나온다
이제 이 워크스페이스를 공유하거나 이 구조를 클라이언트나 대표님에게 보여드리면 될것이다^^

뷰 쪼렙이라 모르는 폴더의 주석은 무시해줘요..