Window 10 Intellij SpringBoot MVC 프로젝트 만들기, GitHub 연동

 

목록

1. SpringBoot 3.3.2 버전 프로젝트 생성

2. 들어가기에 앞서 MVC 패턴 이해하기

3. SpringBoot ( Mybatis ) MVC 디자인패턴 전체 구조( Java 영역 )

4. SpringBoot ( Mybatis ) MVC 디자인패턴 전체 구조( resources 영역 )

5. SpringBoot ( Mybatis ) MVC 디자인패턴 전체 구조( src/main/webapp 영역 )

6. Intellij에서 만들었던 프로젝트 가져오기

7. Intellij 톰캣 설정

8. Intellij 프로젝트 Hierarchy 구조로 변경

9. 내장 톰켓에서 JSP를 사용하기 위한 Tomcat Embed Jasper 의존성 추가

10. 프로젝트 Git Hub연결

 

 

1. SpringBoot 3.3.2 버전 프로젝트 생성

SpringBoot와 OpenJDK 호환

Spring Boot 2.x JDK 11 버전까지만 호환이 되고,

Spring Boot 3.x JDK 17 버전부터 호환이 가능 합니다.

초기 프로젝트 구성	설명
Project	Maven 프로젝트로 구성
Language	Java로 설정
Spring Boot	3.3.2 버전 ( 2024.08.18 기준 )
Project Metadata	Group : com.rnbsoft Artifact : dress_code Name : dress_code Description : dress_code project for RnbSoft Project Package name : com.rnbsoft.dress_code Packaging : War Java : JDK 17 ( OpenJDK-17 따로 설정 예정 )
Dependencies	[ ADD DEPENDENCIES ] 버튼을 클릭 해서 하위 검색 후, 선택 Spring Web Spring Boot Dev Tools

프로젝트 설정을 전부 했다면

GENERATE 버튼을 클릭 해서 프로젝트를 생성 합니다.

 

 

Intellij workspace에 생성한 프로젝트 이동

( 압축 해제를 한다. )

 

2. 들어가기에 앞서 MVC 패턴 이해하기

MVC패턴은 Model, View, Controller 세 가지 요소로 구성되며,

각 요소는 서로 다른 역할을 담당합니다.

 

[ Controller ( 주문을 받는 웨이터 ) ]

Controller는 사용자의 요청을 받아들이고, 그 요청에 따라 작업을 지시하는 역할

예를 들어, 사용자가 웹 사이트에서 "로그인" 버튼을 클릭하면

그 요청이 Controller로 전달됩니다.

 

Controller는 "로그인"을 하려는 요청들이 들어왔군요! 라고 생각하고,

이 요청을 처리할 수 있도록 Model에게 데이터를 요청 합니다.

 

또한, Controller는 어떤 View(화면)를 사용자에게 보여줄지 결정 합니다.

 

 

[ Model ( 주방에서 음식을 만드는 요리사 ) ]

Model은 실제로 데이터를 다루는 부분입니다.

사용자 정보, 데이터베이스와의 연동( Repository Package ),

비즈니스 로직( Service Package ) 등이 이곳에서 이루어집니다.

예를 들어, 사용자가 "로그인"을 요청했을 때, Model은

데이터베이스에서 사용자의 정보를 가져와서 로그인할 수 있는지 확인

 

 

[ View ( 고객에게 음식을 제공하는 서빙 직원 ) ]

View는 사용자가 실제로 볼 수 있는 화면을 담당합니다.

사용자가 로그인 페이지, 상품 목록, 주문 내역 등을 볼 때 이 View가 그려주는 것입니다.

즉, Controller가 데이터를 처리한 후, 그 결과를 View로 넘겨주면 View는 사용자에게

적절한 화면을 보여줍니다.

 

 

3. SpringBoot ( Mybatis ) MVC 디자인패턴 전체 구조( Java 영역 )

[ controller 디렉토리 ]

