본문 바로가기
서버/스프링

[Spring] 스프링 부트로 내 서버에 정적인 웹 화면 띄우기

by 베어 그릴스 2022. 8. 2.
320x100

 

다른 공부에 비해 백엔드 공부를 시작하기엔 너무 막막할 때가 많죠??

 

네트워크 공부부터 시작해서 OS, 컴퓨터 구조 등의 CS 지식을 요구할 때가 많고 시작을 어떻게 해야 할지 잘 모르니까요.

 

우선 백엔드를 시작하려면 서버 구축이 되어있어야 합니다. 또, 우리(클라이언트)는 해당 서버에 데이터 요청을 보내고 데이터를 얻어오고 하는 등의 복잡한 과정을 거쳐야 합니다.

 

예전에는 이러한 과정을 정말 자바 코드 한 줄 한 줄로 힘겹게 했지만 스프링의 등장으로 전혀 그럴 필요가 없어졌습니다.

 

오늘 사용해볼 것은 스프링 부트인데요!

 

스프링은 사실 사전에 설정해주고 해야 할 것들이 너무 많아 복잡한 반면 스프링 부트는 이렇게 복잡하고 어려운 스프링을 편리하게 사용할 수 있도록 지원하는 도구라고 생각해주시면 되겠습니다.

 

 

 

백문이 불여이일견!

 

오늘은 그래서 간단하게나마 스프링 부트 프로젝트를 사용해서 간단한 웹 화면과 API를 하나 만들어보고자 합니다.

 

1. 인텔리제이에서 스프링 부트 프로젝트 만들기


(인텔리제이 IDE가 깔려있다고 가정하고 진행하겠습니다)

 

 

 

1. 인텔리제이를 실행해서 New project -> spring initializer를 선택.

2. 설정을 위와 같이 해줍니다.

 

  • Name : 프로젝트 이름을 설정합니다.
  • Location : 프로젝트 파일이 위치할 곳을 지정합니다.
  • Language: 사용할 언어를 지정합니다.
  • Type : 프로그램 Type을 지정합니다. (이것으로 라이브러리 등 어플리케이션의 주요 설정을 할 수 있습니다. 요즘엔 대부분 Gradle을 사용합니다.)
  • Group : 대부분 회사의 도메인 명을 사용합니다.
  • Artifact : 프로젝트 이름과 똑같게 설정합니다. 결과적으로는 프로젝트 빌드명이 됩니다.
  • Project SDK : 개발 도구 (자바 jdk 등)을 설정합니다.
  • 사용할 자바 언어 버전을 설정합니다.
  • 프로젝트 실행 후 나올 파일의 확장자를 설정합니다. 자바로 실행하기 위해 대부분 jar로 설정해줍니다.

 

이제 우리가 사용할 스프링 부트의 버전과 사용할 라이브러리를 지정해주어야 합니다.

 

매우 방대한 라이브러리가 보일 텐데 저흰 웹을 만들기 위해 다음 두 개를 선택해줍시다.

 이제 Finish 하고 만들어 줍시다.

 

2. 스프링 부트 프로젝트 실행 및 화면 띄우기


 

이제 이렇게 생성이 되었을 겁니다.

 

이제 코드가 오는 src부분에서 테스트가 아닌 main부분에서 각각 다른 역할을 하는 새로운 패키지 세 개를 만들어줍시다. (정적인 화면을 만드는데 사용하진 않겠지만, 거의 모든 프로젝트가 갖고있는 일반적인 패키지입니다.)

 

  • controller: 직접 스프링 부트의 웹 tomcat서버로부터 통신을 받고 해당 통신에 알맞은 데이터를 반환해주는 역할을 합니다.
  • service: 비즈니스 로직을 처리합니다. (우리가 아는 일반적인 기능들의 처리)
  • repository: 데이터베이스에 CRUD( create read update delete)하는 기능을 처리합니다. 

즉, controller에서 url 등을 통해서 스프링부트 내장 웹 tomcat 서버로부터의 요청을 받으면 스프링 컨테이너에 있는 controller에 접근하여

 

controller에서 service에 접근하여 service에서 reposiory에서 데이터를 받아와 가공하여 반환해주거나, 바로 repository에 접근하는 등의 flow를 가지게 됩니다.

 

여기서 새로운 언어들이 많이 나오는데 우선은 야생형으로 진행하겠습니다!!

 

좀 더 구체적인 사항은 추후에 블로그 업로드 가능하도록 하겠습니다😥

 

자 이렇게 패키지가 나누어졌습니다.

 

패키지는 사실 그냥 '폴더'에 불가합니다. 즉, 우리가 만들 엄청나게 많은 클래스들을 기능에 맞게 나누어주는 역할을 하는 것이죠! (만약 프로젝트가 커져서 클래스가 100개가 넘어가는데 패키지로 나누어져있지 않다면.. 생각만 해도 무섭네요😨)

 

여기까지 하고 한번 실행을 해보도록 하죠!

 

우측 위에 run application을 눌러줍니다.

 

아래 콘솔 창에 이렇게 스프링 부트 애플리케이션이 실행되는 것을 확인하실 수 있습니다.

 

자 이제 주소창에 http://localhost:8080 (현재 나의 컴퓨터이기 때문에 localhost:8080 나중에 다른 서버로 띄우면 해당 서버의 IP혹은 도메인명이 됩니다.)을 검색해볼까요?

이렇게 어떤 page가 나오게 됩니다.

 

이렇게 ErrorPage가 나오는 이유는 resource 폴더에 있습니다.

  • static : controller에 접근하여 url mapping을 모두 해도 url mapping이 안되었을 때, 기본으로 띄울 html 파일이 있는 곳. (즉, 코드로 만들 동적인 화면이 있는 곳이 아니라 정적인 html 파일들이 있는 곳이라고 생각하면 편합니다. 이곳에 파일을 만들고 http://localhost:8080/파일명 해도 내 서버의 정적인 화면을 볼 수 있습니다.)
  • templates : controller에 접근하여 url mapping을 했을 때, 찾아지는 html 파일 (이때 viewresolver에 요청을 보내게 되는데 우선은 넘어가겠습니다)
  • apllication.properties : 스프링 부트에서 사용할 데이터베이스 연결, jpa 등 데이터 연결 방법 설정 등의 설정을 해줄 수 있습니다. 뒤에 확장자를. iml로 바꿔주면 iml 형식으로도 사용할 수 있습니다.

 

참고

정적 vs 동적? 정적인 것은 말하자면, 말 그대로 변화 없는 것을 말합니다. 보통 화면을 보면 여러 데이터들에 따라 화면에 나오는 데이터들이 달라지는 것을 쉽게 확인할 수 있습니다. 그런 화면을 바로 동적 화면이라 하고, 데이터 상관없이 그냥 같은 화면만 보여주는 화면을 정적인 화면이라고 할 수 있겠습니다. 

 

 

즉, 우리는 지금 웹 tomcat 서버에서 온 요청에 mapping 되는 html 파일이 하나도 없었고, 기본 root url일 때 index.html이라는 파일이 있다면 해당 화면을 띄어주는데, 해당 화면마저 없었기 때문에 위와 같은 404 에러 페이지를 보게 된 것입니다.

 

그렇다면 static에 한번 index.html 파일 원하는 것을 만들어서 넣어보고 다시 실행해보도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
김베어의 개발일지에 오신 것을 환영합니다
</body>
</html>

자 이제 다시 실행해보면,

내가 서버에서 만든 정적인 화면을 볼 수 있습니다.😎

728x90