타임라인

[BlackLair]

타임라인

사용자들이 업로드한 게시글들을 볼 수 있는 타임라인 기능 구현

• [ ] 타임라인 화면 구성
• [x] 모든 게시글을 표시하는 View 반환 메소드 구현
• [x] 좋아요한 게시글만 표시하는 View 반환 메소드 구현
• [x] 게시글 작성 및 삭제 API 구현
• [x] 댓글 작성 및 삭제 API 구현
• [x] 좋아요 및 좋아요 취소 API 구현
• [x] 각 UI에 대한 ajax 요청 구현

[BlackLair]

타임라인 기능 구현

❗ Done

• 전체 게시물을 최신 순으로 5개까지 표시
• 자신이 작성한 게시물에만 삭제 버튼 표시
• 자신이 게시한 게시물만 삭제 가능하도록 기능 구현
• 게시물 삭제 시 페이지에서 해당 게시물만 사라짐

• 좋아요 개수 확인

  📝 Todo-list

  • [x] 화면을 끝까지 스크롤했을 때 이전 게시물 추가 로딩

[BlackLair]

좋아요 기능 구현

❗ Done

• 타임라인에서 각 게시글의 좋아요 개수 표시
• 본인이 해당 게시글 좋아요한 여부에 따라 아이콘 다르게 표시
• 좋아요를 하거나 취소하는 즉시 좋아요 개수 갱신

• 삭제되어 존재하지 않는 글에 좋아요 누르면 알림 메시지 출력 후 게시글 사라짐

  ❓ Problems

• JavaScript에서 ajax 요청 후 success function 내에서 $(this)를 통해 이벤트가 호출된 jQuery 객체를 가져오지 못함
  • ajax 호출 전 별도의 변수에 jQuery 객체를 let 변수에 저장한 후 success function 내에서 해당 변수를 사용
  • https://github.com/BlackLair/JWBook/commit/8bccb23621878210bc1cdae0511590e966a2452a timeline.jsp 45, 53, 54줄 참고

• 좋아요 시 Failed to convert value of type 'java.lang.String' to required type 'int'; For input string: "" 에러

  • Repository의 메소드에 해당하는 태그를 Mapper에 작성하지 않아 발생
  • Type mismatch의 경우 Mapper 쪽을 주로 살펴보는 것이 좋을 듯. Java쪽에서 타입을 잘못 입력했다면 컴파일 에러가 발생할 것이다.

  📝 Todo-list

  • [x] 좋아요한 글만 볼 수 있는 기능 구현

[BlackLair]

게시물 등록 기능 UI 구성

❗ Done

• 파일 업로드, 내용 입력 input 구성

  📝 Todo-list

  • [x] 게시물 업로드 버튼 구성

[BlackLair]

8fcb0cc 기존에 ajax 콜백 함수 내에서 이벤트가 호출된 jQuery 객체를 사용하기 위해 별도의 변수에 저장했던 내용 수정

• ajax 콜백 함수에서는 $(this)가 response를 반환하게 된다.
• ajax 속성에 context:this를 입력하면 ajax 콜백 함수 내에서 $(this)를 사용하면 이벤트가 호출된 jQuery 객체를 가져올 수 있다.

[BlackLair]

게시물 업로드 기능 구현

❗ Done

• 게시물들을 불러와 화면에 표시하는 기능을 loadPost() 함수로 정의
• 불러온 게시물들의 각 UI에 이벤트를 등록하는 기능을 setPostUIEvent() 함수로 정의
• JavaScript에서 게시물 업로드 요청 기능 구현
  • 내용이 비어있는 경우 경고 메시지
  • ajax 요청에 담을 데이터는 문자열이 아닌 파일이 포함되어 있으므로 FormData 객체를 생성하고 그 안에 담는다.
  • ajax 요청에 enctype, processData, contentType 속성을 추가로 부여해야 한다.
  • 업로드 성공 시 loadPost() 함수를 통해 게시물들을 다시 로딩하여 화면에 보여준다.

• 게시물 업로드 요청 처리 기능 구현

  • 파일을 RequestParam으로 전달받는 경우 변수 타입은 MultipartFile
  • FileManager 클래스 : 전달받은 파일을 서버 내 특정 디렉토리에 저장하고, 클라이언트가 이 파일에 접근할 수 있는 url 주소를 반환하는 메소드 구현
  • WebMvcConfig 클래스 : xml 설정을 대신하는 스프링 설정 클래스
    • 클라이언트가 특정 형식의 url로 리소스를 요청했을 때 해당 리소스를 서버의 어떤 디렉토리에서 찾을지 설정할 수 있도록 함.

  📝 Todo-list

  • [ ] loadPost(), setPostUIEvent() 함수를 별도의 JavaScript 파일로 분리

