🚀 Vite란 무엇인가

Vite는 프랑스어로 "빠르다"는 뜻으로,
빠르고 간결한 모던 웹 개발 환경을 목표로 탄생한 차세대 프론트엔드 빌드 도구입니다.

🤷‍♀️ Vite를 사용해야 하는 이유?

Webpack과 같은 기존 번들러는 JavaScript 파일을 하나로 묶는 방식(Bundle)으로 작동합니다.
이로 인해 초기 빌드 시간이 길고, 코드 변경 시 전체를 다시 컴파일해야 하는
비효율적인 구조를 가지고 있습니다.
반면 Vite는 ES Modules(ESM) 기반의 개발 서버를 사용해,
필요한 모듈만 빠르게 로드하고 변경된 부분만 교체합니다.
수정된 모듈만 실시간으로 브라우저에 반영되므로, 전체 새로고침 없이 빠르게 개발할 수 있습니다.
또한 브라우저의 HTTP 캐시 및 ESM 기능을 적극 활용해
필요한 파일만 불러오고, 변경되지 않은 모듈은 캐시를 통해 재사용하여
페이지 로딩 속도와 개발 효율을 극대화합니다.

✅ Vite의 장점과 특징

• 빠른 개발 서버 구동 속도
  → ESM 기반으로 번들 없이도 서버가 즉시 실행됨

• 빠른 HMR(Hot Module Replacement)
  → 변경된 모듈만 실시간으로 반영하여 빠른 피드백 제공

• 최신 브라우저 기반 개발
  → 모던 브라우저의 ES Module 기능을 활용해 개발 효율 향상

• 최적화된 프로덕션 빌드
  → Rollup 기반 빌드로 코드 스플리팅, 트리 쉐이킹 등 지원

• 간결한 설정과 유연한 플러그인 생태계
  → 다양한 프레임워크와 호환되며 설정이 매우 직관적

• 초심자에게도 쉬운 접근성
  → 템플릿 생성 도구와 기본 설정만으로도 빠르게 프로젝트 시작 가능

⚛️ React 기술 분석 및 선택 이유

React는 Facebook(현 Meta)에서 개발한 자바스크립트 기반의 UI 라이브러리로, 컴포넌트 기반 아키텍처를 통해 복잡한 사용자 인터페이스를 효율적으로 구성할 수 있도록 지원합니다.

✅ React의 장점

1. 컴포넌트 기반 아키텍처

• UI를 독립적이고 재사용 가능한 컴포넌트 단위로 구성 가능
• 유지보수와 협업에 유리하며 테스트 용이

2. Virtual DOM을 통한 빠른 렌더링

• 변경된 부분만 효율적으로 업데이트하여 성능 향상
• 실제 DOM 조작보다 훨씬 빠름

3. 풍부한 생태계 및 커뮤니티

• React Router, Redux, Recoil, Tailwind 등 다양한 라이브러리와의 연동 가능
• 공식 문서 및 오픈소스 예제가 풍부

4. 단방향 데이터 흐름

• 데이터 흐름이 예측 가능하고 디버깅이 쉬움

5. 자유도 높은 구조 설계

• 특정 프레임워크에 종속되지 않고 유연하게 구조를 설계할 수 있음

❌ React의 단점

1. 초심자에게 높은 진입 장벽

• JSX 문법, 상태관리, Hook 개념 등을 이해하기 어려울 수 있음

2. 프로젝트 구조 설계의 자유도가 오히려 단점이 될 수 있음

• 명확한 규칙이 없으면 팀 간 코드 스타일 불일치 발생 가능

3. SEO 친화도 낮음

• 기본적으로 CSR(Client Side Rendering) 방식이기 때문에 검색 엔진에 취약 (Next.js로 보완 가능)

🔄 관련 프레임워크 비교

항목	React	Vue.js	Angular
구조	라이브러리	프레임워크	프레임워크
특징	유연하고 자유도 높음	문법이 간단하고 진입장벽 낮음	구조가 견고하고 대규모에 적합
규모 적합도	중~대규모	소~중규모	대규모
렌더링	CSR, SSR(Next.js)	CSR, SSR(Nuxt.js)	CSR
사용 언어	JavaScript, JSX	HTML 기반 템플릿	TypeScript 중심

💡 React를 선택한 이유

1. 컴포넌트 기반 구조로 개발하면서 UI를 효율적으로 관리하고 재사용성을 높일 수 있었음
2. 다양한 외부 라이브러리와의 높은 호환성으로 개발 생산성 향상
3. 프로젝트 규모 확장 시 구조 설계의 유연성과 상태 관리 도구의 다양성이 큰 장점으로 작용
4. SPA(Single Page Application) 구현에 적합하여 사용자 경험(UX)을 향상시킬 수 있음
5. 활발한 커뮤니티와 문서화로 인해 문제 해결과 기술 확장에 용이함

