프로젝트 시작 전 문서‐yoonseo0832 - dev-team-projects/DeliTalk GitHub Wiki

|| 기술 스택 ||

FRONT: react(VITE)
BACK: spring
DB : MySQL

|| VITE ||

웹 개발을 위한 빠르고 효율적인 빌드 도구, 기존의 빌드 도구의 단점인 느린 개발 서버 시작 시간과 잦은 리로드 문제 해결을 위해 개발됨

장점

메우 빠른 개발 서버 시작 시간
필요한 모듈만 컴파일하여 브라우저 제공
프로젝트 규모 상관없이 개발 서버 시작 시간 일정하게 유지됨, 코드 변경 시 브라우저가 거의 즉각적으로 업데이트됨
간단한 설정

단점

Vite는 기본적으로 node_modules에 설치된 패키지를 효율적으로 처리하지만, 외부 CDN에서 직접 로드하는 방식의 의존성 관리에는 최적화되어 있지 않음

단점보다 장점이 많은 것 같음

|| REACT ||

React는 Facebook에서 개발한 JavaScript 라이브러리, UI 라이브러리지만 프레임워크처럼 활용됨.
컴포넌트 분리, 가상 돔, JSX
가장 큰 커뮤니티
single page app

장점

높은 성능, 뛰어난 유연성, 어렵지 않은 학습 난이도

단점

상태관리를 따로 라이브러리로 관리해야하고, 잦은 업데이트

차별점

가상 DOM (Virtual DOM)과 효율적인 업데이트: 렌더링 성능을 극대화, 개발자가 직접 DOM 조작에 신경 쓸 필요 없이 데이터 상태 변화에만 집중할 수 있게 하여 개발 생산성을 향상

컴포넌트 기반 아키텍처: React는 UI의 모든 것을 독립적이고 재사용 가능한 컴포넌트로 구성을 권장함
코드의 재사용성, 모듈성, 유지보수성을 극대화

JSX (JavaScript XML): HTML과 유사한 마크업을 직접 작성할 수 있도록 하는 문법

[특히] 시장 수요: 현재 웹 개발 시장에서 React 개발자에 대한 수요가 매우 높아, 팀 구성 및 이직 시 유리합니다.

|| Spring Boot ||

특징

자동 구성(Auto Configuration)
- 복잡한 설정 없이 애플리케이션 구동 가능
내장 WAS 제공
- Tomcat/Jetty/Undertow 등 내장 서버 포함 (war 배포 필요 없음)
Opinionated Defaults
- 실무에 자주 쓰이는 설정값이 기본 적용됨 (초보도 빠르게 시작)
스타터(Starter) 패키지
- 공통 의존성 묶음 제공 (spring-boot-starter-web, spring-boot-starter-data-jpa 등)
간편한 설정
- meaven: application.properties 또는 gradle: application.yml 파일로 외부설정 관리
JAR 실행
- 바로 java -jar로 실행 가능 (배포 편리)

장점

생산성
- 초기 설정 최소화, 빠른 프로젝트 셋업
유지보수성
- 표준화된 구조, 스타터 의존성 관리, 자동화
확장성
- Spring 생태계와 연동 쉬움 (Spring Data, Security, Batch 등)
커뮤니티/문서 풍부
- 레퍼런스, 샘플 코드, 질의응답 등 자료 많음

단점

추상화/자동화로 인한 복잡도
- 내부 동작(자동설정, 빈 생성 등)이 감춰져 있어, 문제 발생 시 원인 파악이 어려울 수 있음
메모리 사용량
- 내장 WAS 및 다양한 기능 탑재로 메모리 소비 많음

자바와 차별점

	Spring Boot	순수 자바(서블릿/JSP)
설정	자동 설정/초기화	web.xml, 복잡한 수동 설정
내장 서버	내장 Tomcat 실행	외부 Tomcat/Was 필요
프로젝트 구조	표준화된 디렉터리 구조	자유로운 구조 (비표준화)
의존성 관리	스타터로 일괄 관리	직접 라이브러리 추가/관리
빌드/배포	JAR 파일 하나로 실행	WAR 패키징, 서버에 업로드
개발 속도	매우 빠름	설정, 배포, 재시작에 시간 소요
확장성/유지보수	용이	대규모 프로젝트에 불리
생태계	방대 (Spring Data/Security 등)	제한적 (JSP, JDBC 등)

|| Zustand: 클라이언트 전역 상태 관리 ||

주요 사용: 테마 설정, 사용자 로그인 정보, 모달 상태 등 클라이언트 단에서 관리되는 비동기적이지 않은 전역 상태, 여러 컴포넌트 간에 공유되어야 하는 데이터

장점

매우 간결한 API: 코드량이 적고 직관적임
쉬운 학습 난이도: Hooks에 익숙하다면 빠르게 배울 수 있음
빠른 성능: 불필요한 리렌더링을 최소화하여 성능이 좋다
React 외부에서도 사용 가능: 비동기 로직이나 순수 JS 환경에서도 상태를 관리할 수 있음

단점