Controller 디렉토리 주요 기능	설명
개념	Controller는 애플리케이션의 진입점으로, 클라이언트의 요청을 받아 적절한 서비스에 전달하고, 결과를 응답합니다.
파일 구성	이 디렉토리에는 @Controller 또는 @RestController 어노테이션이 붙은 클래스들이 위치합니다. 각 클래스는 특정 경로( URL )에 대한 요청을 처리하며 HTTP 요청의 매핑(예 : @GetMapping, @PostMapping )을 담당합니다. @Controller public class UserController {                      // @Autowired가 UserService 객체 Been을 찾는다.           @Autowired           private UserService userservice;           @GetMapping("/")           public String home() {                    return "home";           }           @PostMapping("/user")           public String createUser(UserDto userDto, Model model) {                      userService.createUser(userDto);                      model.addAttribute("user", userDto);                      return "user";           } }

 

 

[ DTO 디렉토리 ]

DTO 디렉토리 주요 기능	설명
개념	DTO( Data Transfer Object )는 데이터 전송을 위한 객체로, ( 특히 Controller와 Service 사이 ) 데이터 교환을 위해 사용됩니다. 이는 주로 입력 및 출력 데이터를 캡슐화하여, 비즈니스 로직과의 결합을 줄입니다.
파일 구성	DTO 디렉토리는 요청과 응답에 사용되는 객체들이 포함됩니다. 예를 들어, "UserRequestDto", "UserResponseDto"와 같은 파일들이 있을 수 있습니다. public class UserDto {                 // Model entity          private String userName;         private String email;         // Getter and Setter         public String getUserName() {                    return userName;         }         public void setUserName(String userName) {                    this.userName = userName;         }          public String getEmail() {                    return email;         }         public void setEmail(String email) {                    this.email = email;         } }

 

 

[ Service 디렉토리 ]

Service 디렉토리 주요 기능	설명
개념	Service 레이어는 비즈니스 로직을 처리하는 곳입니다. 이 레이어는 여러 DAO( Repository )와 상호작용하며, 트랜잭션 관리나 비즈니스 규칙을 적용 합니다.
파일 구성	@Service 어노테이션이 붙은 클래스들이 이 디렉토리에 위치합니다. 예를 들어, "UserService" 클래스가 있을 수 있으며, 이는 사용자 관련 비즈니스 로직을 담당합니다. @Service public class UserService {                  @Autowired ( 강한결합으로 인해 사용 권장하지 않음 객체 생성 권장)         private UserMapper userMapper;            // 유저정보 저장         public void createUser( UserDto userDto ) {                  // 비즈니스 로직을 추가하거나 UserMapper를 사용하여 DB에 저장                  userMapper.insertUser(userDto);         } }

 

 

[ mapper 디렉토리 ]

Mapper 디렉토리 주요 기능	설명
역할	Mapper는 일반적으로 DTO 엔티티(Entity) 간의 변환을 담당합니다. 이는 보통 ModelMapper와 같은 라이브러리를 사용하거나, MapStruct 같은 코드 생성 도구를 이용해 자동화되기도 합니다.
파일 구성	"mapper" 디렉토리에는 엔티티와 DTO 간의 변환 로직이 담긴 클래스들이 포함됩니다. 예를 들어, "UserMapper" 같은 클래스가 있을 수 있으며, 이 클래스는 "UserDto"와 "UserEntity" 간의 변환 메서드를 제공합니다. @Mapper public interface UserMapper {           // 메소드 명이 xml파일의 id 값과 동일해야 합니다.           List<User> selectAllUsers();           void insertUser(User user);           void updateUser(User user);           void deleteUser(int id); }

 

 

4. SpringBoot ( Mybatis ) MVC 디자인패턴 전체 구조( resources 영역 )

설명 : 이 디렉토리는 애플리케이션의 리소스( 정적 파일, 설정 파일 등 )를 포함합니다.

 

[ mapper 디렉토리 ]

mapper 디렉토리 주요 기능	설명
역할	이 디렉토리는 MyBatis 또는 다른 ORM에서 사용되는 매퍼 파일을 포함합니다. MyBatis의 경우, SQL 쿼리를 포함하는 XML 파일들이 위치합니다.
파일 구성	"UserMapper.xml" 같은 파일이 있을 수 있으며, 이 파일에는 SQL 쿼리나 MyBatis 매핑 규칙이 정의됩니다. "UserMapper.xml" ( Mybatis 사용 시 ) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"         "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace=" com.example.projectNm.mapper.UserMapper ">             <insert id="insertUser" parameterType="com.example.dto.UserDto">                        <!--  ORM이 자동으로 쿼리 생성 -->                        INSERT INTO TB_USER                        (                                 USER_NAME, EMAIL                        )                        VALUES                       (        // INPUT 파라미터 값을 받는다.                                #{userName}, #{email}                       )             </insert> </mapper>

 

 

[ ORM(Object Relational Mapping)의 개념 ]
ORM은 객체 지향 프로그래밍 언어 Java에서 사용하는 객체와
관계형 데이터베이스의 테이블 간의 데이터를 자동으로 매핑해주는 기술입니다.
이를 통해 개발자는 데이터베이스 테이블과의 직접적인 상호작용을 객체를 통해 할 수 있어,
SQL 쿼리를 직접 작성하지 않고도 데이터를 조작할 수 있습니다.

ORM의 주요 목적	설명
생산성 향상	ORM은 데이터베이스에 접근하는 데 필요한 복잡한 SQL 쿼리를 자동으로 생성해 주므로, 개발자가 비즈니스 로직에 더 집중할 수 있습니다.
유지보수성 개선	객체와 데이터베이스 간의 매핑을 통해, 코드의 변경이 데이터베이스 구조에 직접적인 영향을 주지 않게 됩니다. 즉, 데이터베이스 구조가 변경되더라도 ORM 설정만 수정하면 됩니다.
추상화	데이터베이스와 상호작용하는 코드를 추상화하여, 특정 DBMS에 종속되지 않도록 해줍니다.

 

 

[ MyBatis와 ORM ]

MyBatis는 절반 ORM 프레임워크로, 완전한 ORM 기능을 제공하는 Hibernate와 같은 프레임워크와는 다릅니다.

MyBatis는 SQL을 직접 작성하면서도, 객체와 SQL 쿼리 결과를 매핑해주는 기능을 제공합니다.

따라서 SQL의 유연성을 그대로 유지하면서도, 객체와 관계형 데이터베이스 간의 매핑을 자동으로 처리해줍니다.

 

MyBatis는 특히 SQL에 대한 제어가 중요하거나 복잡한 쿼리가 필요한 경우 유용하며,

SQL 문장을 XML이나 어노테이션으로 명시적으로 관리할 수 있습니다.

 

 

[ 예제 : MyBatis에서의 ORM 사용 ]

MyBatis에서 ORM의 개념을 보여주는 간단한 예제

여기서는 "User"라는 도메인 객체를 데이터베이스의 "TB_USER" 테이블과 매핑하는 과정을 설명합니다.

 

 

데이터베이스 테이블

-- 유저 테이블 CREATE TABLE TB_USERS (       USER_ID                        NUMBER                           PRIMARY KEY     , USER_NAME                VARCHAR2(50)     , USER_PASSWORD     VARCHAR2(50)     , USER_EMAIL                VARCHAR2(50) );

 

도메인 객체 ( Java 클래스 )

public class User {         private int userId;         private String userName;         private String userPassword;         private String userEmail;       // Getter and Setter       public int getUserId() {               return userId;       }       public void setUserId(String userId) {               this.userId = userId;       }       ....... }

 

 

MyBatis Mapper XML

MyBatis에서 이 "User" 객체를 "users" 테이블과 매핑하기 위한 XML Mapper를 작성합니다.

<mapper namespace="com.example.projectNm.mapper.UserMapper">        <!-- User 객체의 userId 프로퍼티와 TB_USER 테이블의 USER_ID -->       <resultMap id="UserResultMap"    type=" com.example.projectNm.dto.UserDTO ">                <id property="userId"                        column="USER_ID"/>                <result property="userName"        column="USER_NAME"/>                <result property="userPassword" column="USER_PASSWORD"/>                <result property="userEmail"         column="USER_EMAIL"/>       </resultMap>       <!-- ORM 객체 사용해서 유저정보 출력 -->       <select id="selectAllUsers" resultMap="UserResultMap">                SELECT USER_ID, USER_NAME, USER_PASSWORD, USER_EMAIL                   FROM TB_USERS        </select>       <!-- USER 객체를 사용해서 새로운 사용자 추가 -->       <insert id="insertUser" parameterType=" com.example.projectNm.dto.UserDTO ">                INSERT INTO TB_USERS                (                      USER_ID                    , USER_NAME                    , USER_PASSWORD                    , USER_EMAIL                )                VALUES                (                      #{userId}                    , #{userName}                    , #{userPassword}                    , #{userEmail}                )       </insert>        <!-- 사용자 업데이트 -->       <update id="updateUser" parameterType="com.example.projectNm.dto.UserDTO">                    UPDATE TB_USERS                             SET USER_NAME = #{userName}                                   ,  USER_PASSWORD = #{userPassword}                                   ,  USER_EMAIL = #{userEmail}                     WHERE USER_ID = #{userId}       </update>      <!-- userId 변수의 타입을 파라미터로 사용자 삭제 -->       <delete id="deleteUser" parameterType="int">             DELETE FROM TB_USERS WHERE USER_ID = #{userId}       </delete> </mapper>

 

 

[ static 디렉토리 ]

static 디렉토리 주요 기능	설명
역할	정적 자원을 포함하는 디렉토리로, HTML, CSS, JavaScript( JS ) 이미지 파일 등이 포함 됩니다. Spring Boot는 이 디렉토리의 내용을 기본적으로 정적 리소스로 서빙합니다.
파일 구성	"style.css", "script.js"와 같은 파일들이 위치

 

 

[ application.properties 파일 ]

application.peoperties 주요 기능	설명
역할	스프링 부트 애플리케이션의 설정 파일입니다. ( Spring에서 SpringBoot로 넘어오면서 XML파일을 최대한 안쓰기 위해서    web.xml, root-context.xml 파일을 없애고    application.properties 파일에서 서블릿 설정, JDBC 설정을 합니다. ) 이 파일에서 데이터베이스 연결( JDBC ), 서버 포트, 로깅 설정 등 다양한 설정을 정의
파일 구성	Spring Boot는 기본적으로 "application.properties" 파일을 사용하지만, YAML 형식을 선호한다면, "application.yaml"파일도 사용할 수 있습니다. 설정 내용은 "spring.datasource.url", "server.port", "logging.level", "suffix", "preffix" 등 다양한 설정 키-값 쌍으로 구성됩니다. application.properties 파일 예제 spring.datasource.driver-class-name=oracle.jdbc.OracleDriver spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe spring.datasource.username="유저 명 입력" spring.datasource.userpassword="비밀번호 입력"

 

5. SpringBoot ( Mybatis ) MVC 디자인패턴 전체 구조( src/main/webapp 영역 )

이 디렉토리는 전통적인 웹 애플리케이션 구조에서 JSP나 서블릿 등을

포함하는 웹 리소스를 저장합니다. SpringBoot3에서는 주로 JSP 파일을

사용하는 경우 이 디렉토리를 활용합니다.

 

[ WEB-INF 디렉토리 ]

WEB-INF 디렉토리 주요 기능	설명
역할	WEB-INF는 웹 애플리케이션에서 보안적인 측면에서 중요한 리소스를 포함하며, 외부에서 직접 접근할 수 없는 디렉토리입니다. ( URL 입력 접근 불가, Controller 통신으로 접근 가능 ) 일반적으로 JSP 파일이나 서블릿 매핑 정보( Spring 프로젝트일 경우, web.xml, root-context 등 )가 위치합니다.
파일 구성	JSP 파일이 위치하는 "view" 디렉토리와 같은 하위 디렉토리를 가질 수 있으며, 이곳에 인덱싱 디폴트 파일 "index.html", "login.jsp" 같은 JSP 파일들이 위치합니다.

 

 

[ WEB-INF / views 디렉토리 ]

WEB-INF / views 디렉토리 주요 기능	설명
역할	JSP 파일을 포함하는 디렉토리로, 실제로 웹 페이지를 렌더링하는 데 사용됩니다.
파일 구성	"home.jsp", "user.jsp" 등 JSP 파일들이 이 디렉토리에 위치하며, 각각의 JSP파일은 클라이언트에게 반환할 HTML 구조와 Java 코드를 포함합니다.

 

SpringBoot 디렉토리 구조 최종 정리

Java 영역 : 스프링 부트 애플리케이션의 핵심 비즈니스 로직이 위치

                     ( controller, service, dto, mapper )

 

resources 영역 : 설정 파일과 정적 자원, MyBatis의 매퍼 파일 등이 포함

                    ( mapper.xml, static, application.properties )

 

webapp 영역 : JSP파일과 서블릿 관련 파일이 위치하며 주로 "WEB-INF" 하위에서 관리

                    ( WEB-INF, WEB-INF/views, index.html 등 )

 

6. Intellij에서 만들었던 프로젝트 가져오기

Project 탭에서 Open 버튼을 클릭

생성했던 프로젝트를 열어주세요.

 

Intellij OpenJDK 설정 

File > Project Structure > SDKs 선택

Project 탭에서 Edit 버튼을 클릭해서 사용하고자 하는 OpenJDK를 선택 해주세요

 

언어 레벨 맞춰주고

모든 설정이 완료되었다면 Apply 버튼을 클릭해서 적용 해준다.

 

Settings > Build, Execution, Deployment >

Build Tools > Maven 탭으로 이동

User settings file : override 체크박스 선택

Local repository : override 체크박스 선택

마지막으로 Apply 버튼을 클릭 합니다.

 

 

7. Intellij 톰캣 설정

Run > Edit Configurations...

Edit Configurations.. 선택

 

Tomcat 설정

Configure.. 버튼을 클릭해서 설치 했던 Tomcat파일을 추가 해줍니다.

URL은 http://localhost:8080/로 설정

HTTP port : 8080번호로 설정

Fix 버튼을 클릭 한다.

 

 

Tomcat 실행 후, localhost:8080 URL 입력

Tomcat 실행, 8080포트 실행

 

 

url : localhost:8080 입력

오류 발생 : Whitelabel Error Page

오류 발생 원인 : 프로젝트의 인덱스를 잡지 않아서 발생

오류 해결 방법 : webapp 하위에 index.html ( 아무거나 상관없음 ) 생성 후,

                             Tomcat embed jasper ( 내장 톰캣 WAS JSP ) 추가 시,

                             /index.html 경로가 디폴트 경로 "/"로 변경되면서

                             localhost:8080이 정상적으로 호출됨

지정 해놓은 첫 페이지 화면이 없기 때문에 404에러가 발생 합니다.

 

 

 

 

Java ( 백엔드 소스 ) 위치

로직 소스 영역

Java에서 사용할 Bean ( Controller, Service, DTO, Mapper 등 )

 

 

8. Intellij 프로젝트 Hierarchy 구조로 변경

Tree Appearance를 클릭 후, 오른쪽 탭에 있는대로

설정하면 초록색 하이라키 구조로 변경할 수 있습니다.

 

 

 화면 ( 프론트엔드 소스 ) 위치

JSP를 사용하기 위해서

resources / templates 디렉토리를 삭제 후,

main / webapp 디렉토리를 생성 합니다.

webapp 하위 /WEB-INF / views 폴더 생성

                           /WEB-INF / html 정적 파일 폴더 생성 ( 필요 없음 )

 

 

9. 내장 톰켓에서 JSP를 사용하기 위한 Tomcat Embed Jasper 의존성 추가

설명 : Java 애플리케이션 내에서 JSP( JavaServer Pages )

            처리하고 서블릿을 생성할 수 있도록 도와주는

            Apache Tomcat 서버의 내장형 컴포넌트 입니다.

 

특징 : Spring Boot 같은 내장 서버 환경에서 사용된다.

주요 기능	설명
JSP 컴파일러 역할	Jasper는 Tomcat의 JSP 컴파일러 입니다. JSP 파일을 서블릿으로 변환하여 실행할 수 있도록 해줍니다. 일반적으로 JSP는 개발자가 작성한 HTML 파일에 Java 코드를 삽입하여 동적 웹 페이지를 생성하는 데 사용됩니다. Tomcat Embed Jasper는 이러한 JSP파일을 Java 서블릿 클래스로 컴파일하고, 이를 실행하여 클라이언트에게 동적 웹 콘텐츠를 제공합니다.
내장형 환경에서의 JSP 처리	Tomcat Embed Jasper는 내장형 Tomcat 서버 환경에서 JSP를 처리할 수 있도록 도와줍니다. Spring Boot 같은 프레임워크에서 내장 서버를 사용하는 애플리케이션은 외부에 독립된 서버가 필요하지 않으며, 애플리케이션 내에서 서버가 구동됩니다. 이 때, Jasper는 JSP 파일을 처리할 수 있는 환경을 제공 합니다. ( 내장 톰켓에서만 Jasper를 사용하면된다. 외장 톰켓은 사용할 필요 없음 )
JSP 생명주기 관리	변환(translation) 단계, 컴파일(compilation) 단계, 로드(load) 단계, 초기화(init) 단계, 요청 처리(service) 단계, 그리고 소멸(destroy) 단계 생명주기를 가진다.

Tomcat Embed Jasper 검색

제일 첫 번째 Jasper를 선택

Maven 탭에 있는 Jasper 의존성 복사

pom.xml파일에 추가 후, Maven 아이콘 클릭 > 업데이트 진행

Project External Library에 보면

tomcat-embed-jasper 추가된것을 확인할 수 있습니다.

 

 

브라우저에서 /인덱스와 JSP파일이 잘 호출되는지 확인

localhost:8080 => webapp / index.html 화면 출력 성공

( index는 디폴트로 "/" 잘 잡힙니다. )

 

localhost:8080/jsp/hello.jsp => webapp / jsp / hello.jsp 화면 출력 성공

 

10. 프로젝트 Git Hub연결

프로젝트 경로 : D:\DEV\workspace\dress_code

 

Git Hub에 연결

프로젝트 Git Hub에 업로드 완료