[Infra] Github Web 개발 헙업 환경 설정 (Feat. Spring Boot, React)

- Goals

팀원과 협업이 가능하도록 Github에 프로젝트 생성 및 초기 설정 작업

 

 

- 개발 환경 및 Tools

Windows

Github

Intellij & Spring boot

Vscode & React.js

 

 

 

 

1. Github 설정

우선 Github에 새로운 Repo를 생성합니다.

 

 

 

Settings - Collaborators - Manage access에서 협업할 팀원을 초대합니다.

 

 

 

master
- develop-fe
- develop-be

이번 프로젝트는 BE와 FE 모두 하나의 Repo에서 관리할 것이기 때문에  FE와 BE를 위한 별도의 브랜치를 각각 생성해서 진행할 것입니다.

 

 

git checkout -b "develop-be"

git push --set-upstream origin develop-be

생성한 Repo를 로컬 PC에 Clone하고, 앞서 작성한 것과 같이 develop-be, develop-fe 브랜치를 생성하였습니다.

 

브랜치 생성 방법은 여러 개가 있는데 저는 로컬에서 check 명령어 후 push하는 방법을 가장 많이 사용합니다.

 

BE용 브랜치와 FE용 브랜치 모두 생성합니다.

 

 

 

 

2. Back-End Setting

Spring 프로젝트 생성

https://start.spring.io/

 

spring boot 초기 설정은 start.spring.io에서 진행합니다.

 

Spring boot version 중 snapshot이 붙은 버전은 아직 개발이 완료되지 않은 버전이기 때문에 없는 것 중 최신 버전이 좋다고 합니다.

 

사용할 Dependencies를 선택하고 Generate를 눌러줍니다.

 

 

 

로컬 환경에 clone한 Repo 위치로 가서 Generate로 내려받은 압축 파일을 풀어줍니다.

 

압축 해제 시 현재 브랜치가 BE인지 확인이 필요합니다.

 

이때 백엔드와 프론트앤드 프로젝트가 헷갈리지 않도록 저는 중간에 BE라는 추가 디렉토리를 생성하였습니다.

(ex. root/BE/프로젝트)

 

 

 

 

IntelliJ Setting

Intellj에 들어가서 start.spring.io로 생성한 프로젝트를 열어줍니다.

 

File - Open에 들어 간 후, 방금 압축을 푼 위치로 이동하여 압축을 풀었을 때 나온 가장 최상단 디렉토리를 선택하시면 됩니다.

 

 

 

 

처음 프로젝트를 열면 약 1~2분 정도 Dependency 및 설정 파일을 다운 받는데 시간이 소요됩니다.

 

오른쪽 하단에 상태 바가 없어지고 알림 창에 BUILD SUCCESSFUL 이라고 뜬다면 정상적으로 프로젝트 생성이 완료된 것입니다.

 

 

 

만약 정상적으로 나와야 하는데 에러가 뜨는 경우 설정이 제대로 완료되지 않은 것입니다.

 

초기 설정에서 에러가 떴다면, 일반적으로 JDK 버전이 문제일 확률이 높습니다.

 

File - Settings - Build, Execution, Deployment - Build Tools - Gradle - Gradle Project에 들어가 Gardle의 JVM 버전이 이전 start.spring.io에서 설정한 버전과 동일한지 확인해줍니다.

 

 

 

올바른 버전을 선택하고 OK를 누르면 다시 설치가 진행될 것입니다.

 

추가적으로 Build and Run에 있는 Build and run using과 Run tests using을 JDK가 아닌 Intellij IDEA로 변경하면 조금 더 빠른 속도로 build와 run이 진행되기 때문에 변경하시는 것을 권장드립니다.

 

 

 

 

application.yml

root - src - main - recources 하위에 application.properties가 있는데, 이를 application.yml로 변경해줍니다.

 

 

yml 장단점으로는
계층 구조로 가독성이 높음
key/value, map, list를 지원함
python, ruby, java 등의 언어에서 사용함
하나의 yml에 여러 profile을 쓸 수 있음
@PropertySources 지원하지 않음

등 이있는데요.

 

따라서 최근에는 properties 대신 yml을 많이 사용하는 편이라고 합니다.

 

 

 

spring:
	data:
		# radis:
        
		database:
			driver-class-name: com.mysql.cj.jdbc.Driver
			url: jdbc:mysql://localhost:3306/스키마명?serverTimezone=Asia/Seoul&useSSL=false&useUnicode=true&characterEncoding=utf8
			username: angelplayer
			password: angelplayer1234
	jpa:
		show-sql: true
        ddl-auto: create # 처음 생성 시 create, 이후로는 validate 
        
    properties:
		hibernate:
			dialect: org.hibernate.dialect.MySQL8Dialect
        	format_sql: true
    
# 로그 설정
logging:
	level:
		root: info
		org:
			springframework:
				security: debug
		hibernate:
        	sql: debug
        	type:
          		descriptor:
            		sql: trace

위에 보이듯이 yml 파일은 계층 형태로 기존의 properties에 비해 훨씬 간결한 문법을 가지고 있습니다.

 

파이썬과 같이 계층별 탭(띄워쓰기)을 맞춰주지 않으면 에러가 발생하니 유의해야 합니다.

 

 

 

Spring과 연결할 Database 스키마를 생성하였습니다.

 

 

 

Java 폴더에 실행 파일을 동작하였을 때 정상적으로 실행된다면 성공적으로 초기 설정이 마무리 된 것입니다.

 

 

 

 

3. Front-End Setting

npm create vite@latest
# 프로젝트 명 작성, React 선택, TS vs JS 선택

 

마찬가지 먼저 Front용 브랜치로 이동하여 진행합니다.

 

프로젝트를 생성할 위치에서 터미널을 열어주시면 됩니다.

(ex. root/FE)

 

저는 Vite를 사용할 것이기 때문에 npm create vite 명령어로 프로젝트를 생성하였습니다.

 

위 명령어를 통해서 프레임워크와 언어를 선택하고 생성이 완료되면 Done이라고 화면에 표시됩니다.

 

 

 

cd 프로젝트명
npm install

npm run dev

프로젝트 생성 후 기본 modules를 설치해야 하기 때문에 프로젝트 루트 디렉토리로 들어가서 npm i 명령을 수행합니다.

 

설치가 모두 완료되고 나면 npm run dev 명령어로 성공적으로 작동하는지 확인합니다.

 

 

 

 

성공하면 위와 같이 터미널에 문구가 뜨게 됩니다.

 

 

 

vite에서 제공하는 로컬 URL로 들어가면 정상적으로 테스트 화면이 잘 뜨는 것을 확인할 수 있습니다.