프로젝트 진행 ① : 프로젝트 생성 + MVC + Front Controller 구조 만들어보기

목차

• 시작하며
• 프로젝트 생성
• Github 연동
• MVC
• Front Controller 구조 만들기
• 마치며

 

---

 

시작하며

이번부터는 실제로 뭔가 만들어보는 시간이다. 저번 포스팅에서 올렸던 일정하고는 조금 엇나가는 부분이 있는 것같다.. 역시 일정 짜는게 제일 어렵다...^^. 그래도 최대한 맞춰서 진행해보려고 한다. 원래 일정대로라면 첫 페이지에서 로그인 페이지, 회원가입 페이지로 이동하는 컴포넌트를 만들고 로그인 기능을 구현해야한다..... 너무 생각없이 공수를 짰나 생각이 들기도 하지만 열심히 해봐야겠다..

 

---

프로젝트 생성

이번 프로젝트에서 IDE로는 인텔리제이를, 폴더 구조는 메이븐 webapp 아키텍처를 사용하려고 한다.

 

maven webapp 아키텍처 폴더구조

 

이런 식으로 src/main폴더 하위에 java, resources, webapp 폴더를 두고 소스는 java, 정적 리소스 파일은 resources, 웹 관련 파일은 webapp 폴더에서 관리할 계획이다.

 

---

Github 연동

일단 Git 버젼 관리를 위해 소스트리(Sourcetree)를 다운로드 받았다. 윈도우 운영체제를 사용할 때부터 소스트리를 사용해와서 ui를 사용하는 데엔 거리낌은 없었다.

 

소스트리

 

 

깃허브

 

그리고 잔디를 심기위해(?) 깃허브와 연동시켰다. 사실 깃허브도 사용 경험이 많다고는 할 수 없어서 연동시키는 것에 애를 먹었다. 하지만 이렇게 한 번씩 애를 먹을 때마다 얻는 것(fast-forword 라던가 문법같은 지식들)이 있어서 나쁘진 않다.

 

사실 이 저장소를 만든건 프로젝트 설계를 포스팅할 때부터 만들어왔지만, 실제 연동은 이번 포스팅을 하면서 했다. 윈도우 운영체제를 사용할 때는 거의 GUI를 사용하면서 push 정도를 할 때만 CLI에 명령어를 타이핑했었는데, 이번엔 처음부터 다 CLI를 사용했다.

 

로컬 저장소에서 원격 저장소와 연결 되어있는지를 확인하기 위해
git remote -v 명령어를 사용했고,

로컬 저장소와 원격 저장소를 연결하기 위해
git remote add main https://github.com/DoKyeongOh/Behind.git 명령어를 사용했다.

 

그리고 push를 하려는데 username, password를 입력하라는 창이 나왔는데 아무리 입력해도 되질 않았다. 알고보니 github 주소가 ssl로 되어있으면 상관 없지만 https로 되어있는 경우에 원격 저장소에 접근(push, pull, clone 등)할 때마다 username, password를 입력해야 한다고 했다. 그리고 2021년 08월 13일부로 password는 사용이 막혀서 PAT(Personal Access Token)를 사용해야 해서 PAT를 새로 만들고 등록해서 간신히 원격 저장소에 접근할 수 있었다.

 

사실 이전에 ssl로 바꿔서 해결했던 적이 있었는데, 이번엔 이런식으로 해결했다. 하지만 PAT도 기한이 있어서 주기적으로 바꿔주어야 해서 이다음엔 다시 ssl을 등록해볼까 한다.

 

---

MVC

페이지를 만들기에 앞서서 이전에 jsp 서블릿 기반으로 만들어보고 스프링으로 넘어갈 계획이라고 했었다. 그래서 진짜로 스프링 1도없이 해보려 했는데 사실 java 백엔드 공부를 처음할 때부터 JSP나 서블릿의 개념들을 제외하고는 스프링 프레임워크를 사용하는 방법부터 공부했어서 어떤식으로 만들어가야할지 고민을 했었는데, 한창희님의 블로그를 보고 큰 힌트를 얻었다.

JSP MVC패턴(study3)

 

이전에 내가 알고있던 MVC패턴은 뷰가 있는 프로젝트에서 뷰적인 부분과 로직적인 부분을 분리하기 위해 사용하는 것으로 알고 있었고, 평소에 유튜브에서도 모델1, 모델2에 대한 영상을 봐왔어서 나름 개념적인 부분은 알고 있다고 생각했었는데, 이 포스팅을 읽고 많이 배웠다.

 

