목록분류 전체보기 (259)

가자공부하러!

뷰(form)에 입력한 많은 데이터를 List 타입으로 컨트롤러로 보내는 방법

1. 목표2. 기능 3. 소스코드 1. 목표 1. 개발환경 > Spring Boot 2.1.7, JDK 8 2. 뷰에서 많은 양의 데이터를 컨트롤러로 보내고자 한다. > 리스트 형태로 보낼 수 있다. 2. 기능 1. 리스트 타입으로 보내기 순서 > 데이터가 담길 ExamDTO 작성(getter, setter) - String title, String subject, String limit_time > ExamDTO를 List타입으로 갖는 ExamListDTO 작성(getter, setter) - List examlist > 뷰에서 보낼 데이터를 폼으로 묶음- action : listtest- method : post- input 태그- name : ExamListDTO에서 선언한 변수명을 사용하여 작성-..
공부/Spring Boot 2019. 9. 9. 17:12
정규식 활용 회원가입 기능(아이디 중복확인, 요소 입력확인) - JavaScript, jQuery

1. 목표2. 기능 3. 소스코드 1. 목표 1. 개발환경 > Spring Boot 2.1.7, JDK 8 2. JavaScript, jQuery, 정규식을 활용해 회원가입 기능 구현 > 뷰 요소 : ID, 이름, 비밀번호, 비밀번호 확인, 이메일 > 정규식 활용 뷰 요소 : - ID : 영소문자, 영대문자, 숫자만 가능하게끔 설정. 공백 포함 불가. - 이름 : 공백 포함 불가. - 이메일 : 이메일 형식에 맞게끔 설정(aaa@bbbb.bbb) 2. 기능 1. ID 중복체크 > ID 입력란에 키다운 이벤트가 발생하면 ajax 통신을 통해 중복된 아이디인지 판별 > 중복되지 않은 아이디인 경우에만 회원가입 버튼 활성화 2. 입력요소 빈 칸 체크 > ID, 이름, 비밀번호가 비어있는지 체크 > 비어있지 않..
공부/Javascript, Node.js, jQuery, Ajax 2019. 9. 9. 08:32
12. Spring Boot Gradle 프로젝트 생성 방법(Thymeleaf)

1. 개발환경1. 개발환경 > spring boot version 2.1.7(Spring Starter Project, Gradle Project, Themyleaf template engine) > jdk 8 > sts3 2. 프로젝트 생성 방법1. 방법1 : Spring Starter Project -> Type을 Gradle로 설정 > 프로젝트 이름 : examGradleWelcome > 패키징 : WAR > 프로젝트 생성 시 추가하는 dependencies - Spring Boot DevTools- Lombok- MySQL Driver- MyBatis Framework- Spring Web Starter > 설정 - 실패 - view resolver :- application.properties ..
공부/Spring Boot 2019. 9. 4. 17:04
Javascript Full Calendar(3) - DB 값 가져오기

1. 개발환경1. 다운로드 > Javascript Full Calendar 홈페이지 : https://fullcalendar.io > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium 2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1 3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp 2. Calendar 외부의 값 가져오기1. 버튼 클릭 시 이벤트 가져오기 > 배열 형태 - 예) 2차원 배열 - 보낼 때 : var arr = [ {'title':'evt4', 'start':'2019-09-04'..
공부/Javascript, Node.js, jQuery, Ajax 2019. 9. 3. 20:45
Javascript Full Calendar(2) - 한글설정, 클릭이벤트, 일정 추가

1. 개발환경1. 다운로드 > Javascript Full Calendar 홈페이지 : https://fullcalendar.io > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium 2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1 3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp 2. Full Calendar 한글표기 설정1. 참고 : https://fullcalendar.io/docs/locale#loading-locales-with-script-tags-and-browser-globals..
공부/Javascript, Node.js, jQuery, Ajax 2019. 9. 3. 18:41
페이징 + 검색 정리(JSP)

