[LIKE5] 댓글 / 대댓글 작성하기 댓글/대댓글 작성하기 먼저 댓글의 경우 아래의 6개 항목이 insert 되어야 한다. 하지만, 실제로는 ✔된 3개의 항목들만 담아오면 된다. 1. 댓글 번호 -> 자동생성 2. 게시판 번호 -> ✔ 3. 회원 번호 -> ✔ 4. 댓글 내용 -> ✔ 5. 작성일 -> 자동생성 6. 게시판 -> 게시글 번호로 카테고리를 조회해옴 대댓글은 댓글보다 까다로운데 그 이유는 원댓글(ref_rep_no)과 댓글 깊이(ref_level)를 받아와야 하기 때문이다. 대댓글의 경우 ✔된 4개의 항목들만 값을 담아오면 된다. 1. 댓글 번호 -> 자동생성 2. 게시글 번호 -> ✔ 3. 회원 번호 -> ✔ 4. 댓글 내용 -> ✔ 5. 작성일 -> 자동생성 6. 원댓글 번호 -> ✔ 7. 댓글 깊이 -> 원 댓글 : 1 ,.. [LIKE5] 임시저장된 게시글 등록 😉 8개월 차 초보 개발자가 작성한 게시글입니다. 제 포스팅이 다른 분들에게 0.0001%의 도움이 되길 바라는 마음으로 올바른 정보를 전달하려 노력했습니다. 하지만 아쉽게도 부족한 설명과 오류가 있을 수 있습니다. 멋쟁이 개발자님들의 피드백을 환영합니다. [TOAST UI Editor] 토스트 에디터 게시글 등록 | 임시저장 [TOAST UI Editor] 토스트 에디터 게시글 등록 | 임시저장 😉 8개월 차 초보 개발자가 작성한 게시글입니다. 제 포스팅이 다른 분들에게 0.0001%의 도움이 되길 바라는 마음으로 올바른 정보를 전달하려 노력했습니다. 하지만 아쉽게도 부족한 설명과 오 seongeun-it.tistory.com 임시저장 기능의 경우 사용자가 게시글 작성 폼에서 임시저장 버튼을 클릭하면 .. [TOAST UI Editor] 토스트 에디터 게시글 등록 | 임시저장 😉 8개월 차 초보 개발자가 작성한 게시글입니다. 제 포스팅이 다른 분들에게 0.0001%의 도움이 되길 바라는 마음으로 올바른 정보를 전달하려 노력했습니다. 하지만 아쉽게도 부족한 설명과 오류가 있을 수 있습니다. 멋쟁이 개발자님들의 피드백을 환영합니다. 화면단 Data Base Board 테이블 Service/DAO단은 생략 게시글 작성 시 필요한 데이터 게시글 번호, 작성자 회원 번호, 카테고리, 게시글 제목, 내용, 작성일, 첨부파일 경로 게시글 임시 저장 시 추가적으로 필요한 데이터 게시글 상태 기본적으로 게시글 번호, 작성 인 자동으로 insert 된다. (게시글 작성의 경우 게시글 상태는 default 값인 Y가 insert 되며, 임시 저장 게시글은 게시글 상태를 F로 하여 insert가 .. [TOAST UI Editor] 토스트 UI 기본적인 화면 구현하기 프로젝트를 위해 토스트 UI 에디터를 사용하게 되었다. 처음에는 엄청나게 큰 산처럼 느껴졌었는데, API 문서를 차근 차근 읽어보니 성공할 수 있었다! 😜 * 다들 어렵지 않게 성공했다고 하는데, 이 부분은 동의하면서도 비동의한다. 처음에는 그런거 모르겠고 다 어렵거든요 😂 일단 두어번 하면 숨쉬듯 할 수 있을 거라는 믿음을 가지고 꼭 성공해보길 바랍니다! 토스트 UI 새로운 버전인 V3.0을 기준으로 작성했다. API문서를 토대로 V2.0과 차이점을 비교해보면 좋을 것 같아서 같이 가져왔다! 의존성 정보 변경 에디터 3.0에서는 v2.x에서 사용하던 의존성 모듈들이 제거되었다. 만약 CDN 환경에서 개발하고 있다면, v2.x에서 사용하던 CodeMirror 의존성 코드는 더 이상 필요없으니 제거해야 한.. [JQuery] .toggleClass()를 이용해서 클래스 추가 및 삭제 원하는 화면은 다음과 같습니다. (기본적으로 최신순에 배경색이 부여된 상태입니다.) 하지만 출력되는 화면은 이렇게 나온다..,,ㅎ 로직은 클래스를 on으로 변경하면 배경색이 변경된다는 로직입니다. CSS .talk-filter-box-inner .on{ background-color: rgb(220, 53, 69); color: white; } HTML 전체 최신순 조회순 좋아요순 JS ㅅㅣ도1 -> 😩 더보기 아이디가 id="selectOption"의 자손 div 요소에 클릭이벤트 부여시 on이라는 클래스를 부여하는 방법 ㅅㅣ도2 -> 😒 더보기 방법1과 마찬가지로 아이디가 selectOption의 자손인 div에 클릭 이벤트 발생시 on이라는 클래스를 추가하여 변경하고, 나머지 체크가 안된 요소들은 .. [JavaScript] [레시피 상세보기 페이지] 재료 계산기 이번 포스팅은 레시피 상세보기 페이지에서의 재료 계산기 JavaScript입니다. 재료 계산기의 대략적인 UI는 다음과 같습니다. 1. 필수 재료 조회되는 구문 먼저 필수 재료와 부가 재료가 담길 배열을 생성해줍니다. 반복문을 이용해 필수 재료의 재료명, 재료의 양, 단위를 출력해줍니다. 이때 기본적으로 재료의 양은 레시피 작성자가 입력한 재료의 양/ 작성자가 입력한 인원수로 나누어 1인분의 양이 가장 먼저 보이게끔 했습니다. 반복문 안에 script 구문을 사용해서 JavaScript에서 배열을 추가하는 함수인 push를 이용해 ingArr 배열에 담아줍니다. 다음과 같이 배열의 끝에 각 재료별 1인분의 양이 담겼습니다. 준비해주세요는 필수 재료, 있으면 좋아요는 부가 재료의 개념이지만, 해당 레시피에.. [JavaScript] [요리 후기]이미지 영역 클릭시 파일 등록하기 | 첨부파일 미리보기 | * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 작성 기능에서 사용한 JavaScript입니다. 추가적으로 업데이트할 예정입니다. 요리 후기 작성 기능은 하단의 포스팅 참고해주시면 감사하겠습니다. [요리 후기 작성] 요리 후기 작성 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 작 seongeun-it.tistory.com 이미지 영역 클릭시 파일 등록하기 첨부파일 미리보기 1. 이미지 영역 클릭 시 파일 등록하기 대략적인 UI.. [요리 후기 작성] 요리 후기 작성 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 작성 기능 구현입니다. 요리 후기 조회 기능의 경우 아래의 포스팅을 참고해주시면 감사하겠습니다. [요리 후기 조회] Ajax로 요리 후기 조회 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 조 seongeun-it.tistory.com 대략적인 UI는 다음과 같습니다. * 별점 기능 구현 CSS와 JavaScript는 수정 중입니다 업데이트되는 대로 변경하겠습니다. 1. SQL I.. [요리 후기 조회] Ajax로 요리 후기 조회 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 이번 포스팅은 요리 후기 조회 기능 구현입니다. 요리 후기의 경우 조회하기는 Ajax를 이용해서, 작성하기는 Servlet을 이용해서 기능 구현했습니다. 대략적인 UI는 다음과 같습니다. 1. SQL SELECT REVIEW_NO ,NICKNAME ,REVIEW_CONTENT ,STAR ,IMG_NAME ,R.ENROLL_DATE ENROLL_DATE ,PROFILE_IMG FROM REVIEW R JOIN MEMBER USING(USER_NO) WHERE RECIPE_NO = ? ORDER BY ENROLL_DATE DESC 요리 후기 조회 시 필.. [댓글조회] Ajax로 댓글 조회 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. [댓글작성] Ajax로 댓글 작성 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 레시피 상세 보기 페이지에 seongeun-it.tistory.com 위의 포스팅과 이어지는 내용입니다. 이번 포스팅은 댓글 조회 기능 구현입니다. 저의 경우 댓글 조회 기능 -> 댓글 작성 기능 순으로 구현했습니다. 대략적인 UI는 다음과 같습니다. 1. SQL SELECT REPLY_NO ,NICKNAME ,REPLY_CONTENT ,R.ENROL.. [댓글작성] Ajax로 댓글 작성 기능 구현 * 세미 프로젝트에서 구현한 기능들을 복습 겸 정리해보려고 합니다. 당연한 이야기이지만, 제 코드가 정답은 아니기 때문에 감안하고 읽어주시면 감사하겠습니다. 레시피 상세 보기 페이지에서 댓글 기능을 AJAX를 이용해서 구현했습니다. 대략적인 UI는 다음과 같습니다. 저는 SQL ->View->Controller ->Service-> DAO 순서로 작업하는 것을 좋아합니다. 왜냐면.. 그게 좋으니까요.. * 헉 DAO가 무슨 뜻이지? 궁금하다면 ? 더보기 DAO(Data Access Object)는 DB를 사용해 데이터를 조화하거나 조작하는 기능을 전담하도록 만든 오브젝트를 말한다 1. SQL INSERT INTO REPLY ( REPLY_NO ,USER_NO ,RECIPE_NO ,REPLY_CONTENT.. [SemiProject] DB에 담긴 값들 JSP로 조회해오기 SELECT REPLY_NO ,NICKNAME ,TO_CHAR(R.ENROLL_DATE,'YY/MM/DD') CREATE_DATE ,REPLY_CONTENT FROM REPLY R JOIN MEMBER M USING (USER_NO) WHERE M.STATUS = 'Y' AND RECIPE_NO = ? ORDER BY R.ENROLL_DATE DESC DB에는 총 3개의 행이 보여지는데, console에는 오로지 한 행의 데이터만 보여진다. 아무리봐도 뭐가 문제인지 모르겠다고 싶었는데 commit을 안해서 그런 거 였다.. 이전 1 다음
