환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 개요] 데이터를 저장, 수정을 하는데 있어 사용자에게 확인을 받아야 하는 경우가 있습니다. 예를 들어 "입력하신 정보를 저장하시겠습니까?" 라는 알람창이 뜬 다음 사용자가 확인 버튼을 눌러야 실행이 되고, 취소버튼을 누르면 API를 호출하지 않는 경우입니다. 이를 공통함수로 원하는 옵션을 부여하여 출력할 수 있도록 해보았습니다. 참고 CSS : http://yoonbumtae.com/?p=3632 자바스크립트: 모달(modal window) 만들기 - BGSMM 모달 창이란 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 ..

해당 게시글은 업로드 1편 , 다운로드 2편으로 구성되어 있습니다. [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 완성 화면] input type="file" 생성 해당 버튼 클릭시 파일 선택하는 창이 뜸 한가지 or 다중 파일 선택시 하단에 썸네일, 이름 , 삭제버튼 생성 삭제버튼 클릭시 해당 row 삭제와 동시에 전달하는 데이터도 삭제 등록후 해당 게시물 조회시 정상적으로 파일 이름과 함께 다운로드가 되는 모습 개발 목표 : SPA 로 구현한 게시판에서 글 작성시 파일 업로드 기능 추가, 파일 업로드시 Mulitple 속성 부여하여 여러개의 파일 업로드 하도록 구현파일 다운로드시 글 작성자..

해당 게시글은 업로드 1편 , 다운로드 2편으로 구성되어 있습니다. [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 완성 화면] 개발 목표 : SPA 로 구현한 게시판에서 글 작성시 파일 업로드 기능 추가, 파일 업로드시 Mulitple 속성 부여하여 여러개의 파일 업로드 하도록 구현파일 다운로드시 글 작성자가 저장한 파일 명 그대로 다운로드하도록 구현, 한국어 인코딩 추가 1] 구성 유저가 파일을 업로드 할 때 - > Input type=file 태그를 활용하여 FormData 형태의 구조로 Controller에 전달 -> Controller에서는 전달받은 데이터를 핸들링하는 Service 호..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 완성 화면] 개발 목표 : SPA 로 구현한 게시판에서 row Read 후 한단계 더 Depth 으로 수정하기 페이지구현, 뒤로가기 버튼 클릭시 이전 정보 보이게 구현 & 작성자가 아닐 경우 삭제, 수정 버튼 안보이게 구현 1] 게시글 상세정보 jsp 소스코드 제목 : ${title} 작성자 : ${writer} 내용 : ${content} 작성일자 : ${regdate} 뒤로가기 수정하기 게시글 삭제 저번 Read 포스팅과 다른점은 삭제버튼 이벤트가 생성된 것입니다. 2-1] 삭제버튼 이벤트 rmbtn.onclick = function(){ fe..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 완성 화면] 개발 목표 : SPA 로 구현한 게시판에서 row Read 후 한단계 더 Depth 으로 수정하기 페이지구현, 뒤로가기 버튼 클릭시 이전 정보 보이게 구현 & 작성자가 아닐 경우 삭제, 수정 버튼 안보이게 구현 1] 상세화면 jsp 소스코드 제목 : ${title} 작성자 : ${writer} 내용 : ${content} 작성일자 : ${regdate} 뒤로가기 수정하기 게시글 삭제 우선 해당 if 문을 통해 LocalStorage에 저장된 로그인 정보를 비교하여, 게시글의 작성자와 동일할 경우에만 표시 if( writercheck =..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS [완성화면] 목록에서 번호를 클릭시 해당 게시글의 내용이 나오도록 한다. 개발 목표 : 기존에 만든 게시판에서 SPA 을 유지하며, 게시판 Row 클릭시 해당 목록 조회. 메뉴 1 소스코드] CRUD 등록 10개씩 보기 15개씩 보기 20개씩 보기 제목 작성자 조회 번호 제목 글쓴이 작성일자 조회수 이전 포스팅에 비해 좀더 새분화 하여 나누었으며 기능은 테이블 생성, 목록 조회, 조회버튼 클릭, view 카운트 변경 의 4가지 기능으로 나누어 작성하였습니다. 코드설명] 1] 테이블 생성 부분 //테이블 생성 async function createB..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 완성 화면] 개발 목표 : 기본 게시판 그릴 때 로직 변경 -> 작성자 or 제목 항목 포함해서 query 발송, ROWNUM 활용하여, bno(table 의 key) 를 숨기고 가상의 number 목록 표시 아래의 포스팅에서 로직 변경함 https://yn971106.tistory.com/77 [포트폴리오 페이지]_9단계_CRUD 게시판 구현_(feat.목록 조회기능 구현) [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 R(r..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 사용 언어 : ES6, Java , Html5 , CSS 완성 화면] 개발 목표 : 기존에 만든 게시판에서 SPA 구현을 위해 등록기능 menu1 로 병합 https://yn971106.tistory.com/78 [포트폴리오 페이지]_10단계_CRUD 게시판 구현_(feat.등록기능 구현) [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 C(create) 만들기 [완료화면] 등록 버튼 클릭시 메뉴 1의 게시판에 새로운 항목.. yn971106.tistory.com 해당 포스트에서 검색기..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis 개발 목표 : 기존에 만든 게시판에서 SPA 을 유지하기 위해 common 파일 생성 common.js 파일을 사용할 위치를 지정해 줍니다. ( 자유 ) let _commons = function() { return _Self ={ } } const $commons=_commons(); 의 형식을 가지고 있습니다. 다른 jsp 파일에서 해당 경로의 script 파일을 추가하고 commons 를 호출하여 해당 공통 함수들을 사용할수 있고, 페이지 전체의 객체를 만들어 참조할 수 있습니다. 제가 할 것은 SPA 유지를 위해 데이터를 보관할 history 라는 객체를 만들 것입니다. let history={ ..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 기존에 만든 게시판에서 페이징 처리가 가능하도록 기능 추가 [완료화면] 10개씩 보기 20개씩 보기 이전 조회 기능에서 변경점] https://yn971106.tistory.com/77?category=1000475 [포트폴리오 페이지]_9단계_CRUD 게시판 구현_(feat.조회기능 구현) [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 R(read) 만들기 [완료 화면] [디렉토리] [설명] board에 관한 controller 와 VO.. yn971106.t..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 로그인 기능 만들기 해당 화면에서 데이터베이스에 저장되어있는 아이디와 비밀번호를 가지고 있을 시 해당 화면으로 전환되도록 함. 또한 로그아웃 버튼 클릭시 로그아웃되는 처리까지 진행 JSP 부분] logout.onclick = function(){ $globalStorage.setValue("loginUser",""); location.reload(); } $('.submit-btn').click( async function (){ let id =idtext.value; let pw =pwtext.value; let result = await fetch('/join/authlogin..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 C(create) 만들기 [완료화면] 등록 버튼 클릭시 메뉴 1의 게시판에 새로운 항목이 생성 한국어는 깨지는 현상이 발생-> 추후 해결예정 [디렉토리] CRUD는 같은 파일에 작성 [JSP 파일] 등록 fetch 를 사용하여 해당 url을 호출하고, 데이터는 json으로 가공하여 전달, 데이터들은 입력 폼 안에 적힌 text, globalstorage에 저장된 사용자 명을 받아서 전달한다. [Controller] @RequestMapping("/board/register.do") @ResponseBody public String boar..