사용 툴 : IntelliJ 사용 DB : Oracle 사용 DB framework : Mybatis 빌더 : Maven 환경 : Spring oracle 버전] 19버전 *참고로 19부터 사용자 계정 생성시 앞에 붙는 c##도 db연결시 아이디에 동일하게 작성해야 합니다. 1단계] Pom.xml 파일에 Dependency 추가 후 maven 동기화 com.oracle ojdbc7 12.1.0.2 junit junit 4.12 test com.zaxxer HikariCP 3.4.2 org.springframework spring-context 5.3.3 org.mybatis mybatis 3.5.3 org.mybatis mybatis-spring 2.0.3 org.springframework spring..

목표] 기본적인 tab의 구성은 포스트 참조 https://yn971106.tistory.com/61 [TAB 구현 심화_3]_Spring에서 tab 구현해보기 (feat 메모리 저장) 목표] 위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.] 코드 & 설명] 각각의 메뉴버튼에 리스너를 달아줍니다. openCheck 함수와 createTemplate 함수를 yn971106.tistory.com 위의 포스팅과 다른점은 1. _history 탭 객체 안에 id를 부여하여 id를 기준으로 activate 된 tab을 찾아 css 속성을 적용시킨 것 2. 클래스 (css) 를 동적으로 부여한 점 이 되겠습니다. 해당 코드만 보겠습니다. 1. 클릭시 적용되는 css 부분..

팝업창과 모달창] 팝업창: 열려있는 브라우저 페이지에 다른 브라우저 페이지를 띄우는 것 -> 즉 창과 창 관계이기 때문에 부모의 창을 자식창을 띄워둔 상태에서도 조작이 가능하다. 모달창: 기존의 브라우저 페이지 위에 레이어를 까는 것입니다. 모달창을 띄웠을 때는 부모의 페이지를 조작 할 수 없다. 둘다 부모의 정보를 자식에게 줄 수도, 자식의 정보를 부모에게 전달 할 수도 있다. 오늘은 우선 간단하게 팝업하는 것만 해보았습니다. 목표] 버튼 클릭시 간단하게 팝업이 뜨는 모습입니다. 사용 메소드 : 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..

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

css CSS 란? : HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 언어. 과거에는 HTML에 디자인적 요소도 같이 넣어서 작업했다면 HTML의 본연의 목적인 구조화된 문서를 작성하고 디자인은 css파일로 입히는 형태로 프로젝트를 진행해야한다. 효과] 구조화된 HTML은 알아보기 쉬우며 문서의 해독 속도가 빨라진다 웹 디자이너와 웹 프로그래머 간의 협업이 용이하고 유지보수와 일관성 유지에 획기적이다. 트래픽도 줄여 모바일 환경에서의 요금관련도 줄이고 로딩도 빨라지는 효과가 있다. 연습하고 있는 페이지에 css 적용을 좀더 현업에서 사용되는 식으로 적용해 보았다. 우선 header, 네비게이션 바, 내용물(추후 SPA 로 구현) 만 해놓은 상태이다. common.c..

간단하게 버튼을 클릭하면 리스너를 달고 지정한 폴더안에 있는 파일을 다운로드하는 코드를 연습하면서 사용한 메소드를 정리한다. getElementById(elementId: string): HTMLElement | null; : 지정된 ID에 값을 가진 첫번째 개체에 대한 참조를 반환 파라미터로는 String을 받는다. createElement(tagName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K]; : 지정된 태그에 대한 요소의 인스턴스를 만듭니다. HTMLElementTagNameMap 안에 정의되어 있음. 이는 인터페이스로 선언되어 있음 appendChild(newChild: T): T; Node.appendChild() 메소드..

이전에 두었던 Tomcat 으로만 구현된 웹서버 개발환경에는 큰 문제가 있었다. 이렇게 두고 톰켓을 이용한 서버는. 단순한 구조일 뿐 더러. 지금 직장에서 사용하는 환경과는 동 떨어져 있기 때문이다. 그래서 분석해본 결과. spring을 뼈대로 나누고 MVC처럼 동작하는것 처럼 만들었다. 그래서 spring 연동을 해볼 예정이다. 1. 프로젝트 만들기 new- > project 에 들어간 다음. 이름과 location 지정 후 순서대로 java : 자바기반 언어로 만들것이기 때문에 선택 Maven : 프로젝트 타입 group : 프로젝트 저장소와 관련된 Artifact 그룹 artifact 사용하는 maven project에서 빌드 결과물로 나오는 개체를 artifact라고 한다. 프로젝트 -> 빌드 -..