[스프링 프로젝트] 인스타그램 - 첫 페이지와 회원가입 페이지

오늘은 학원에서 마지막으로 했던 개인프로젝트를 소개해볼까 합니다.
인스타그램을 한 이유라 하면 html, css 평가때 이미 instagram을 클론 코딩했기 때문입니다.
또한 기능적으로도 많이 어렵지 않을거라 생각했습니다. 그러나 인스타그램을 잘 안써서 기능적인 부분을 구현할 때 당황할 때가 있었는데 아무래도 자주사용하는 서비스를 하는게 좋을듯 합니다. (당연합니다)

 

메인페이지

우선 첫번째로 메인페이지입니다 주소값으로는 /instagram/index라고 했습니다.
처음 개인프로젝트를 시작하면서 스프링으로 어떻게 프로그래밍해야할지 잘 몰랐기에 html, css로  jsp먼저 만들었습니다.
아무래도 눈에 보이는 작업이다보니 색깔을 넣는다거나 input text의 속성들을 넣으면서 변해가는 과정을 보는게 꽤나 재밌습니다.
(혹시나 말씀드리지만 전 백엔드 개발자가 되고싶습니다.)

실제 인스타그램은 왼쪽에 보이는 아이폰의 화면이 동적으로 변하는데 그 부분은 잘 모르기에 구현하려다가 정작 중요한 기능들을 못할것같아 캡쳐로 찍어놓은것입니다. 제건 정적입니다.

오른쪽은 꽤나 비슷하게 따라했다 생각합니다.

가입하기 창

주소는 /instagram/signUp입니다. (form은 재사용했습니다 >_0)
실제 인스타그램에서는 로그인도 email or 사용자 이름으로 로그인을 할 수 있는데 이부분에서 꽤나 애를 먹었습니다..
input name속성을 두개 넣을수 있는 방법을 검색해봤는데.. 못찾겠더군요 ㅠㅠ 위와 같은 이유로 여기에 시간을 잡아먹고 기능을 못할것 같아 넘어갔습니다..

혹시 아는분 계시면 댓글로 알려주시면 감사하겠습니다 ㅠㅠ

 

---

위는 프론트적인 부분을 살펴봤고 이제 백엔드 부분을 보여드릴까 합니다.

로그인이 되어있지 않다면 사용자가 볼 수 있는 화면은 로그인창과 회원가입창 밖에 없습니다. 그렇기에 우리는 interceptor를 이용합니다

<interceptors> 
	<interceptor> 
		<mapping path="/instagram/*" />
		<exclude-mapping path="/instagram/login"/>  
		<exclude-mapping path="/instagram/index"/>
		<exclude-mapping path="/instagram/signUp"/>
		<beans:bean class="com.kojoo.Interceptor.SessionInterceptor"></beans:bean> 
	</interceptor> 
</interceptors>

첫 째로 servlet-context.xml에 정의를 해야합니다.
exclude-mapping path는 말 그대로 특정한 맵핑주소를 제외하고는 로그인세션 없이 접속 할 수 없다는 것입니다.

package com.kojoo.Interceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import com.kojoo.vo.MemberVO;

public class SessionInterceptor extends HandlerInterceptorAdapter {
	
	@Override
	public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
			throws Exception {
		
		HttpSession session = request.getSession(); 
		MemberVO id = (MemberVO) session.getAttribute("member");
		
		if(null == id) { 
			System.out.println("Interceptor : Session Check Fail"); // main page 로 이동 
			response.sendRedirect("/instagram/index");
			return false; 
		} else { 
			System.out.println("Interceptor : Session Check true"); 
			return super.preHandle(request, response, handler); 
		}
		
	}

}

SessionInterceptor를 정의합니다. 검색결과 HandlerInterceptorAdapter를 extends해야 한다고 합니다.
preHandle을 오버라이드 하고 정의해줍니다.

보시다시피 session.getAttribute해온 값이 null이라면 /instagram/index화면으로 넘어가게했습니다.
지금 보니 System.out.println으로 써놨는데.. log4j를 사용하는것이 좋습니다.
혼자 개발을 한다면 북치고 장구치고 해도 상관은 없지만 협업하는 상황에서는 무조건적으로 log4j를 사용한다고 합니다.

기본적으로 보기에 차이가 납니다.
위는 log.info로 출력된 코드 아래는 System.out.println입니다.
내용은 같으나 sout경우는 최소한의 정보도 없습니다. 일일이 쳐서 똑같이 만들 수 있지만 그럴바에는 log4j가 훨 낫습니다.

blog.silentsoft.org/archives/13

이 분의 블로그를 보면 log4j를 커스텀해서 날짜도 나오게 한다거나 할 수도 있고 sout은 콘솔에 뿌려져서 로그기록을 가져올 수도 없다고 하는데 전 회사에 가보질 않아서 잘 모르겠습니다. 확실히 알게되면 다시한번 정리하겠습니다.