(6)

Spring MVC 구조 / MVC1 MVC2

MVC (Model - View - Controller) 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. Model 모든 데이터 정보를 가공하여 가지고 있는 컴포넌트 상태 변화가 있을 때 컨트롤러와 뷰에 통보한다. (뷰는 최신 결과를 리턴, 컨트롤러는 적용 가능한 명령을 추가,제거,수정) View 사용자가 보는 시각적인 UI 요소 Controller Model과 View를 연결 해 주는 역할 Model과 View에 명령을 보낸다. MVC-1 View와 Controller을 JSP가 담당한다. JSP에서 MVC가 모두 이루어져 재사용성, 가독성이 떨어져 유지보수성이 낮다. MVC-2 JSP에서 모든 것을 수행하던 MVC1 패턴과 달리 M, V, C의 역할이 분리되어 있다. 오류 발생 혹은 수정 시..

2023.02.05

4) 로그인, 로그아웃 기능 구현 - Spring Project (OTT 서비스)

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는 아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다. 팀원은 5명이었으며, 프로젝트 리더를 맡았습니다. 이전 글 목록 1) 주어진 RFP를 바탕으로 주제 선정 - Spring MVC2 프로젝트 2) ERD 설계 - Spring MVC2 프로젝트 3) 회원 가입 기능 구현 - Spring MVC2 프로젝트 사용자가 로그인을 할 때, 세션에 유저의 정보를 담을 수 있게 설계했다. 쿠키와 세션 (Cookie & Session) 쿠키와 세션 (Cookie & Session) HTTP 프로토콜의 특징 비연결성 ( Connectionless ) 클라이언트가 서버에 요청(Request)할 때, 그에 대한 응답(Response)을 한..

2023.02.05

3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는 아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다. 팀원은 5명이었으며, 프로젝트 리더를 맡았습니다. 이전 글 목록 1) 주어진 RFP를 바탕으로 주제 선정 - Spring MVC2 프로젝트 2) ERD 설계 - Spring MVC2 프로젝트 OTT 사이트의 특성상 큰 기능은 회원 관련, 영상 관련 기능으로 나뉠 것이라고 생각했다. 우선 View 작업은 나중에 생각하기로 하였으며, 우선 기능 구현에 중점을 두고 기능 구현을 시작했다. 회원가입 회원가입을 통해 로그인 처리가 되었을 때만 영상에 접근 가능하도록 정책을 설계했기 때문에, 회원가입이 우선적으로 진행되어야 한다고 생각했다. DBMS는 MySQL을 사용하였으며,..

2023.02.05

Spring MVC 프로젝트 폴더의 구조

MVC 프로젝트 폴더의 구조 src/main/java 자바 파일이 모여있는 곳 (Controller, service, vo, dao, dto, mapper, api..) src/main/resources 클래스의 리소스들을 보관하는 곳 DB연결을 위한 자원, 의존성 주입을 위한 XML 파일 등 자바 코드와 관련된 모든 것들을 보관한다 src/test 테스트를 위한 자바 파일 및 리소스를 보관하는 곳 Maven Dependencies 메이븐에서 자동으로 관리 해 주는 라이브러리 폴더로 pom.xml에 작성된 라이브러리들을 자동으로 다운받아 관리한다. src 웹 관련 자원들이 담겨 있는 루트 폴더로 test는 테스트 공간이다. src/main/webapp/resources 웹에 필요한 js, css, img..

2023.01.30

Spring MVC Project 셋팅

프로젝트 만들기 1. New - Other에서 legacy검색 후 Spring Legacy Project 생성 2. 프로젝트 이름을 작성하고, Templates - Spring MVC Project 선택 후 Next 3. top-level package를 정의해주면 된다. pom.xml 사용할 버전과 pom.xml에 적혀 있는 버전이 다르다면 맞춰주면 된다. pom.xml (pom : project object model) Maven의 빌드 정보를 담고 있는 파일 Maven 자바 프로젝트를 관리하는 툴 (자바 소스를 컴파일하고 패키징해서 deploy까지 자동화 해 준다.) 미리 작성된 xml 파일을 이용하여 라이브러리를 자동으로 다운하거나 프로젝트를 빌드 해 준다. 해당 작업까지 완료한 후 1. Proj..

2023.01.30

1) 주어진 RFP를 바탕으로 주제 선정 - Spring Project(OTT 서비스)

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는 아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다. 팀원은 5명이었으며, 프로젝트 리더를 맡았습니다. 03.06 추가 개발언어 : Spring-framework(MVC) 5.2.18 RELEASE - Mybatis 3.5.4 mybatis - spring DB : MySQL 8.0.28 프론트 : HTML5 / CSS3 / JavaScript, J-Query / JSP 서버 : 톰캣 9.0.71 주제 선정 주어진 RFP는 총 네가지였다. 1. E-commerse 2. LMS 3. ERP 4. OTT시스템 주제 선정에 가장 큰 갈림길 두 가지는 완성도와 도전가치(난이도가 높은)였으며, 팀원 간에 회의 끝에 완성은 어떻게..

2023.01.29

Spring MVC 구조 / MVC1 MVC2

Tech/Java & Spring 2023. 2. 5. 21:44

728x90

MVC (Model - View - Controller)

소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.

Model	모든 데이터 정보를 가공하여 가지고 있는 컴포넌트 상태 변화가 있을 때 컨트롤러와 뷰에 통보한다. (뷰는 최신 결과를 리턴, 컨트롤러는 적용 가능한 명령을 추가,제거,수정)
View	사용자가 보는 시각적인 UI 요소
Controller	Model과 View를 연결 해 주는 역할 Model과 View에 명령을 보낸다.

