[전자정부프레임워크] 입문 3편 – 로그인 기능 구현하기(프로젝트 생성과 톰캣 로컬 서버 연결까지)

전자정부프레임워크(eGovFrame)를 처음 사용하는 입문자들이 가장 어려워하는 과정이 바로 “프로젝트 생성 → 기본 화면 구성 → 서버 연동”입니다. 특히 강의에서는 빠르게 넘어가는 반면, 실제로 초보 개발자가 따라 해보면 어디서부터 무엇을 눌러야 하는지 조차 헷갈리는 경우가 많습니다. 저 또한 그랬으니까요.

오늘은 전자정부프레임워크 입문 시리즈 중 로그인 기능 구현의 첫 번째 단계, 프로젝트 생성 → 폴더 구조 이해 까지를 친절하고 상세하게 안내할 예정입니다. 모든 부분에 스크린 샷을 첨부하였고 관련한 소스코드를 마지막에 첨부할 예정입니다. 다운 받아서 그대로 붙여 넣으셔도 되지만 개발 환경이 조금씩 다르고 컴퓨터의 내장된 폴더 경로가 다르기 때문에 아마 에러가 날 확률이 높습니다. 여러분의 공부에 참고자료로 사용하시면서 변경할 부분은 변경하시면 될 겁니다.

입문자, 비전공자, 독학 개발자 모두 포스팅을 자세히 보시고 하나씩 천천히 따라하시면 됩니다. 그럼 시작해 보겠습니다.

Project 생성하기 (입문자를 위한 자세한 설명)

지난 편에서 전자정부프레임워크를 실행하고 이클립스 개발환경에 프레임워크를 연결까지 하셨을 겁니다.
기억나지 않는다면? [전자정부프레임워크] 입문 2편 – 프로젝트 시작하기(폴더구조 / Maven 완전정복)

그렇게 전자정부프레임워크를 연결하고 나서 어떻게 해야 하는지 망설여지실 겁니다. VS Code 처럼 한글화 확장팩을 쓸 수 있는 것도 아니고 어디부터 시작을 해야 하는지 감이 오시지 않을 겁니다. 또는 인텔리제이나 이클립스에서 자바 강의를 들은 분이라면 반사적으로 New > Java Project 를 선택하셨을 수 도 있으실 겁니다만.

일반 Java Project 또는 일반 Maven Web Project로 만들면 안 됩니다.

지금 우리는 전자정부프레임워크로 웹개발을 하는 부분이며 자체 템플릿 구조가 있기 때문에 Egov Web Project 템플릿을 사용해야 합니다.

생성 방법

• 먼저 우측 위 상단의 G라고 적힌 부분을 클릭해 조금 전 연결했던 전자정부프레임워크로 들어가줍니다.

• 좌측 네이게이터의 빈 공간(폴더목록들이 있는 곳의 여백) 에서 우측 마우스를 클릭하여 New > egovFrame Web Project를 클릭합니다.
• 혹은 좌측 최 상단의 file > new > egovFrame web Project 를 클릭합니다.

Tip) 폴더 이름을 한글로 하게 되면 혹시 모를 오류가 생길 수 있습니다. 웬만해서는 영어로 해주세요.
Tip) 띄어쓰기 대신 아래바(_) 를 활용해주세요. 프로그래밍을 할 때는 띄어쓰기도 역할이 있기 때문에 혼동이 생길 수 있습니다.

로컬 서버 연결하기(Tomcat 서버 연결)

연결방법

• 상단의 Window > Show View > Other… 를 클릭합니다.
• Show View 창이 열리면 빈칸에 server를 입력합니다.
• 목록에 나오는 server를 클릭하고 open을 선택합니다.

이제 웹개발을 위한 프로젝트 생성과 서버 등록까지 모두 끝났습니다.

생성된 폴더 구조 이해하기

이제 생성된 폴더를 보고 구조를 이해해 보겠습니다. 반드시 이해해야 할 핵심만 설명 드리겠습니다.

한번 도식화 해서 간단하게 보겠습니다.

ZeroToDev_Egov_Web
├── src/main/java              ← Controller / Service / Mapper 인터페이스
├── src/main/resources         ← MyBatis Mapper XML, 설정 파일
├── src/main/webapp
│   ├── WEB-INF/jsp            ← JSP 화면 파일이 위치
│   ├── css/js/images          ← 정적 리소스
│   └── web.xml
├── pom.xml (Maven 사용 시)
└── target (빌드 결과)

입문자가 반드시 알아야 하는 것

• 로그인 페이지 JSP는 WEB-INF/jsp 폴더 내부에 둔다.
• Controller 경로는 src/main/java 안에 만든다.
• Mapper(XML) 은 src/main/resources/mapper 에 위치한다.

해당 구조는 전자정부프레임워크 표준 구조라서 공공기관/정부 프로젝트에서 동일하게 사용됩니다. 여기까지만 이해를 하셔도 처음 공공기관이나 전자정부프레임워크를 활용하는 회사에 들어가셨다면 당황하시진 않을 겁니다.

Tomcat 서버와 프로젝트 연결하기

이제 전자정부프레임워크에서 작업할 프로젝트도 생성했고 미리 다운받아서 설치 해둔 아파치 톰캣도 등록했습니다. 그렇다면 이제 이 프로젝트와 톰캣을 연결해야 여러분이 localhost로 웹 브라우저에서 사이트를 열어볼 수 있게 됩니다. 방법은 다음과 같습니다.

1. 하단 “Servers” 탭에서 Tomcat 서버에서 우측 마우스를 클릭합니다.
2. Add and Remove를 클릭합니다.
3. 좌측에 우리가 방금 생성한 프로젝트가 있습니다. 클릭한 후 ADD> 혹은 ADD All>> 을 눌려줍니다.
4. 우측으로 넘어간 것을 확인하고 Finish를 클릭합니다.
5. 연결을 확인합니다.

주요 체크사항

• “Add” 목록에 프로젝트가 안 보이면 Egov Web Project가 아닌 잘못된 프로젝트로 생성된 것.
• 반드시 Egov Web Project 템플릿으로 만들었을 때만 나타난다.

마무리

여기까지 전자정부프레임워크에서 처음으로 프로젝트를 생성하고 로컬 톰캣 서버를 등록한 후 프로젝트와 서버를 연동하는 작업까지 했습니다. 처음이라 복잡할 수 있겠지만 구조를 이해하고 몇번 해보시면 그렇게 어렵다는 생각은 드시지 않을 겁니다. 또한 전자정부프레임워크를 사용하는 모든 웹개발이 같은 구조를 따르고 있기 때문에 이번 한번만 잘 공부를 해 두시면 제대로 기초를 닦으실 수 있으실 겁니다.

다음 편 예고

다음 편에서는 [전자정부프레임워크] 입문 4편 – 로그인 JSP 구성으로 게시판의 첫 화면인 로그인 화면을 구성해 보겠습니다. 먼저 프론트 단을 설계하기 위해 JSP 파일을 생성하여 개발을 시작하겠습니다. 따라오시기 편하게 스크린샷과 소스코드를 제공할 예정이니 천천히 따라와보시면 도움이 되실 겁니다.

폴더 구조와 Maven 에 대해 궁금하다면? [전자정부프레임워크] 입문 2편 – 프로젝트 시작하기(폴더구조 / Maven 완전정복)

참고 : 전자정부프레임워크 공식 개발 가이드