$$config title: [웹서비스] ? 먹짱 작업위키 keywords: - IT - JAVA - SpringBoot $$ # ? 페이지 정보 - 레시피 공유 사이트 만들기, 작업 위키 - [주소 : to2.kr/d9n](https://cdpn.io/pporong/fullpage/KKeZrEQ) # ? 프로젝트 정보 - [? 대표 페이지](https://to2.kr/ecD) # ? 관련링크 - [리포지터리](https://github.com/pporong/Site_MeokZzang.git) --- ## 작업 1 : 첫 커밋(환경셋팅1,2) + 컨트롤러 기초 틀잡기 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/bc2d70755a58b62dd4233dbdf6d1aa24d00e59b4) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/bb9482d2a8b0dd2ef11ad13169baa097733a9167) - Maven project, java18, Jar 의존성 추가 - Lombok, Spring Boot Devtools, Spring Web --- ## 작업 2 : 게시물 작성/수정/삭제 리스트 기능 구현 + 회원가입 기능 기초 틀 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/c816dbf09f95ac54798c239dec9386465f4c15e2) --- ## 작업 3 : 로그인, 로그아웃 기능 틀 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/51334c90cc8fd61ea2dd40449e7c669f81a73f8d) --- ## 작업 4 : 게시물 상세보기 기능 및 테스트용 폼 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/74ee537345ac24a38ac6b1b24ae9dab6c71fb559) --- ## 작업 5 : MVC Configurer 도입 + Rq class 생성 + LoginInterCeptor, BeforeActionInterCeptor 도입 -> 로그인 로직 정리 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/a2020f386aa1a3265f7f8f3946b052d05ccaf55d) - Controller 실행 전 interceptor 를 이용한 로그인 요청 처리 --- ## 작업 6 : 로그인, 로그아웃에 Rq Class 적용하여 로그인 여부 체크 및 테스트용 로그인 폼 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/fb93ad60fdb996e52eef0afffbac993f09d07c97) - Rq 클래스에 HttpSession을 적용하여 session attribute 활용을 통해 로그인 여부를 더 편하게 확인 가능하게 됨 --- ## 작업 7 : 게시물 수정 기능 보완(url 접근 방어) 및 테스트용 수정 폼 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/56b6e287ce1be1f0686b2d51483fdf80bc5f4147) --- ## 작업 8 : 게시물 작성 기능 보완(replaceUrl 추가) 및 테스트용 폼 구현 + 게시판 분리 작업과 리스트 페이징 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/398f402bb3bb5e6f202e265d68235298636496c2) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/5ef81b4f77b620a9c67446620731f9e68657d65c) - 게시판에 따른 노출 제어 기능 - [GIT 3](https://github.com/pporong/Site_MeokZzang/commit/5a440b8dbf3b4e9880d2ddb9c80367ad4129a8b3) - 페이징 기능 --- ## 작업 9 : 게시물 리스트 검색기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/7ad312d78dfd7b42c5061c3430b8ac4add5be714) - 게시판 (공지사항, 자유게시판, 질문게시판 / 제목, 작성자 기준) --- ## 작업 10 : 게시물 조회수 기능 구현(Ajax사용) - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/98e172b6fef80128aa51c35c82f69c49f28b4676) ```js ``` --- ## 작업 11 : 게시물 추천 기능(좋아요, 싫어요) 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/724556ff3a82cebda5939a994fd08793af6f7fca) --- ## 작업 12 : 댓글 기능 구현(작성, 수정, 삭제) - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/5bcd4c76d33e332d245eb3ac742513f10646cb0f) - 댓글 추천 기능 구현 예정 --- ## 작업 13 : 회원 개인 정보 수정 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/e52b734e842c7b9ef8ce47f433cb9baa22293674) - 비밀번호 확인 페이지에서 비밀번호값이 null - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/c873cb92749d3a86abeb5a3909fcd6b4e7da883a) - 작업 13의 오류 해결 --- ## 작업 14 : ToastUi 적용(게시물 작성, 수정, 상세보기) - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/ef3b65cb2eaf7059d8f5412440e7a0923671fd30) --- ## 작업 15 : 회원가입 폼 구현(test용) - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/9df8a0197b92c8b85a59b1705a80e3e9557aa3be) --- ## 작업 16 : 페이지 이동 시 URI 정보 유지 할 수 있도록 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/d3a04b2af64e3419f2cebbf43cfcb03d03a417c2) --- ## 작업 17 : 회원가입 기능 Ajax 사용하도록 기능 수정(id 중복체크) - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/d1074ba888f1ef77fec4584cbca1201c5e179a21) - 폼 제작 및 joinURi 생성까지 - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/83c521411c0420cfe913f7bd1015a520852b326f) - Ajax 이용하여 아이디 중복체크 + lodash 활용하여 Ajax 요청 제어 - lodash 라이브러리의 debounce 함수적용하여 통신줄이기 ( AJAX 적용 05 ) - 타이핑을 하는 중에도 아이디중복을 체크하는 상태(계속 통신요청 하는 상태) -> 불필요한 요청 줄이고 타이핑을 마치고 나서 중복체크를 하는 것이 효과적 - debounce (막음) 요청이 몰려도 호출하지 않는다. 요청이 끊기고 잠잠해지면 그때 한번 호출 한다. - 인터셉터에서 AJAX인지 확인하고(isAjax) 후 json방식으로 처리 ```js let callCount = 0; // lodash debounced 활용하여 loginId 중복체크시 일정시간(1초) 뒤에 한번만 실행할 수 있도록 // 너무 많은 함수가 전달되지 않도록 조절 const checkLoginIdDupDebounced = _.debounce(checkLoginIdDup, 300); function checkLoginIdDup(el) { console.log('checkLoginIdDup called : ' + ++callCount); console.log(el.value) const form = $(el).closest('form').get(0); if (form.loginId.value.length == 0) { validLoginId = ''; return; } if (validLoginId == form.loginId.value) { return; } $('.loginIdMsg').html('