MVC-1

View와 Controller을 JSP가 담당한다.

JSP에서 MVC가 모두 이루어져 재사용성, 가독성이 떨어져 유지보수성이 낮다.

출처 https://chanhuiseok.github.io/posts/spring-3/

MVC-2

JSP에서 모든 것을 수행하던 MVC1 패턴과 달리 M, V, C의 역할이 분리되어 있다.

오류 발생 혹은 수정 시 M, V, C 중 해당 요소만 수정할 수 있어 유지보수성이 높다.

Spring Framework에서의 MVC

MVC가 유기적으로 동작하도록 다양한 요소들이 있다.

구성요소	설명
DispatcherServlet (FrontController)	- 제일 앞 단에서 HTTP Request를 처리 - 요청 시 요청과 매핑되는 컨트롤러를 지정하는 컨트롤러
Controller (Handler)	- HTTP Request를 처리하여 Model을 생성하고, View를 지정 - DispatcherServlet에서 지정된 Controller는 요청을 처리하는 과정에서 필요한 데이터를 뽑아 Model에 저장하며, 요청에 따라 보여줄 View Name 및 View를 반환한다.
ModelAndView	- Controller에 의해 리턴 된 Model과 View가 저장(Wrapping)된 객체 - Model : Key-Value 형태의 데이터 저장 객체 - View(ViewName) : ViewResolver에 리턴 될 View 지정
ViewResolver	ModelAndView 객체를 처리하여 View를 리턴(Model에 저장된 데이터 사용) 사용자가 특정 URL로 들어갔을 때 보여지는 View가 이 곳에서 만들어진다.

728x90

저작자표시 (새창열림)

공감

mag1c

2년차 주니어 개발자.

4) 로그인, 로그아웃 기능 구현 - Spring Project (OTT 서비스)

삽질/사이드 프로젝트 2023. 2. 5. 15:12

728x90

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.

이전 글 목록

1) 주어진 RFP를 바탕으로 주제 선정 - Spring MVC2 프로젝트
2) ERD 설계 - Spring MVC2 프로젝트

3) 회원 가입 기능 구현 - Spring MVC2 프로젝트

사용자가 로그인을 할 때, 세션에 유저의 정보를 담을 수 있게 설계했다.

쿠키와 세션 (Cookie & Session)

HTTP 프로토콜의 특징 비연결성 ( Connectionless ) 클라이언트가 서버에 요청(Request)할 때, 그에 대한 응답(Response)을 한 후, 연결을 끊는다. 비상태성 ( Stateless ) 클라이언트의 상태 정보를 가지지 않는

mag1c.tistory.com

UserController.java

로그인 시 ID(email)와 비밀번호가 같은지 조회하여 리턴받은 결과값이 null과 null이 아닐 때로 구분하여 로그인 처리를 구현했다.

우선 권한 부여를 고려하지 않았기 때문에, user_email과 nickname만 세션에 담고, 세션 유지기간은 30분으로 설정하였다.

여기서의 str값은 닉네임을 세션에 담기위해 DB 조회 시 nickname을 조회한 결과값이다.

로그아웃 시 기존 세션에 담고있던 정보를 초기화 해 주었다.

(...생략...)
@Controller
@RequestMapping("/user/**")
public class UserController {

	@Autowired
	UserService userService;	
	UserDao userDao;
	
    (...생략...)
    
	//로그인 페이지 이동
	@RequestMapping("signin")
	public String login() {
	    return "user/signin";
	}
	
	//로그인 시 사용된 email, password를 파라미터로 받고
    //저장을 위한 session, view를 위한 mv, DB조회를 위한 Dto를 파라미터로 받음
	@RequestMapping("signin_check")
	public ModelAndView signin_check(@RequestParam String email, String password, UserDto userDto,
    					HttpSession session, ModelAndView mv) {
		String str = userService.login(userDto);
		if(str != null) {
			session.setAttribute("user_email", userDto.getEmail());
			session.setAttribute("nickname", str);
			// 세션 유지기간 30분
			session.setMaxInactiveInterval(60*30);
			mv.setViewName("redirect:/");
		}else {
			mv.setViewName("user/signin");
		}
		return mv;
	}
	
	//로그아웃
	@RequestMapping("signout")
	public String logout(HttpSession session) {
		session.invalidate();		
		return "redirect:/";
	}
}

UserService.java / UserServiceImpl.java

로그아웃 시 단순 세션에 정보만 삭제하고, 세션을 조회하여 로그인 / 로그아웃 상태를 조회하여 사이트에 접근할 수 있는 권한을 부여할 수 있다고 생각하였다. 로그아웃 시 DB까지 접근하는 메서드는 필요 없을 것이다.

(...생략...)
public interface UserService {

	(...생략...)

	String login(UserDto userDto);
    
}

(...생략...)
@Service
public class UserServiceImpl implements UserService{
	@Autowired
	UserDao userDao;
	
	@Override
	public String login(UserDto userDto) {
		return userDao.login(userDto);
	}
}

UserDao.java

(...생략...)
@Repository
public class UserDao {
	@Autowired
	SqlSessionTemplate sqlSessionTemplate;
	
	public String login(UserDto userDto) {
		return sqlSessionTemplate.selectOne("user.login", userDto);
	}
}

