frontend

vscode 프론트엔드 개발에 유용한 익스텐션 모음

Auto Close TagHTML 태그를 쓰면 자동으로 닫아준다. 입력 -> Auto Rename TagHTML 태그 이름 변경시 닫는 태그 이름도 자동으로 변경Auto ImportImport 문 자동 완성ESLintvscode에 IDE 오류 표시, 저장시 자동 린트 기능 제공Error Lens코드 에러 발생 부분 옆에 무슨 에러인지 실시간으로 표시Git GraphSource Control 탭에서 상단 View Git Graph 클릭하여 깃 그래프 볼 수 있음GitLens -- Git supercharged코드 옆에 누가 언제 커밋했는지 내용 표시 - 내역 확인하기 좋음Import Costimport 문 옆에 패키지 용량 표기Prettier코드 포맷팅Tailwind CSS IntelliSensetail..

Feature Sliced Design

https://feature-sliced.design/docs프론트엔드 아키텍처, 가독성 좋고 요구사항 변경에 쉽게 대응할 수 있는 구조사용자 앱에만 적용 가능 (디자인 시스템, 라이브러리는 적용 x)구조출처: https://feature-sliced.design/docs/get-started/overviewLayers프로젝트마다 동일한 계층 구조app: 공통 설정, 스타일, providerspages: 페이지, entities, features, widgets를 합쳐서 만듬widgets: 의미있는 블록 (e.g. IssuesList, UserProfile ) entities와 features를 합쳐서 만듬features: business와 관련 있는 유저 상호작용, actions (e.g. SendCo..