[Egov] 프로젝트 구조

Java 폴더  - MainController.java

Java폴더 내의 cmmn, main, sample 들은 업무패키지이다.

Cmmn- 공통업무 패키지

Main-업무패키지

Sample- 샘플업무패키지

resources 폴더

egovframework의 설정 파일과

Sql 쿼리 관련 파일(.xml)

webapp폴더

view관련 파일들 (.css, .jsp, .js, .img, .xml 등)

WEB-INF폴더 내에 jsp파일이 들어있다.

톰캣 서버를 올린 후 메인이 뜨기까지의 과정

1. Servers >Tomcat v7.0 Server at localhost- config > context.xml

context.xml

WEB-INF/web.xml로 가라고 하여 이동한다.

2. WEB-INF/web.xml

// web.xml
<welcome-file-list>
	<welcome-file> index.jsp </welcome-file>
</welcome-file-list>

web.xml에서 welcome file이 있는데

현프로젝트의 처음 페이지를 지정해주는 부분으로 지정된 index.jsp로 이동하게 된다.

3. index.jsp

// index.jsp

<jsp: forward page = "/main.do"/>

Forward태그:어디어디로 찾아가라는 의미로

page속성에 설정된 값 main.do로  이동한다.

4. main.do의 위치는 java폴더> egovframework > example > main > web > MainController.java

@RequestMapping(value = "main.do")

public String initMain() throws Exception {

return "main/main.tiles";

}

Web폴더 안에있는 컨트롤러의 @RequestMapping (리퀘스트맵핑 어노테이션)은main.do를 찾아가게 되는데

여기서 속성값인 문자열은 반드시 "유니크" 해야 호출 시 찾아올 수 있다.

(두 개 이상이면 jsp:forward가 찾아갈 수 없기 때문에)

호출된 메서드 안의 구현부 { }에서 return 으로 main폴더 내의 main.tiles를 호출한다.
main/main.tiles는 jsp업무폴더안에있는 jsp파일 명이다.

그래서 톰캣서버를 올리면 main.jsp가 뜬다.

Model : 모든 데이터의 상태와 로직을 처리

View : 모델이 가진 데이터를 표현하는 방법을 제공 (화면단)

Controller : 사용자로부터 받은 정보를 모델에게 상태변경요청을 하고 필요에 따라 뷰의 상태변경을 요청

MVC 패턴

디자인 패턴중 하나인 MVC패턴

디자인패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에

발생했던 문제점들을 정리해서 상황에 따라 간단하게 적용해 쓸 수 있는 것을 정리하여

특정한 “ 규약”을 통해 쉽게 쓸 수 있는 형태로 만든 것

라이브러리, 프리임워크등을 예로 말할 수 있다.

MVC란?

MVC는 Model View Controller의 약자로 하나의 애플리케이션, 프로젝트를 세 가지 역할로 구분한 패턴으로

사용자(Client)가 Controller를 조작하면 Controller는 Model을 통해서 데이터를 가져오고

화면단(View)를 제어하여 사용자에게 전달한다.

MVC 장점