user.SQL.xml

세션에 닉네임 정보까지 담기 위해 NICKNAME을 조회하였으며, 차후 다른 사항들을 세션에 담아야 할 경우 해당 값만 추가로 들고 나와 세션에 담으면 될 것이다.

<?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="user">

	<select id="login" resultType="String">
		select NICKNAME
		  from USER
		 where EMAIL=#{email} and PASSWORD=#{password}
	</select>
    
</mapper>

signin.jsp

로그인 페이지를 단순하게 만들었다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post" action="signin_check">
	이메일 : <input type="email" name="email">
	비밀번호 : <input type="password" name="password">
	<input type="submit" value="로그인">
</form>
</body>
</html>

main.jsp

세션의 닉네임값을 조회하여 로그인 성공 시 화면에 출력되게끔 처리했다.

로그아웃 버튼의 action을 user/sign_out이 매핑된 곳에 전송하여 로그아웃을 처리하였으며, 해당 버튼들은 세션에 등록되어 있는 이메일을 조회하여 해당 값이 있을 때와 없을 때 버튼 출력 결과를 다르게 주었다.

(...생략...)
<c:if test="${sessionScope.nickname != null}">
	<h1>
		${sessionScope.nickname}님 환영합니다	
	</h1>
</c:if>
(...생략...)
<c:if test="${sessionScope.user_email == null}">
<!-- 회원가입 -->
<input type="button" value="회원가입" onclick="location.href='user/signup'">
<!-- 로그인 로그아웃 -->
<input type="button" value="로그인" onclick="location.href='user/signin'">
</c:if>
<c:if test="${sessionScope.user_email != null}">
<form action="/user/sign_out">
	<input type="submit" value="로그아웃">
</form>
</c:if>

728x90

저작자표시 (새창열림)

공감

mag1c

2년차 주니어 개발자.

3) 회원 가입 기능 구현 - Spring Project (OTT 서비스)

삽질/사이드 프로젝트 2023. 2. 5. 13:59

728x90

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.

이전 글 목록

1) 주어진 RFP를 바탕으로 주제 선정 - Spring MVC2 프로젝트
2) ERD 설계 - Spring MVC2 프로젝트

OTT 사이트의 특성상 큰 기능은 회원 관련, 영상 관련 기능으로 나뉠 것이라고 생각했다.

우선 View 작업은 나중에 생각하기로 하였으며, 우선 기능 구현에 중점을 두고 기능 구현을 시작했다.

회원가입

회원가입을 통해 로그인 처리가 되었을 때만 영상에 접근 가능하도록 정책을 설계했기 때문에, 회원가입이 우선적으로 진행되어야 한다고 생각했다.

DBMS는 MySQL을 사용하였으며, 팀원 모두가 접근할 수 있도록 구름IDE를 통해 MySQL과 연동하였으며,
구름IDE의 IP와 포트번호를 받아 와서 프로젝트와 연동이 될 수 있도록 아래의 블로그를 참고하여 셋팅하였다.
https://dalconbox.tistory.com/37

구름IDE 에서 MySQL 사용하기

구름 IDE에서 컨테이너를 생성 합니다. 맨 아래에서 MySQL설치를 체크한 후 설치하면 됩니다. 소프트웨어 스택은 Node.js를 사용했습니다. 그리고 더 편리하게 사용하기 위해 HeidiSQL을 설치해 줍니다

dalconbox.com

UserController.java

회원 테이블에서 회원 가입 시 입력받아야 할 정보는 [ 이메일, 비밀번호, 닉네임, 휴대폰번호 ] 총 네 가지였다.

이메일 중복확인 버튼 구현을 위한 메서드를 작성하였으며 String 형태로 리턴을 받아 중복 확인 결과를 사용자에게 전달할 수 있게 설계하였다.

이메일 중복확인 버튼을 눌렸을 때 통과가 되어야 회원가입 버튼이 작동할 수 있게 설계 할 예정이다.

사용자가 회원가입 요청을 보낼 시 POST 방식으로 데이터를 userDto에 전달하여 처리되게 하였다.

또한 createPost 메서드에서 DB까지의 접근 과정에서 리턴값을 boolean으로 받아 와서 회원 가입 결과를 사용자에게 출력되게 처리하였다.

(...생략...)
@Controller
@RequestMapping("/user/**")
public class UserController {

	@Autowired
	UserService userService;	
	UserDao userDao;
	
	//회원가입 페이지 이동
	@RequestMapping("signup")
	public String create() {
		return "user/signup";
	}
	
	//signup 시 email 중복확인 버튼 구현
	@RequestMapping("emailCheck")
	@ResponseBody // ajax 요청에 담긴 값을 자바 객체로 변환시켜 인스턴스(boolean)에 저장 -> illegalargumentException 방지
	public boolean emailCheck(@RequestParam("email") String email) {
		//DB 들어가서 email 중복값이 있나 들고나옴
		String check = null;
		check = userService.emailCheck(email); //input email에서 받은 email을 DB까지 전달하여 조회작업
		if(check != null) return true;
		else return false;		
	}

	
	@RequestMapping(value = "signup", method = RequestMethod.POST)
	public ModelAndView createPost(UserDto userDto) {
	    ModelAndView mav = new ModelAndView();
	    boolean tf = userService.create(userDto);
	    System.out.println(tf);
	    // ID값이 true이면 성공, false면 실패
	    if (!tf) {
	        mav.addObject("message", "fault");
	        mav.setViewName("user/signup");
	    }else { //
	        mav.addObject("message", "success");
	        mav.setViewName("main/main");      
	    }
	    return mav;
	}
}

