FEAT : 무한스크롤 구현

junvhui · Feb 25, 2024 · f200a88 · f200a88
1 parent 7b70c08
commit f200a88
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/backend/app.js b/backend/app.js
@@ -27,9 +27,11 @@ async function connectToMongoDB() {
 
 connectToMongoDB();
 
+const PAGE_SIZE = 3;
+
 app.get('/article', async (req, res) => {
   const pageNumber = req.query.pageNumber ? parseInt(req.query.pageNumber) : 1;
-  const PAGE_SIZE = 3;
+
   try {
     const articles = await articleCollection
       .find({})

diff --git a/src/MainPage/List.tsx b/src/MainPage/List.tsx
@@ -199,7 +199,6 @@ const Post = () => {
   // 이적 기사 최신순 정렬
 
   console.log(articleData);
-  console.log('article');
 
   // Intersection Observer를 이용하여 무한 스크롤 감지
   const [pageNumber, setPageNumber] = useState(1);
@@ -213,13 +212,12 @@ const Post = () => {
     }
   }, [inView]);
 
-  // axios를 이용하여 데이터를 가져옴
+  // 이전 코드와 동일하게 axios를 이용하여 데이터를 가져옴
   useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await axios.get(`/article?pageNumber=${pageNumber}`);
-        const newData = response.data.article.reverse();
-
+        const newData = response.data.article;
         setArticleData((prevData) => [...prevData, ...newData]); // 기존 데이터와 새로운 데이터 결합
       } catch (error) {
         console.error('Error fetching user data:', error);
@@ -276,7 +274,7 @@ const Post = () => {
         ) : (
           <EmptyContainer>기사가 없습니다.</EmptyContainer>
         )}
-        <div ref={ref}>ㅤ</div>
+        <div ref={ref}>ㅤㅤㅤ</div>
       </PostContent>
     </PostWrap>
   );

diff --git a/src/MainPage/Test.tsx b/src/MainPage/Test.tsx
@@ -217,7 +217,7 @@ const Post = () => {
     const fetchData = async () => {
       try {
         const response = await axios.get(`/article?pageNumber=${pageNumber}`);
-        const newData = response.data.articles;
+        const newData = response.data.article;
         setArticleData((prevData) => [...prevData, ...newData]); // 기존 데이터와 새로운 데이터 결합
       } catch (error) {
         console.error('Error fetching user data:', error);