Spring & React 프로젝트 (1) - 개발 환경 세팅 (goormide)

 

안녕하세요.

열정열정열정 개발자입니다.!!

 

 

 

 

이번에 2인 프로젝트를 진행하게 되었어요.

저는 백엔드 부분을 맡아 진행할 예정이에요.

 

둘 다 왕초보 개발자이기 때문에 부족한 점도 많고 이상한 점도 많겠지만..

공부하면서 올려보겠습니다.

(댓글로 피드백 주시면 고쳐볼게요!)

 

 

stack

front	react
	redux
	postCSS
back	spring
	mariaDB
협업	github
	notion

react는 자주 사용되는 라이브러리로 개발, 유지보수가 편하다는 장점이 있기 때문에 사용하게 되었습니다.

spring 프레임워크도 많이 사용되는 프레임워크라고 생각돼서 이렇게 진행하려고 합니다.

 

 

 

환경설정

저희는 goormIDE에서 진행하겠습니다.

 

먼저, goormIDE 사이트에 접속해 줍니다.

https://ide.goorm.io/

goormIDE - A Powerful Cloud IDE Service

 

그리고 로그인합니다.

 

 

 

 

그리고 왼쪽 메뉴에서 이미지팩을 클릭합니다.

 

 

 

 

 

 

저희는 Spring&React Boilerplate에서 생성하기 해주었어요.

 

 

 

 

 

컨테이너 이름과 설명을 적어줍니다.

 

 

 

 

 

컨테이너 생성하기를 누르면 컨테이너가 생성됩니다.

 

 

 

 

 

 

실행하기에 앞서 컨테이너 설정을 해줄게요.

 

 

 

 

 

저는 2인 프로젝트여서 팀원을 초대해 주었어요!

이메일을 입력해서 초대할 수 있어요. (권한도 설정가능!)

 

 

 

 

 

이제 새로 생성된 컨테이너를 실행하면 이런 화면이 뜹니다.

 

 

 

 

 

 

왼쪽 프로젝트 폴더를 보시면 이렇게 파일이 세팅되어 있습니다.

 

 

 

 

 

터미널 새로고침도 해주어야 해요!

 

 

 

 

 

왼쪽 위에 컨테이너 > 실행 URL과 포트를 클릭한 후 

 

 

 

 

 

URL을 설정해 주어서 jjproject-front로 접속하면 프론트엔드 화면을 볼 수 있도록 해주었어요.

prot 번호는 3000번으로 설정했습니다.

등록을 눌러주고

 

 

 

 

 

back 부분도 등록해 주었어요.

 

 

 

 

 

그리고 처음에 있던 URL은 삭제해 줄게요.

 

 

 

 

 

front.env 파일에 들어가 방금 생성한 백엔드 URL을 넣어주어야 해서 복사해 줍니다. 그리고 확인 눌러주세요.

 

 

 

 

front 폴더의 .env.development를 들어간 후 

 

 

 

 

 

이 부분을

 

 

 

 

 

복사한 URL을 바꿔 넣어주었어요.

 

 

 

 

 

그리고 터미널에

cd front
npm install

을 입력해 줍니다.

front 폴더로 이동해서 npm 모듈을 설치했습니다.

 

 

 

 

프로젝트 실행 방법

1. 백엔드 실행

./mvnw spring-boot:run

cd back 해서 back 폴더로 이동해서 입력해야 합니다.

 

 

 

 

 

그러면 이렇게 실행됩니다.

 

 

 

 

 

2. 프론트 실행

이번엔 왼쪽 위에 창 > 새 터미널 창을 클릭해 줍니다.

 

 

 

 

cd front
npm run start

프론트를 실행시켜 줍니다.

 

 

 

 

 

 

그러면 이렇게 결과가 정상적으로 작동되는 것을 확인할 수 있습니다.

front URL을 주소창에 입력해서 들어가시면 위 사진과 같은 화면이 정상적으로 나옵니다.

(다른 컴퓨터에서도 접속 가능)

 

 

 

 

끗!