UserService.java / UserServiceImpl.java

(...생략...)
public interface UserService {

	boolean create(UserDto userDto);

	String emailCheck(String email);

}

(...생략...)
@Service
public class UserServiceImpl implements UserService{
	@Autowired
	UserDao userDao;
	
	@Override
	public boolean create(UserDto userDto) {
		return userDao.create(userDto);
	}

	@Override
	public String emailCheck(String email) {
		return userDao.emailCheck(email);
	}

}

UserDao.java

회원가입 시 signUpCheck를 통해 닉네임의 중복여부를 파악하였고, 백단에서의 모든 중복 방지 기능을 구현했다.

휴대폰 번호는 외부 API를 통해 인증절차를 거칠 수 있으면 좋겠지만, 휴대폰 인증 API는 기업 단위에서가 아니면 사용이 불가능 한 것으로 알고 있기 때문에 따로 휴대폰번호 중복에 대한 처리는 수행하지 않을 예정이다.

(...생략...)
@Repository
public class UserDao {
	@Autowired
	SqlSessionTemplate sqlSessionTemplate;	
	
	//Controller의 emailCheck 받아오기
	public String emailCheck(String email) {
		String check = null;
		check = this.sqlSessionTemplate.selectOne("user.email_check", email);
		System.out.println(check);
		return check;
	}
	
	// 가입 시 중복 값 방지 DB에서도 처리예정
	public boolean create(UserDto userDto) {
		//이미 이메일 중복은 받았고, 휴대폰 번호는 따로 API예정이라 닉네임만 중복여부 확인.
		String checkTF = this.sqlSessionTemplate.selectOne("user.signUpCheck", userDto);
		if(checkTF == null) {
			sqlSessionTemplate.insert("user.insert", userDto);
			return true; // checkTF가 아무값도 가지고 나오지 않으면 중복x -> 가입가능
		}
		else return false;
	}
	
}

user.SQL.xml

설계한 그대로의 쿼리문을 작성 해 주었다.

