[3장] 리액트 애플리케이션 구조

[brparkk]

챕터 3과 관련되거나, 공유하고 싶은 주제를 자유롭게 올려주세요~!

[sugonhwang]

3.3 일반적인 리액트 애플리케이션 구조 챕터와 관련하여 현업에서 책에 소개된 구조화 전략을 실제로 새우고 따르나요? 만약 그렇다면 책에 소개된 구조 중 어떤 구조를 주로 사용하시나요?

[dkmqflx]

login 폴더 내부에 사용되고 있던 button 컴포넌트와 중복되는 컴포넌트가 logout 폴더 내부에서 사용이 되어야 하는 경우에,

1. shared 폴더로 분리를 해서 사용하시는걸 선호하시나요
2. 아니면 중복되는 코드를 각 featrue에 선언하고 또 다른 중복이 발생하는지 우선 지켜보는 것을 선호하시나요 ?

# as-is
src/
├── app/
├── features/
│   ├── login/
│   │   ├── ui/
    │   ├── Button/
    │   │   ├── index.tsx
│   │   └── index.ts
│   └── logout/
    │   ├── Button/
    │   │   ├── index.tsx
│       └── index.ts
└── shared/
    ├── ui/
    │   ├── Button/
    │   │   ├── index.tsx
    │   └── index.ts
    └── index.ts


# to-be
src/
├── app/
├── features/
│   ├── login/
│   │   ├── ui/
│   │   └── index.ts
│   └── logout/
│       ├── ui/
│       └── index.ts
└── shared/
    ├── ui/
    │   ├── Button/
    │   │   ├── index.tsx
    │   └── index.ts
    └── index.ts

[jinsupark4255]

서버에서 오는 raw 데이터를 DTO로 가공하는 책임을 viewModel에 두시는지, api 모듈에 두시는지 궁금합니다. (아니면 유동적으로 두군데에서 다 처리하시는지)

• 현재 MVP용 프로젝트를 구현하고 있는데 서버와 주고받는 데이터가 완전 확정되지는 않은 상태입니다. api 모듈에서 DTO 가공 책임을 주어야 나중에 리팩토링, 유지보수 할 때 편할 것 같다고 생각이 들고는 있는데 이게 맞는 판단인지 잘 모르겠습니다. 그리고 DTO로 변환하는 함수까지 따로 관리하시는지도 궁금합니다.

[sumzdev]

3장 README 파일에도 남겨두긴했는데, 다들 읽어보시면 좋을 것 같슴다!
폴더구조의 변화로 이해하는 프론트엔드 멘탈모델 변천사, 테오 블로그, 2025/06/08

[sumzdev]

폴더 구조에 불편함을 느꼈던적이 있는지, 어떤식으로 해결하였는지 궁금합니다~!
또는 리팩토링하면서 폴더구조에 대해 고민을 해본 적이 있는지 경험을 말씀해주시면 좋을 것 같습니다!

[dhyun2]

유명한 기업들의 최근 레포를보고 해당 폴더구조는 어떻게 되어있을지 논의하면 좋을 것 같습니다.
[vercel ai chatbot repo]