유용한 vscode 익스텐션 추천! file-tree-generator

기업 과제를 하거나 프로젝트 후 리드미를 꾸미는 건 개발자의 필수 역량이라는 말을 듣고 리드미 작성하는데 관심이 생겼습니다. 

 

그래서 다른 분들의 프로젝트 리드미를 구경하다가 프로젝트 파일 구조를 보기 쉽게 작성하신 분들이 많다는 걸 알았고, 저도 그 방법에 대해서 궁금했습니다. 

 

저는 최근에 비지니스 로직과 뷰 로직을 분리하는 것에 관심이 생기기도 했고, react-query를 사용한 프로젝트에서 데이터를 관리하는 로직을 hook으로 만들어서 사용한 간단한 프로젝트가 있었는데 내가 관심사 분리를 했다고 다른 사람들에게 자랑하고 싶은 마음이 컸습니다. 

그래서 발견한 vscode의 익스텐션! file-tree-generator

 

⚡️file-tree-generator

 

⚡️사용방법

 

트리 구조로 시각화하고 싶은 파일을 마우스 우클릭하고 Generate to Tree를 클릭!

 

아이콘이 있는 버전과 없는 버전 모두 사용 가능합니다. 

📦components
 ┣ 📂layout
 ┃ ┗ 📜Layout.tsx
 ┣ 📜Header.tsx
 ┣ 📜InputField.tsx
 ┣ 📜LodingBar.tsx
 ┣ 📜SingleTodo.tsx
 ┗ 📜TodoList.tsx

components
 ┣ layout
 ┃ ┗ Layout.tsx
 ┣ Header.tsx
 ┣ InputField.tsx
 ┣ LodingBar.tsx
 ┣ SingleTodo.tsx
 ┗ TodoList.tsx