<?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="user">
	<insert id="insert">  
	    <![CDATA[
	    insert into USER (EMAIL, PASSWORD, NICKNAME, PHONE_NUM)  
	    values (#{email}, #{password}, #{nickname}, #{phone_num})
	    ]]>
	</insert>
	
	<!-- 이메일 중복버튼 구현을 위한 조회 쿼리문 -->
	<select id="email_check" resultType="String">
		select EMAIL
		  from USER
		 where EMAIL=#{email}
	</select>
	
	<!-- 회원 가입 버튼 클릭 시 email, nickname, phone_num 중복 체크 -->
	<select id="signUpCheck" resultType="String">
		select NICKNAME
		  from USER
		 where NICKNAME=#{nickname}
	</select>
</mapper>

signup.jsp

컨트롤러의 ModelAndView를 return받아 회원가입 결과를 JSTL을 활용하여 조건을 주었다.

JSTL이란?

자바 서버 표준 태그 라이브러리를 말하며, JSP를 단순화하는 많은 태그들을 제공한다.
core, formatting, xml, sql태그 등이 있다.

정규 표현식을 통한 유효성 검사는 스크립트 내의 if문 코드로 대체하였다. 차후 보수 할 예정이다.

이메일 중복 버튼 클릭 시 입력한 이메일의 값을 ajax를 통하여 emailCheck이 매핑된 곳으로 전송하여 이메일 중복여부를 확인하고, 그 결과를 boolean값으로 리턴 받아 사용자에게 중복 여부를 출력 해 주었다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form method="post">
	이메일 : <input type="email" name="email">
	<button type="button" id="btn">아이디 중복체크</button>
	<p id="idcheck"></p>
	비밀번호 : <input type="password" name="password">
	<p id="pwcheck"></p>
	닉네임 : <input type="text" name="nickname">
	<p id="nncheck"></p>
	<c:if test="${message=='fault'}">
		<p id="nncheck2">중복된 닉네임입니다.</p>
	</c:if>	
	휴대폰 번호 : <input type="text" name="phone_num">
	<p id="phcheck"></p>	
	<input type="button" value="가입하기">
	<c:if test="${message=='fault'}">
		<h1>
			가입 실패
		</h1>
	</c:if>
</form>
<script>
	//혹시모를 청개구리의 enter키 입력 방지
	document.addEventListener('keydown', function(e){
		if (e.key === 'Enter'){
			e.preventDefault();
		};
	}, true);
	
	var a=0, b=0, c=0, d=0;

	//가입 버튼이 가입 양식에 일치할 때 가입 받아주기
	$('input[type=button]').on('click',function(e){
		const password = $('input[name=password]').val().length;
		const nickname = $('input[name=nickname]').val().length;
		const phone_num = $('input[name=phone_num]').val().length;
		
		if(password < 4 || password > 20){
			e.preventDefault();
			$('#pwcheck').text('비밀번호는 4~20자로 입력 해 주세요');
		}else {
			a=1;
			$('#pwcheck').text('');
		}
		
		if(nickname < 4 || nickname > 20){
			e.preventDefault();
			$('#nncheck').text('닉네임은 4~20자로 입력 해 주세요');
		}else {
			b=1;
			$('#nncheck').text('');
		}
		
		if(phone_num < 4 || phone_num > 15){
			e.preventDefault();
			$('#phcheck').text('올바른 휴대폰 번호를 입력 해 주세요');
		}else {
			c=1;
			$('#phcheck').text('');		
		}
		
		if(a==1 && b==1 && c==1 && d==1){			
			$('input[type=button]').prop('type', 'submit');
		}
		
	});
	
	$('#btn').on('click',function(){
		let email = $('input[name=email]').val();
		//이메일 올바르게 쓰지 않았을 때 바로 리턴
		if(!email.includes('@')) return $('#idcheck').text('올바른 이메일을 입력 해 주세요');
		//ajax로 email보내기 -> emailCheck 매핑된 곳으로 보내서 중복 확인
		$.ajax({
			url : 'emailCheck',
			type : 'post',
			data : {'email' : email}, // 입력한 email data
			dataType : 'text', 
			success : function(result){
				//result가 text 형태로 와서 false가 text 형태로 비교
				if(result == 'false'){      //false = 사용가능
					$('#idcheck').text('사용 가능한 이메일입니다');
					d=1;
				}else{
					$('#idcheck').text('이미 사용중인 이메일입니다');
				}
			},
			error : function(){
				alert('에러발생 에러발생 ㅌㅌ');
			}
		});
	});
	

</script>
</body>
</html>

어느정도 기능구현을 진행한 뒤 블로그를 작성하기 떄문에, 다른 버튼이 있는 부분은 양해부탁드립니다.

728x90

저작자표시 (새창열림)

공감

mag1c

2년차 주니어 개발자.

Spring MVC 프로젝트 폴더의 구조

Tech/Java & Spring 2023. 1. 30. 14:45

728x90

MVC 프로젝트 폴더의 구조

src/main/java

자바 파일이 모여있는 곳 (Controller, service, vo, dao, dto, mapper, api..)

src/main/resources

클래스의 리소스들을 보관하는 곳

DB연결을 위한 자원, 의존성 주입을 위한 XML 파일 등 자바 코드와 관련된 모든 것들을 보관한다

src/test

테스트를 위한 자바 파일 및 리소스를 보관하는 곳

Maven Dependencies

메이븐에서 자동으로 관리 해 주는 라이브러리 폴더로 pom.xml에 작성된 라이브러리들을 자동으로 다운받아 관리한다.

src

웹 관련 자원들이 담겨 있는 루트 폴더로 test는 테스트 공간이다.

src/main/webapp/resources

웹에 필요한 js, css, img 파일 등 다양한 자원을 보관하며, 컨트롤러에서 요청을 가로채지 않고 바로 접근이 가능하도록 설정해서 사용하는 공간

src/main/webapp/WEB-INF

웹에 필요한 코드파일, 컴파일 된 파일, 여러 환경 설정 파일들이 보관되는 곳

외부 사용자가 직접 접근할 수 없으며 컨트롤러를 통해 내부적 접근만 가능하다.

src/main/webapp/WEB-INF/views

JSP, HTML 파일이 보관되는 곳이며 해당 폴더는 루트(/)의 기준점이 된다.

사용자가 입력하고 컨트롤러가 받아주는 URL이 이 폴더의 구조를 따라간다.

src/main/webapp/WEB-INF/classes

컴파일된 파일들이 보관되는 곳

src/main/webapp/WEB-INF/spring

스프링 환결설정 파일이 보관되는 곳

728x90

저작자표시 (새창열림)

공감

mag1c

2년차 주니어 개발자.

Spring MVC Project 셋팅

Tech/Java & Spring 2023. 1. 30. 11:48

728x90

프로젝트 만들기

1. New - Other에서 legacy검색 후 Spring Legacy Project 생성

2. 프로젝트 이름을 작성하고, Templates - Spring MVC Project 선택 후 Next

3. top-level package를 정의해주면 된다.

pom.xml

사용할 버전과 pom.xml에 적혀 있는 버전이 다르다면 맞춰주면 된다.

pom.xml (pom : project object model)

Maven의 빌드 정보를 담고 있는 파일

Maven

자바 프로젝트를 관리하는 툴 (자바 소스를 컴파일하고 패키징해서 deploy까지 자동화 해 준다.)
미리 작성된 xml 파일을 이용하여 라이브러리를 자동으로 다운하거나 프로젝트를 빌드 해 준다.

해당 작업까지 완료한 후

1. Project - clean

2. Run As - Maven clean

3. Run As - Maven build

를 차례대로 진행하자.

진행하기전에 다음과 같은 작업을 먼저 수행하자

1. 프로젝트 우클릭 → properties → project Facets
2. Java (Version 1.6) 우클릭 → Change version1.8로 변경
3. Apply and close

maven 첫 실행 시

Goals - compile 로 설정 후 Run

프로젝트 자바 버전 변경(→1.8)

프로젝트 우클릭 - Properties - Java Build Path에서 자바 버전이 1.8버전이 아니라면 다음과 같은 작업을 수행하자.

1. Libraries에서 Edit 클릭

2. System library - Execution environment - 1.8로 변경 후 Enviroments 클릭

3. 1.8을 찾아 적용 후 Apply and close

Tomcat 설치

9.0 버전의 Tomcat을 사용 할 것이다.

↓↓↓↓다운로드 페이지↓↓↓↓

https://tomcat.apache.org/tomcat-9.0-doc/index.html

Apache Tomcat 9 (9.0.71) - Documentation Index

This is the top-level entry point of the documentation bundle for the Apache Tomcat Servlet/JSP container. Apache Tomcat version 9.0 implements the Servlet 4.0 and JavaServer Pages 2.3 specifications from the Java Community Process, and includes many addit

tomcat.apache.org

톰캣(Tomcat)

웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공하여 자바서버 페이지(JSP)와 자바 서블릿이 실행할 수 있는 환경을 제공하는 서블릿 컨테이너이다.

해당 파일을 다운로드 하여 압축을 해제한 뒤, 폴더 명을 알아보기 쉽게 tomcat9로 변경하였다.

Servers 설정

만약 Servers를 찾을 수 없다면

Window - Show view - Servers

Window - Show view - Other - Servers 검색

클릭하여 새 서버를 생성한다

tomcat을 검색 후 원하는 버전의 tomcat을 선택한 후 Next

Browse를 선택하여 tomcat 폴더를 선택한 후 Next

(경로에 한글이 있으면 서버 실행 시 계속 에러가 발생한다. 상관은 없지만 눈에 거슬린다.)

Add 혹은 Add All을 클릭하여 Available에 있는 프로젝트 파일을 Configured로 보낸 후 Finish

성공적으로 생성되었다.

위의 사진에 있는 해당 서버를 더블클릭 하자.

Overview

1. 서버 시작에 걸리는 최대 시간 설정이다. 규모가 커질 경우 45초로 해결되지 않을 때도 있다. 우선 변경하지 않겠다.

2. 포트번호 8080의 충돌이 잦아 8081로 변경 해 주었다.

Modules

Path에 초기 값이 들어와 있는 모습이다.

페이지의 경로가 localhost:8080/test1/.... 으로 기본값이 test1이라는 뜻이다.

Edit를 눌려 Path값을 초기화 해 주자. (슬래시만 남겨놓으면 된다)

모든 작업이 완료되었다면 저장을 해야한다 꼭.

인코딩 필터 설정

브라우저에서 보내는 요청(Request)과 응답(Response)을 모두 UTF-8 로 고정하기 위해 인코딩 필터를 설정한다.

src/main/webapp/WEB-INF/web.xml

해당 코드를 </web-app> 위에 작성하면 된다.

<filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter
    </filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
        <param-name>forceEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

로그 레벨 설정

src/main/resources/log4j.xml

warn으로 되어있는 value를 debug로 변경

<!-- Root Logger -->
<root>
    <priority value="debug" />
    <appender-ref ref="console" />
</root>

실행 완료

728x90

저작자표시 (새창열림)

공감

mag1c

2년차 주니어 개발자.

1) 주어진 RFP를 바탕으로 주제 선정 - Spring Project(OTT 서비스)

