3_form 태그

- form 태그

form 태그방식과 location.href 방식은 톰캣에 있는 서블릿을 어떻게 전달하는지의 차이.

 

- get방식 사용하는 경우

브라우저에 뒤로가기 버튼눌렀을 때도 전에 작성한 것을 유지시켜놓으려고 할 때 사용한다.

 

form 태그는 아무곳에나 적어도 상관없다.

 

(html에서는 = 앞, 뒤로 빈칸이 있으면 안된다.)

 

input은 네모창.  type="text"일 경우에 그렇다.

여기서 hidden인 이유는 form방식은 input태그에 value라는 속성에 담아서 보낸다. 

form태그 안에 있는 것만 가져간다. 여기서는 get방식일 때 보냈던 pageName을 보내려고 한다.

 

 

form 태그에서는 타겟을 잡을 때 id로 잡는 것이 좋다. 유니크하기 때문에.

 

 

- 속성조작메서드 attr.

첫번째 전달인자는 내가 잡은 선택자의 속성을 적는다.

form태그의 action이라는 속성이 있는데 논리적주소를 적는 속성이다.

두번째 전달인자는 그 속성에 넣을 값을 적는다.

 

 

- input 태그의 name이라는 속성의 값이 key이다.

- input 태그의 value라는 속성의 값이 value이다.

(id라는 속성은 하나의 문서에서 유니크한 식별자이다.)

id와 name을 다 적는다면 동일하게 속성값을 적는것이 좋다.

 

 

val 은 객체조작메서드이다.

선택자의 태그에 value라는 속성에 val가로에 들어있는 값을 넣는다.

 

 

val() 옆에 괄호에 값이 없으면 타겟에 들어있는 값을 가져온다

이 부분을 적어줘야 값이 보내진다.

 

 

form태그에 method 속성에 post라고 적어줘야 post방식으로 설정된다.

주소창을 보면 값이 보이지 않는 것을 확인할 수 있다.

 

 

- 인라인이벤트모델의 단점

만약 left메뉴가 100개면 호출함수에 파라미터를 100개를 보내야한다.

그래서 oncilck사용하지 않는다.

이벤트 등록 메서드인 click을 대신 사용해서 어떤 메뉴를 클릭하던 alert 1을 뜨도록 한다.

(onclick 대신에 click이벤트리스너를 적어준다.)

 

 

이제 메뉴 구분을 해서 alert창을 띄워보자.

attr 전달인자가 2개일때는 넣어준다.

attr 전달인자가 1개일때는 클래스라는 속성의 값만 빼온다.

 

 

여기서의 this는 내가 클릭한 li 라는 요소이다.

attr의 전달인자가 하나이므로 li의 id속성의 값을 가져온다.

 

 

 

 

 

함수 정의문을 객체 리터럴 방식으로 리팩토링

 

 

leftChk는 전역변수이다.

객체는 object라고 한다. 중괄호가 object이다. 객체이고.

변수안에 객체를 넣었다. 객체를 생성했다는 것은 메모리에 등록했다고 한다.

자바로 따지면 힙에 등록했다고 할 수 있다.

 

자바스크립트에서 변수에 객체를 넣으면 렉시컬 컨텍스트라고 한다.

leftChk라는 렉시컬 컨텍스트이다.

 

var a = function(){

}

a라는 변수에 익명함수를 넣었다.

a는 함수이다.

함수명도 갖게 된다. 변수명이 대체가 되서 함수명이 a가 된다.

 

pageSubmitFn이라는 프로퍼티이다. 

그 안에 익명함수를 넣었다.

그러므로 pageSubmitFn는 함수이다.

렉시컬 컨텍스트인 leftChk 를 클레스라고 생각할 수 있다.

클래스안에있는 함수는 메서드이다. 

pageSubmitFn이라는 메서드이다.

 

클래스 안에 있는 메서드를 다른 클래스에서 호출하기 위해서는 

인스턴스화 해야한다.

 

렉시컬 컨텍스트는 적는 순간 본인의 이름으로 인스턴스변수를 생성한다.

본인의 이름으로만 생성하기 때문에 최초 한번만 객체 생성 가능하다.

 

이부분을

으로 변경해준다.

 

이 부분에 매개변수를 적어줘야한다.

 

 

---

 

MVC

 

컨트롤러 : 클래스파일이다.

서비스 : 트랜젝션 처리. 인터페이스파일이다.

서비스 임플 : 서비스는 인터페이스 이기 때문에 구현부가 없기 때문에 서비스에 대한 중요한 로직을  적는 곳이다. 클래스파일이다.

맵퍼 :  SQL을 바라보는 역할만 한다. 인터페이스이다.

 

업무폴더 당 컨트롤러 1개.

welcomeWeb이라는 업무폴더를 만들어야한다.

그 아래에web폴더

welcomeWebController 가 있어야한다.

똑같이 jsp 부분에도 welcomeWeb 폴더가 있어야 한다.

 

 

서비스에서 컨트롤러로 가려면 인스턴스화를 해줘야한다.

 

Ioc 라고 제어의 역전이라고 있다.

자바에서 인스턴스화를 해주지않고 스프링의 컨테이너에서 인스턴스화를 해준다.

이것을 bean factory라고 한다. 이것이 바로 dispatcher-servlet 이다. 

이것이 인스턴스화를 대신해준다. 

 

@Resource 을 적게 되면 가려고하는 welcomeWebService에 가기위한 인스턴스화가 된다.

인터페이스밖에 호출하지 못한다. 자바에서 만들었다. 

 

@Autowired는 스프링에서 만든것이다.

클래스도 호출가능하다.

 

프레임워크가 바꾸게 되면 @Autowired는 모든것을 다 바꾸어야하고 

@Resource는 자바로 만들어졌기 때문에 다바꾸지 않아도 된다.

 

리소스 어노테이션은 클래스 구현부 한 칸 아래 첫번째 메서드 위에 적는다.

 

 

select(조회)

업무명

Service

List(여러줄)

 

List는 여러줄을 담는 주머니이다.

<>를 제네릭이라고 한다.

제네릭 안에 적혀있는 것은 데이터의 타입이다.

EgovMap은 List라는 여러줄을 담은 주머니에 들어가있는 타입이다.

 

임포트할때 List.util 을 해야 나머지들도 임포트가 가능하다.

 

throws Exception

이동이 되기 전의 파일과 이동될 곳에도 throws Exception이 적혀있어야 한다.

 

 

@Controller 는 컨트롤러 클래스 한칸 위

@Service는 서비스임플 한칸 위

@Mapper는 맵퍼 한칸 위에 적는다.

 

리소스는 인터페이스만 호출할 수 있다.

내가 가고싶은 인터페이스 파일명을 적으면 된다.

 

sql을 맵퍼가 가르키게 하려면 설정을 해주어야 한다.

resource 폴더에는 확장자는 xml에 모여져있고, 

context - 로 시작하는 파일들은 전자정부 관련파일이다.

 

context-mapper.xml 파일로 가면 

 

디비설정단계

1.

pom.xml 파일로 가서 mysql을 찾는다.

디팬던시(db연결시 필요) 두 개를 푼다.

 

마리아db 2.2.1버전으로 등록해준다.

 

2.

context-datasource로 간다.

hsql 부분 주석처리한다.

그리고 bean태그 추가해준다.

 

 

0 submit해준다.

form태그에 method속성에 값을 post로 주고 leftUl에 li를 클릭했을 때 

클릭된 li의 id값을 속성조작메서드 attr 로 가져온다.