의류 쇼핑몰 만들기 2
ChatGPT로 Spring Boot 프로젝트 만들기
지난화에서는 의류 쇼핑몰을 만들기 위해 html 페이지를 만들어보았다.
그러나 html 페이지만으로는 쇼핑몰을 만들 수 없다.
최소한 pc에 있는 파일을 인터넷으로 게시해야 다른사람이 볼 수 있을것이다.
인터넷 쇼핑몰을 서비스 하기 위해서는 웹서버를 만들어야 한다.
웹서버란 상품 목록, 주문하기 등 쇼핑몰 페이지를 제공하는 프로그램이 돌아가는 환경을 말한다.
우리는 Spring Boot를 사용해서 웹서버 및 쇼핑몰 프로그램을 만들것이다.
Spring Boot 프로젝트를 만들기 위해 https://start.spring.io 로 접속한다.
프로젝트 설정은 아래와 같다.
- Project: Gradle - Groovy
- Language: Java
- Spring Boot: 3.3.5
- Packaging: Jar
- JAVA 17
'ADD' 버튼을 눌러 나오는 팝업창에서 아래 플러그인을 검색해서 추가한다.
- Spring Web
- Lombok
- MariaDB Driver
- Spring Data JPA
- Thymeleaf
마지막으로 'GENERATE' 버튼을 누르면 demo.zip이라는 파일이 다운로드 될것이다.
Project Metadata를 설정하지 않았기 때문인데, Artifact가 파일명이 된다.
처음부터 제대로 자바 패키지를 작명하고 싶다면 원하는대로 하면 된다.
보통 Group에 회사명 등 대표적인 이름을 넣고, Artifact에는 제품/서비스 명을 쓴다.
원하는 폴더에 압축파일을 풀고 vscode로 연다.
vscode의 '확장'탭으로 가서 'Extension Pack for Java'를 검색해서 설치한다.
사용 편의를 위해 'Korean Language Pack for Visual Studio Code'도 설치해주는게 좋다.
잠시 기다리면 자동으로 자바 개발 환경이 세팅된다.
src/main/java 경로를 따라서 들어가보면 ...Application.java 파일을 찾을 수 있다.
Artifact명이 demo라면 DemoApplication.java일것이다. 해당 파일을 클릭해서 소스를 열어본다.
public static void main이라는 내용을 확인 할 수 있다면 정확히 찾아온것이다.
우측 위의 화살표를 클릭하거나 메뉴의 실행 - 디버깅 시작을 누르면 Spring Boot가 실행된다.
하지만 지금은 아무런 프로그램 내용이 없으므로 로고를 출력할뿐 아무런 동작을 하지 않을것이다.
ChatGPT를 열고 아래와 같이 프롬프트를 작성한다.
- Project: Gradle - Groovy
- Language: Java
- Spring Boot: 3.3.5
- Spring Web
- Lombok
- MariaDB Driver
- Spring Data JPA
- JAVA 17
위 설정으로 Spring Boot 프로젝트를 만들었다.
기본적인 구성과 샘플 페이지를 출력할 수 있도록 환경설정과 MVC 소스코드를 만들어줘.
여러가지 파일을 어떻게 설정하면 되는지 답변을 해준다.
우선 build.gradle과 src/main/resources/application.properties를 내용을 복사해서 붙여넣는다.
dependencies 아래의 ...starter-data-jpa, ...mariadb-java-client가 있는 줄은 // 로 주석처리 한 후,
우클릭 - 프로젝트 다시 로드를 클릭한다.
데이터베이스 관련 설정은 나중에 다시 할것이다.
...Application.java가 있는 경로에 controller 폴더를 만들고, 그 안에 SampleController.java를 만든다.
그리고 ChatGPT가 답변해준 내용중 컨트롤러 부분을 복사해서 붙여넣어준다.
여기서 자바 패키지를 보는 방법을 알아야하는데 소스코드를 보자.
package가 'com.example.demo.controller'이라고 했을때 main/java아래의 폴더 구조와 같다.
그리고 클래스명이 파일명과 동일하다.
이렇게 패키지와 클래스명을 일치시키는것은 자바의 특성이니 기억해두면 좋다.
컨트롤러가 준비되었다면 Spring Boot를 실행하고 웹브라우저를 연다.
http://localhost:8080 에 접속하면 컨트롤러에 지정되어 있는 텍스트가 출력될것이다.
이전화에서 만든 페이지중 메인 페이지만 가져와서 출력해보도록 하겠다.
아래와 같이 프롬프트를 입력한다.
home('/home')에 접속했을때 index.html 을 서비스할 수 있게 변경해줘
thymeleaf를 사용해서 서버사이드 렌더링할거야
resources/static 폴더를 만들고 styles.css를 복사해준다.
그리고 resources/templates 폴더를 만들고 index.html을 복사해준다.
참고로 탐색기 등에서 파일을 복사하고 vscode로 와서 폴더를 클릭하고 붙여넣기 하면 편하게 할 수 있다.
답변 내용에 따라 build.gradle 및 컨트롤러 소스도 변경해준다.
클래스명이 SampleController에서 HomeController로 변경되었으므로 파일명도 변경해준다.
Spring Boot가 실행되어있는 터미널을 클릭하고 Ctrl-C를 눌러 종료하고, 다시 실행해야 변경사항이 확인된다.
http://localhost:8080/home 에 접속해서 메인 페이지가 뜨는지 확인해보자.
만약 접속이 안되거나 404오류가 뜨거나 할 경우는 ChatGPT 답변 내용을 차근차근 따라해보자.
그리고 아래와 같이 프로젝트 빌드를 다시 시도해볼수도 있다.
vscode의 터미널 탭에서 아래와 같이 입력한다.
./gradlew clean build
이런식으로 쇼핑몰 웹페이지를 하나씩 인터넷에서 볼 수 있게 추가해 나갈 수 있다.
네트워크 환경만 설정 되었다면 지금 보고있는 페이지를 다른사람이 접속해서 볼 수 있을것이다.
이번 시간에는 ChatGPT를 활용해서 Spring Boot 프로젝트 설정의 기본을 다뤄보았다.
단지 html 페이지를 띄우는것으로는 쇼핑몰을 만드는데 한참 부족하다.
다음 시간에는 데이터베이스를 설정하고 상품 목록을 출력해보자.
이번화 ChatGPT 대화 공유
https://chatgpt.com/share/673ea5de-bf78-800e-98fe-60fd1f52aaaf
