[Jobby] 환경 세팅 2

오늘 목표

1편에서는 폴더 구조랑 .gitignore만 잡아놓고 끝냈다.
이번 2편에서는 진짜로:

• server/에 Express 서버 띄우고 기본 엔드포인트 몇 개 만들고
• client/에 React 앱 하나 깔아서 브라우저에서 뜨게 만들고

까지 해서, Jobby의 백엔드/프론트 뼈대를 둘 다 눈으로 확인하는 게 목표.

---

백엔드: Express 서버 기본 뼈대

server/index.js 기준으로 Express 서버 하나 만들었다.

const express = require("express");
const app = express();
const PORT = 5000;

app.get("/", (req, res) => {
  res.send("Jobby server is running");
});

app.listen(PORT, () => {
  console.log(`Jobby server is running on port ${PORT}`);
});

app.get("/health", (req, res) => {
  res.send("ok");
});

app.get("/intro", (req, res) => {
  res.send("이 엔드포인트에는 나중에 자기소개 문구가 들어갈 예정입니다.");
});

• / : 서버 살아 있는지 대충 느낌만 보는 기본 엔드포인트
• /health : 나중에 모니터링/헬스체크용으로 쓸 예정
• /intro : Jobby가 나중에 자기소개 문구를 돌려줄 자리(지금은 더미 텍스트)

터미널에서 node index.js 돌려놓고, 브라우저에서 http://localhost:5000/, /health, /intro까지 열어보면 전부 응답이 온다.

---

프론트엔드: React(Vite) 기본 앱 생성

client/ 폴더 안에 Vite + React로 프론트 앱을 만들었다.

cd client
npm create vite@latest .
# Framework: React
# Variant: JavaScript
npm install
npm run dev

Vite가 알려준 주소(보통 http://localhost:5173)에 들어가면 기본 React 화면이 뜬다.
이 화면은 나중에 Jobby 채팅 UI로 갈아엎을 예정이라, 지금은 “프론트 빌드/개발 환경이 돌아간다” 정도만 확인.

---

현재 구조 스냅샷

지금까지 작업 후 폴더 구조는 대충 이렇게 됐다.

jobby/
├── server/
│   ├── index.js        # Express 서버 + /, /health, /intro
│   ├── package.json
│   └── package-lock.json
├── client/             # Vite + React 기본 앱
│   ├── index.html
│   ├── package.json
│   └── src/ ...
├── .gitignore
└── README.md (예정)

1편에서 계획만 적어놨던 구조가 이제 실제 코드/파일로 채워진 상태.

---

오늘 실제로 한 작업 (로그)

• server/에 Node.js + Express 설치
• server/index.js 작성해서 /, /health, /intro 엔드포인트 구현
• node index.js로 서버 띄우고, 브라우저로 직접 응답 확인
• client/에 Vite + React로 기본 앱 생성
• npm run dev로 프론트 개발 서버 띄워서 화면까지 확인

---

다음 글에서 할 것

• 서버 쪽에 Dialogflow용 설정 파일 틀(server/config/dev.js 템플릿) 만들기
• Google Cloud에서 Jobby용 프로젝트/서비스 계정 만들어서 키 준비
• React 쪽에서 Jobby 소개 화면을 지금 서버(/intro)랑 진짜로 연결해 보기