study 3

FSD 폴더 구조 전략

프로젝트를 시작할 때 폴더구조를 어떻게 할지 모든 개발자들이 매번 고민한다고 생각한다.(정답이 없기 때문에..)9기 프로젝트를 진행하면서 FSD 폴더 구조 전략을 쓰자는 이야기가 나왔다. 평소에 들어는 봤지만 , 정확히 알지는 못해서 이번 기회에 FSD 폴더 구조 전략에 대해 알아보고자 한다. Q . 로그인과 관련된 컴포넌트,페이지,api를 찾아보세요. 찾는데 3초 이상 걸렸을 것이다. 이렇게 코드,파일들이 여러곳에 흩어져 있으면 많은 단점이 존재합니다.특정 기능을 수정하려면 여러 폴더를 돌아다녀봐야한다. (가독성과 유지보수가 떨어진다)기능 중심이 아닌, 기술 중심 분류로 구성되어있다. ⇒ 실제 사용 맥락이 고려되지 않는다.하나의 폴더 안에 파일이 수백개씩 존재하거나 , 파일 depth가 깊어지는 현..

study 2026.01.06

크로스 브라우징

채널톡 프론트엔드 채용 공고를 둘러보다가 "크로스브라우징" 에 신경쓴다는 문장을 발견하였다.크로스 브라우징이 뭔지 몰라서 알아본 내용을 정리하겠다. 처음에는 단어만 몰랐지, 내가 프로젝트 하면서 겪었던 상황과 직접적으로 연결되어있다.밑에는 프로젝트 했을 때 겪었던 상황을 캡쳐해보았다. 이렇게 , 모바일 시뮬레이터랑 배포하고 휴대폰으로 본 화면의 ui가 다른것을 확인하였다. 크로스브라우징이란? 동일한 웹사이트라 하더라도 어떤 웹브라우저로 보느냐에 따라 다르게 보일 수 있다. 이렇게 다양한 웹 브라우저와 버전, 다양한 운영체제에서 웹 사이트가 일관되게 동작하도록 하는 기술 또는 접근 방식을 크로스브라우징 이라고 한다. 크로스 브라우징은 모든 화면이 '동일'하게 표시되게 하는 것이 아닌, '동등'한 수준..

study 2026.01.05

taillwindCSS의 효율적 사용 feat)cva,clsx,twMerge

컴포넌트 재사용을 어떻게 효율적이게 할 수 있을까? TailwindCSS는?Tailwind CSS는 유틸리티 퍼스트 접근 방식을 통해 빠르고 일관된 스타일링을 가능하게 하는 강력한 CSS 프레임워크다. 그러나 클래스 네임의 관리와 컴포넌트의 재사용성 측면에서 몇 가지 한계점이 존재한다. TailwindCSS의 한계점클래스 네임의 복잡성가독성이 떨어지고 유지보수가 힘들어짐 버튼재사용성의 부족비슷한 스타일을 여러가진 컴포넌트의 경우 중복된 클래스 네임 반복버튼1버튼2조건부 스타일링 어려움동적인 클래스 네임 추가의 경우 , 조합이 많아질수록 클래스 네임관리가 복잡해짐. 버튼테일윈드를 유연하게 사용하는 방법1. clsx조건부로 클래스 이름을 결합하고 관리하는데 사용하는 라이브러리다양한 조건에 따라 클래스 네..

study 2025.12.30