1.     유연하고 확장하기 쉽다 (컨트롤러가 뷰와 모델 간의 중간관리 역할을 하여 간접소통을 통해 좀 더

        유연한 구조를 설계할 수 있다. 수신하는 데이터 양을 줄일 수 있다.

2.     디자이너와 개발자의 협업이 용이하다.

3.     유지보수 비용을 절감할 수 있다.

MVC 단점

1.   기본기능 설계를 위해 클래스들이 많이 필요하여 복잡해질 수 있다. 스크립트로 작성되므   로 디버깅이 용이하지 않다..

2.   설계시간이 오래 걸리고 숙련된 개발자가 필요하다.

3.   처음 설계시간이 오래 걸려서 속도가 중요한 프로그램에서는 권장되지 않을 수 있다.

4.   Model과 View의 의존성때문에 완벽한 분리가 어려워서 패턴이 모호해질 수 있고 변형     이 올 수 있다.

MVC 순서

처음 User가 View에서 보여주는 화면에 접속

컨트롤러는 페이지를 보여주기 위해 모델을 호출

모델은 웹페이지의 결과값을 조합하여 결과물을 컨트롤러로 리턴

모델이 리턴한 결과를 View에 업데이트하여 사용자에게 보여줌

 

  요청  Client > Controller > Service > ServiceImpl > Mapper > DB(xml)

 

  응답  DB(xml) > Mapper > ServiceImpl > Service > Controller > Client

 

 

> Controller (컨트롤러)

- class

- 데이터를 주고받는 역할

- 터미너 역할

 

 

> Service (서비스)

- interface인터페이스이다.

- 구현부가 없다.

- ServiceImpl이 구현부 역할을 한다.

 

 

> ServiceImpl(서비스 임플)

- class

- 서비스의 구현부역할로 제일 중요한 로직들이 이 서비스임플에 있다.

 

 

> Mapper(맵퍼)

- interface 인터페이스

 

- Sql의 쿼리를 가리키는 역할을 한다. 

 

Ajax (Asynchronous Javascript And XML) - 에이잭스

서버에 요청을 하고있어 응답을 받게 되면 성공이나 실패 등에 따라 함수가 실행하게 되는데 그 함수가 먼저 실행되는 것이 아니라 서버의 응답을 받은 후 실행되는 것.

자바스크립트를 통해서 서버에 데이터를 요청한다.

HTML form태그가 아니라 자바스크립트를 통해서!

Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 

함께 사용하는 기술의 묶음을 지칭하는 용어로 여러가지 기술집합을 의미한다.

웹 클라이언트 측에서 Reload 없이 비동기적으로 콘텐츠를 변경하기 위해 사용하는 모든 기술을 지칭한다.

서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 간다거나

새로고침을 할 필요가 없이 부분부분만 로딩한다.

Ajax 장점

1.      페이지 이동없이 (부분부분만 로딩) 고속으로 화면을 전환할 수 있다.

2.      수신하는 데이터 양을 줄일 수 있다.

3.      클라이언트에게 처리를 위임할 수 있다.

Ajax단점

1.      페이지 이동 없는 통신으로 인한 보안성의 문제가 있다.

2.      스크립트로 작성되므로 디버깅이 용이하지 않다..

3.      Ajax 요청을 남발하여 사용하게 되면 역으로 서버에 부하가 늘 수 있어서 필요한 

   부분에서만 적절히 사용하는 것이 효율적이다.

* Submit이란?

동기방식으로 DOM(HTML)을 그릴 때 쓴다.

메인화면이 생기고 View가 DOM을 그리는 상황이 Submit이다.

전체페이지 절반이상을 바꿔야한 상황에서는 Submit을 사용한다.

Node.js 실습환경 구축

프로젝트 폴더생성

윈도우 바탕화면 또는 사용자 계정폴더 아래에 설치

방법1. 바탕화면 > [brackets_nodejs] 폴더생성 > [Node.js]하위폴더생성

방법2. 로컬디스트(C:) > 사용자(또는 User) > 본인계정폴더 

> [brackets_nodejs] 폴더생성 > 하위폴더에 [Node.js]하위폴더생성

[Brackets 확장기능]

NodeJs Integration 설치

위의 확장기능을 이용하여 브라켓내에서 Node를 바로 실행시킬 수 있다.

!테스트해보기!

Brackets 실행

파일>폴더열기 메뉴

생성해뒀던 [brackets_nodejs] 하위폴더 [Nodejs] 폴더지정

[파일만들기] - (파일명) test1.js 파일생성

자바스크립트 간단한 코드입력

console.log('Hello'};

명령프롬포트(CMD)에서 실행하기

해당 폴더로 cmd 쉽게 접근방법

파일탐색기>brackets_nodejs>Nodejs 

메뉴아래 폴더위치부분 클릭 - 폴더위치 파란색영역으로 변화됩니다.

한번 더 클릭 - cmd 입력 후 엔터

해당폴더내의 명령프롬프트(CMD)창이 바로 실행됩니다.

명령프롬프트에서 js파일 실행시키기

node test1.js  엔터

'Hello'가  정상출력이된다면 제대로 세팅완료!