1. 요약 > DB에서 조건에 맞는 값만 가져온다- 검색 조건에 맞는 값 중 페이징 조건에 맞는 값만 가져오도록- ex_ 작성자 ID가 admin인 모든행에 RNUM을 분배하고 현재 페이지에 맞는 RNUM만 가져온다 > 네비게이션- 현재 페이지에 맞는 네비게이션 요소만 보이게끔 설정 > 소스코드- github 2. 필요한 요소1234567891011121314151617181920212223242526272829303132333435/** 검색조건. 0=제목, 1=내용 2=id*/private int cond; /** 쿼리에 보낼 검색조건 문자열 */private String condquery = ""; /** 검색어 */private String keyword; /** 현재페이지 */private in..
공부/웹 2019. 9. 3. 12:31
로그아웃 후 최근 방문 페이지로 돌아가기(JSP)

1. 원리 > 페이지에서 contextPath, servletPath, uniCode를 기록- uniCode : 파라미터 값(GET 메소드 한정) 2. 소스코드 > JSP123456 [로그아웃]Colored by Color Scriptercs > Controller12345@RequestMapping(value = "logout")public String logout(HttpServletRequest req,LatestURI uri) { req.getSession().removeAttribute("login"); return "redirect:" + uri.getUri();}Colored by Color Scriptercs > LatestURI1234567891011121314151617181920212..
공부/웹 2019. 9. 2. 20:52
11. Spring Boot 파일 업로드/파일 다운로드

1. 기초 설정 > spring boot version 2.1.7(Spring Starter Project, Maven Project) > jdk 8 > sts3 > 필요 디펜던시(보이기/숨기기) : 123456789101112131415161718192021222324252627 org.apache.commons commons-io 1.3.2 org.apache.commons commons-lang3 org.apache.commons commons-pool2 com.servlets cos 09May2002 commons-fileupload commons-fileupload 1.3.3Colored by Color Scriptercs > upload 관련 설정- 순서- application.yml에 파일 ..
공부/Spring Boot 2019. 9. 2. 19:28
Javascript Full Calendar(1) - 적용

1. 개발환경1. 다운로드 > Javascript Full Calendar 홈페이지 : https://fullcalendar.io > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium 2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1 3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp 2. 적용방법1. 프로젝트 폴더로 다운로드 받은 fullcalendar의 packages 폴더 import > 경로 : src/main/resources/static/fullcalendar 2. view 작성 > c..
공부/Javascript, Node.js, jQuery, Ajax 2019. 8. 31. 12:59
Javascript, jQuery 캘린더 만들기(수제)

Javascript와 jQuery로 DOM을 조작하여 1990년 1월부터 2030년 12월까지 캘린더를 그리는 코드 구성1. calmain.jsp - JSP 뷰 2. script - Javascript, jQuerty 코드3. CalendarController.java - 컨트롤러4. CustomCalendarUtil.java - 달력 관련 유틸 클래스 1. calmain.jsp 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465calendar! ${y } 년 ${m } 월 Colored by Color Scriptercs 2. script..
공부/Javascript, Node.js, jQuery, Ajax 2019. 8. 30. 18:42
Javascript 생활코딩 강의

기초(1) - 변수, 자료형, URL, 조건문, 반복문 등 https://opentutorials.org/course/3085/18868 수업의 목적 https://opentutorials.org/course/3085/18778 HTML과 JavaScript의 만남 1 (script 태그) https://opentutorials.org/course/3085/18782 HTML과 JavaScript의 만남 2 (이벤트) https://opentutorials.org/course/3085/18869 HTML과 JavaScript의 만남 3 (콘솔) https://opentutorials.org/course/3085/18870 데이터타입 - 문자열과 숫자 https://opentutorials.org/cour..
공부/Javascript, Node.js, jQuery, Ajax 2019. 8. 30. 09:01
기초(3) - 선택자 정리(Javascript, jQuery)

참고 사이트 1. medium.com 1. Javascript > document.getElementById("ID");- 아이디 값이 여러개일 경우 첫 번째 id값을 반환 > document.getElementsByName("name");- name에 명시된 조건에 맞는 모든 값들을 live NodeList로 반환- index로 접근이 가능하며 length 속성을 가짐 > document.getElementsByClassName("class");- 특정 클래스명을 가진 엘리먼트들을 NodeList로 반환 > document.getElementsByTagName("li"); - 특정 태그명을 가진 엘리먼트들을 HTMLCollection으로 반환 > document.querySelector(".myClas..
공부/Javascript, Node.js, jQuery, Ajax 2019. 8. 30. 08:59
Prev 1 ··· 8 9 10 11 12 13 14 ··· 22 Next