삽질/사이드 프로젝트 2023. 1. 29. 20:18

728x90

해당 프로젝트는 2023/01/25 ~ 2023/03/12 내에 진행되는
아카데미 내 수강생들끼리 팀을 나누어 진행한 모의 프로젝트입니다.
팀원은 5명이었으며, 프로젝트 리더를 맡았습니다.

03.06 추가
개발언어 : Spring-framework(MVC) 5.2.18 RELEASE - Mybatis 3.5.4 mybatis - spring
DB : MySQL 8.0.28
프론트 : HTML5 / CSS3 / JavaScript, J-Query / JSP
서버 : 톰캣 9.0.71

주제 선정

주어진 RFP는 총 네가지였다.

1. E-commerse

2. LMS

3. ERP

4. OTT시스템

주제 선정에 가장 큰 갈림길 두 가지는 완성도와 도전가치(난이도가 높은)였으며, 팀원 간에 회의 끝에 완성은 어떻게든 해내고, 난이도도 높다고 생각 되는 OTT 시스템을 선정하였다.

선정된 주제의 RFP는 다음과 같다.

학원 내 모의 프로젝트이기 때문에 약간의 예능요소는 넘어가길 바란다.

공고 : OTT 시스템을 제작할 Slave 입찰공고
Spring Framework를 사용하여 OTT 시스템을 만들 개발팀을 찾고 있습니다. 
이 시스템을 통해 사용자는 비디오 콘텐츠를 스트리밍하고 다운로드할 수 있으며 콘텐츠 관리, 
사용자 관리 및 결제 처리와 같은 기능이 포함됩니다. 이 시스템은 확장성, 보안 및 손쉬운 유지 관리를 위해 설계됩니다.

목적:
이 프로젝트의 목표는 사용자가 비디오 콘텐츠를 스트리밍하고 
다운로드할 수 있는 포괄적이고 사용자 친화적인 OTT 시스템을 개발하는 것
시스템은 Spring Framework를 사용하여 구축되어야 하며 
확장성, 보안 및 손쉬운 유지 관리를 위해 설계되어야 함.

작업 범위:

Spring Framework를 이용한 OTT 시스템 설계 및 개발
사용자 등록 및 로그인 기능 구현
비디오 콘텐츠 업로드, 관리 및 스트리밍을 위한 콘텐츠 관리 시스템 구현
사용자 계정 및 가입 관리를 위한 사용자 관리 시스템 구현
사용자 결제 처리를 위한 결제 처리 시스템 구현
사용자 데이터 보호를 위한 확장성 및 보안 기능 구현
클라우드 기반 호스팅 플랫폼에 OTT 시스템 배포
지속적인 유지 보수 및 지원

산출물:
완전한 기능을 갖춘 OTT 시스템
소스 코드 및 문서
배포 및 유지 관리 가이드

일정:
프로젝트 일정은 담당사와 협의해야 하지만 시작일로부터 2023-03-13을 초과해서는 안됨.

