본문 바로가기

전체 글273

redirect 로 페이지 이동시 값 전달방법 보상기능을 쓰기 위해 유저가 게시판에 게시물을 쓰면, 지금까지 작성한 게시물 개수를 listBoard 에 뿌려줘야했다.근데 값을 전달할 때는 forward 를 사용해야만 하는줄 알아서 어떻게 해야하나 고민하고 있었는데...!spring 에서는 RedirectAttributes 클래스를 이용해 redirect 로도 값을 전달할 수 있다 !!!!!! (최고) * 사용방법 *1. RedirectAttributes 선언하고2. addAttribute() 로 담은 다음에3. 받는 Controller 에서 @RequestParam 으로 잡고4. View 에 전달하기 위해 model 에 담으면 끝! * 실제 사용방법 *1. Controller - addBoard1234567891011@RequestMapping(va.. 2018. 7. 25.
자식요소 이벤트를 위해 부모요소 이벤트 막는 방법 자식요소 이벤트를 사용하기 위해 부모요소 이벤트를 막는 방법 이처럼 큰 네모박스(article) 을 클릭하면 '일정 상세보기' 페이지로 가게끔 jQuery를 걸어놨지만,큰 네모박스(article) 안에 'X버튼' 또는 '일정 수정하기' 또는 '게시물로 공유하기' 와 같이 자식요소를 클릭하면 그에 맞게 이벤트가 걸려야하는데,jQuery를 잘 잡아도 부모요소의 이벤트인 '일정 상세보기' 페이지로 넘어가더라.이에 대한 해결방법은, 자식요소에 e.stopPropagation(); 사용하기 ! * 사용방법 *1. HTML 내부1234567891011 일정 수정하기 게시물로 공유하기Colored by Color Scriptercs2. jQuery 부분123456789101112131415161718//일정 클릭시 .. 2018. 7. 25.
[jQuery/Bootstrap] 동적으로 생성한 요소에 tooltip 바인딩 시키기 단순하게 아래 코드 적용시켜주면 된다 :) $(document.body).tooltip({ selector: "[data-toggle='tooltip']" }); 출처 : https://code.i-harness.com/ko/q/97f5a9 2018. 7. 23.
[CSS] CSS로 인스타그램 마우스오버 이벤트 적용하기 인스타그램처럼 포스팅 한 게시물에 마우스 올리면 좋아요 개수, 댓글 개수를 알려주고 싶었다. 찾아보니 CSS 로 instagram 처럼 mouseover 시 event effect 를 적용 할 수 있어서 바로 적용함. 참고 : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_opacity * 사용방법 * 1. HTML 태그 ${board.boardTitle} ${board.likeCnt} ${board.commCnt} 2. HTML CSS 부분 article{ display: inline-block; position: relative; } article:hover .thumbImg img { opacity: 0.3; .. 2018. 7. 22.
caret.js 와 atwho.js 이용하여 게시물에서 @로 친구리스트 불러오기 (autocomplete 활용) 페이스북이나 인스타그램처럼, 태그(@) 를 이용하여 친구리스트를 댓글에 불러올 수 있도록 하는 기능을 구현했다 !Friend 테이블에서 FriendId 만을 추출하여 JSON 형식으로 만들고, 댓글폼에서 @를 입력하면 Ajax 로 리스트를 불러와 띄워주는 예제다.해당 기능 사용을 위해 caret.js 와 atwho.js 를 같이 사용하였다.Caret.js Git 주소 : https://github.com/ichord/Caret.jsAtwho.js Git 주소 : https://github.com/ichord/At.js해당 예제는 국내 포스팅도 없고 검색 데이터도 별로없었지만 내가 사용할 textarea 에 적용이 가능하고, 사용방법이 편한 점에서 공부하고 적용했다 (뿌듯) * 사용방법 *1. HTML 상.. 2018. 7. 20.
나중에 활용하면 좋을 사이트 1. easyautocomplete : http://easyautocomplete.com/기존 jquery ui 에서 제공하는 오토컴플릿보다 간단하고 쉬운 것 같음 2. dhtmlx : https://dhtmlx.com/자바스크립트를 활용한 사이트.. 스케줄을 포함해 되게되게 많다. 진짜 유용한 사이트지만, 일부 기능은 유료? 기간제? 이다. 3. 로그인 CSS 테마 : https://dcrazed.net/css-html-login-form-templates/요즘 트렌드에 알맞게 디자인 한 로그인 CSS 테마 모음 사이트 4. 촤르륵 CSS JS 모음 : https://github.hubspot.com/odometer/docs/welcome/촤르륵 CSS 모음 5. 최신 jQuery 트렌드 알 수 있는 .. 2018. 7. 20.
20180720 개발일지 * 게시물 *1. 툴바작업한거랑 합치니까 기존에 먹던 스크롤 이벤트가 작동하지 않거나 충돌나서 수정, 보완2. 드디어 세션과 합쳐서 하드코딩으로 유저아이디 넣던 것들 세션으로 모두 수정, 보완3. 댓글입력시 @ 특수문자와 오토컴플릿 이용하여 친구리스트 불러오기=> 포스팅 : 2018/07/20 - [JAVA/JAVA Script] - caret.js 와 atwho.js 이용하여 게시물에서 @로 친구리스트 불러오기 (autocomplete 활용) 2018. 7. 20.
20180719 개발일지 * 게시물 목록 / 게시물 상세보기 *1. 댓글추가 기능 보완2. 현재 시간과 마지막 댓글이 달린 시간 비교하여 "x분 전"으로 표시하는 로직 보완3. 전반적인 기능 보완 .. 오늘은 내일 발표를 위해 Git 으로 Merge 하는 과정에서 또는, Merge 후 예기치 못한 오류를 손보는 데에 시간을 많이 할애했다ㅠㅠ 이번주까지는 댓글기능 구현하려했으니 좀만 더 힘내서 해야지 ! 2018. 7. 19.
마지막에 추가한 데이터의 index 가져오는 방법 마지막 insert 한 row의 index 가져오는 방법메인프로젝트를 진행하면서 방금 추가한 댓글의 고유넘버를 가져와야 할 때 되게 간편하고 효과적이었다.* MyBatis 의 버전이 2.x 버전에서 3.x 버전으로 변경되면서 사용하는 방법이 다르니 참고* MySQL 과 MyBatis 사용 참고 1. 2.x 버전 => 태그와 keyProperty 활용123456789 SELECT LAST_INSERT_ID() INSERT INTO COMMENT (user_id, board_no, comm_time, comm_content) VALUES ( #{user.userId}, #{boardNo}, NOW(), #{commentContent} )Colored by Color Scriptercs3. 3.x 버전 => .. 2018. 7. 19.

티스토리툴바