정적페이지는 앞서 만든 Welcome과 같은 서버에 올려둔 html을 그대로 웹브라우저에 보내는 방식이다.

 

정적페이지 설명

 

Spring Boot Features

Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and Servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest

docs.spring.io

이전에 static폴더에 index.html이 있지만, 상관하지 않고 hello-static.html을 작성한다.

<!DOCTYPE HTML>
<html>
<head>
    <title>static content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>
<body>
정적 컨텐츠 입니다.
</body>
</html>

이제 톰캣 서버를 구동시켜서 잘 작동하는지 확인해 보겠습니다.

 

웹 브라우저에 localhost:8080을 한번 입력해 보겠습니다

index.html

기존에 입력한 index.html이 로드된다. 우리가 방금 작성한 hello-static.html을 띄우기 위해서는

localhost:8080/hello-static.html 를 주소창에 입력해야합니다.

 

스프링 부트를 사용하여 본격적으로 웹 개발을 해보도록 해볼게요

 

웹을 개발하는 방법은 크게 3가지가 있습니다.

 

  • 정적 컨텐츠
  • MVC와 템플릿 엔진
  • API

먼저, 정적 컨텐츠는 앞서 Welcome페이지 처럼 파일을 서버에 올려두고 서버에서 웹 브라우저로 보내는 방식입니다

두번째, MVC와 템플릿 엔진

 - JSP, PHP는 템플릿 엔진으로, 서버에서 프로그래밍을 해둬서 시스템을 동적으로 변환시켜 웹 브라우저로 보내는 방식입니다

 - MVC(MVC패턴)는 Model, View, Controller의 약자디자인패턴 중 하나입니다.

출처:XESCHOOL

Model은 어플리케이션이 “무엇”을 할 것인지를 정의 합니다. 내부 비지니스 로직을 처리하기 위한 역할을 할 것입니다.

  • 처리되는 알고리즘, DB 와 상호작용(CRUD Create Read Update Delete), 데이터 등등..

Controller는 모델이 “어떻게” 처리할 지를 알려주는 역할을 할 것이고, 모바일에서는 화면의 로직처리 부분입니다. 화면에서 사용자의 요청을 받아서 처리되는 부분을 구현되게 되며, 요청 내용을 분석해서 Model과 View에 업데이트 요청을 하게 됩니다.

  • 사용자로 부터의 입력 을 받고 Model 또는 View중개인 역할

View는 화면에 “무엇” 인가를 “보여주기 위한 역할”을 합니다. 컨트롤러 하위에 종속되어, 모델이나 컨트롤러가 보여주려고 하는 모든 필요한 것들을 보여줄 것입니다.

  • 최종 사용자에게 “무엇”을 화면(UI)으로 보여줌

 

마지막으로, API는 안드로이드, 아이폰 플랫폼을 개발할 시에 JSON(JavaScript Object Notation)이라는 데이터 구조 포맷을 통해서 클라이언트에 전송하는 방식이다.

서버끼리 통신할 때에도 API를 사용한다. 서버끼리 데이터를 주고받는데 hpml이 사용안되기 때문이다.

 

 

우리는 Tomcat을 실행시켜 내부 서버를 구동해봤다.

하지만 아무런 내용이 없었는데, 이제 내용을 채워서 뭔가를 만들어보도록 하겠다.

 

프로젝트를 열어서 resources - static폴더를 누른다.

static은 정적폴더로 변화하지 않는 내용들을 넣으면 된다. 우리는 static폴더에 웹사이트 방문시 처음 뜨는 Welcome Page(대문)을 만들어보도록 하겠다.

더보기

 

 

 

static - 마우스 우클릭 - New - File - index.html 입력 - 파일 생성 완료

 

더보기
<!DOCTYPE HTML>
<html>
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>
<body>
Hello
<a href="/hello">hello</a>
</body>
</html>

index파일에 welcome page 내용을 입력해주고 저장, 서버를 재실행 한다

 

wellcome가 잘 만들어졌음을 확인할 수 있다.

static/index.html 을 올려두면 Welcome page 기능을 제공한다.

 

방금 만든 Welcome 페이지는 정적페이지로, 단순히 웹브라우저로 응답을한 것이다(파일을 전송한 것) - 프로그래밍이 아니다.

그런데 템플릿 엔진이라는 기능을 사용하면 루프를 넣거나 대문의 모양을 바꿀 수 있다.

여기서는 thymeleaf(타임리프)라는 템플릿 엔진을 사용하도록 하겠다.

thymeleaf 공식 사이트:  https://www.thymeleaf.org/
스프링 공식 튜토리얼: https://spring.io/guides/gs/serving-web-content/

스프링부트 메뉴얼: https://docs.spring.io/spring-boot/docs/2.3.1.RELEASE/reference/html/spring-boot-features.html#boot-features-spring-mvc-template-engines

 

 

Spring Boot Features

Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and Servlet-based web applications. It occurs as part of closing the application context and is performed in the earliest

docs.spring.io

 

스프링부트에서 사용가능한 템플릿 엔진 4가지

스프링 부트에서는 FreeMaker, Groovy, Thymeleaf, Mustache 4가지 탬플릿 엔진을 지원한다.

 

이제 무언가 동작하고, 프로그래밍되는 것을 해보도록 하겠다.

홈페이지, 서버가 작동하기 위해서는 이를 동작하게 하는 방식이 있을 것이다.

이를 동작하게하고 조정하는 Controller(조건등이 기입된 매뉴얼)가 필요하다

 

Controller는 main - java - hello.hellospring 폴더 클릭 - 오른쪽 마우스 - New - Package - controller 입력

 

controller 패키지를 생성해주고 여기에서 Java Class 파일을 다시 생성해서 HelloController로 이름지어준다

 

HelloController에 @Controller라고 어노테이션을 해주면 템플릿 엔진을 사용하기 위한 기본 준비가 끝난다

 

이제 hello라는 주소로 접속하게되면 해당 페이지를 띄우도록 하는 문법을 적도록 하겠다.

    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data","hello!!꺅");
        return "hello";
    }
    //hello로 들어오는 주소를 받아서 맵핑해주는 문구
}

여기까지 작성한 다음 resources - templates폴더를 선택 - hello.html이라는 파일을 생성해준다

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
//th:는 2번째 줄에서 thymeleaf 템플릿을 사용한다고 선언한 후, 이를 적용하는 것이다
</body>
</html>

앞서 Controller에서 data라는 mole을 만들고 이 값이 hello!!꺅으로 만들었었다. ( 쉽게 설명하면 data = hello!!꺅)

이제 서버를 구동시켜서 hello라는 페이지로 접속을 하면 우리가 html과 Controller로 작성한 문법에 따라 대문(Welcom page)에 텍스트가 나타나게 된다.

 

 

저장하고, 서버를 꼭 껐다가 다시 재실행해야 우리가 의도, 입력한 값이 나온다.

 

 

어떻게 이렇게 나오나? 궁금할 것이다.

예를 들어보도록 하겠다.

  • 친구가 철수를 만나러 철수네 집에 찾아간다
  • 철수(hello)는 톰캣구 서버로8080에 산다
  • 철수(hello)를 부른다
  • 철수네 엄마가 계셨고, 철수를 불러주신다고 한다
  • 철수가 나온다

localhost:8080 - 톰캣구 서버로8080. 철수네 집에 찾아간다

localhost:8080/hello - 철수네 집에서 철수를 부른다. "철수야~"

helloController - 우리집의 컨트롤러인 엄마가 철수를 불러주신다 "철수야~ 친구왔다" return "hello"

앞서 gradle 파일을 보면서 그 내부에는 우리가 필요한 기능을 불러오도록 라이브러리를 설정한다고 했다.

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

우리가 사용하고자 하는 라이브러리는 'thymeleaf', 'starter-web', 'starter-test'로 총 3가지이다.

그러면 이 라이브러리들이 보관된 '외부 라이브러리(External Libraries)'를 보도록 하겠다.

 

내가 사용하겠다고 설정한 라이브러리는 3개인데 프로그램이 알아서 로드한 라이브러리는 엄청 많다.

뭔가 잘못된 것일까?

 

의존성?

-Gradle은 의존관계가 있는 라이브러리를 함께 다운로드 한다

더보기

적절한 예가 뭐가있을까 생각하다가 '밀키트'가 떠올랐다.

요즘 혼자사는 가구가 많아지면서 장을 많이 볼 수가 없는데, 1~2인용 밀키트(재로가 다 진공포장된 상품)가 인기있다.

집밥이 먹고싶어서 '부대찌개 밀키트', '된장찌개 밀키트', '김치찌개 밀키트' 총 3개의 밀키트를 주문했다.

나는 3개의 상품을 주문했는데, 각각 포장된 내부를 보니 구성품이 뭔가 많았다.

 

부대찌개 밀키트 - 햄1, 햄2, 햄3, 면사리, 파, 마늘, 김치, 콩
된장찌개 밀키트 - 된장, 두부, 애호박, 감자
김치찌개 밀키트 - 돼지고기, 김치, 고추가루, 마늘, 파, 두부

나는 부대찌개가 필요해서 주문을 했는데, 이를 만드는 재료들이 의존하게(?), 부가적으로, 필수불가결하게 따라오게 된다.

 

더보기

사과가 먹고싶어서 사과를 샀다.

그런데 사과가 만들어지기까지 어떤것들이 수반되어야할까?

 

토지, 비료, 사과묘목, 물, 날씨, 햇빛, 1년 시간, 관리인, 농약 etc...

 

=> 내가 필요한 라이브러리는 사과인데 그 사과를 만들기 위한 요소들이 외부 라이브러리로 다운되게 된다

라이브러리를 구성하는 하위 라이브러리

프로젝트를 실행해보면서 스프링 부트를 이해해보도록 하겠다.

@SpringBootApplication
public class Hello2Application {

    public static void main(String[] args) {
        SpringApplication.run(Hello2Application.class, args);
    }
// main매서드를 실행하면 Hello2Application라는 class를
// 어노테이션된 SpringApplication를 통해서 run시키게된다.
// @SpringBootApplication은 tomcat이라는 내부 웹서버를 내장하고 있다.
// 이를 내장 서버를 실행시키면서 스프링이 실행되는 것이다.
}

main 하위폴더의 HelloSpringApplication 파일을 더블클릭해서 활성화한 후, 실행을 해보도록 하겠다.

우측 상단의 초록색 재생버튼을 누르면 자체적으로 실행이 된다.

스프링부트, 버전 그리고 무서운 영어들(에러나서 hello2라는 새로운 파일로 작성)

실행 버튼을 누르면 영어로 뭔가 구동이 되는 모습이 보여진다.

이중 중요한 것은 Tomcat started on port(s): 8080부분으로 8080 port(포트)에서 뭔가 실행됐음을 알려주고있다.

 

localhost:8080 접속화면

웹브라우저를 통해서 localhost:8080에 접속하게되면 Error페이지가 나타나게 된다.

에러지만 성공한 것이다. 아무런 소스코드를 적지 않았기에 Error페이지가 구동된 것이다.

종료후 localhost:8080 재접속

이번에는 구동을 멈추고 localhost:8080에 재접속하면 서버에 접속할 수 없다는 창이뜨게된다.

이제 프로젝트 환경 설정을 마쳤다.

2번째로 알아볼 파일은 .gitignore이다.

.gitignore

.gitignore 파일은 Git을 쓰면서 코스 코드 관리를 해주어야 하는데, 이때 필요한 소스코드 파일만 업로드 시키고 불필요한 결과물 등은 업로드 되지 않도록 설정하는 파일이다.

HELP.md
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/

### STS ###
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/

### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

### VS Code ###
.vscode/

프로젝트 생성후, 파일을 열어보면 다음과 같은 사진이 보인다

스프링부트로 사전에 접하지 않은경우 많은 폴더(하위폴더)와 파일들로 당황하게될 것이다.

 

먼저, .idea는 IntelliJ가 사용하는 설정 파일로 프로젝트를 채워가면서 우리가 거드리지 않는 파일이다.

다음으로, Gradle Wrapper를 이용하면 Gradle이 설치되지 않은 시스템에서도 프로젝트를 빌드할 수 있다.

 

다음으로 src폴더가 있다.

src하위에는 main폴더와 rewources폴더가 있다.

main폴더 밑에는 java폴더와 실제 패키지와 리소스 파일들이 있다.

                      resources에는 java코드 파일을 제외한 xml이나 html,  properties(프로퍼티스) 등 설정파일이 들어간다

test에는 테스트 코드들이 들어간다.

 

build.gradle이 가장 중요한데 일단 입문자단계에서는 버전설정과 라이브러리를 가져오도록 설정한다고 이해하면 편하다

build.gradle의 내부 모습

내부 텍스트에서 7번줄부터

group는 처음 프로젝트 생성시 적었던 hello

source는 자바 11버전으로 만들어졌음을 나타내고있다

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    //템플릿 엔진
	implementation 'org.springframework.boot:spring-boot-starter-web'
    //웹 프로젝트
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
    //test라이브러리가 자동으로 포함됨
	//JUnit5가 자동으로 들어간다
}

이러한 라이브러리를 사용하려면 다운을 받아야하는데, 이때 mavenCentral에서 다운받도록 설정됨

repositories {
	mavenCentral()
    //필요에 따라 특정 사이트의 url을 입력할 수 있음
}

+ Recent posts