자격:
중꺾마 가능자.
하늘을 뚫어버릴 근성을 가진자
천지신명도 감동할 서비스를 만들수 있는자
맨땅에 헤딩을 잘하는 자

예산:
5억

제출:
구체적인 사업 계획, 팀 자격, 예산 등을 포함하여 제안서를 abc@gmail.com으로 제출해 주시기 바랍니다.
제안서는 프로젝트 계획, 팀 자격 및 예산에 따라 평가됩니다.

기능적 요구사항
콘텐츠 분류 및 필터링: 시스템은 사용자가 장르, 언어 등과 같은 다양한 범주를 기반으로 콘텐츠를 쉽게 필터링하고 찾아볼 수 있도록 해야 합니다.
개인화된 추천: 시스템은 머신 러닝 알고리즘을 사용하여 시청 기록 및 선호도를 기반으로 사용자에게 콘텐츠를 추천해야 합니다.
다국어 지원: 시스템은 다른 지역의 사용자를 수용하기 위해 여러 언어를 지원해야 합니다.
다중 장치 지원: 스마트폰, 태블릿, 스마트 TV, 게임 콘솔 등과 같은 다양한 장치를 통해 시스템에 액세스할 수 있어야 합니다.
라이브 스트리밍: 시스템은 이벤트 및 쇼의 라이브 스트리밍을 허용해야 합니다.
대화형 기능: 시스템에는 소셜 공유, 댓글 및 평가와 같은 대화형 기능이 포함되어야 합니다.
구독 관리: 시스템에는 사용자에 대한 구독 및 청구를 관리할 수 있는 기능이 있어야 합니다.
고급 분석: 시스템은 사용자 행동, 시청 기록 및 콘텐츠 성능에 대한 자세한 분석을 제공해야 합니다.
이 목록은 완전하지 않으며 프로젝트의 특정 요구 사항에 따라 다른 요구 사항이 필요할 수 있음을 명심하십시오.

다중 언어 지원: 시스템은 사용자 인터페이스, 자막 및 오디오 트랙에서 다중 언어를 지원해야 합니다.
서비스 품질(QoS): 시스템은 사용자의 인터넷 연결 속도 및 장치 성능에 따라 비디오 품질을 조정할 수 있어야 합니다.
다중 비트 전송률 스트리밍: 시스템은 다양한 인터넷 속도를 가진 사용자에게 다양한 비디오 품질 옵션을 제공하기 위해 다중 비트 전송률 스트리밍을 지원해야 합니다.
적응형 비트레이트 스트리밍(ABR): 시스템은 적응형 비트레이트 스트리밍(ABR)을 지원하여 다양한 인터넷 속도를 가진 사용자에게 원활한 스트리밍 경험을 제공해야 합니다.
가상 현실(VR) 및 증강 현실(AR) 통합: 시스템은 VR 및 AR 콘텐츠를 지원하고 몰입형 스트리밍 경험을 제공할 수 있어야 합니다.
다양한 장치와의 호환성: 시스템은 스마트폰, 태블릿, 스마트 TV, 게임 콘솔 등과 같은 다양한 장치와 호환되어야 합니다.
사용자 생성 콘텐츠(UGC): 시스템은 비디오 및 댓글과 같은 사용자 생성 콘텐츠를 지원하고 사용자가 자신의 비디오를 업로드할 수 있도록 하는 기능을 갖추어야 합니다.
폐쇄 자막 및 오디오 설명 지원: 시스템은 시각 또는 청각 장애가 있는 사용자에게 접근성을 제공하기 위해 폐쇄 자막 및 오디오 설명을 지원해야 합니다.
분석: 시스템은 사용자 행동, 시청 기록 및 콘텐츠 성능에 대한 자세한 분석을 제공해야 합니다.
A/B 테스트: 시스템은 A/B 테스트를 허용하여 서로 다른 디자인 및 기능 변형을 테스트하여 어떤 것이 가장 잘 수행되는지 확인해야 합니다.
광고 지원: 시스템은 콘텐츠를 수익화하기 위해 비디오 광고의 통합을 지원해야 합니다.
동적 광고 삽입: 시스템에는 비디오 재생 중에 동적으로 비디오 광고를 삽입할 수 있는 기능이 있어야 합니다.
구독 기반 및 유료 시청 모델: 시스템은 구독 기반 및 유료 시청을 포함하여 다양한 수익 창출 모델을 지원해야 합니다.
제휴 프로그램 지원: 시스템은 제3자 웹사이트가 서비스를 홍보하고 판매할 수 있도록 제휴 프로그램을 지원해야 합니다.
고객 지원: 시스템에는 사용자가 지원 팀에 도움을 요청할 수 있는 고객 지원 기능이 있어야 합니다.
다른 플랫폼과의 통합: 시스템에는 소셜 미디어, CRM 및 분석과 같은 다른 플랫폼과 통합할 수 있는 기능이 있어야 합니다.
사용자 피드백 및 평가 시스템: 시스템에는 사용자가 콘텐츠에 대한 피드백을 평가하고 제공할 수 있는 피드백 및 평가 시스템이 있어야 합니다.
사용자 지정 가능한 브랜딩: 시스템에는 회사 브랜드와 일치하도록 플랫폼의 브랜딩 및 모양을 사용자 지정할 수 있는 기능이 있어야 합니다.
후원을 통한 수익 창출: 시스템은 브랜드가 특정 콘텐츠나 채널을 후원할 수 있도록 하여 후원을 통한 수익 창출을 지원해야 합니다.

