21.12.24 이미지 업로드 디버깅

README.md

@@ -40,6 +40,7 @@ https://www.jiniaslog.co.kr/
 - Javascript
 - Html/Css
 - Thymeleaf
+- Bootstrap 5
 
 ### 기타 주요 라이브러리
 - Lombok
@@ -275,6 +276,7 @@ tagify 라이브러리를 사용하여 태그 기능을 구현하였고 태그
 
 [자바스크립트 무한 스크롤 렌더링 로직](https://github.com/jinia91/blog/blob/a1d9381d8675ef01fbe3cf7371fe642a1847a943/src/main/resources/static/js/infinityScroll.js#L5)
 
+[오프셋 페이징을 커서페이징으로 리팩토링하기](https://www.jiniaslog.co.kr/article/view?articleId=202)
 
 ### CI/CD 무중단 배포
 

src/main/java/myblog/blog/article/repository/ArticleRepository.java

@@ -34,7 +34,7 @@ public interface ArticleRepository extends JpaRepository<Article, Long> {
      */
     @Query("select a " +
             "from Article a " +
-            "order by a.id desc")
+            "order by a.id desc ")
     List<Article> findByOrderByIdDescWithList(Pageable pageable);
 
     /*

src/main/java/myblog/blog/article/service/ArticleService.java

@@ -2,7 +2,6 @@ package myblog.blog.article.service;
 
 import lombok.RequiredArgsConstructor;
 import myblog.blog.article.domain.Article;
-import myblog.blog.article.dto.ArticleDtoForMain;
 import myblog.blog.category.domain.Category;
 import myblog.blog.member.doamin.Member;
 import myblog.blog.article.dto.ArticleForm;
@@ -13,7 +12,6 @@ import myblog.blog.tags.service.TagsService;
 import org.kohsuke.github.GHRepository;
 import org.kohsuke.github.GitHub;
 import org.kohsuke.github.GitHubBuilder;
-import org.modelmapper.ModelMapper;
 import org.springframework.cache.annotation.CacheEvict;
 import org.springframework.cache.annotation.Cacheable;
 import org.springframework.data.domain.Page;
@@ -24,7 +22,6 @@ import org.springframework.transaction.annotation.Transactional;
 import org.springframework.beans.factory.annotation.Value;
 import java.io.IOException;
 import java.util.List;
-import java.util.stream.Collectors;
 
 @Service
 @Transactional
@@ -102,7 +99,8 @@ public class ArticleService {
 
         return lastArticleId.equals(0L)?
                 articleRepository
-                        .findByOrderByIdDescWithList(PageRequest.of(0, 5)):
+                        .findByOrderByIdDescWithList(PageRequest.of(0, 5))
+                :
                 articleRepository
                         .findByOrderByIdDesc(lastArticleId, PageRequest.of(0, 5));
 

src/main/resources/templates/layout/fragments.html

@@ -384,6 +384,26 @@
         return document.getElementById("tags").value !== "";
     }
 
+    //내부 이미지 업로드
+    function uploadImage(blob) {
+        let token = getCsrfToken();
+        let formData = new FormData();
+        formData.append('img', blob);
+
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/article/uploadImg", false);
+        xhr.setRequestHeader("contentType", "multipart/form-data");
+        xhr.setRequestHeader("X-XSRF-TOKEN", token);
+        xhr.send(formData);
+
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            return xhr.response;
+        } else {
+            alert("이미지가 정상적으로 업로드되지 못했습니다.")
+        }
+    }
+
+
     // 전송
     function post() {
 
@@ -512,6 +532,26 @@
         }
     });
 
+    //내부 이미지 업로드
+    function uploadImage(blob) {
+        let token = getCsrfToken();
+        let formData = new FormData();
+        formData.append('img', blob);
+
+        const xhr = new XMLHttpRequest();
+        xhr.open("POST", "/article/uploadImg", false);
+        xhr.setRequestHeader("contentType", "multipart/form-data");
+        xhr.setRequestHeader("X-XSRF-TOKEN", token);
+        xhr.send(formData);
+
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            return xhr.response;
+        } else {
+            alert("이미지가 정상적으로 업로드되지 못했습니다.")
+        }
+    }
+
+
     // 유효성 검사
     function checkTitle() {
         return document.getElementById("title").value !== "";