[Stockly] (6) : React 프론트엔드 시작

 

https://ekeprl.tistory.com/74

[Stockly] (5) : React 프론트엔드 환경 설정

 

 

이전 포스팅에서 프론트로 React를 사용하기로했고 환경설정까지 마쳤다.

이어서 React를 설치하고 시작해보려고한다.

 

Stockly 백엔드(Kotlin/Spring Boot)는 어느 정도 완성해둔 상태라, 이제 React로 프론트엔드를 붙이기로 했다. 첫 단계로 프로젝트 생성과 폴더 구조만 정리한다.

왜 Vite인가

create-react-app은 공식적으로 유지보수가 종료됐다. 대안으로 Vite를 선택했다.

• 빌드/개발 서버 속도가 훨씬 빠름 (Rust 기반 esbuild 사용)
• 현재 프론트엔드 생태계의 사실상 표준

npm create vite@latest stockly-frontend -- --template react

• Framework: React
• Variant: JavaScript
• Linter: ESLint 

개발 서버 확인

cd stockly-frontend
npm install
npm run dev

VITE v8.2.0  ready in 215 ms
➜  Local:   http://localhost:5173/

localhost:5173 접속해서 기본 화면 뜨는 것까지 확인.

접속결과

백엔드와의 관계

백엔드(stockly)와 프론트(stockly-frontend)는 완전히 별도 프로젝트다. Spring Boot의 resources/static에 정적 파일을 넣는 구조가 아니라, 별도 Node 프로세스(localhost:5173)로 개발 서버를 띄우고 REST API(axios)로만 통신한다.

stockly_ekeprl/
├── stockly/            # 백엔드 (Kotlin, :8080)
└── stockly-frontend/    # 프론트 (React, :5173)

나중에 배포 시에는 npm run build로 뽑은 정적 파일을 Spring Boot 쪽으로 옮겨 한 서버에서 서빙하는 방식도 가능하지만, 개발 단계에서는 분리해서 진행한다.

폴더 구조

백엔드 패키지 구조(ai, stock, telegram, watchlist, auth)를 그대로 프론트 쪽에 대응시켰다.

src/
├── api/          # axios 인스턴스, 도메인별 API 호출 함수
├── components/   # 재사용 컴포넌트 (auth, stock, watchlist, news)
├── pages/        # 페이지 단위 컴포넌트
└── context/      # JWT 토큰 등 전역 상태

• axios 설치 완료
• 백엔드 CorsConfig에 localhost:5173 허용 여부 확인 필요

이어서 다음포스팅에서는 코드를 작성해보려고한다.

 

감사합니다.