제안요청서 : RFP(Request For Proposal)
프로젝트를 담당할 업체를 선정하기 전에, 요구사항을 정리하여 후보 업체들에게 전달하는 문서
프로젝트의 주제, 목적, 목표, 운영방안, 기대효과 등 프로젝트에 대한 자세한 내용이 담기지만 고객의 모든 니즈를 파악할 수는 없다 (고객들은 우리가 생각하는 것만큼 친절하지 않다)

1차 회의 진행

주제 선정을 포함하여 1차 회의를 진행하였다.

회의 안건

1. 주제 선정 (위의 OTT)
2. 사이트 정책 결정
3. 기능 요구사항의 대략적 분석
4. 대략적 역할 분담

정책 결정

1. 관리자는 admin 하나로 통일하며, 전반적인 작업이 끝난 뒤 추가 작업으로 관리자 등급부여 및 관리자 페이지를

따로 생성하고, 관리자 DB를 생성하여 관리하기로 한다.

2. 로그인을 완료한 사용자는 정상적으로 영상에 접근할 수 있다.

3. 결제 여부를 회원 DB에서 관리를 하며, 결제를 진행한 사용자에게는 결제 전용 페이지를 제공한다.

기능 요구 사항 분석

회의를 통한 1차적인 분석이며, 클라이언트의 요구사항을 파악하기 위해 분석하였다.

프로젝트를 진행하며 계속 공부해 나가면서 차후 틀린 부분이 있을 시 수정 후 기능 구현 예정이다.

기능 요구 사항 분석

- 콘텐츠 분류 및 필터링 : 카테고리 구현
- 개인화된 추천 : 샤키라DB를 이용한 알고리즘 구현
- 다국어 지원 : 번역하기
- 다중 장치 지원 : 반응형 웹 만들기
- 라이브 스트리밍 : 버튼 클릭 시 모달 창 혹은 새로운 창을 띄우기
- 대화형 기능: 해당 영상 창 아래에 상호 의사소통이 가능한 댓글 구현
- 구독 관리: 구독 버튼 및 기능(청구화면)이 필요함. 잔여 구독 일수 및 재 구독이 용이하도록
             구독 관리 페이지도 필요할 것으로 보임
- 고급 분석: 개인화된 추천과 같은 방식으로 구현
- 다중 언어 지원 : 인터페이스의 다중 언어 지원 구현
- 서비스 품질(QoS): 비디오의 화질 구현으로 구현 가능 여부가 불확실하므로
                    우선 버튼 구현 후 차후에 가능여부 결정
- 다중 비트 전송률 스트리밍: 로그인 한 사용자의 국가 정보를 받아 해당 국가의 평균 인터넷 속도를 기반으로
                             해당 속도 별 화질이 영상 재생 시 기본 화질이 되도록 구현
- 다양한 장치와의 호환성: 반응형 웹 구현
- 사용자 생성 콘텐츠(UGC): 위의 대화형 기능에 사용자의 영상 업로드 기능을 추가
- 폐쇄 자막 및 오디오 설명 지원: 장애 여부를 확인한 뒤 장애인의 사이트 이용에 편의를 제공
- 분석: 개인화된 추천과 동일
- A/B 테스트: 사용자에게 A와 B 두 UI를 사용할 수 있게 사이트의 테마를 두 가지 만들어야 하며
              얼추 사이트의 구현이 끝난 뒤 시도해 볼 예정
- 광고 지원: 비디오 재생 중 일정 시간이 지나면 자동으로 광고가 표시되는 기능 구현
- 동적 광고 삽입: 광고 지원 기능에 추가로 사이트에 광고 배너 게시
- 구독 기반 및 유료 시청 모델: 구독자 전용 페이지 구현
- 제휴 프로그램 지원: 사이트 API 구현
- 고객 지원: QNA 기능 구현
- 다른 플랫폼과의 통합: API 구현
- 사용자 피드백 및 평가 시스템: 영상 DB에 댓글 및 추천 비추천 현황을 담을 예정
- 사용자 지정 가능한 브랜딩: 사이트의 이름
- 후원을 통한 수익 창출: 후원 페이지 만들어서 특정 브랜드가 채널이나 콘텐츠 작성자와
                         커뮤니케이션 가능할 수 있어야 함.

역할 분담

분석까지 끝내고 난 뒤, 나를 포함한 ERD 설계에 자신이 있는 세 명을 추려내어 ERD 설계를 시작하였다.

나머지 세 명에게는 간략하게 OTT 사이트들을 조사하며 분석하여 공통으로 필요한 사항들을 추려낸 뒤 UI 기초작업을 진행하라는 임무를 주었다. ERD 설계가 완료되면 UI 설계 팀에게 전달하여 세부 UI 설계 초안을 완성시킬 계획이었다.

이번 프로젝트에서 PL으로서의 목표는 팀원 간에 커뮤니케이션 활성화를 통해 한 몸처럼 움직일 수 있게 하는 것이 최우선 사항이다. 노션 및 단톡방의 활성화를 계속 요구하는 중이며, 사소한 사항이라도 서로 대화를 주고받자고 요구하고 있다.

또한 완성도 높은 결과물을 어떻게든 만들어내어 나에게도 도움이 되겠지만 팀원들에게 조금이나마 향후 진로에 도움이 되고 싶다.

728x90

저작자표시 (새창열림)

공감

mag1c

2년차 주니어 개발자.