Spring&React 보일러플레이트로 개발 환경 구성 한 번에 끝내기

하나의 서비스나 프로젝트를 완성하려면 개발에 앞서 준비해야 할 단계가 많습니다. 그 중 환경 설정은 개발하기 전에 꼭 필요한 단계입니다. 숙련된 개발자라면 능숙하고 쉽게 할 수 있지만, 초심자라면 이것저것 비교하면서 구성에 시간을 많이 투자해야 해요.

초심자에게는 프로젝트에 필요한 최신 개발 환경을 빠르게 생성할 수 있는 치트키가 있으면 좋겠죠? 바로 구름IDE 이미지팩입니다. 컨테이너만 생성하면 바로 프로젝트를 시작할 수 있어요.

이미지팩을 소개합니다

스프링 부트(Spring Boot)와 리액트(React)는 많이 사용하는 조합이죠. 이번 이미지팩은 이 둘로 개발 환경을 구성한 보일러플레이트입니다.

이미지팩에는 API로 요청한 현재 시각을 화면에 그려주는 기본적인 세팅만 되어있습니다. 스프링 부트와 리액트 외 DB나 상태 관리 툴은 사용하지 않았기 때문에 자유롭게 활용하실 수 있는 게 장점이에요.

✅ 파일 구조 가이드라인

프론트엔드는 front 디렉터리에 있으며 하위 src 디렉터리에서 파일 구조를 확인할 수 있습니다.

front/src/App.js : 랜딩 페이지입니다.
front/src/components/ : Hello 컴포넌트가 세팅되어 있습니다.
front/src/api/ : API를 요청해 데이터를 받아오는 함수가 있습니다.

백엔드는 back 디렉터리에 있으며 하위 src 디렉터리에서 파일 구조를 확인할 수 있습니다.

back/src/main/java/com/example/ : 자바 파일을 작성하기 위한 com.example 패키지가 있습니다.
back/src/test/java/ : 테스트 파일을 작성하는 곳입니다.
back/src/main/resources/ : 스프링 부트에서 사용할 리소스를 담고 있습니다.
back/src/main/resources/application.properties : 스프링 부트 전체 설정을 갖고 있습니다.

어떻게 생성하나요?

1. 이미지팩 컨테이너 생성하기

1) 콘솔 대시보드 왼쪽 사이드바에 있는 [이미지팩]을 누릅니다.

2) Spring&React Boilerplate 이미지팩 [생성하기]를 누릅니다.

3) [컨테이너 이름]을 입력하고 [컨테이너 생성하기]를 누릅니다. [설명]은 선택사항입니다.

4) 컨테이너를 생성하는 데 잠시 시간이 걸립니다. 생성된 컨테이너에서 [▶ 실행]을 눌러 생성된 컨테이너를 실행합니다.

2. 도메인 주소와 포트 등록하기

3000 포트와 8080 포트에 도메인을 등록합니다. 3000 포트는 프론트엔드 서버, 8080 포트는 백엔드 서버입니다.

1) 상단 메뉴바 [프로젝트]-[실행 URL과 포트]를 누릅니다.

2) 지금은 80 포트만 등록되어 있습니다. 먼저 원하는 도메인을 입력하고 PORT에 3000을 넣고 [등록]을 누릅니다. 도메인 이름은 겹치지 않는 범위에서 마음대로 선택할 수 있습니다. 모든 설정을 마친 다음 3000 포트에 등록한 URL로 접속하면 프론트엔드 화면을 볼 수 있어요.

한 번 더 원하는 도메인을 입력하고 PORT에 8080을 넣고 [등록]-[확인]을 누릅니다. 이때 도메인은 3000 포트에 입력한 도메인과 달라야 합니다.

3) /front/.env.development 파일을 더블클릭합니다. 1행의 https://react-spring-test-2.run.goorm.io를 지우고 이전 단계에서 설정한 8080 포트의 도메인 주소를 입력합니다. 입력한 내용을 저장합니다.(단축키 : 윈도우 Ctrl+S / 맥OS Command+S) 프론트엔드 디렉터리에서 백엔드로 접근하려면 필요한 작업입니다.