✅ 결론

React는 복잡한 웹 UI를 효율적으로 개발할 수 있도록 해주는 현대적인 UI 라이브러리입니다.
생산성, 확장성, 유지보수성을 모두 고려한 결과, 프론트엔드 기술 스택으로 React를 채택하였습니다.

🌱 Spring Boot 기술 분석 및 선택 이유

Spring Boot는 기존 Spring Framework의 복잡한 설정을 간소화하여,
빠르게 독립 실행형 웹 애플리케이션을 만들 수 있도록 지원하는 경량 프레임워크입니다.

✅ Spring Boot의 장점

1. 빠른 프로젝트 초기화

• 내장 Tomcat, Jetty 등을 사용하여 서버 설정 없이 바로 실행 가능
• Spring Initializr로 빠른 템플릿 생성 가능

2. 설정 자동화 (Auto Configuration)

• 복잡한 XML 기반 설정을 제거하고, 최소한의 설정만으로도 실행 가능

3. 다양한 오픈소스와 통합 용이

• Spring Security, JPA, OAuth, Swagger, Redis, Kafka 등과 유기적으로 연동 가능

4. REST API 개발에 최적화

• JSON 응답, 예외처리, REST 컨트롤러 등을 손쉽게 구현 가능

5. 다양한 커뮤니티와 레퍼런스

• 대규모 기업에서도 사용하는 신뢰도 높은 프레임워크
• 방대한 문서와 오픈소스 예제 제공

❌ Spring Boot의 단점

1. 높은 러닝 커브

• Spring Security, JPA, DI, AOP 등 다양한 개념을 학습해야 함

2. 오버스펙 가능성

• 간단한 프로젝트에는 구조가 무겁고 복잡해질 수 있음

3. 내부 설정 자동화의 단점

• 자동 설정으로 인해 프레임워크 내부 동작 원리 파악이 어려울 수 있음

🔄 관련 백엔드 프레임워크 비교

항목	Spring Boot	Express.js	Django
언어	Java	JavaScript (Node.js)	Python
구조	계층적, 강력한 아키텍처	유연하고 경량	MTV 구조 기반
생산성	중간~높음	매우 높음	높음
학습 곡선	높음	낮음	낮음
사용 규모	대규모 프로젝트에 적합	소~중규모에 적합	중규모에 적합
보안 기능	Spring Security 통합	미제공 (직접 구현)	기본 제공
ORM 지원	JPA, MyBatis 등	없음 (선택적 사용)	기본 내장 (ORM)

💡 Spring Boot를 선택한 이유

1. 기업용 백엔드 시스템에서의 높은 신뢰도와 범용성
   → 대규모 트래픽, 복잡한 비즈니스 로직을 안정적으로 처리 가능
2. 보안 및 인증 기능 통합 용이성
   → Spring Security + JWT 기반 인증 체계를 쉽게 구축 가능
3. ORM 연동의 유연성 (JPA / MyBatis)
   → 프로젝트에 맞게 자유롭게 선택 가능
4. RESTful API 설계 및 배포가 용이
   → 컨트롤러 기반 설계로 클라이언트와 명확하게 연동 가능
5. 자바 생태계와의 호환성
   → 기존 자바 기술과의 통합이 쉬워 개발 유지보수 효율성 증가

✅ 결론

Spring Boot는 안정성, 확장성, 보안성을 모두 갖춘 백엔드 프레임워크로
프로젝트의 구조적 설계, REST API 구축, 보안 처리, DB 연동 등
현업에서 요구하는 다양한 기능을 효율적이고 통합적으로 제공합니다.
따라서 백엔드 프레임워크로 Spring Boot를 채택하게 되었습니다.

⚛️ React에서의 상태 관리

React에서 **상태(State)**는 컴포넌트의 동적인 데이터를 의미하며, 사용자와의 상호작용 또는 비동기 작업 등을 통해 변경될 수 있는 값을 말합니다.

🤷‍♀️ 상태 관리 라이브러리를 써야하는 이유

React에서 상태관리를 하는 기본적인 방법은 컴포넌트의 state와 props를 사용하는 것입니다.
어플리케이션의 규모가 크지 않다면 내부 상태관리 라이브러리인 useContext,useReducer등을 사용하는 것을 고려해 볼 수도 있지만, 프로젝트 규모가 커질수록 이 방식만으로는 한계가 생깁니다.
따라서 단계마다 명시적으로 props를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터를 제공할 수 있게 만들어주는 상태관리 라이브러리를 사용하는 것이 효율적입니다.

🗂️ React 상태 관리 라이브러리

