웹 프로젝트 FSD 구조리팩토링(로그인 관련) | Next.js
·
프론트엔드 기록/프로젝트
현재 진행중인 프로젝트 프론트 개발을 5월부터 시작하여 6개월 정도의 기간을 지속하다 보니까, 처음에 짜놓은 폴더구조에 대해서 불편함을 느끼기 시작했다. mvp 완성에 급급하여 마구잡이로 컴포넌트와 코드를 배치시켜서 다시 개발을 시작하려보니 집중이 안되는 그런느낌? 이대로 계속 가다가는 걷잡을 수 없이 지저분해질 것 같아서 우연히 봤던 기능(feature)을 단위로 모듈화하는 아키텍처 패턴이 인상적이라 적용해보고자 한다!!  FSD 아키텍처가 무엇인가Feature-sliced Design(FSD) 구조는 프론트엔드 애플리케이션을 기능(Feature) 단위로 나누어 모듈화하고, 코드의 재사용성과 유지 보수성을 높이기 위한 아키텍처 패턴이다. 기존 많이 사용되던 컴포넌트 기반 구조보다 기능과 도메인에 초점을..
[Next.js 14] FSD 기능 관점 폴더 아키텍처에 대한 생각
·
프론트엔드 기록/리액트
프론트엔드 개발자의 폴더구조.. 개발을 처음 시작했을때 강사분이 추천하는 Container / Presenter 패턴을 스터디하고 첫 프로젝트를 시작했는데, 하나의 패턴만 알고 있어서 불편함을 느끼지 못하고 이것이 가장 깔끔한 패턴인 줄 알았다. 그렇게 두번째 프로젝트에 나보다 경험이 더 있는 친구가 프론트 리드를 맡고 그 친구의 스타일을 따라가다 보니 전의 폴더 구조 패턴이 본인에게 맞지 않고, 비효율적이라고 느꼈다. 그 계기로 계속해서 시야를 넓히려고 노력중이고, 현재는 사수 개발자가 없으니 많은 글들과 코드를 보려고 하고 있는 것 같다. 현재 진행중인 프로젝트가 릴리즈 후 회고를 통해 문제점을 인식했고, 개선하려는 과정때문에 한동안 프론트엔드 개발이 중단되었는데, 혼자 관리하는 코드이고, 코드를 최..
ddhelop
'fsd' 태그의 글 목록