Day3] MVC모델 게시판 - homeController 만들기

기존 프로젝트에서 사용하던 JS 코드를 최대한 배제하고, MVC와 JSP를 활용한다.

 

1. home controller를 만들고, WEB-INF 폴더 하에 home.jsp파일을 위치

//homeCtrl.jsp 코드

<%@ page contentType="text/html; charset=UTF-8" %>

<%
String viewPath = "/WEB-INF/views/";

if(request.getMethod().equals("GET")) {
	pageContext.forward(viewPath + "home.jsp");
} else if(request.getMethod().equals("POST")) {
	//로그인 되어 넘어온 세션을 유지 및 home.jsp
}

%>

WEB-INF 아래에 위치시키면, 브라우저가 home.jsp에 직접 접근할 수 없고

작성한 코드가 어떻게 적용되는지 바로 확인하기가 어렵다.

그래서 homeCtrl.jsp 파일을 간략하게 먼저 만들었다.

아직 로그인 페이지에서 데이터가 어떻게 넘어오는지 확실하지 않아, get 방식 접근 시만 작성하였다.

 

2. home.js -> JavaBeans로 변경

하려고 home.js를 열어봤다. 코드를 읽다보니 이상해서

home.jsp를 열어봤다. home.js를 사용하지 않는다.

ㅎㅎhome.jsp의 주요한 기능은 우리 홈페이지의 16개 게시판으로 연결해주는 링크를 제공하는 건데,

이 때 js가 아니라 html a 태그로 직접 연결을 시켜놨었다.

 

따라서 일단 이건 보류.

 

3. home 화면 구성 변경

이번 프로젝트에서 home 화면이 담당하는 주요 기능은 다음과 같다.

• 로그인 여부에 따라 우상단 로그인 버튼 또는 로그인 정보 표시
• 상단 메뉴바
  • 로고, 홈버튼, 성격테스트, 상담소 찾기
• MBTI 별 게시판 연결

이에 따라 화면 분할을 먼저 실시한다.

 

3.1. div태그로 navigator와 하위 div로 container 생성

 

3.2 container 태그에 jsp:include로 boardLink.jsp 출력

 

3.3 (문제 발생)navigator 버튼을 클릭함에 따라 container 태그의 내용을 변경

navigator 버튼을 어떤 태그와 방식으로 연결해야 할 지가 고민이다.

기존처럼 a 태그를 쓰면 페이지 전체가 redirect된다.

수업에서도 form과 submit을 활용했기 때문에 항상 페이지 전체가 리다이렉트 됐었다.

그래서 li 태그로 메뉴들을 만들어서 container들을 변동시키려고 하는데, li태그를 js 없이 어떻게 event 연결을 시킬지를 모르겠다.

이에 따라일단

 

3.4 (문제 발생)container 부분이 동적으로 변경될 수 있도록 jsp:include 태그를 저장소에 넣는 방법을 생각해봤다.

homeCtrl.jsp 코드

if(request.getMethod().equals("GET")) {
	session.setAttribute("container", "<jsp:include page=" + container + " />");
	pageContext.forward(viewPath + "home.jsp");
}

		<div class="container">
			<%-- <jsp:include page="boardLink.jsp" /> --%>
			<%= session.getAttribute("container") %> 
		</div>

이렇게 하면주석처리한 코드와 동일한 코드가 session에서 불러와지긴 한다. 그런데!

include가 실행되지 않는다.

제대로 실행되면 노란 동그라미 부분은 boardLink.jsp 페이지의 코드들이 출력되어야 한다.

표현태그(<%= %>)가 아니라 EL(${ })을 써도 마찬가지

 

3.5 (해결) jsp:include 코드 전체가 아니라 page 주소 부분만을 저장함으로 해결

homeCtrl.jsp 코드

String viewPath = "/WEB-INF/views/";
String container = "boardLink.jsp";

if(request.getMethod().equals("GET")) {
	/* session.setAttribute("container", "<jsp:include page=" + container + " />"); */
	session.setAttribute("container", "boardLink.jsp");
	pageContext.forward(viewPath + "home.jsp");
}

home.jsp 코드

<div class="container">
			<%-- <jsp:include page="boardLink.jsp" /> --%>
			<%-- <%= session.getAttribute("container") %> --%>
			<jsp:include page="${ sessionScope.container }" />
</div>

성공

session이 아니라 pageContext로 scope를 줄여도 정상작동한다.

이에 따라 위 코드에서 session 대신 pageContext로 scope을 줄였다.

[side tip]

1. 맥에서 git 사용 시 .DS_Store 파일 생성 문제

이번 프로젝트에서는 git을 적극적으로 활용하기로 했다.

맥 finder는 DS_Store(Desktop Services Store)파일을 폴더마다 자동생성하는데

- 해당 폴더에 대한 메타데이터를 저장

- 디렉토리 크기, 아이콘의 위치, 폴더의 배경 등에 대한 정보 제공.

 

깃에서 이 파일의 변경사항을 계속 추적한다.

이 파일을 삭제하거나

gitignore에 추가한다.

• 저장소 상위 디렉토리에서 현재 디렉토리 아래의 모든 .DS_Store 파일 제거

find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch

• .gitignore 파일 생성 및 .DS_Store파일 추가 : git이 .DS_Store 파일을 무시한다.

echo .DS_Store >> .gitignore

또는 직접 .gitignore파일을 수정해도 된다.

 

출처 : https://wooono.tistory.com/251