확인중...

'); $.get('../member/doCheckLoginId', { isAjax : 'Y', loginId : form.loginId.value }, function(data) { $('.loginIdMsg').html('

' + data.msg + '

'); $('.loginIdMsg, .inputLoginId').addClass('has-fail'); $('.loginIdMsg, .inputLoginId').removeClass('has-success'); if (data.success) { validLoginId = data.data1; $('.loginIdMsg, .inputLoginId').addClass('has-success'); $('.loginIdMsg, .inputLoginId').removeClass('has-fail'); } else { validLoginId = ''; } if (data.resultCode == 'F-B'){ alert(data.msg); location.replace('/'); } }, 'json'); } ``` --- ## 작업 18 : 로그인 아이디 찾기, 비밀번호 찾기 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/a52131326938737e654f3f63e35736418c5b33c7) - 아이디 찾기 - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/3c39283828840f84a75330b6ce5c30c7f06e5919) - [GIT 3](https://github.com/pporong/Site_MeokZzang/commit/c92f44cb25e35bf8a620a86917cc798e7fbb99a0) - 비밀번호 찾기 : SMTP 를 이용하여 메일로 임시 비밀번호 발송 - 임시비밀번호를 AttrService로 관리 - 임시비밀번호 발급시 attrService.setValue 실행 ```js attrService.setValue("member", actor.getId(), "extra", "useTempPassword", "1", null); ``` - member객체 중 회원번호에 대한 정보 : typeCode 구분으로 "extra", "useTempPassword"이면 1의 값으로 설정한다. - 만료는 null == 즉, 만료일이 없는 상태로서 별도의 변경이 없으면 그대로 있다. --- ## 작업 19 : header, 로그인, 아이디 찾기, 비밀번호 찾기, 회원가입 : CSS 수정 + 필요한 이미지 파일 추가 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/342742a977d9d338d7eca7577e6b7dcaa0a2cd15) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/04dc2673eae0b49232bf4d3619b2ceb4aea04e89) --- ## 작업 20 : 관리자 페이지 및 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/803ad3db2adf47dcfa890f0a624bddd2edfdcf03) - 멤버 리스트 구현 + 관리자만 접근 가능하도록 --- ## 작업 21 : API 공공데이터 + kakaoMap 활용 테스트 중 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/59d74c26d13a8d534cf97b83c06468b90add935b#diff-3374d71c214addfe1cb90724827b6486b1b2ae3cc9e0ad9a1fa9eb704bdaec4d) - ## 작업 22 : API (공공데이터 + kakaoMap 도입) - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/449f5c6f57baf311a8a34401a141ff01d421b758) - api 도입 후 데이터 목록 노출, 리스트 클릭시 kakaoMap 표출 - 페이징 버튼 기능 구현(pagination) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/c2eb7bd2b561e170f20639a5a9c7aab4af12a07a) - 데이터 검색 기능 구현 (상호명 검색 후 정보 노출까지) - [GIT 3](https://github.com/pporong/Site_MeokZzang/commit/1909b4f130a786e44eed64c065e5b462c219b8b2) - 관리자 테스트 값 제외 ```js ``` - 아무것도 선택하지 않았을 때는 학원좌표가 찍히도록 함 --- ## 작업 23 : header, 마이 페이지, 비밀번호 확인, 회원정보수정 css 수정 + 회원가입시 nickname 중복체크 AJAX 추가 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/cdfc92602d0d9ec86ce9d2d925ffcfe2af40a51d) ```js // 닉네임 중복체크 const checkNicknameDupDebounced = _.debounce(checkNicknameDup, 300); function checkNicknameDup(el) { console.log('checkNicknameDup called : ' + ++callCount); console.log(el.value) const form = $(el).closest('form').get(0); if (form.nickname.value.length == 0) { nickname = ''; return; } if (validNickname == form.nickname.value) { return; } $('.nicknameMsg').html('

