회원가입, 로그인, 게시판 백엔드 실습 ( 1차 마무리 )

Spring 프레임워크를 이용해 회원가입, 로그인, 게시판 구현 실습

 : 무료 HTML 템플릿을 이용해서 반응형 UI를 가진 웹 사이트를 구현했다.

jsp 파일에 css와 javaScript를 추가하고, java를 통해서 데이터를 xml, json 형태로 mysql에 저장하거나 불러오면서

유저가 브라우저에 입력한 정보를 데이터베이스에 저장하거나 데이터베이스로부터 데이터를 받아와서 브라우저에 나타낼 수 있도록 했다.

 

로그인, 회원가입은 동기식으로 데이터를 처리했고 게시글의 상세보기 페이지에 나타나는 댓글 데이터를 비동기식으로 처리했다.

 

해당 게시글에서는 기본적인 기능 구현을 마친 작업 내용을 저장하고, 앞으로 추가할 기능들에 대해 기록하려고 한다.

---

1. 메인 페이지

 - 부트스트랩을 이용해서 만든 무료 HTML 파일의 메인 화면이다. 차후에 이 홈페이지는 portfolio로 제작할 예정이기 때문에, 필요없는 부분을 걷어내고 브라우저의 크기에 따라 component들의 크기가 변하는 반응형 요소만 남겨뒀다.

 

 - 왼쪽의 board 탭을 클릭하면 게시판 화면으로 넘어갈 수 있다.

<li><a href="http://localhost:8080/board/list" class="nav-link scrollto"><i class='bx bxs-dashboard'></i> <span>Board</span></a></li>

간단하게 a 태그와

@Controller
public class HomeController {
	
	private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
    
	@RequestMapping(value = "/", method = RequestMethod.GET)
// 접근제어자  반환타입  메서드명(매개변수, 매개변수)
	public String home(Locale locale, Model model) {
		return "home";
	}

HomeController 로 구성돼있다.

 

** 로그인과 회원 가입으로 넘어갈 수 있는 탭을 생성하는 것이 좋을 것 같다.

 

---

2. 게시판 리스트

 - 왼쪽 네비게이션에 회원가입, 로그인 그리고 가운데에 있는 자유게시판을 제외한 나머지 요소들은 없으면 허전해서 아직 삭제하지 않았다.

width 값이 브라우저에 따라 변하게 설정되어있어서 빈 부분의 공백이 느껴지지 않게 만드는 것은 아직 어려운 것 같다.

 

 - 로그인을 한 상태라면 다음과 같이 글쓰기 버튼이 활성화된다.

<c:if test="${sessionScope.login != null}">
	<a href="http://localhost:8080/write" class="btn btn-light" style="color:#012970;">글쓰기</a>
</c:if>

 - jsp의 if 문을 사용해서 session에 login 정보가 저장되어 있는지 확인하는 방법을 이용했다.

@Controller
public class BoardController {
	
	@Autowired
	BoardService bs;
	
	// 게시판 메인
	@RequestMapping(value="/board/list", method = RequestMethod.GET)
	public String list (Model model, CriteriaVO cri) {
		
		model.addAttribute("list", bs.list(cri));
		
		int total=bs.total(cri);
		
		model.addAttribute("paging", new PageVO(cri, total));
		return "board/list";
	}
}

 - 게시판 리스트의 데이터를 가져오는 것은 BoardController에서 담당한다. 동기식으로 작동하며 게시글의 데이터와 게시글의 총 갯수를 읽어들여서 pagnation을 구성한다.

 

** 유저가 현재 로그인 상태를 쉽게 확인할 수 있는 표시를 만들고 , 로그인 상태라면 로그아웃을 할 수 있도록 제작할 필요가 있다

** 또한 게시글에 표기되어있는 작성일자를 년 월 일만 나타나게 변경해보자, 이는 sql에서 데이터를 불러올 때, dateformat을 이용해야 할 것으로 보인다.

---

3. 로그인, 회원가입

 - 데이터베이스에 저장되있는 아이디와 비밀번호를 입력하면 session에 id 값을 저장하고 다른 화면으로 넘아갈 수 있다.

session에 저장된 id 값을 확인하는 것으로 유저에게 특정한 기능을 제공할 수 있다.

@RequestMapping(value = "/login", method = RequestMethod.POST)
	public String loginPost(LoginVO member, HttpSession session) {
		
		if (ls.login(member)==null) {
			System.out.println("bad");
			return "member/login";
		} else {
			session.setAttribute("login", ls.login(member).getId());
			System.out.println(session.getAttribute("login"));
			return "redirect:/board/list";
		}
	}

 - 위의 session.setAttribute("login", ls.login(member).getId()); 실행문으로 세션에 아이디를 저장한다.

 

** 해당 페이지에서 두 가지 개선사항이 있다. 첫 번째는 로그인, 회원가입 과정에서 유효성 검사를 추가한다.

두 번째는, member 객체에서 ID 값만 session에 저장하고 있는데, member 객체 전체를 session에 저장하고 필요한 데이터만 꺼내 쓸 수 있는 기능을 구현해보자

 

---

4. 게시판 디테일