그리고 방향성을 mvc 모델2를 구현하는 쪽으로 하기로 했다.

 

원래 mvc 모델2는 대략

 

mvc model 2

 

이렇게 그림으로 나타낼 수 있는데, 여기서 컨트롤러의 역할을 서블릿이, 뷰의 역할을 JSP이 할 수 있도록 만들어 주려고 한다.

 

대략 다시 그림으로 표현하면

mvc model 2 - pjt

 

이런 식으로 표현할 수 있을 것이다.

 

이렇게 url 요청이 오면 요청을 처리할 서블릿을 만들고 요청 처리 후 뷰를 보여줄 JSP를 만들면 되는데 이렇게되면 페이지 혹은 요청마다 서블릿을 일일이 만들어야 하고, 반복되는 작업도 많아진다. MVC 에서 프론트 컨트롤러 패턴의 장점을 요약하면

 

Servlet을 여러 개 만들었을 경우에 발생하는 중복 코드를 피할 수 있다.
다른 컨트롤러에서 Servlet의 코드 사용을 피할 수 있다.

 

이정도가 될 것 같고, 이 정도만 되더라도 프론트 컨트롤러 구조는 효율적이라고 생각한다.

 

mvc - front controller

 

---

Front Controller 구조 만들기

일단 모든 요청을 처리해줄 프론트 컨트롤러의 역할을 해줄 서블릿이 필요하기 때문에 'DispatcherServlet' 이라는 이름의 서블릿을 만들고, 컨트롤러 인터페이스와 구현체 하나를 만들었다.

 

DispatcherServlet

 

그리고 뷰를 담당할 JSP File들은 WEB-INF/views에 생성해 두었다. 이전에 스프링 프레임워크를 처음 공부할 때 url-pattern = "/" 인것의 의미를 몰랐던 적이 있어서 구글링을 했던 적이 있다. 요약하자면 유저로부터 요청이 왔을 때 해당 요청과 매치되는 서블릿이 없다면 디폴트로 해당 url-pattern("/")과 연결된 서블릿이 동작하게 되는 것이라고 한다.

 

이제 디스패쳐 서블릿은 클라이언트의 요청을 받고 매핑정보를 불러와서 어느 컨트롤러에 위임할지 결정하는 일을 해야하는데, 그 일을 ControllerFactory가 할 수 있도록 구현했다.

 

ControllerFactory 생성부분

 

먼저 클라이언트의 요청이 왔을 경우 요청에 맞는 컨트롤러의 매핑정보를 기억하기 위해 "uri_handler_mapping.properites"를 만들고 로그인 요청에 로그인 컨트롤러를 등록해두었다. 그리고 properties를 읽어올 수 있는 Properties 객체를 사용하여 파일을 읽은 후, Map을 이용하여 키, 값 형태로 저장했다. 이건 추후에 uri를 입력했을 때 별도의 연산없이 컨트롤러 클래스를 읽어들일 수 있도록 하기 위함이다.

이렇게 함으로써 디스패쳐 서블릿에서 new ControllerFactory를 하면 이미 매핑 정보를 불러온 구조가 되었다.

 

여기서 애먹었던 점은 uri_handler_mapping.properties 파일을 src/main/resources 폴더에 넣어서 사용하려고 했는데 resources폴더에 접근할 수 없어서 구글링을 해서 겨우 해결했다. 결론은 빌드를 하게 되면 resources 폴더안의 파일들이 target/classes 폴더로 이동하기 때문이라고 한다. (이유는 모르겠다ㅎㅎ)

 

이제 뷰이름을 받아올 때 prefix, suffix처리를 해줄 뷰 리졸버를 만들면 된다.

 

뷰 리졸버 적용한 모습

 

이렇게 뷰 리졸버를 적용해서 간단하게 MVC model 2 + 프론트 컨트롤러 패턴을 만들었고 일단은 페이지까지 잘 보여지는걸 확인했다.

 

---

마치며

공수를 잡을 때 전체 골격 로직을 만드는 부분을 따로 잡았어야 하는데 너무 다른 사람들의 IA만 보고 안이하게 생각하지 않았나 생각을 시작한지 얼마 되지도 않아서 느꼈다..^^. 다른 회사의 경우 이미 페이지를 만들어온 노하우나 이전 서비스에서 사용한 소스를 사용하면서 단기간에 할 수 있었을 것이라는 생각을 하지 못했던 것 같다. 일단 최대한 일정에 맞춰서 만들기 위해 노력해봐야겠다. 

 

감사합니다!!