데이터베이스잡아서 아이바티스 연동 dao 서비스 서블릿 html 흐름을 보기
그럼 url값을 split 을 (할당연산자로) ㅆ서 자르면 local~부터 code= 가 [0] 그 다음이 [1]이니까 1 가져오면됨
근데 최초화면엔 mㅇ쩌구 없으니까 [1] 찾으면 undefined 뜰것이다. (자바의 outofbound )
엠코드가 없으면 = 첫화면이면,, 초기값이면
m코드를 M000000 (메인화면)으로 주겟따.
메뉴를 클릭하면 주소줄을 메뉴가 바꿀거임.. 이동하지않고도!
마우스 갖다대는 부분마다 저 주소줄 바뀜
원래는 서블릿유알엘로 바꾸는건데
제이쿼리로도 할수가있다..
그래서사실 서블릿(WAS)없어도 nodejs가 있으면 사이트만들수있음 하지만 과부하가 걸리면 터짐.. 스레드란 개념이없고 스크립트 개념이라 ... 독립적 프로세스가 불가능해서 요청이많아지면 속도가 떨어지기때문
WAS는 스레드의 개념이있어서 많은 요청이와도 별 문제가 없다.
제이쿼리에 ajax 가 있어서 필요한 데이터를 json으로 .... (?)
<클라이언트단>
화면을 만들떄, url(location객체) 에서 Mcode를 끄집어낸다.
mCode는 현 메뉴 페이지임
그걸 주소줄에서 가져와야댐
그걸 가져온다음 그걸 ajax통해서(비동기로) 서버쪽으로 보냄
(서버에서 서블릿이 jsp로 화면쏴주는건 동기방식이지 레스트방식이 아님)
레스트방식은 화면을 표현하는 디바이스가 여러개있는데, (데탑,스마트폰..) 하나의 서버에서 각각의 디바이스에
맞는 화면을 보내주려고 했더니 버거움 그래서 화면은 너네가 알아서 만들어, 나는데이터만 주겠다
너네는 각각 데이터받아서 화면 알아서 만들어 하는거임 (그게 rest방식)
화면을 제공하는 was 서버는 따로잇음.
외부에서 데이터를 받아서 우리에게 맞게끔 화면만들고 제공하는게 rest방식
거기에 ful 이 붙으면
우리의 was는 화면을 주면서 데이터도 주는게 되는거임
엄밀히 말하면 rest방식이 아닌데 데이터만 나가는걸 보면 rest ful ( 스러운) 게 되는거임
엠코드를 보내면 엠코드를 받는 서블렛(common/mainSevlet)이잇음
얘가 서비스르 ㄹ요청해서 dao갔다가 오면 메뉴리스트와 현재페이지에 대한정보를 가져다줌 다녀오고
Map을 만드는데 그 안에 메뉴리스트랑 해당 엠코드에 있는 메뉴가 들어가잇ㅇ음 그 메뉴를다시 server>client로 보내는데 json 형태로 보냄 이 json형태로 보내야할떄 jackson데이터바인드의 오브젝트맵퍼가 도와줌
암튼 그 json 을 받아서 ajax쪽에 success : 함수의 파라미터로 받는다.그 데이터를 둘로쪼갬 (메뉴리스트 제이슨이랑/ 구 메뉴에 해당하는 정보)
이게 그 둘로 쪼갠걸로 화면ㅁ만 만들면 됨 (memlist는 메인메뉴 만드는 쪽으로 menu는 서브메뉴만드는쪽으로 보낸다)
서브메뉴쪽에는 할일이 두가지있는데 1. 실제로 서브메뉴를 만들고 1. 거기에 해당하는 iframe 화면을컨트롤 한다.
왼쪾이 자바스크립트(클라이언트) 우측이 자바 (서버)
우리는 지금 mCode 저 사각형까지 온거임
페이지 열리는 시점에 바로적용되어야하므로 스크립트로 화면열릴떄 읽어버리도록 (뭔가를 눌러서하는 이벤트가 아님) 하는거임
비동기로 요청하고 데이터 넘어오는게 success의 data 부분
제대로 왓따면 data안에 menulist 어레이랑 menu가 올거임
json데이턴 . 으로 접근함
data. 하고 for문으로... (* for 문안 에 in/ of.. of는 {} 하나씩 떼어서 element로 받음)
저 에러는
프로세스 이해했으면 이제 화면을 만들어야함
자바스크립트도 템플릿이 있따.
우리가 제이쿼리나 자바스크립트로 화면 만들다보면 반복되는 뷰가 나온다 혹은 ㅂ모양새는 동일한데 안에 데이터만 바뀌는.. 경우 발생 왜? 마크업 언어 자체가 나열방식이기떄문에
그래서 매번 하나식 만드는게 버거움 > 템플릿으로 하고, 그 안에 데이터값만 바뀌게하자
그걸 갖다쓸거임 > 대표적으로 핸들박스
Handlebars
handlebarsjs.com
handlebarsjs.com/installation/#bower-component-composer-jspm
Installation | Handlebars
Installation There are a variety of ways to install Handlebars, depending on the programming language and environment you are using. npm or yarn (recommended) The reference implementation of Handlebars is written in JavaScript. It is most commonly installe
handlebarsjs.com
{{}}를 주목
복붙
덩어리 만들어지면 여기다 붙일거임
json 데이터 들어올건데
서브메뉴 만들어지면서, ifram 화면바뀜
.
메뉴어레이를 통째로 얘한테 줘서 반복적으로 수행하게할거임 어떻게? each를 써준다.
each는 집합체(배열)형태가 들어오면 반복적으로 하게되는거임
템플릿이용해서 마크업 뽑아내는...
function 하나만듦
target:반복으롭뽀아낸거를어디에다가 붙일지, template : 어떤템플릿인지 menuclasss: 클래스명은 메뉴누를떄마다 원래있던거 지우고 다시붙여야하므로 클래스명을 짓는거임 (이걸로만드는놈들의 이름) 우리는 그걸
메인메뉴로 해놨음
그걸 이용해서 handlebars를 운영하겠다는 이야기임
텍스트 노드 가져오기위한게 텍스트메서드 요소녿가져오는것이 html메서드
ul태그찍고 text() 하면 ul태그안의 <li~ </li>까지를 마크업브라우저에서 사용하는 텍스트형태로 가져오기떄문에 <가 <li>안녕하세요</li> 이런걸로 바뀌어옴 (이렇게 브라우저에 뿌려야 <>가 나오니까)
그럼 브라우저에서 txt형태로 찍으려면 어케?
근데 이게아니라 요소노드 형태로 가져오는게 html()임 즉 <li>안녕하세요</li>로 가져옴
이거랑 똑같은 자바스크립트의 속성이 text() = text / html() = innerHTML임
인풋태그는 text노드를 취할수없는애임 왜? 요소노드하나밖엥없는 단태그이기떄문
즉 text html 은 img나 input 태그말고 텍스트노드를 가진 태그만.. input태그는 그래서 value를 따로 만들어놓음
val() : 인풋태그 안의 밸류값 가져옴 이거랑 같은 자바스크립트는 value
양식태그의 textarea는 유일하게 value로 가져옴 (예외임)
val()의 특징 : text() 의 결과 (<li>안녕하세요</li>) 이렇게 가져옴
<li>안녕하세요</li> 이게 되는건 html밖에 없음
arr넣어주면 html변수에 담아서 target에 append한다. 근데 그전에 그 전에있던서브메뉴를 지워야함
* **갖다붙이는거 append prepend after 차이점.. append 는 큐의 개념 .. 뒤에서 밀어넣는.. 그래서 제일먼저 들어온놈이 찍히도록.. 그걸 마크업으로 표현하면 원래있던놈들위에있고 나중들어간놈이 가장밑에 표시
prepend 는 스택임. 나중에 들어간놈이 먼저보임.. 밀어넣기.. 나중들어간놈이 가장 위에보임
after는 병렬시키기위해.. prepend와 append는 선택자의 안에!들어가지만
after는 동일하게 선택자의 다음에! 넣는거임
ul에 프리펜드로 추가하면
어펜드로 붙이면
ul에 after로 붙이면 검정동그라미위치
append 로 붙였으니까 순서대로 하겠다는 뜻임
**
이 파라미터들은 ajax에서 실행한다.
메뉴뿌릴거임 그럼 일단 메뉴데이터 가지고와야함 그게 data 안에있음.
'main-
이제
메뉴관리할수있음 메뉴테이블 crud 하면됨
서브메뉴 펑션 만들자
저 if 왜 ? 홈이면 서브메뉴 안뿌릴거니까 확인하는거임
홈이아니면 뿌려야함 >> getjson은 ajax의 get방식을 축약해서 만든 형태임
ajax 를 축약한거임
어디에 표현? subMenulist
이런 템플릿은 어케만듦 ? : 마크업에서 모양을 보고 밖에 부분만 {{}}로 바꾸면 되는거임
서브메뉴 눌러도 아이프레임 화면 바꾸고 url 바뀌어ㅕ야함 그거해주는게 goPage임..
서브메뉴 만들어지면서 거기에있는 ,url이나 mcode값이 들어오는거임
새로고침하면 날라가는거랑 iframe 바뀌는걸 gopage에서할거임
지금 저 파란부분까지한거임
우리는 함수를 세개 만들고잇다
printdata는 list템플릿을 만들어주는거 어떤 json데이터넣을건지등에 대한 근거제시
gopage는 url mcode받아서 브라우저의 주소줄변경하고 새고시 유지되도록 ifream src변경해서 페이지나오게
submenu 는 말그대로 서브메뉴 뿌려주는
그런데 각 네비는 메인메뉴는 섭메뉴변경과동시에 주소줄과 화면도 바꿔야함(메인메유 선택되었을때)
그래서 메뉴에는 함수두개를 다 호출함 (주소줄과페이지이동gopage와 서브메뉴submenu)
서브메뉴는 좌측만 바ㅜ끼면 되므로 gopage만
저거 아님! 서브메뉴에 넣는거 아니고
메인메뉴에 넣어야함
마지막 펑션 gopage 넣으러가기
url 넣기위해서 ? 에 mcode라는 파라미터 붙여야하고, 그 담에 메뉴가 선택되면 mcode부분만 바뀌여아함
그래서 함수호출되면 local~main.html만 잘라야함
저 유알엘은 서브메뉴 만들때ㅁ부터 '넣어줬음
새고해도 유지까지..
jsp로 화면만들은 html 로 만들든간에 ajax 많이 쓸거니까(실무에서도) 공부해오기
자바스크립트 소스파일 이랑 템플릿 js 여기다가 모을거임
main.html 의 템플릿을 잘라서/// 하다가말았따.
* js파일은 마크업이 들어가면 안돼서...
board안에 메인과 리스트html이 있는거임
담주엔 게시판 완성하고, 로그인화면은 세션데이터 들어가는데 그 세션 어떻게 처리하는지
**mcode가 커맨드로 들어가면 커맨드패턴이 되는거임.. 이건 스프링까지 통하는 이야기.. 백단이 바뀌는것뿐임
jsp쓰게되면 서블릿에서 직접 화면을 제어할수있게된다. 자바스크립트의 템플릿이용할수있지만 더 자유로워지고 방법이많아지는거임
서버에서 다 만들어진 화면을 넘기는게 jsp 임
jsp는 화면을 만들기 위한거지 화면이라고 말하지 않음 화면은 항상 html임 브라우전ㄴ jsp몰라 html알지
html의 스트링을 만들기위해 jsp쓰는거임 왜? 서블릿으로 만들라니까 너무 힘든거임
아이디중복확인, 주소넣는것 등 결국은 다 html
다른 도메인의 api 쓸때는 브라우저가 직접 접근하게 해서는 안됨
브라우저는 크로스도메인을 못하게되어잇음
사용자가 로컬호스트로부터 데이터를 받아서 화면을 열엇는데 그 local이 바로 카카오로 못감.. 빠져나갈수가없음
다시말해 ajax의 url을 카카오로 줄수가없는거임
카카오 api룰 주는 서블렛을 따로 만들어서 브라우저가 요청을 하면 was가 카카오 서버로 가서 데이터를 받은다음 그 데이터를 브라우저 가 쓸수잇게하는거임