개발자
웹 프론트엔드 디렉토리 구조 어떻게 가져가나요?
3년차 서버 개발자입니다 반 년 전 부터 리액트 넥스트 시작 해서 공부 중 입니다 몇 개의 프로젝트를 해도 이거 컴포넌트 분할이 되게 힘들고 정리가 안되네요 서버는 뭐 DDD 헥사고날 MSA 등등 있지만 저는 경험에서 모든 것을 의존성 기준으로 도메인을 분리하고 이에 대한 트레이드 오프나 규칙같은 것도 리드할 수 있을 정도인데,,,, 프론트는 재사용성을 강조하는데 뭘 재사용하는 지도 모르겠고 UI랑 기능이랑 분리하기 힘든 것도 있고 많은 설계방식도 있는데 저한테는 과도하다 생각하고 프론트도 도메인 기준으로 나누는 FSD도 있지만 프론트 특성상 UI랑 기능이랑 분할이 되게 힘들어보이고 아무리봐도 프론트는 사용자 중심으로 가야할 거 같은데 어떻게 해야될지 모르겠네요..
답변 1
App router 기준으로 답변 드립니다. 확장 하기에도 좋은 형태입니다. theo의 t3를 많이 참고했습니다. https://create.t3.gg/ # 디렉토리 구성 /src - app : 앱 라우터 루트입니다. ~ (public) ~ (protected) - components ~ global: 전역으로 쓰이는 컴포넌트 모음(헤더, 푸터, 팝업 등) ~ providers: contextAPI Wrapper ~ forms: 폼 관련 UI, 복잡한 경우가 간혹 있어 form은 따로 구분 ~ ui: 일반 재사용 UI, 외부 UI 라이브러리(shadcn, magic 등) - server: 서버에서 실행해야 하는 모든 것 ~ db.ts ~ queries.ts ~ actions.ts - lib: 유틸리티 함수 모음 - hooks: 커스텀 훅 모음 - constants: 별도 상수 모음 # 컴포넌트 나누기 기본적인 원칙은 리액트 공식 홈페이지에 있는 Thinking in React(https://react.dev/learn/thinking-in-react)에 기반합니다. 쉽게 정리하자면 - jsx 마크업을 재사용 해야 하는가? > 컴포넌트 만들기 - react hook을 사용하지 않는 로직이 필요한가? > 유틸리티 함수 작성 - react hook을 사용하는 로직이 필여한가? > 커스텀훅 작성
익명
작성자
2024년 06월 12일
감사합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 06월 11일
웹 프론트엔드의 디렉토리 구조는 여러 가지 방법을 사용할 수 있습니다. 그 중 일반적으로 많이 쓰이는 접근법 몇 가지를 소개해드리겠습니다: 1. **Feature based**: 이런 방식에서 각 기능(feature) 혹은 도메인 별로 디렉토리가 만들어집니다. 같은 기능과 관련된 컴포넌트와 로직이 하나의 디렉토리 안에 들어가 있게 되므로, 코드를 찾기 쉽고 유지보수도 상대적으로 용이합니다. 예시: ``` /user UserComponent.js UserService.js UserReducer.js /product ProductComponent.js ProductService.js ProductReducer.js ``` 2. **Type based**: 이 방식에서는 파일 타입(컴포넌트, 서비스, 리듀서 등)별로 디렉토리가 나눠집니다. 예시: ``` /components UserComponent.js ProductComponent.js /services UserService.js ProductService.js /reducers UserReducer.js ProductReducer.js ``` 3. **Atomic Design**: 재사용 가능한 UI 컴포넌트로 애플리케이션을 구성하는 설계 철학입니다. 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 5단계로 구성합니다. 예시: ``` /atoms Button.js Input.js /molecules Form.js /organisms Header.js /templates MainTemplate.js /pages HomePage.js UserPage.js ``` 이 외에도 React와 같은 라이브러리/프레임워크를 사용하면 해당 라이브러리가 제안하는 방식을 따르는 것도 좋습니다. 늘 그렇듯, 가장 중요한 것은 프로젝트 팀원들과 의견을 나눠 필요한 조건에 가장 맞는 구조를 사용하는 것입니다. 기존 서버 개발 경험을 바탕으로 도메인 중심의 디렉토리 구조를 가져가되, 리액트 컴포넌트의 재사용성 등 프론트엔드에서 중요시하는 요소들도 고려해보세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!