[BlackLair]

📝 Todo-list

• [x] 각 게시글의 댓글은 게시물 당 1번의 ajax 요청으로 불러오도록 구현. 이미 로드된 게시물들의 댓글을 보여줄 div 태그는 jQuery의 $(select).each를 활용
• [x] 댓글을 작성하거나 삭제했을 때 해당 게시글의 댓글 목록을 새로고침

[BlackLair]

✏ Memo

• Entity 클래스는 정보를 조회하는 용도로만 사용
• DTO 내에 Entity 클래스를 포함시켜서 구현하거나, 필요한 멤버만 가진 DTO를 설계해보도록 하자.
• 현재 timeline 패키지 하나로 좋아요, 댓글 등 너무 많은 기능이 합쳐져 있음
  • 추후에 여러 개의 패키지로 나누는 리팩토링 작업 필요

[BlackLair]

https://github.com/BlackLair/JWBook/commit/ba645b006c2a65349bd2ae05f6741eb7753de5a0 이제 게시글들에 대한 모든 정보(Post)를 그대로 Model에 등록하지 않고 필요한 정보들만 뽑아서 DTO 클래스 객체(PostDetail)로 만들어 Model에 전달한다. 댓글(Reply) 클래스도 같은 방식으로 코드를 재작성해야한다.

[BlackLair]

❗ Done

• 댓글 삭제 기능 구현b2f6f16
  • 댓글 삭제 시 해당 글의 댓글 목록 새로고침
• 기능별 소스코드 패키지 분리7ac7e71
  • 댓글, 좋아요, 게시물 관련 기능이 timeline 패키지에 모여 있어 소스 코드 길이가 너무 길어짐
  • 패키지, 소스 코드를 분리하여 기능별로 구분하기 쉽게 리팩토링

[BlackLair]

❗ Done

• 타임라인 스크롤 끝까지 내렸을 때 이전 게시글 추가 로드
• 게시글은 최대 5개씩 가져온다.

• 게시글을 삭제하여 스크롤이 짧아지는 경우에도 게시글 추가 로드

  ❓ Problems

• 이전 게시글 로드 후 게시글의 UI 버튼 클릭 시 이벤트가 2번 호출되는 버그가 있었다.
  • 댓글 UI들은 로드 시 html을 새로 덮어쓰기 때문에 문제 없음
  • 이전 게시글이 로드되면 html 요소를 append하여 이어붙임
  • 먼저 로드한 게시물 요소들이 남아있기 때문에 '기존에 등록된 이벤트'와 이전 게시글 로드 시 '클래스를 통해 새로 등록된 이벤트' 2개의 이벤트를 가지게 된다.
  • 게시글이 로드될 때 게시물 UI의 이벤트는 모두 등록 해제한 후 다시 등록하는 것으로 해결하였다.

[BlackLair]

❗ Done

• 좋아요한 글만 보기 버튼 기능 구현 완료
• 좋아요한 글만 보기 버튼 클릭 시 모든 글 보기 버튼으로 바뀜
• JavaScript 측에선 현재 버튼의 상태를 저장해 글 목록 요청 시 동일 ajax 요청에서 url만 바꿔서 게시글을 요청
• Server에선 좋아요한 게시글 View를 반환하는 메소드를 별도로 구현

[BlackLair]

📝 Todo-list

• [x] 게시글 삭제 시 게시글에 등록된 사진 파일도 같이 삭제되도록 해야 한다.

[BlackLair]

❗ Done

• 게시물 삭제 시 사진 파일 및 사진 파일이 있었던 디렉토리까지 삭제

• 게시물 삭제 버튼을 Option 버튼으로 대체

  • Option 버튼 클릭 시 삭제 버튼을 포함한 팝업 창(모달)이 나타남
  • 모달이 나타날 때마다 게시글의 postId를 설정하므로 게시글이 로드될 때마다 삭제 버튼의 클릭 이벤트를 재등록할 필요가 없어짐

  ❓ Problems

• 삭제 버튼 클릭 시 글이 삭제되고 모달 화면이 사라지나 웹 페이지 화면이 반투명한 상태로 유지되어 다른 UI와 상호작용할 수 없는 상태가 되어있었음
  • 모달 창을 자동으로 숨길 때 모달 객체를 그대로 사용하지 않고 부트스트랩의 모달 객체를 가져오는 함수를 별도로 이용해서 해결하였음

let optionModal = document.getElementById("optionModal"); let modalInstance = bootstrap.Modal.getInstance(optionModal); ... modalInstance.hide(); // 모달을 인위적으로 숨기는 작업