목록Frontend (2)
console.blog()
들어가며프론트엔드 프로젝트의 규모가 커지면 효율적인 코드 구조화의 중요성이 더욱 부각되기 마련이다.이를 해결하기 위해 구조화된 설계와 디자인 패턴을 많이 사용하는 추세이다.최근 PHP 와 Vue로 작성된 페이지를 Next.js로 마이그레이션 하는 과정에서팀내 프로젝트 패턴을 통일하기 위해 FSD 방법론을 도입하려고한다.Feature-Sliced Design(FSD) 아키텍처를 활용하고 이를 실제 프로젝트에 적용하는 방법에 대해 알아보자.FSD란?Feature-Sliced Design은 프론트엔드 아키텍처 방법론으로,비즈니스 로직을 기능(feature) 단위로 분할하고 계층화된 구조로 관리하는 접근 방식이다.이는 프로젝트의 복잡성을 효과적으로 관리하고, 코드의 재사용성과 유지보수성을 향상시키는데 도움을 준..
왜 이 글을 쓰게 됐나? 🤔최근 같이 교류하던 분들과 친한 개발자 분이 이렇게 물어봤다. ”이 @components 같은 거 왜 쓰는 거예요? 어떤 이유가 있죠?"솔직히 나도 처음엔 그냥 "깔끔해 보여서" 쓰기 시작했다. 이참에 내가 쓰던 방식을 같이 복기하면서 정리해볼까 한다.alias가 뭔지 알아보자상대경로의 불편함부터 보자프로젝트 하다 보면 이런 코드 진짜 많이 보게 된다// 깊이가 깊어질수록...import { Button } from '../../../components/common/Button';import { Input } from '../../../components/common/Input';import { useAuth } from '../../../hooks/useAuth';이런 im..