저번에 뒤로가기를 구현했을 때 stack 구조를 이용하여 구현하였습니다. 이번에는 탭을 끄고 난뒤 탭이 닫혀있으면 rule에 의하여 닫힌 탭은 content 부분에서 사라지고 나머지 탭이 보여지는 기능을 만들어 보고자 합니다. - 우선 linkedList 를 이용하면 될꺼라 생각해서 시도해 보았으나, 코드가 복잡해지고 구현이 안되었습니다. 이번 포스트는 원인분석과 과정을 써보았습니다. 다음 포스트에는 다른방법으로 시도해 볼 것입니다. 1] 기본적인 linklist 구조 class Node { constructor(data, next = null) { //data와 next를 넣고 next의 디폴트는 null로 지정 왜냐하면 linkedlist의 tail(마지막은) null로 끝나기때문 this.data ..

목표] 메뉴 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..

JQuery 자바스크립트로 만들어진 라이브러리. DOM 작업을 쉽게 할 수 있게 해줍니다. JQuery는 메소드를 가지고 있는 클래스 -> 프로토타입 방식 그 중에서도 크로스 브라우징 라이브러리 라는 특성이 코드의 라인을 줄여줍니다. 크로스 브라우징 라이브러리 : 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 출력되게 하는 라이브러리 크로스 브라우징 라이브러리가 아니라면, 브라우저 마다 기능을 나눠서 추가해줘야한다.. ex) IE7 이전에는 attachEvent 를 사용하였다. 순기능 자바스크립트 DOM 기능 Ajax 를 손쉽게 플러그인이 많다 효과 : 애니메이션 효과 간단한 예시와 실습 1번] id 요소의 값 수정하기 페이지가 로딩되고 (html과 같은 정적 요소) 이후 script에서 onloa..

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

DOM 을 이용한 객체에 이벤트 리스너를 달아서 동작시키기. 이전에 했던 것과 비슷해서 설명은 주석에 달아놨습니다.

IntelliJ와 연동하기 위해 Oracle DB를 설치합니다 https://www.oracle.com/kr/database/technologies/oracle-database-software-downloads.html#19c 에서 19c버전을 다운로드 받았습니다. 파일을 받고 압축을 풉니다. 압축을 풀고 안에있는 exe을 실행시킵니다. 1. 단일 인스턴스 선택 2. 시스템 클래스에서는 학습용일시 데스크톱 클래스, 아닐시 server로 선택하시면 됩니다. 3. 표준설치 선택 4. 가상 계정 사용 선택 5. 값 입력 비밀번호와 이름 기억해두기! 6. 맞게 선택되었다면 설치 클릭 7. 기다리기 설치가 완료되면 Database COnfiguration Assiatant 를 실행 실행하면 다음과 같습니다 1. ..

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

DOM 용어] DOM -> document Object Model BOM - > Browser Object Model jQuery는 실무에서 가장많이 사용하는 자바스크립트 DOM 작업을 좀 더 쉽게 처리할 수 있또록 도와주는 라이브러리 웹 브라우저 관점] W3C DOM- 과 브라우저 DOM dom 은 정의부분과 구현부분으로 나누어진다. 정의부분은 W3C 에서 규칙,규약을 명시하는 문서 실제로 동작하는 구현 소스코드는 IE, Chrome, Firefox, Safari 업체가 구현한다. html 문서-> dom 객체가 된다 (Parsing 단계) -> DOM 객체를 가지고 브라우저는 화면을 만든다. 클래스의 인스턴스(객체) 를 만들게 되고 이를 개발자들이 접근해서 사용하게 된다. DOM - Node] htm..

로 감싸는 jsp 파일에서 page content 로 감싸서 container라는 변수에 지정해주고 이를 불러서 queryselector 를 하였는데 이를 사용하는 궁극적 목표는 tab으로 이루어진 화면에서 각각의 id를 중복해서 사용하여도 dom기준으로 tab과 document 의 차이가 명확하고 전환부분이 다르기 때문에 지정하고 사용하였습니다. 하지만 이를 무시하는 것들도 있다는 사실을 알게 되었습니다. 외부 라이브러리에서 사용하는 ubireport 같은 경우에는 id를 dom 기준으로 찾는것이 아니라 document를 기준으로 찾기 때문에 중복되서는 안됩니다. 또한 input 과 label 로 이루어진 항 쌍도 마찬가지로 name 이 같거나 id가 같은 값이경우 같은 document를 참조하게 되면..

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..