서버 상태 관리 부재: 데이터를 패칭하고 캐싱하는 기능은 제공하지 않음 따라서 TanStack Query와 함께 사용 권장
커뮤니티 규모 (Redux 대비): Redux만큼 거대하고 오래된 커뮤니티는 아니지만, 빠르게 성장중

|| TanStack Query: 서버 상태 관리 라이브러리 ||

주요 특징
- Data Fetching: 서버로부터 데이터를 가져오는 프로세스
- Caching: 가져온 데이터를 자동으로 캐싱하고 관리
- Background Refetching: 백그라운드에서 데이터를 자동으로 업데이트
주요 사용
- REST API, GraphQL 등 서버로부터 데이터를 가져오고 관리하는 모든 경우
- 캐싱, 백그라운드 업데이트, 에러 처리, 로딩 상태 관리가 필요한 경우
- 게시판 목록, 사용자 정보, 제품 상세 등 비동기적으로 가져오는 데이터

장점

1. 데이터 동기화 및 캐싱 자동화: 서버와 클라이언트 간의 데이터 동기화를 자동화하여 개발자가 수동으로 캐시를 관리할 필요가 없음
2. 개발 경험 향상: 로딩, 에러, 성공 상태를 손쉽게 관리하고 UI에 반영할 수 있음
3. 성능 최적화: 백그라운드 재패칭, 자동 캐싱, 중복 요청 방지 등으로 사용자 경험 및 애플리케이션 성능을 향상
4. 복잡한 데이터 Fetching 로직 단순화: useEffect + useState 조합으로 직접 구현할 때 발생하는 복잡성을 크게 줄여줌
    - Optimistic Updates 지원: 사용자 경험을 위해 미리 UI를 업데이트하고, 실제 서버 응답에 따라 롤백하는 기능을 쉽게 구현할 수 있다

단점

클라이언트 전역 상태 관리 기능 부재: 서버 상태 관리에 특화되어 있으므로, 클라이언트 단의 전역 상태(예: 모달 열림/닫힘)는 Zustnad 같은 다른 라이브러리와 함께 사용해야 한다.
초기 학습에 난이도가 좀 있다.
라이브러이 크기가 커서 번들 사이즈 증가

따라서 둘다 사용하는 것이 좋은것 같다

아토믹 패턴

Atomic Design은 UI를 체계적으로 설계하기 위한 방법론입니다. 주로 프론트엔드 컴포넌트 설계에 활용됨

특징

계층적 구조로 UI를 분해
가장 작은 단위(Atom)부터 조합해서 점점 복잡한 구조로 확장
재사용성, 일관성, 유지보수성 향상

구성 요소

Atoms : 버튼, 라벨, 인풋 등 가장 작은 단위의 컴포넌트
Molecules : Atom의 조합, 예: 인풋+라벨+버튼 = 로그인 폼
Organisms : 여러 Molecule 조합, 예: 네비게이션 바, 카드 리스트
Templates : Organism들의 구조를 잡아주는 역할 (레이아웃)
Pages : 실제 데이터와 콘텐츠가 채워진 최종 화면

장점

컴포넌트 재사용성 극대화
디자인 일관성 유지
유지보수 및 테스트 용이

단점

구조가 복잡해질 수 있음
초기 설계/도입에 시간 소요
협업 규칙 필요

|| MVC 패턴 ||

비즈니스 로직과 UI를 분리하는 가장 대표적인 아키텍처 패턴, 학원에서 계속 사용한 방법

구조 및 역할

Model: 데이터/비즈니스 로직 관리
View: 사용자에게 데이터 출력(UI)
Controller: 입력받아 Model/View 제어

특징

역할 분리로 각 레이어가 명확한 책임 담당
유지보수/확장성 높음
다양한 프레임워크에서 채택

장점

코드 가독성/유지보수성 향상
여러 View에서 같은 Model 재사용 가능
확장 및 테스트 용이

단점

소규모 프로젝트엔 구조가 과할 수 있음
Controller가 복잡해질 경우 관리 어려움
팀 내 패턴 이해가 다르면 구현 혼란

|| Sass ||

CSS 전처리기로 효율적인 스타일 작성이 가능, (중첩, 변수, 믹스인, 함수, 임포트 다양한 기능 지원)

사용 예제

- 변수로 사용한 방법
$main-color: #3498db;

.button {
  color: $main-color;
}

공통 스타일은 _variables.scss, _mixins.scss 등으로 분리 관리 권장
- 공통 스타일을 관리하기 좋은 방법

|| Tailwind ||

하나의 역할(기능)만 가진 아주 작은 CSS 클래스들이 엄청 많이 미리 정의
커스텀으로 만들어서 사용도 가능

// tailwind.config.js
    module.exports = {
    theme: {
        extend: {
        colors: {
            'my-brand': '#fe6600', // 내 브랜드 전용 컬러 추가!
        },
        fontFamily: {
            'logo': ['Montserrat', 'sans-serif'], // 로고에 쓸 폰트 추가
        },
        spacing: {
            '72': '18rem', // 새로운 간격값 추가
        },
        },
    },
    }
    // => bg-my-brand, font-logo, p-72로 바로 사용 가능