tailwind, FSD 폴더구조에 관하여

03.11(월)~03.12(화)

✨ 공고 페이지 UI

tailwind는 작성하기에는 쉬운데.. 뭔가뭔가 아쉽다는 생각이 자꾸 든다.

1<div className='inline-flex flex-col items-start gap-3 rounded-xl border border-solid border-pt-gray20 bg-white p-5 md:gap-5 md:p-[24px] lg:flex-row lg:justify-between'>

이렇게 css파일을 따로 만들지 않고 바로 작성하고 줄임말로 작성하니 쉬운것 같다고 생각했는데,

className에 한줄로 쭉 작성하니 코드가 길어질수록 가독성이 급격히 떨어지는 것 같다.

특히 반응형 디자인 할 때 화면 너비에 따라 스타일이 다르면 코드가 급격하게 길어진다.

저런 태그들이 몇개씩 있다고 생각하면 생각만해도 눈알이 빠질듯?

아직 tailwind를 사용한지 얼마 되지 않아서 그 진가를 내가 못알아보는 걸수도 있다. 근데 지금 생각으로는 앞으로 사용 잘 안할듯 싶다.

어찌저찌 반응형 까지 구현했음.

✨ FSD 폴더구조 ?

FSD 공식문서
번역 블로그

음,, 회사에서 진행하는 거대 프로젝트에는 분명 체계적이고 철학이 명확한 FSD가 어울린다.

하지만 기간이 짧거나 사이즈가 작은 프로젝트에는 쓰지 않는것이 명확해 보인다. 도메인이 묻으면 무슨폴더, 그 폴더를 또 ui, model 뭐뭐로 또 나누고,,

짧은 프로젝트는 이 파일이 무슨 폴더에 들어가야 하는지 고민하는 시간은 의미없는 시간같다.

최대한 명확하고 단순하게 3개의 파일정도로 나누는 것이 좋아보인다.

프론트엔드에는 뭔가 국룰처럼 여겨지는 폴더구조가 없다고 들었다. 검색을 해봐도, 여러 멘토님께 여쭤봐도 다양한 폴더구조를 듣게 된다.

그때그때 상황에 맞게 적절한 폴더구조를 만드는 것이 중요해 보인다.

이런 폴더구조도 있구나 공부해서 좋긴 하다.