# 아키텍처 & 디자인 패턴 (React / Next.js)

> Feature-based 구조, atomic design, clean architecture, SOLID 원칙, dependency injection

- 22 면접 질문
- Senior
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

## 1. React에서 Atomic Design이란 무엇인가요?

**답변**

Atomic Design은 React 컴포넌트를 5가지 계층적 레벨로 구성합니다: atoms(버튼, input), molecules(간단한 폼), organisms(header, footer), templates(페이지 레이아웃), pages(구체적인 인스턴스). 이 방법론은 design system에 일관되고 확장 가능한 구조를 제공합니다. 공통 어휘를 공유하여 디자이너와 개발자 간의 컴포넌트 재사용성과 협업을 촉진합니다.

## 2. feature-based 아키텍처의 주요 특징은 무엇인가요?

**답변**

feature-based 아키텍처는 기능과 관련된 모든 파일(컴포넌트, hooks, 스타일, 테스트, 타입)을 같은 폴더에 그룹화합니다. 이 접근 방식은 co-location과 feature 자율성을 촉진합니다. 각 feature는 고유한 책임을 가진 독립 모듈이 되어 유지보수가 쉬워지고 팀이 충돌 없이 병렬로 작업할 수 있습니다.

## 3. Clean Architecture의 근본 원칙은 무엇인가요?

**답변**

Clean Architecture는 Dependency Rule에 기반합니다: 의존성은 항상 안쪽을 향해야 합니다, 외부 레이어(UI, 인프라)에서 내부 레이어(domain, business logic)로. 비즈니스 도메인은 UI나 프레임워크에 절대 의존해서는 안 됩니다. 이 분리를 통해 비즈니스 로직을 독립적으로 테스트하고, 비즈니스 코드를 재작성하지 않고 프레임워크를 변경하며, 분리되고 확장 가능한 아키텍처를 유지할 수 있습니다.

## 19개 추가 질문 이용 가능

- React 컴포넌트에 적용되는 SOLID의 'Single Responsibility' 원칙은 무엇을 의미하나요?
- React에서 dependency injection이란 무엇인가요?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level
- [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns