본문 바로가기
스프링/스프링 웹

[Spring] 스프링 MVC - 웹 페이지 만들기 프로젝트 생성, 요구사항 분

by drCode 2023. 6. 13.
728x90
반응형

프로젝트 생성

https://start.spring.io

 

GENERATE 로 다운로드

 

원하는 폴더에 압축을 푼다.

 

File > Open
build,gradle로 선택해서 열어야 한다.

 

intelliJ 에서 컴파일 실행 시 속도가 조금 느릴 수 있는데

그 현상을 개선하기 위해서는

File > Settings > Build, Execution, Deployment > Build Tools > Gradle

File > Settings > Build, Execution, Deployment > Build Tools > Gradle 에서

Build and run using : IntelliJ IDEA

Run tests using       : IntelliJ IDEA

를 사용할 것

 

그러면 빌드 속도가 더 빨라질 것이다.

 

롬복 기능을 활성화 하기 위해서

 

File > Settings
Build, Execution, Deployment,> Compiler > Annotation Processors

Enable annotation processing 체크

 

build.gradle

plugins {
	id 'java'
	id 'org.springframework.boot' version '2.7.12'
	id 'io.spring.dependency-management' version '1.0.15.RELEASE'
}

group = 'hello'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
	compileOnly {
		extendsFrom annotationProcessor
	}
}

repositories {
	mavenCentral()
}

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

tasks.named('test') {
	useJUnitPlatform()
}

 

 

동작 확인

 - 기본 메인 클래스 실행 (SpringmvcAppication.main())

 - http://localhost:8080 호출해서 Whitelabel Error Page가 나오면 정상 동작

 

Welcom 페이지 추가

 

/resources/static/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>상품 관리
        <ul>
            <li><a href="/basic/items">상품 관리 - 기본</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

동작 확인 

 - 기본 메인 클래스 실행 (SpringmvcAppication.main())

 - http://localhost:8080 호출해서 Welcome 페이지가 나오면 성공

 

요구사항 분석

 

상품을 관리할 수 있는 서비스를 만들어본다.

 

상품 도메인 모델

 - 상품 ID

 - 상품명

 - 가격

 - 수량

 

상품 관리 기능

 - 상품 목록

 - 상품 상세

 - 상품 등록

 - 상품 수정

 

서비스 화면

상품 목록
상품 상세
상품 등록 폼
상품 수정 폼

 

서비스 제공 흐름

서비스 제공 흐름

요구사항이 정리되고 디자이너, 웹 퍼블리셔, 백엔드 개발자가 업무를 나누어 진행한다.

 

디자이너: 요구사항에 맞도록 디자인하고, 디자인 결과물을 웹 퍼블리셔에게 넘겨준다.

웹 퍼블리셔: 다자이너에서 받은 디자인을 기반으로 HTML, CSS를 만들어 개발자에게 제공한다.

백엔드 개발자: 디자이너, 웹 퍼블리셔를 통해서 HTML 화면이 나오기 전까지 시스템을 설계하고, 핵심 비즈니스 모델을 개발한다. 이후 HTML이 나오면 이 HTML을 뷰 템플릿으로 변환해서 동적으로 화면을 그리고, 또 웹 화면의 흐름을 제어한다

 

※ 참고

React, Vue.js 같은 웹 클라이언트 기술을 사용하고, 웹 프론트엔드 개발자가 별도로 있으면,

웹 프론트엔드 개발자가 웹 퍼블리셔 역할까지 포함해서 하는 경우도 있다.

웹 클라이언트 기술을 사용하면, 웹 프론트엔드 개발자가 HTML을 동적으로 만드는 역할과 웹 화면의 흐름을 담당한다.

이 경우 백엔드 개발자는 HTML 뷰 템플릿을 직접 만지는 대신에, HTTP API를 통해 웹 클라이언트가 필요로 하는

데이터와 기능을 제공하면 된다.

728x90
반응형

댓글