FEAT : 무한 스크롤 구현

junvhui · Feb 24, 2024 · 34af1a7 · 34af1a7
1 parent 3667eca
commit 34af1a7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/backend/app.js b/backend/app.js
@@ -27,11 +27,9 @@ 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/server.js b/server.js
@@ -29,8 +29,16 @@ async function connectToMongoDB() {
 connectToMongoDB();
 
 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({}).toArray();
+    const articles = await articleCollection
+      .find({})
+      .sort({ _id: -1 }) // _id를 기준으로 역순으로 정렬
+      .skip((pageNumber - 1) * PAGE_SIZE)
+      .limit(PAGE_SIZE)
+      .toArray();
+
     res.json({ result: 'success', article: articles });
   } catch (error) {
     console.error('Error fetching articles:', error);

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