# 개발환경

## 개요

X2BEE의 개발을 위한 안정적인 개발 환경을 구축하는 방법에 대해 설명합니다.

***

## 사용 라이브러리 정보

| 명칭            | 버전      | 용도                                               |
| ------------- | ------- | ------------------------------------------------ |
| Next.js       | v16.0.1 | React 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 프레임워크 |
| React.js      | v19.2.0 | 사용자 인터페이스 구축을 위한 JavaScript 라이브러리                |
| Zustand       | v5.0.3  | 간단하고 직관적인 전역 상태 관리 라이브러리                         |
| TypeScript    | v5.8.2  | 정적 타입을 지원하는 JavaScript의 상위 집합 언어                 |
| TailwindCSS   | v4.1.16 | 유틸리티 퍼스트 CSS 프레임워크로 빠르고 일관된 UI 스타일링 지원           |
| ESLint        | v8.57.1 | 코드 품질 향상과 일관성 유지를 위한 JavaScript/TypeScript 린터    |
| Prettier      | v3.3.3  | 코드 자동 포매팅 도구로 스타일 일관성 유지에 사용                     |
| @mui/material | 6.0.1   | Material-UI를 이용한 UI 컴포넌트 라이브러리                   |

## 프로젝트 패키지 구조

{% stepper %}
{% step %}

### src/main/java

* 프레임워크 공통 클래스 패키지: 프로젝트 관련 설정, 예외처리, DB관련 속성, 보안, 유틸 클래스 포함
* API 관련 비즈니스 로직 클래스 패키지: Controller, Service, Dao, Entity 클래스

<div align="left"><figure><img src="/files/czB2WrQgibv64ZbtDOVi" alt="" width="426"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### src/main/resources

* 프레임워크 설정 패캐지: dev/local 별 datasource 설정, 로깅 설정, 기타 설정 파일
* API 관련 쿼리 패키지: 프로젝트 내에서 사용될 쿼리 파일
* View 템플릿 패키지: Front-end html 파일과 error html 파일
* 기타 설정 패키지: 프로젝트 전체 appliation.yml 파일 및 설정 파일

<div align="left"><figure><img src="/files/GladZQWPFSOQkSk4SgG0" alt="" width="439"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tech.x2bee.com/dev-guide/dev-start/editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.