예제
-
스프링(Spring) ORM : MyBatis 예제Spring/컨셉 2018. 9. 7. 10:11
ORM : Object Relational Mapping Framework로 객체 관계 매핑을 좀더 쉽게 돕는 프레임워크이다. 서블릿으로 작성할 때에는 DAO 코드에 쿼리문을 넣고 그에 해당하는 정보를 가져와 멤버에 대해 하나하나 rs.getxx() 메소드 등으로 값을 직접 제어했다면, MyBatis에서는 데이터 타입에 관계 없이 멤버명만으로 값 설정이 가능하다. 이를 위해서 환경 설정이 만만치 않다. 실무에서는 이러한 설정이 잘 되어 있는 프로젝트를 하나 가지고 복사해 사용하면 된다. MyBatis 연동 방법 포스팅 연동에 필수적인 세가지가 있는데 1) Connection Pool 2) MyBatis 3) Ojdbc6.jar 파일이다. 1번은 commons-dbcp(dbcp가 Database Conne..
-
스프링(Spring)에서 자바스크립트(JavaScript) 사용 방법Spring/컨셉 2018. 9. 7. 09:51
스프링에서 css, js, image 등의 자원은 파일이 존재하는 url 그 자체로 사용된다. 따라서 url 요청을 해야 하는데 이는 MVC의 DispatcherServlet에서 판단해 Controller에서 RequestMapping Annotation을 검색하게 된다. 404에러가 발생하게 된다. 따라서 CSS, JavaScript, Image 같은 정적 자원들에 대해 URL을 따로 주어야 하는데 이를 지원해주는 녀석이 mvc:resources이다. 이 태그를 DispatcherServlet에 등록해줘야 사용할 수 있다. 다음과 같이 static 폴더들을 지정해둔다. 보통 WEB-INF 하위에 둔다. web.xml에 springDispatcherServlet의 param-value로 지정해둔 Bean..
-
스프링(Spring) DB 연동 예제Spring/컨셉 2018. 9. 7. 09:45
데이터베이스와 연동해 게시판 테이블의 정보를 가져오는 예제. 서블릿과 똑같이 작성하는데 앞선 예제에서 데이터베이스 연동은 rootContext에서 수행해준다. 따라서 daoImpl에서는 rootContext에 등록해둔 DataSource bean을 이용해 getConnection 메소드만 호출하면 된다. 글로는 난해할 수 있기 때문에 바로 예제를 보자. 테이블은 다음과 같이 작성했고, 데이터는 직접 예전 예제에서 등록했던 데이터들을 사용했다. 글 수정부분은 아직 미완성한 상태 전체 코드가 필요하면 깃허브 참조 https://github.com/minwoohi/board_springDaoImpl 클래스. 서블릿 이용할 때에는 멤버나 setter가 없었지만 rootContext.xml 파일에 등록한 data..
-
스프링(Spring) 예제Spring/컨셉 2018. 9. 6. 10:59
Project Explorer에서 마우스 오른쪽 클릭 - New - Dynamic Web Project프로젝트명, Dynamic web module version 선택Add Folder 버튼 클릭해 다음과 같이 4개 폴더 작성. (\는 /로 입력, 처음 있던 폴더는 선택 후 Remove 버튼으로 반드시 삭제!)Context Root 설정 후 완료생성 프로젝트 마우스 오른쪽 - Configure - Convert to Maven Project 클릭기본 설정대로 Finish 버튼 클릭다음과 같이 pom.xml 파일 생성됨. 더블클릭해 Dependencies 탭의 Add 버튼 클릭spring-webmvc 입력 해 org.springframework spring-webmvc 선택 후 OK 검색 되지 않는 경우 ..
-
제이슨(JSON), 에이작스(Ajax) 예제.Web/JSON, Ajax 2018. 9. 6. 10:22
제이슨은 데이터의 전송형태이다. 각종 브라우저 뿐 아니라 모든 언어에서 제이슨 객체(JSON)를 지원하기 때문에 서버에서 데이터를 제이슨 형태로만 전송한다면 클라이언트의 언어에 구애받지 않고 parse 함수를 이용해 데이터를 추출해 사용할 수 있는 것이다. 데이터 전송 형태의 표준정도로 생각해도 큰 무리가 없다고 생각한다. 에이작스 또한 제이슨을 이용해 데이터를 제어하는 대표적 비동기통신 기법이다. 에이작스는 Asynchronous JavaScript And XML의 약어로 자바스크립트를 이용해 서버와 비동기통신을 지원하기 위한 클라이언트 통신기법이다. 비동기통신이란 일반적으로 코드의 라인대로 실행되는 함수들과 달리 실행되는 때를 알 수 없는 경우를 제어하기 위해 제공되는 통신기법을 말한다. 대표적인 것..
-
jQuery 키보드 이벤트( Keyboard Event) 예제Web/jQuery 2018. 9. 5. 11:08
앞서 jQuery 사이트에서 이벤트 동작법에 대해 학습했다면 코드를 통해 키보드 이벤트 실습. ※모든 jQuery 예제는 아톰(atom)으로 작성했고, 오페라 브라우저를 통해 확인했다. html 문서 작업이 굉장히 편하기 때문에 사용을 권하고, 브라우저는 크롬이나 오페라를 권장한다. 인터넷 익스플로러에서는 같은 결과가 나오지 않는 경우가 굉장히 많을 것이다. ( 브라우저들의 DOM 작성 방법이 표준화되지 않았기 때문) Vacations jQuery Travels - Trip Planner Packages Hawaiian Vacation $399.99 per ticket Tickets: Total Price: $399.99 Call us at 555-25937 to make a reservation tod..
-
jQuery 예제 및 기본 패턴Web/jQuery 2018. 9. 5. 10:50
jQuery는 JavaScript Query의 약어로 자바스크립트 라이브러리이다. 자바스크립트만으로 작성하기 복잡한 기능들에 대해 함수로 구현해 둔 것이다. 특정 태그의 값을 읽어오기 위해 자바스크립트에서 사용했던 번거로운 절차를 줄여준다는 말이다. 자바스크립트에서는 문서의 모든 태그들을 객체화 해 브라우저에 DOM(Document Object Model) 형태로 저장한다. 다음과 같이 문서를 DOM 형태로 변환하는 작업을 렌더링이라 한다. 이를 통해 각각의 태그들을 객체화 해 이들에 하나하나 접근하고 제어할 수 있다. 객체화 된 태그들을 자바스크립트에서는 Element라 칭한다. 예를 들어 h1 태그의 Text 값을 읽어오고 싶다면 var h1 = document.getElementByTagName("..
-
CSS (Cascading style sheet ) 사용법 및 예제Web/CSS 2018. 9. 5. 10:47
CSS 는 Cascading style sheet의 약자로 웹페이지를 꾸미기 위한 스타일들을 저장해두는 문서이다. jsp 페이지에서 사용할 css 파일을 등록한 후 div 태그중 "class"를 통해 css 파일에 작성해 둔 클래스를 적용시키는 방식으로 사용한다. 예제를 통해 확인하자. 1. signUp.jsp 파일. 회원가입 페이지를 작성하는 데 css를 적용시킨다. 1) css 파일을 import 하는 방법. link를 통해 rel, type을 다음과 같이 등록하고 href에는 경로를 작성해준다. 이때 경로는 프로젝트명/ContextRoot 이후의 경로를 작성해주면 된다. Context root를 모른다면 이전 포스팅 참조. 2) div의 class에서 css에서 지정해둔 클래스명을 적는다. 이후 닫..