# depth
[javascript] 함께하기
공백 이전에는 숏코드라는 말이 대세로 떠오른 적이 있었던 것 같다. 공백 또한 node이기때문에 빌드 속도를 높이기 위해 주석이나 공백을 최대한 쓰지 말아야 한다는 의미였던 듯. 그러나 지금은 개발중/빌드/배포 등의 과정이 많이 분리되었다. 여러 툴들이 개발이 되면서부턴데, 웹팩같은 툴을 써서 트리쉐이킹을 통해 최대한 코드를 컴팩트하게 줄이고 쓰지 않는 코드들을 정리한다. 개발 중에는 협업이 중요하고, 다른 사람의 코드를 읽고 파악이 빠르게 되어야 하기 때문에 '공백'을 통해 가독성을 확보하고 '주석'을 달아 이해를 돕는다. 그래서 공백도 코드 작성의 일부 라는 것이다. 그렇다고 공백을 남발하면 오히려 가독성, 집중력이 떨어지게 될 것이다. > ### 공백은 어디에 두어야 할까 선언 로직, 문 반환 여기서 각 코드의 역할에 따라 묶거나 떨어트리는 것을 볼 수 있다. 어느정도 협업을 하다보면 '어디쯤에 무엇이 있겠거니' 하는 예상을 하게 된다.

폴더 트리 구성하기
개요 프로젝트를 진행하며 구현했던 폴더트리에 대해 작성해보려한다. Next를 사용하기 때문에 Internal api route를 사용하여 데이터를 뿌린다. 데이터 구조 간략하게 소개하기 위해 속성들을 지운 상태이다. 해당 데이터를 그리는데 있어 동적으로 여러 뎁스로 구성된 폴더 트리를 구성하는 코드를 다뤄보려고 한다. 폴더 트리 데이터 최대 6 최소 1의 동적 트리 구성 파일 하나에서 렌더링 하는 방식 아래와 같은 방식으로 최대 6뎁스까지 그려내게 된다. 좀 더 효율적으로 할 수 없을까 해서 컴포넌트로 구성해보았다. 결과 화면 ![폴더 트리 결과 화면](https://velog.velcdn.com/images/moon_l/post/f1f986bd-a0c