🐻 Zustand

클라이언트 상태(전역 UI 상태, 사용자 입력 데이터 등) 관리

❗ 특징

• Redux보다 간단하고 직관적
• Hook 기반 API로 직관적인 사용 가능
• 전역 상태관리도 로컬 상태처럼 사용 가능
• 비동기 로직도 쉽게 포함 가능 (API 호출 등)

✅ 장점

• 가볍고 빠름
• 코드량이 적고 설정이 간편함

❌ 단점

• 서버 상태관리에는 적합하지 않음

🔣 사용 예시

• 시스템 테마 (다크/라이트)
• 모달 열기/닫기

🔄 Tanstack Query

서버 상태(데이터 패칭, 캐싱 등) 관리. 주로 서버에서 가져온 데이터를 관리하는데 중점을 둔다.

❗ 특징

• 서버 상태를 효율적으로 관리
• API 호출 결과 상태(loading, error, success) 자동 관리

✅ 장점

• 복잡한 API 로직 없이 데이터 갱신 가능
• 로딩/에러/성공 상태 자동 관리

❌ 단점

• 클라이언트 상태는 관리하지 않음
• 초기 학습이 필요함

🔣 사용 예시

• 서버에서 유저 목록, 게시판 목록 가져오기
• 페이지네이션 처리

⚛️ React의 Atomic Design Pattern

UI를 작은 단위부터 큰 단위로 구성해 나가는 방식으로,
디자인 시스템 또는 컴포넌트 아키텍처를 체계적으로 구축할 수 있도록 돕는 구조입니다.
Brad Frost가 제안한 개념이며, React 프로젝트에서 구조화할 때 자주 사용됩니다.

🧬 구성 계층

계층	설명	예시
Atoms	더 이상 쪼갤 수 없는 가장 작은 단위의 UI 요소	Button, Input, Label, Icon
Molecules	2개 이상의 Atom이 결합된 단순 UI 조합	Input + Label 조합, SearchBar
Organisms	여러 Molecule 또는 Atom이 결합된 독립적인 UI 블록	Header, Sidebar, CardList
Templates	Layout 중심, Organism들을 배치한 형태	페이지 틀, 그리드 구조
Pages	실제 데이터가 주입된 화면 완성본	HomePage, ProfilePage

✅ 장점 및 선택 배경

1. UI 구성의 명확한 계층화
   • Atoms → Molecules → Organisms → Templates → Pages 로 구조화하여 컴포넌트 역할을 명확히 구분
2. 컴포넌트 재사용성 증가
   • 반복되는 UI 요소를 Atoms로 분리해 여러 화면에서 효율적으로 재사용
3. 유지보수 용이
   • 변경이 필요한 컴포넌트를 빠르게 식별하고 수정 가능
4. 협업 효율성
   • 디자인 시스템과의 연계가 쉬워 디자이너와의 커뮤니케이션이 명확해짐

🧩 Atomic Design Pattern 채택 이유

프로젝트의 UI 컴포넌트를 일관성 있고 재사용성 있게 관리하기 위해
Atomic Design Pattern을 채택하였습니다.

📘 MVC 패턴이란?

MVC는 Model - View - Controller의 약자로,
코드를 역할별로 나눠서 구조화하는 디자인 패턴입니다.
웹 개발에서 많이 사용되며 코드의 유지보수성과 확장성을 높이는 데 도움이 됩니다.

🔹 구성 요소

• Model (모델)
  데이터와 관련된 로직을 처리합니다.
  예: DB에서 데이터를 가져오거나 저장하는 부분

• View (뷰)
  사용자에게 보여지는 화면(UI)을 담당합니다.
  예: HTML, JSP, React 컴포넌트 등

• Controller (컨트롤러)
  사용자 입력을 처리하고, 그에 따라 Model과 View를 연결합니다.
  예: 사용자의 버튼 클릭을 처리하고 결과를 화면에 보여줌

📌 특징

• 역할이 분리되어 있어 코드가 깔끔하게 정리됨
• 로직과 UI가 분리되어 있어 유지보수가 쉬움
• 각각의 요소를 독립적으로 개발 및 테스트 가능

✅ 장점

• 협업에 유리: 백엔드와 프론트엔드가 나눠서 작업 가능
• 재사용성 증가: 같은 모델이나 뷰를 여러 곳에서 활용 가능
• 유지보수 쉬움: 기능별로 나뉘어 있어 수정이 용이함

❌ 단점

• 작은 프로젝트에 쓰기엔 구조가 다소 복잡
• Controller가 비대해지는 현상(=Fat Controller)이 발생할 수 있음
• 역할 분리에 익숙하지 않으면 오히려 헷갈릴 수 있음