모노레포 ChatBot 프로젝트 생성
모노레포 ChatBot 프로젝트 만들기
프로젝트 구조는 모노레포 방식으로 client, server 하위로 두고 최상단 메인에서 관리 하위 시스템은 workspaces에 등록하여 관리 공통 node_module는 최상단에서 공통 으로 쓰는 패키지 를 관리한다.
- 서버는 node.js 클라이언트는 react 를 이용하여 챗봇 프로젝트 만들기 입니다.
프로젝트 전체를 담을 빈 디렉토리 생성
mkdir AiChat
cd AiChat
### git 초기화
git init
### 프로젝트 루트(최상위) 초기화
npm init -y
### 아래와 같이 디렉토리 폴더 생성 확인
D:\ai_workspace\AiChat>git init
Initialized empty Git repository in D:/ai_workspace/AiChat/.git/
D:\ai_workspace\AiChat>npm init -y
Wrote to D:\ai_workspace\AiChat\package.json:
{
"name": "aichat",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
### 서버 폴더 생성
mkdir api
cd api
npm init -y
D:\ai_workspace\AiChat>mkdir api
D:\ai_workspace\AiChat>cd api
D:\ai_workspace\AiChat\api>npm init -y
Wrote to D:\ai_workspace\AiChat\api\package.json:
{
"name": "api",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
/* 모노레포 기본 폴더 구조는 아래와 같습니다. 모노레포 이란 클라이언트,서버가 한 프로젝트 안에 다 구성 되는 방식입니다. */
/* 클라이언트 리액트에서 node.js 서버를 통해서 오픈ai,올리마,제미나이 등등을 통해서 채팅하는 프로그램을 구현 해 봅시다. */
아래는 간단하게 이런 형식의 구성으로 될 거라고 했지만 구현은 세부적으로 나뉘어 집니다.
AiChat/
├── api/ # Node.js 백엔드 코드
│ ├── src/
│ │ ├── app.js
│ ├── package.json
│
├── client/ # Vite (React) 프론트엔드 코드
│ ├── public/
│ ├── src/
│ │ ├── App.jsx # .jsx 확장자 사용 (선호에 따라 .js도 가능)
│ │ └── main.jsx
│ ├── index.html
│ ├── package.json
│ └── vite.config.js
│
├── .gitignore
├── package.json # 전체 프로젝트 관리
└── README.md
### 클라이언트(Vite - React) 프론트엔드 프로젝트 생성
AiChat 폴더 에서 실행
### React + TypeScript 생성
npm create vite@latest client -- --template react-ts
D:\ai_workspace\AiChat>npm create vite@latest client -- --template react-ts
Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y) y
> aichat@1.0.0 npx
> create-vite client --template react-ts
|
o Scaffolding project in D:\ai_workspace\AiChat\client...
|
— Done. Now run:
cd client
npm install
npm run dev
## vite 기동 되었습니다. 아래의 주소로 브라우저 접속하면 화면이 나옵니다.
D:\ai_workspace\AiChat\client>npm run dev
> client@0.0.0 dev
> vite
VITE v6.3.5 ready in 240 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
vscode 에서 프로젝트 열기
## vscode를 다운 받아 설치후
프로젝트 폴더에서
code . 입력후 엔터 키를 치면 . 을 입력하면 현재 디렉토리에서 부터 파일을 읽어서 vscode 에디터 창을 띄워 줍니다.
개발 환경이 끝났습니다.
댓글