 - 게시판 리스트에서 제목에 있는 A 태그를 클릭하면 다음과 같이 해당 게시글의 정보를 상세하게 볼 수 있고,

해당 게시글과 외래키 설정이 되어있는 댓글들을 불러올 수 있다.

 

 - 게시글 데이터를 가져오는 부분은 동기식으로 처리되어있고, 댓글 데이터를 가져오는 부분은 비동기식으로 처리되어있다.

@Controller
public class ReplyController {
	
	@Autowired
	ReplyService rs;
    
    // 댓글 목록 리스트
		@RequestMapping(value = "/replies/{board_no}/{page}", method = RequestMethod.GET)
		public ResponseEntity <ReplyPageVO> getList(@PathVariable("page") int page,@PathVariable("board_no") int board_no){
			CriteriaVO cri = new CriteriaVO(page,10);
			return new ResponseEntity<>(rs.list(cri, board_no),HttpStatus.OK);
		}
}

 - 해당 기능은 ReplyController을 생성해서 구현했다. 비동기식으로 이루어지기 때문에, 동기식과 다른 부분이 눈에 띈다.

가장 큰 차이점은, return 값이 ResponseEntity < > 라는 것과, 매개변수 앞에 어노테이션이 있다는 점이다.

 

 - 비동기식 방식은 백엔드에서 데이터를 받고 처리하는 것 까지 모두 수행하기 때문에, jsp 파일을 거치지 않고 javaScript에서 데이터를 취급한다.

jsp 파일에는 이 것 처럼 모든 처리가 끝난 데이터를 받아 올 수 있게 위치만 지정해두면 된다.

$(document).ready(function(){	// jquery 준비...
	var board_noValue=$("input[name='board_no']").val();
	var pageValue=1;
	list({board_no:board_noValue,page:pageValue});
    
    $("#replyPage").on("click","li a",function(e){
		alert("aaa")
		e.preventDefault();
		var board_noValue=$("input[name='board_no']").val();
		var pageValue = $(this).attr("href");
		list({board_no:board_noValue,page:pageValue});
	})
})

function list(param){// list함수 선언 시작
	//alert(bno);
	var board_no = param.board_no;
	var page = param.page;
	
	$.getJSON("/replies/"+board_no+"/"+page+".json",function(data){
		
		var str="";
		
		for(var i=0;i<data.list.length;i++){
			str+="<li>"
			// 댓글 주인의 프로필 사진을 추가하고 싶다면 이 자리에 태그 추가 할 것
			str+="<div class='reply-detail'>"
			str+="<div class='reply-id'><span>"+data.list[i].id+"</span></div>"
			str+="<div class='reply-content'>"+data.list[i].content+"</div>"
			str+="<div class='reply-btn'>"
			str+="<input class='update btn btn-light' type='button' value='수정' data-rno="+data.list[i].rno+">"
			str+="<input class='remove btn btn-light' type='button' value='삭제' data-rno="+data.list[i].rno+">"
			str+="</div></div></li>"
		}
		
		$("#replyUL").html(str);
		
		showReplyPage(data.replycnt,page);
	});
}// list함수 선언 끝

function showReplyPage(replycnt,pageNum){
	
	var endNum = Math.ceil(pageNum/10.0)*10;
	var startNum = endNum-9
	
	var prev=startNum !=1;
	var next=false;
	
	if(endNum * 10 >= replycnt){
		endNum = Math.ceil(replycnt/10.0)
	}
	if(endNum * 10 < replycnt){
		next=true;
	}
	var str="<ul>";
	
	if(prev){
		str+="<li><a href='"+(startNum-1)+"'>Previous</a></li>";
	}
	
	for(var i=startNum ; i<=endNum ; i++){
		str+="<li><a href='"+i+"'>"+i+"</a></li>"
	}
	
	if(next){
		str+="<li><a href='"+(endNum+1)+"'>Next</a></li>";
	}
	str+="</ul><div>"
	$("#replyPage").html(str);
}

 - replyUL 에 댓글 리스트를 불러올 것이고, replyPage 에 댓글의 페이지네이션을 불러올 것이다.

 - 다음과 같이, jsp에서 form 태그를 사용하지 않고 javascript에서 데이터를 가져간다.

 

** 게시글 디테일 페이지에서는 댓글의 페이지 네이션과, 댓글 수정 및 삭제 기능을 해당 댓글을 작성한 사람에게만 부여하는 등의 로그인과 연관된 기능을 추가할 필요가 있다. ( 로그인 된 사람만 댓글을 작성할 수 있는 등 )

 

 

 

---

전체 후기 : 기본적인 기능들만 구현돼있기 때문에, 실제 우리가 자주 사용하는 홈페이지들 보다 불편한 점이나 미흡한 점이 많다. 현재 구현할 수 있는 기능들을 바탕으로 최대한 완성도 높은 페이지를 만들어보도록 하자.