[Semi project]JSP 팀 프로젝트 개발 후기

프로젝트 협업을 위한 깃허브 사용

1. TOOL

• JSP : eclipse java / html,CSS,javascript / jstl,el / Mybatis
• db : DBeaver Oracle

2. 운영체제

• window 10

3. WAS

• Tomcat 10.1

1. 주제선정

오늘의집을 주제로 "게시판 기능"을 담당하는 사용자 중심의 커뮤니티와 쇼핑 페이지를 통해 다양한 웹 개발 기능을 구현할 수 있고, 실제 서비스와 유사한 환경의 UI/UX 디자인 구현을 연습하기에 적합한 웹사이트라 생각하여 이 주제를 선정하였습니다.

2. 전체 FLOW CHART 및 EDR 구성

2-1. 전체 FLOW CHART

2-2. 전체 EDR

3. 각 기능별 코드 설명

브라우저 랜더링 페이지 구현까지 설명할 예정...

• 각 기능들은 기본적으로 /*.jsp 에서 원하는 정보를 parsing한 뒤,
  컨트롤러에서 기능에 대한 페이지이동, 세션 처리 등에 대한 처리를 한다.
• 만약 동적 데이터에 따른 페이지 처리가 필요한 경우, dto/vo 에 저장된 db데이터를 dao를 통해 db에 대한 CRUD 처리를 진행하였다.

✅ 3-1. 회원가입 / 로그인 페이지

1) 렌더링 구현과정

2) 백엔드 처리과정

• UserFontController에서 회원가입, 로그인, 아이디중복체크, 로그아웃에 대한 기능 및 페이지이동에 대한 통합 처리를 담당하고 있다.
• 로그인에서 사용된 핵심적인 개념은 로그인 한 아이디, 패스워드 데이터를 세션에 저장후 유지하는 기능으로 db정보에 따라 동적 웹페이지가 잘 구현하게 하는 것이다.

UserLoginOkAction 클래스

• 로그인정보 가져오기

String user_id = req.getParameter("user_id");
String password = req.getParameter("password");

• 로그인처리 메서드에 대한 dao에 따른 페이지 이동

// 리다이렉트 방식으로 이동
forward.setRedirect(true);
// dao에서 로그인 성공시 로직 처리
if (udao.login(user_id, password)) {
// 세션 유지
HttpSession session = req.getSession();
session.setAttribute("user_id", user_id);
// "/index.jsp"로 이동경로 지정
forward.setPath("/index.jsp");
} else {
// dao에서 로그인실패시, "실패 상태의" 다시 로그인 페이지로 이동
forward.setPath("/user/login.jsp?flag=false");
}

UsersDAO 클래스

• user_id,password 두 매개변수에 대한 데이터 처리

// 로그인 처리
	public boolean login(String user_id, String password) {
		boolean result = false;
        // hashmap방식의 배열로 데이터 담기
		HashMap<String, String> datas = new HashMap<>();
		datas.put("user_id", user_id);
		datas.put("password", password);
		// db 조회 성공 여부에 대한 로직처리
		if ( (Integer)session.selectOne("Users.login", datas) == 1) {
			result = true;
		}
		return result;
	}

user.xml

• 로그인 정보 sql문으로 읽어오기

<select id="login" parameterType="hashmap" resultType="_int">
		SELECT COUNT(*) FROM USERS 
		WHERE USER_ID = #{user_id} AND PASSWORD = #{password}
</select>

• 회원가입에서는 아이디 중복 인증방식에서 사용된 AJAX방식 개념이다.
  초기에는 AJAX방식에 대한 숙지 오류 검토가 덜 되어서 다른 조원(조장님)의 도움을 받아 MCV1모델로 get방식의 전달방식을 사용하여 기능구현의 문제점을 해결하였으나 발표 이후, 프로젝트의 정리 과정 중, 서블릿에서 예외처리(try~catch~)하는 과정에 오류를 발견하게 되었고 다음 과 같이 MVC2패턴으로 정리하였다.

  user.js

  let idCheckInProgress = false; // 중복 체크 진행 상태 플래그
  	// 아이디 중복인증 클릭시
  	function checkId() {
  	const user_id = document.querySelector('#user_id').value.trim();
  	// 아이디가 입력되지 않았을 때 처리
  	if (user_id === "") {
      	alert("아이디를 입력해주세요.");
      	document.querySelector('#user_id').focus();
     		return; // 중복확인 요청 중단
  	}
  // 아이디 영문자와 숫자만 허용 체크
  const idPattern = /^[a-zA-Z0-9]+$/; // 영문자와 숫자만 허용하는 정규 표현식
  	if (!idPattern.test(user_id)) {
      	alert("아이디는 영문자와 숫자만 입력 가능합니다.");
      	document.querySelector('#user_id').focus();
      	return; // 중복확인 요청 중단
  	}
  	// 중복 확인 요청이 진행 중인지 확인
  	if (idCheckInProgress) {
      	alert("중복 확인 요청이 이미 진행 중입니다.");
      	return; // 중복 확인 요청이 이미 진행 중이면 중단
  	}
  	idCheckInProgress = true; // 중복 확인 요청 시작
  	// 아이디 중복확인 요청, post방식으로 /user/UserCheckId.us에서 로직처리
  	const xhr = new XMLHttpRequest();
  	xhr.open('POST', '/user/UserCheckId.us', true);
  	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  	xhr.onreadystatechange = function () {
      	if (xhr.readyState === 4) {
          	idCheckInProgress = false; // 요청 완료, 플래그 초기화
              if (xhr.status === 200) {
                  // 서버에서 반환된 결과를 alert으로 표시
                  alert(xhr.responseText);
              } 
      	}
  	};
  xhr.send("user_id=" + encodeURIComponent(user_id));
  }

  UserCheckIdOkAction

  UsersDAO udao = new UsersDAO();
  // 응답 타입 설정 (텍스트 형태로 응답)
  response.setContentType("text/plain; charset=UTF-8");
  String user_id = request.getParameter("user_id");
  try ( PrintWriter out = response.getWriter()){
  	// 아이디가 null이거나 빈 문자열인지 체크
      if (user_id == null || user_id.trim().isEmpty()) {
  		out.print("아이디를 입력해주세요.");
  	} else {
  	   // 아이디 영문자와 숫자만 허용 체크
  	  if (!user_id.matches("^[a-zA-Z0-9]+$")) {
  		out.print("아이디는 영문자와 숫자만 입력 가능합니다.");
  	  } else {
  	    boolean isDuplicate = udao.checkId(user_id);
  	    	if (!isDuplicate) {
  	           	out.print("사용할 수 있는 아이디입니다.");
  	        } else {
  	           	out.print("중복된 아이디입니다.");
  	        }
  	   }
  	}
  } catch (IOException e) {
  	e.printStackTrace();
  }

  UsersDAO

  • CRUD처리과정에서 조회된 데이터값이 아니라 데이터의 수(int값)으로 변경해서 이해하기 쉬운(배운?) 로직으로 "select"문을 결과발표날보다 개선해보았다.

    //로그인 아이디 확인
    public boolean checkId(String user_id) { 
    	boolean result = false;
    	if( (Integer)session.selectOne("Users.checkId", user_id) == 1) { 
    		return true; 
    	}
    	return result;
    }

  user.xml

  <select id="checkId" parameterType="String" resultType="_int">
  	SELECT COUNT(*) FROM USERS 
  	WHERE USER_ID = #{user_id}
  </select>

3-2. 쇼핑 페이지

• 로그인페이지와 마찬가지로 'frontController'를 통한 각 쇼핑페이지의 기능 및 페이지의 이동처리 관리를 구현하였다. (홈, 카테고리선택, 상세페이지보기, 리뷰쓰기, 장바구니 담기)
• 게시판 구현과정과 마찬가지로 .jsp페이지에서 jstl을 활용하여 데이터를 db에 저장한 데이터를 가져온다.

1) 렌더링 구현과정

2) 백엔드 처리과정

3-3. 장바구니 / 바로구매 페이지

1) 렌더링 구현과정

2) 백엔드 처리과정

3-4. 결제 페이지

1) 렌더링 구현과정

2) 백엔드 처리과정

3-5. 자유게시판 / QnA 페이지

1) 렌더링 구현과정

2) 백엔드 처리과정

3-6. 공지사항 / 채팅

1) 렌더링 구현과정

2) 백엔드 처리과정

• 공지사항
  
• 채팅방
  

4. 프로젝트 일정 및 팀 역할

4-1. 프로젝트 일정

• 9월 9일부터 조편성이 완료되었고 각자 주제를 탐색하는 시간을 거쳐 그 주 12일 금요일에 오늘의집 을 참고한 인테리어 쇼핑몰 웹사이트로 주제를 정하였다.
• 4~5일의 기나긴 추석주간동안에 각자 정한 (로그인, 회원가입, 장바구니, 결재기능) 플로우차트 에 대한 부분을 수집하여 9월 20일 플로우차트를 구성하였다.
• 주말, 9월 21일 담당 팀원들이 디스코드를 통해 ERD(DB구조 설계라고 함.)를 구성하는 회의를 진행하였다. 사실 디스코드를 통한 참여를 첨 해봐 마이크, 이어폰 이슈로 대화 참여하는데 어려움을 겪음, 이후 1회에 한하여 추가로 10월 3일 디코방회의를 진행하였는데 문제를 해결하여 잘 진행하였음😉
• 이 후부터는 27일 까지 내가 담당한 로그인/회원가입 기능을 진행하였음(이 기능을 해야 세션을 받아와 다른 기능을 테스트할 수 있어 가능한 빨리 진행하려함, 담당한 기능이 실력에 비해 넘 많아 다른 팀원님에게 간단히 한 "장바구니,결제"기능 html페이지를 넘김).
  프론트엔드와 백엔드단 모두 각 기능을 진행이나 프론트(대충), 백엔드단의 로그인/회원가입까지 진행하고 깃 허브에 공유
• 초기에는 세션에 대한 개념이 되지 않아 못하고 전달하였다는...
• 이 후부터 로그인과 회원가입페이지에서의 완성도를 위해 구글 개발자도구를 참고하여 html/css를 완성하였고 javascript를 통해 로그인/회원가입에 대한 예외처리를 진행하려 하였지만 당시엔 아직 부족한 개념 이슈와 500오류이슈로 조장님의 도움으로 해결하였다. 거기에 "아이디 중복인증 기능"또한 Ajax 개념 활용해야 하나 이 역시 조장님의 도움으로 매우 Critical하게 완료할 수 있었다.
• 이후 작업에 대해서는 각자가 작업한 내용에 대해서 깃허브를 통해 이클립스 편집기에서 push하고 pull하는 과정을 통해 10월 2일 부터는 통합하는 과정이 있었다.
• 이 때부터는 기존에 배웠던 "게시판(board)"에 대한 수업 내용이 들어가기에 코드를 이해해야 하였고 별도로 게시판을 학습하는 과정을 거치고 팀원분들이 작업한 코드 파일을 이해할 필요가 있었다.
• 게시판 학습과정 이후, 10월 3~4일 휴일을 통해 통합적으로 코드 테스트과정을 거치며, 쇼핑 페이지, 커뮤니티 페이지 등 논리적인 오류나 500오류 등으로 erd와 코드 수정 과정을 거치며코드 수정을 하는 과정에서도 팀원분들의 코드량이 방대하여 코드를 이해하는 과정이 매우 많이 필요하였다 팀원들이 발견한 코드 오류에 대해서는 거의 오류를 잡아나갔다. (이 모든 버그 리포트에 대한 내용은 다음 파일로 갈음한다.)
• 내가 기존에 한번 통합 정리하였던 플로우차트를 기반으로 담당 팀원이 ppt 자료 구성을 하였고 One by One 으로 플로우차트, erd, 시연과정을 보여주는 방식으로 ppt디자인을 진행하였다.

4-2. 팀 역할

5. 소감

국비지원 과정을 거치며 처음으로 팀 프로젝트를 진행하면서 팀과의 협업/소통 하는 과정이 중요하다는 것을 느끼게 되었고 html/css/javascript를 통해 브라우저에 코드를 그려내는 과정이 굉장히 흥미로웠고 프론트 컨트롤러, 서블릿 컨테이너, DTO, DAO객체 등을 종합적으로 활용하여 JSP프로젝트를 MVC2패턴으로 웹 서버를 제작하면서 백엔드에 대해서 한 층 더 성장할 수 있는 계기가 되었다.