Spring + React 간단 샘플 프로젝트 만들기(1)

기본 개발환경 세팅

1. 개발툴 설치

• vs code download page
• Intellij Ultimate download page

2. Node 설치

https://nodejs.org/en/download 에 접속해서 자신의 OS 에 맞게 설치합니다.

3. DB 준비

PostgreSQL 를 사용할 것이며 docker 기반으로 실행할 겁니다.

docker run \ 
--name postgres \ 
-p 5432:5432 \
-e POSTGRES_PASSWORD=postgres \
-d postgres

React 개발 초기 세팅

1. 기본 프로젝트 껍데기 생성

npm create vite@latest

2. 의존성 설치

cd my_project # 껍데기 프로젝트로 이동
npm install # 기본 세팅된 의존성 설치

3. vs-code 로 프로젝트 열기

생성한 프로젝트 디렉토리를 vs code 로 열고
아래와 같이 플러그인 2개를 설치해줍니다.

alt + f12 를 입력해서 터미널 열고 npm run dev 입력해서 실행 테스트

4. tailwind 설치

npm install tailwindcss @tailwindcss/vite # 추가 의존성 설치

이후에 아래처럼 vite.config.ts 파일의 plugins 배열에
tailwindcss() 을 하나 추가해줍니다.

마지막으로 src > index.css 파일의 내용을 싹다 지우고,
@import "tailwindcss"; 라고 한줄 추가해줍니다.

Spring 개발 초기 세팅

Intellij 실행하고, 아래처럼 예시 프로젝트 생성합니다.
프로젝트 명, 경로 등은 여러분들 맘대로 해도 됩니다~

의존성만 주의해서 아래처럼 추가하면 됩니다.

• Spring Web
• Lombok
• PostgreSQL Driver
• Spring Boot DevTools
• Spring Data JPA

이후에 프로젝트 생성되면 아래처럼 application.properties 세팅

spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=postgres

spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.show-sql=true

마지막으로 @SpringBootApplication 애노테이션이 붙은 class 의
main 문 실행해서 정상 기동 테스트하면 끝입니다.

---

여기까지 일단 기본 개발환경 세팅은 끝입니다.