목표] 메뉴 1, 메뉴 2를 선택하면 바로 아래부분에 a태그와 button을 가진 template이 추가되며 글로벌 변수에 open인지 close인지 상태를 저장한다. 메뉴의 종류에 따라 contents부분이 해당 jsp파일의 내용으로 교체된다. 히스토리 로드를 클릭하면 (뒤로가기) 이전에 객체형태로 저장한 content를 보여준다. 자료구조는 stack을 사용하였고, 뒤로갈 페이지가 없을시 해당 alert를 호출한다. 코드분석] 1] 메뉴 1, 2클릭 구현 각각 onclick 함수로 오프너 함수와 checktab 함수에 각각 메뉴인자를 전달. 2] menuopener함수 JQuery의 load 함수를 이용해서 content가 있는 부분인 의 id인 menucontent 부분을 해당 requestMapp..

팝업창과 모달창] 팝업창: 열려있는 브라우저 페이지에 다른 브라우저 페이지를 띄우는 것 -> 즉 창과 창 관계이기 때문에 부모의 창을 자식창을 띄워둔 상태에서도 조작이 가능하다. 모달창: 기존의 브라우저 페이지 위에 레이어를 까는 것입니다. 모달창을 띄웠을 때는 부모의 페이지를 조작 할 수 없다. 둘다 부모의 정보를 자식에게 줄 수도, 자식의 정보를 부모에게 전달 할 수도 있다. 오늘은 우선 간단하게 팝업하는 것만 해보았습니다. 목표] 버튼 클릭시 간단하게 팝업이 뜨는 모습입니다. 사용 메소드 : window.open(); https://developer.mozilla.org/ko/docs/Web/API/Window/open Window.open() - Web API | MDN Window 인터페이스인 ..

목표] 위와 같이 textfield에 값 입력시 local 저장소에 저장이 되는 것을 해보았습니다. 우선 사용한 메소드를 알아보겠습니다. 값 저장하기] setItem(keyName, keyValue); window.localStorage.setItem(constant,data); keyName으로 key의 값을 저장 이를 불러오는 방법] getItem('KeyName') let userData = window.localStorage.getItem(constant); 그외 사용가능한 window.localStorage 메소드 제거] localStorage.removeItem('KeyName') 전체 제거] localStorage.clear(); ---XMLHttpRequest--- XMLHttpReques..

$Load() 함수 : Ajax 와 같은 통신을 통해 서버로부터 데이터를 불러와 선택된 요소에 넣는 jQuery 입니다. 문법 : $(선택자).load(URL, data, callback 함수); url : 불러올 주소 data : 요청에 사용할 데이터 callback 함수 : 요청에 대한 응답을 처리할 콜백함수 url 에서 #를 이용해 불러온 문서에서 해당 tagid를 가진 부분만 선택적으로 불러올 수도 있습니다. 버튼 2에클릭시 함수를 달고 그 안에 load를 사용하였습니다. #content로 content 라는 아이디를 가지는 div를 대상으로 불러올 것입니다. 불러올 파일은 tabmanager 아래의 tab2.viw.jsp 입니다. load 뒤에 url 부분에 바로 상대경로던 절대경로던 바로 ur..

1] Document.createElement : 지정한 태그 이름의 HTML요소를 반환합니다. let element = document.createElement(tagName[, options]); tagName으로는 'div', 'ul', ... 등 html 요소가 사용됩니다. 2] Node.appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. var aChild = element.appendChild(aChild); 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니..

이전에 한 Fetch API 의 경우 예시를 만들어서 보내고 받았습니다. 이번에는 실전에서 사용하고 있는 값들의 경우에 대해 공부해보았습니다 fetchdata의 경우 회사, 프로젝트에서 주어지는 API 명세를 보고 어떤 값을 전달해야하는지 파악후 형식에 맞춰서 작성해 줍니다. 위는 예시입니다. 해당값을 fetch 를 이용해서 작성해 보았습니다 Promise를 좀더 구체적으로 써서 resolve와 reject가 잘 보이게 하였고, fetch() 의 첫번째 인자로는 url을 이후에는 option을 전달하였습니다 일단 기본적으로 headers method body는 기본으로 들어가야 하며, headers 또한 api 명세에 따릅니다. 프로젝트에 맞춰 https://developer.mozilla.org/ko/..