확인중...

'); $.get('../member/doCheckNickname', { isAjax : 'Y', nickname : form.nickname.value }, function(data) { $('.nicknameMsg').html('

' + data.msg + '

'); $('.nicknameMsg, .inputNickname').addClass('has-fail'); $('.nicknameMsg, .inputNickname').removeClass('has-success'); if (data.success) { validLoginId = data.data1; $('.nicknameMsg, .inputNickname').addClass('has-success'); $('.nicknameMsg, .inputNickname').removeClass('has-fail'); } else { validNickname = ''; } if (data.resultCode == 'F-B'){ alert(data.msg); location.replace('/'); } }, 'json'); } ``` --- ## 작업 24 : 관리자 -> 회원 선택 삭제 기능 구현 / 댓글 좋아요 기능구현중 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/778eee8fe205edddc64dab85f247bfd4db152e5f) - 관리자 모드에서 회원정보 출력 후 회원 선택하여 삭제 할 수 있도록 기능 구현 - 댓글 추천 기능 구현 - 댓글 추천 취소 기능 구현 예정 --- ## 작업 25 : 임시비밀번호 사용시 비밀번호 변경 권유 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/cd662fe4b614d6af0b160b3495cc479cfd8ca9c1) - 회원이 비밀번호 찾기 후 임시비밀번호로 로그인 할 때마다 비밀번호 변경 권유 -> 비밀번호 변경 시 권유 X - 로그인 할때 isUsingTempPassword 메서드로 해당회원에 대해 1값이 들어있다면 임시비밀번호를 사용중인 회원에게 비밀번호 변경을 권유하고, 마이페이지로 이동시킴 ```js if (loginPw != null) { attrService.remove("member", memberId, "extra", "useTempPassword"); } ``` - 이후 회원정보 수정을 요청하면 modify메서드를 처리하며 명시적으로 임시비밀번호를 사용하지 않으니, 해당 회원에 대한 "useTempPassword" 를 제거한다. --- ## 작업 26 : AJAX로 댓글 삭제 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/e552c49cf2a79b1f2b0aea115cbb998983c087d5) ```js function ReplyList_deleteReply(btn) { const $clicked = $(btn); const $target = $clicked.closest('[data-id]'); const id = $target.attr('data-id'); $clicked.html('삭제중..') $.post( '../reply/doDeleteAjax', { id: id }, function (data) { if (data.success) { $target.remove(); } else { if (data.msg) { alert(data.msg); } $clicked.text('삭제 실패'); } }, 'json' ); } ``` --- ## 작업 27 : 관리자 -> 회원 글 목록 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/5fa710b867da96614e887ced9037fd72c2b28fb6) - 회원 리스트에서 아이디 클릭 시 회원이 작성한 글 목록 출력 - 글 목록에서 글 제목 클릭 시 글 상세보기로 이동 --- ## 작업 28 : 게시글 상세보기(detail) CSS 수정 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/c01bc73ea2aa60a2c9759b6287e8e26eb1d481d0) --- ## 작업 29 : 회원 탈퇴 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/b76bbb330e9d81a77dbf128817a5766cb5f1397c) - memberDeleteAuthKey 사용 (AttrService) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/09b8630370511b58f29b4c59b91c4a3fdbce8fde) --- ## 작업 30 : 메인 페이지 배너 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/733499d4b56e1e3fe09d0284996affb82a535804) - 슬릭 슬라이더 jauery 활용 ```js $(document).ready(function () { // 배너 슬라이드 $('.banner-slider').slick({ autoplay: true , autoplaySpeed : 3000 , dots: true , pauseOnHover: false , arrows : false , }); // 배너 슬라이드 버튼 $('.banner-visual>.section01>.banner-slider-wrap >.prev-btn').click(function(){ $('.banner-slider').slick('slickPrev') }); $('.banner-visual>.section01>.banner-slider-wrap >.next-btn').click(function(){ $('.banner-slider').slick('slickNext') }); }); ``` --- ## 작업 31 : 메인 페이지 업버튼 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/29612b6411bc4432d07ed5b5a9a5b3896bba6c7d) - jquery 이용 ```js $(document).ready(function () { // 업버튼 $('.up-btn-area >.up-btn').click(function(){ // $('html, body').scrollTop(0) $('html, body').animate({ 'scrollTop' : 0 , } , 800) }); }); // $(window).scroll(function(){ let scrollTop = $(this).scrollTop() // 내가 선택한 위치가 어딘지 알려주는 메서드 if( scrollTop > 100 ){ $('.up-btn-area >.up-btn').addClass('active') } if( scrollTop < 100 ){ $('.up-btn-area >.up-btn').removeClass('active') } }); ``` - window scroll 함수 사용하여 내가 현재 내 스크롤 위치 확인 후 업 버튼 생성 할 수 있도록 함 --- ## 작업 32 : 레시피 테이블 생성 및 컨트롤러 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/6e8a9ed32fb7fb7a810c9a759fd486075ed7912e) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/acd9779f4cf83e5032f26f2d2d5687978b71d890) ```js CREATE TABLE recipe ( recipeId INT(10) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '레시피 id', recipeRegDate DATETIME NOT NULL COMMENT '작성날짜', recipeUpdateDate DATETIME NOT NULL COMMENT '수정날짜', memberId INT(20) NOT NULL COMMENT '작성자 id', recipeName VARCHAR(50) NOT NULL COMMENT '레시피 이름', recipeBody VARCHAR(50) NOT NULL COMMENT '레시피 간단 설명', recipeCategory INT(10) NOT NULL COMMENT '카테고리(1 :한식, 2 :양식, 3 :중식, 0:기타)', recipePerson INT(10) NOT NULL COMMENT '몇인분(1: 1인분, 2: 2인분, 3: 4인분, 0 :기타)', recipeLevel INT(10) NOT NULL COMMENT '난이도(1 초급, 2 중급, 3 고급)', recipeTime INT(10) NOT NULL COMMENT '소요시간(10분/20분/30분/한시간/기타)', recipeCook INT(10) NOT NULL COMMENT '레시피 조리 방법(볶음, 끓이기, 부침.. etc)', recipeStuff TEXT NOT NULL COMMENT '레시피 재료', recipeSauce TEXT NOT NULL COMMENT '레시피 양념', recipeMsgBody TEXT NOT NULL COMMENT '레시피 만드는 과정 설명', recipeHitCount INT(10) NOT NULL DEFAULT 0 COMMENT '조회수', recipePoint INT(10) NOT NULL DEFAULT 0 COMMENT '추천수', recipeDelStatus CHAR(1) NOT NULL DEFAULT 'N' COMMENT '삭제여부 (N=삭제 전, Y=삭제 후)', recepeDelDate DATETIME COMMENT '삭제날짜' ); ``` --- ## 작업 33 : 레시피 작성 기능 구현중 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/dd50383b479f86461483f0d06fb29c8f0ac0f370) - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/c004e4d7ccf667e6801f246c46e43d405acecce0) - [GIT 3](https://github.com/pporong/Site_MeokZzang/commit/e46180054e829e16dbb7e7f84b97496460a7dbf5) --- ## 작업 34 : 이미지 업로드 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/8a022c533f3e6e2214285320fa4d03ca3789bc55) : 회원가입시 프로필 사진 업로드 기능 구현 - genFile table DB 생성 - 이미지 업로드 기능을 위한 genFile 서비스 및 repository 도입 - genFile 을 기반으로 한 이미지 업로드 기능 구현 - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/471e9dc5b1bd3d2246b2788fcc674f803bff5d97) : URL을 통해 사진에 접근 할 수 있도록 함 - [GIT 3](https://github.com/pporong/Site_MeokZzang/commit/b308b488f63b90f8d7f22730bb9d39608d81eee1) : 마이페이지, 게시물 상세보기 페이지에서 프로필 이미지 노출 - [GIT 4](https://github.com/pporong/Site_MeokZzang/commit/f63a1ecaf0d7a983ef451f1bc93e0cd6859bffa3) : 프로필 이미지 업로드시 용량제한 스크립트 추가 + 내 정보 수정 화면에 프로필 이미지 노출 - [GIT 5](https://github.com/pporong/Site_MeokZzang/commit/f24974e7f245e29704d41340e780b84e2ec27b6f) - 회원 정보 수정 페이지에 프로필 이미지 삭제 기능 구현 - 회원 정보 수정 로직 변경 - 로그인, 회원가입, 마이페이지 jsp 파일에 유효성 검사 스크립트 추가 - id로 사진파일이 입력되는 태그에서 이미지를 읽어오고, 미리보기 박스에서 로드된 이미지를 불러와서 보여준다. - 서버로 제출되는 데이터가 아니라 사용자의 컴퓨터, 로컬 경로의 img테그가 삽입되어 보여주게 된다. --- ## 작업 35 : 레시피 작성 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commits/master) - 레시피 완성 사진 미리보기 스크립트 구현 : change 이벤트 사용 ```js ``` - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/dc6927585e1507e5667014d1d702d4cc033f8be5) - 레시피 과정 사진 미리보기 스크립트 구현 (단일) ``` js ``` - [GIT 3](https://github.com/pporong/Site_MeokZzang/commit/6d9f974b0dc68d334b6799e70c310eeed6770101) - 레시피 작성 기능구현 (이미지 제외) - [GIT 4](https://github.com/pporong/Site_MeokZzang/commit/6d9f974b0dc68d334b6799e70c310eeed6770101) - 레시피 작성기능구현(이미지포함) + 조리과정 이미지 미리보기 스크립트 구현(다중) --- ## 작업 36 : 레시피 리스트 기능 구현 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/ccafdd8b2dd8c6736526929d01e257d9f65b2b2a) - 리스트 (페이징) 기능 구현 - [GIT 2](https://github.com/pporong/Site_MeokZzang/commit/51c9676e30c5064470c8de3f289181d16239073e) - 리스트에서 검색 기능 구현 ( 카테고리 + 레시피 이름 or 재료 기준) ```js

레시피 갯수 : ${recipiesCount } 개

``` --- ## 작업 37 : 레시피 작성 기능 수정 및 리스트 불러오는 쿼리 수정 - [GIT 1](https://github.com/pporong/Site_MeokZzang/commit/9a6af537b6d200736acdf9c4be61d5f3231dfd48) - write폼에서 select 및 input 태그에 required 속성을 줌으로써 빈값이 입력되어 넘어가지 않도록 함 ```js