1] for each for each는 반복문이 아니라 함수이다. 즉 array 타입 앞에 바로 붙여서 사용 가능하다. for each는 break가 없는 단점이 있다. 간단하고 빠르게 사용가능하다. 2] for in for (variable in object) { ... } obj의 key 값을 이용하여 반복합니다 for...in은 인덱스의 순서가 중요한 Array에서 반복을 위해 사용할 수 없습니다. 위와 같이 object의 프로토타입도 같이 호출이 되는 단점이 있어 잘 사용하지 않는다. 3] for of for (variable of iterable) { statement } for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, argument..

문법 :Object.assign(target, ... sources) 해당 메소드는 타켓 파라미터와, 기타 병합 할 객체를 받습니다. 그리고 리턴값으로는 target object를 반환합니다. 이전 JQuery에서 extends와 유사하게 target이 되는 객체에 새 덧붙여 return 하기 때문에 원본을 해치지 않으려면 빈 {} 객체를 target으로 두고 해당 객체를 받아오면 됩니다. 위의 코드에서 copy1과 copy2는 똑같이 나옵니다. 왜냐하면 copy 와 copy2에 저장된 요소는 a 객체이고 a 객체는 assign에 의해 c까지 합쳐진 상태가 되었기 때문입니다. 이렇게 사용하던 객체를 이용하면 마지막에 합쳐진 결과값으로 나오기 때문에 원본의 훼손이 일어나지 않게 하려면 빈 {}를 targe..

개발속도를 도와주는 개발자도구와 디버거 페이지를 개발하면서 원하는 동작이 아니라 생뚱맞은 결과나 작동을 안하는 경우가 많습니다. 이럴 경우 log나 alert를 찍어보면서 해당 값이 잘못되었는지 전달이 안되는지 확인 할 수도 있지만. 빠르고 쉽게 확인하는 방법은 debugger; 를 사용하면 됩니다. 또한 코드에 debugger; 를 삽입하는 방법 외에도 DevTools를 이용해서 (Ctrl + shift + i) 에서 콘솔을 찍거나 typeof, instanceof 등을 이용할 수도 있습니다. 간단한 예시입니다 위의 코드는 버튼을 클릭했을 때 이벤트안에 debugger를 넣은 것입니다. 웹이 실행되고 해당 debugger;이 실행되는 순간을 만나는 즉시 다음과 같은 창이 됩니다. 버튼을 클릭하니 바로 ..

이전에 만들었던 버튼 이후 text 란과 option 값을 주고 ajax 통신 버튼을 만들었다. 지금 하는 것은 충분히 value로 alert를 할 수 있지만, fetch 함수를 통해 비동기적으로 구성되도록 하였다. 추후 페이지 개발시에는 페이지 이동 없이 로그인 기능을 구현 할 수 있다. text에 입력 받은 값을 비교 후 alert를 하고, 나이가 10대일 경우 입장이 불가하다는 alert를 구현해보았다. jsp 코드] 먼저 jsp 코드를 보면 result 라는 객체(Object 를 값으로 전달한다. 값을 text필드의 값과 select의 value를 넣고 추후 구분을 위한 rule과 auth를 선언하였다. body: JSON.stringify(result) fetch api가 전달하는 파라미터중 b..

저번에 공부한 Ajax기법은 XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주게 하는 기법이다. 요즘 XML은 거의 사용 안하고 JSON을 많이 사용하기 때문에 Fetch를 많이 사용한다. 게다가 Fetch는 Promise로 구성되어 있기 때문에 비동기적기고 then과 catch 등을 이용해 가독성이 뛰어나다 게다가 기본 API라 바로 사용 가능한 잇점도 있다. 기본 문법] default : GET CRUD 의 READ와 비슷하다 fetch 는 HTTP 요청을 전송한 URL, HTTP 요청 메소드 (GET POST PUT DELETE 등), HTTP 요청 헤더 등을 파라미터로 받아 전달한다.fetch() 에서 요청 메소드를 지정하지 ..

AJAX : Asynchronous JavaScript And XML -서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 - 대표적으로 JSON, XML, HTML 과 같은 다양한 포맷을 주고받을 수 있다. -Ajax의 강력한 특징은 페이지 전체를 리프레시 하지 않고 기능을 수행하는 비동기성 이다. - 서버로부터 데이터를 받고 작업을 수행한다. 1] HTTP Request JavaScript를 이용하여 서버로보내는 HTTP Request를 만들기 위해서는 객체의 인스턴스가 필요하다. XMLHttpRequest가 그러한 Object의 예입니다. 서버에 무엇인가를 요청하기에 앞서, 서버로 보낸 요청에 대한 응답을 정해야 합니다. httpRequest의 onreadystatechange pr..