\ud83d\udc49\ud83c\udffb \uc774\ubc88\uc5d0\ub294 \uc54c\ub9bc \uae30\ub2a5\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4 \ubd05\ub2c8\ub2e4. Next, we will take a look at the notification feature.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc774\uc804\uc5d0 \ud398\uc774\uc9c0\ub124\uc774\uc158\uc744 \uc704\ud574 \ub2e4\ub8e8\uc5c8\ub358 \ud0c0\uc784\ub77c\uc778 \uad6c\uc870\uc640 \ub9e4\uc720 \uc720\uc0ac\ud569\ub2c8\ub2e4. It is very similar to the timeline structure we previously covered for pagination.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb API\ubd80\ubd84\uc758 \ud398\uc774\uc9c0\ub124\uc774\uc158\uc740 \uc544\uc9c1 \uc644\uc804\ud788 \uad6c\ud604\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. Pagination for the API section has not yet been fully implemented.<\/p>\n\n\n\n
\u2714\ufe0f themeex\ub97c \ud14c\ub9c8\ub85c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \uc54c\ub9bc UI\ubd80\ubd84\uc740 \ud504\ub85c\uc81d\ud2b8 \ub8e8\ud2b8\ub85c \ubd80\ud130 \uc544\ub798\uc758 \uacbd\ub85c\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. If you are using the ‘themeex’ theme, the notification UI components can be found at the following path, relative to the project root:<\/p>\n\n\n\n
1)tsx\ud30c\uc77c\uc758 \uc704\uce58\ub294 \ud0c0\uc784\ub77c\uc778 \ud30c\uc77c\uc758 \uc704\uce58\uc640 \ub3d9\uc77c\ud569\ub2c8\ub2e4. The location of the .tsx file is the same as the location of the timeline file.<\/p>\n\n\n\n
1)\ud398\uc774\uc9c0\ub124\uc774\uc158 \uad6c\ud604\uc744 \uc704\ud574\uc11cuseCursorPagination \ud6c5\uc744 \ud638\ucd9c\ud558\uace0 fetcher\uc5d0 \uc775\uba85\ud568\uc218\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4. To implement pagination, call the useCursorPagination<\/code> hook and pass an anonymous function to the fetcher<\/code>.<\/p>\n\n\n\n
1)\uc0ac\uc6a9\uc790\uac00 \ud654\uba74 \uc2a4\ud06c\ub864\uc744 \ub0b4\ub9ac\uba74 \ubb34\ud55c\uc2a4\ud06c\ub864 \uc635\uc800\ubc84\uac00 <div ref={loaderRef}\ub97c \ud655\uc778\ud558\uba74 fetchNextPage()\ud568\uc218\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4. When the user scrolls down the screen, the infinite scroll observer detects the <div ref={loaderRef}><\/code> element and triggers the fetchNextPage()<\/code> function.<\/p>\n\n\n\n
2)fetchNextPage()\ud568\uc218\ub294 userCursorPagination\ud6c5\uc5d0\uc11c \ub9ac\ud134\ub418\ub294 \ud568\uc218\uc785\ub2c8\ub2e4. The fetchNextPage()<\/code> function is a function returned by the userCursorPagination<\/code> hook.<\/p>\n\n\n\n
\/\/ app\/hooks\/useCursorPagination.ts\n... ...\nconst fetchNextPage<\/strong> = useCallback(async () => {\n... ...\n const res: any = await fetcher<\/strong>(nextCursorRef.current || undefined);\n... ...\n setPages(prev => {\n \/\/ Set : \uc911\ubcf5 \uc5c6\ub294 \uc9d1\ud569 \/ Set with no duplicates\n const seen = new Set(prev.flat().map((p:any) => p.id));\n const filtered = data.filter((p:any) => p.id &&!seen.has(p.id));\n if (filtered.length === 0) {\n setHasNextPage(false);\n return prev;\n }\n return [...prev, filtered];\n });\n... ...\n} \n... ...\n return {\n flatData,\n pages: pages.map(data => ({ data })),\n fetchNextPage<\/strong>, \/\/ \ub2e4\uc74c \ud398\uc774\uc9c0 \uac00\uc838\uc624\ub294 \ud568\uc218 \/ Function to fetch the next page\n hasNextPage, \/\/ \ub2e4\uc74c \ud398\uc774\uc9c0\uac00 \uc788\ub294\uc9c0 \/ Whether there is a next page\n isFetchingNextPage, \/\/ \ub2e4\uc74c \ud398\uc774\uc9c0 \ub85c\ub529\uc911\uc778\uc9c0 \/ Checking if the next page is loading...\n isLoading, \/\/ \uccab \ub85c\ub529\uc911\uc778\uc9c0 \/ Is it loading for the first time?\n };<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ub370\uc774\ud130\ub97c UI\uc5d0 \ucd9c\ub825 \/ Display data in the UI<\/p>\n\n\n\n
\u2714\ufe0f Notification.tsx\uc5d0\uc11c useCursorPagination()\ud6c5\uc758 \ud30c\ub77c\uba54\ud130\ub85c \uc804\ub2ec\ub418\ub294 \ucf5c\ubc31\ud568\uc218(fetcher)\uc5d0\uc11c \uc2e4\ud589\ub429\ub2c8\ub2e4. It is executed within the callback function (fetcher) that is passed as a parameter to the useCursorPagination()<\/code> hook in Notification.tsx<\/code>.<\/p>\n\n\n\n
\u2714\ufe0f \uc0ad\uc81c\uc608\uc815 \ucf54\ub4dc \/ Code scheduled for deletion<\/p>\n\n\n\n
1)\ud398\uc774\uc9c0\ub124\uc774\uc158\uc774 \uc544\uc9c1 API\uc5d0\uc11c \uad6c\ud604\ub418\uc9c0\uc54a\uc544 Tursky\uc571\uc5d0\uc11c max_id\ub97c \ud638\ucd9c\ud558\uba74 \ubb34\ud55c \ub85c\ub529\ub418\ub294 \ubd80\ubd84\uc744 \ub9c9\uc544\ub193\uc740 \ucf54\ub4dc\uc785\ub2c8\ub2e4. This code prevents an infinite loading state in the Tursky app that occurs when max_id<\/code> is called, as pagination has not yet been implemented in the API.<\/p>\n\n\n\n
2)max_id\ub294 max_id\ub97c \uae30\uc900\uc73c\ub85c \ub370\uc774\ud130 \ubca0\uc774\uc2a4\uc5d0\uc11c \uae00 \uc791\uc131 \ub0a0\uc9dc\ub97c \uac80\uc0c9\ud569\ub2c8\ub2e4. max_id<\/code> is used to retrieve the post creation date from the database, based on the max_id<\/code> value.<\/p>\n\n\n\n
3)\uadf8\ub9ac\uace0 \uac80\uc0c9\ub41c \ub0a0\uc9dc \ubcf4\ub2e4 \ub354 \uc774\uc804 \ub0a0\uc9dc\uc758 \uae00\uc744 \uac80\uc0c9\uc744 \ud569\ub2c8\ub2e4. And it searches for posts with a date earlier than the date found.<\/p>\n\n\n\n
3)max_id\ub294 \ud398\uc774\uc9c0\ub124\uc774\uc158 \uad6c\ud604\uc744 \uc704\ud574 \uc5b4\ub514\ubd80\ud130 \uae00\uc744 \ud638\ucd9c\ud560\uac83\uc778\uc9c0\uc5d0 \ub300\ud55c \uae30\uc900\uc774 \ub429\ub2c8\ub2e4. max_id<\/code> serves as a reference point for determining where to begin fetching posts when implementing pagination.<\/p>\n\n\n\n
4)\uc704\uc758 \ucf54\ub4dc\ub294 \ud398\uc774\uc9c0\ub124\uc774\uc158\uc774 \uc644\uc804\ud788 \uad6c\ud604\ub418\uba74 \uc0ad\uc81c \ub429\ub2c8\ub2e4. The code above will be removed once pagination is fully implemented.<\/p>\n\n\n\n
\u2714\ufe0f \ub370\uc774\ud130 \uc218\uc9d1 \ubc0f \ub9ac\ud134 \/ Data Collection and Return<\/p>\n\n\n\n
1)notifications \ubc30\uc5f4\uc740 \uc54c\ub9bc \ub370\uc774\ud130\ub97c \uc218\uc9d1\ud574\uc11c json\ub370\uc774\ud130\ub85c \ub9ac\ud134\ud569\ub2c8\ub2e4. The notifications<\/code> array collects notification data and returns it as JSON data.<\/p>\n\n\n\n
2)\uccab \ubc30\uc5f4(0)\ubd80\ud145 limit\uae4c\uc9c0 \uac12\uc744 \ub9ac\ud134\ud569\ub2c8\ub2e4. Returns values \u200b\u200bfrom the first index (0) up to the limit.<\/p>\n\n\n\n
\u2714\ufe0f Follow\uc54c\ub9bc,Like\uc54c\ub9bc,Reblog(=boost)\uc54c\ub9bc Follow notifications, Like notifications, Reblog (=boost) notifications<\/p>\n\n\n\n
— \uc544\ub798\uc758\ucf54\ub4dc\ub97c \ubcf4\uba74 \uac01 \uc54c\ub9bc\uc758 \uac12\uc744 notifications\ubc30\uc5f4\uc5d0 \ucd94\uac00\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.(notifications.push) Looking at the code below, you can see that the value of each notification is added to the notifications<\/code> array.<\/p>\n\n\n\n
1.Follow\uc54c\ub9bc \/ Follow notifications\n\n\n try {\n const follows = db.prepare(`SELECT id, actor, inbox, username, created_at FROM followers WHERE username =? ORDER BY created_at DESC LIMIT 20`).all(username) as any[];\n for (let i=0; i<follows.length; i++) {\n const row = follows[i];\n const actor = row.actor || '';\n if (actor.includes(myActor)) continue; \/\/ \uc790\uae30 \uc81c\uc678!\n const parsed = parseActor(actor, i);\n notifications.push<\/strong>({\n id: `follow_${i}_${row.id}`,\n type: 'follow',\n created_at: row.created_at? new Date(row.created_at).toISOString() : new Date().toISOString(),\n account: makeAccount(parsed, i, row.created_at),\n status: null,\n });\n }\n } catch(e){ console.error('follow', e); }\n\n\n<\/code><\/pre>\n\n\n\n
2.Like\uc54c\ub9bc \/ Like notifications\n\n try {\n const likes = db.prepare(`SELECT id, actor, object, username, created_at FROM likes WHERE username =? ORDER BY created_at DESC LIMIT 30`).all(username) as any[];\n console.log(`\u2764 likes table rows=${likes.length} for ${username}`);\n for (let i=0; i<likes.length; i++) {\n const row = likes[i];\n const actor = row.actor || '';\n const objectId = row.object || '';\n console.log(` like: actor=${actor} object=${objectId}`);\n\n \/\/ \uc790\uae30 \uc790\uc2e0 \uc88b\uc544\uc694 \uc81c\uc678 \/ Excludes your own \"likes.\"\n if (actor.includes(myActor) || actor.includes(`\/users\/${username}`) && actor.includes(DOMAIN)) {\n console.log(` -> self like skip!`);\n continue;\n }\n\n const parsed = parseActor(actor, i+100);\n\n const isMyPost = objectId.includes(DOMAIN) || objectId.includes('aloy-horizon');\n if (!isMyPost) {\n console.log(` -> not my post, skip (outgoing like)`);\n continue;\n }\n\n \/\/ \uc6d0\ubcf8 \uae00 \ucc3e\uae30 \/ Find the original post\n let statusObj: any = null;\n try {\n const shortId = objectId.split('\/').pop()?.split('?')[0];\n const post = db.prepare(`SELECT id, content, created_at FROM posts WHERE id =? OR id LIKE? LIMIT 1`).get(objectId, `%${shortId}%`) as any;\n if (post) {\n statusObj = {\n id: post.id,\n uri: objectId,\n url: objectId,\n content: post.content || '<p>\ub0b4 \uae00<\/p>',\n created_at: post.created_at? new Date(post.created_at).toISOString() : new Date().toISOString(),\n account: { id: '1', username, acct: `${username}@${DOMAIN}`, display_name: username, avatar: `https:\/\/${DOMAIN}\/icon.png` },\n visibility: 'public', reblogs_count: 0, favourites_count: 0, replies_count: 0,\n };\n } else {\n... ...\n }\n } catch {}\n\n notifications.push<\/strong>({\n id: `fav_${i}_${row.id}`,\n type: 'favourite',\n created_at: row.created_at? new Date(row.created_at).toISOString() : new Date().toISOString(),\n account: makeAccount(parsed, i+100, row.created_at),\n status: statusObj,\n });\n }\n } catch(e){ console.error('likes notif', e); }<\/code><\/pre>\n\n\n\n
3.Reblog \/ Reblog notifications\n\n try {\n const boosts = db.prepare(`SELECT id, actor, object, username, created_at FROM announces WHERE username =? ORDER BY created_at DESC LIMIT 20`).all(username) as any[];\n for (let i=0; i<boosts.length; i++) {\n const row = boosts[i];\n const actor = row.actor || '';\n if (actor.includes(myActor)) continue;\n const parsed = parseActor(actor, i+200);\n notifications.push<\/strong>({\n id: `reblog_${i}_${row.id}`,\n type: 'reblog',\n created_at: row.created_at? new Date(row.created_at).toISOString() : new Date().toISOString(),\n account: makeAccount(parsed, i+200, row.created_at),\n status: null,\n });\n }\n } catch(e){}<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ub370\uc774\ud130 \ub0b4\ub9bc\ucc28\uc21c \uc815\ub82c \/ Sort data in descending order<\/p>\n\n\n\n
notifications.sort((a,b)=> new Date(b.created_at<\/strong>).getTime() - new Date(a.created_at<\/strong>).getTime());<\/code><\/pre>\n\n\n\n
1)b – a \ub0b4\ub9bc\ucc28\uc21c, a – b \uc624\ub984\ucc28\uc21c b – a for descending order, a – b for ascending order<\/p>\n\n\n\n
2)\uc704\uc758 \ucf54\ub4dc\ub294 \ub0b4\ub9bc\ucc28\uc21c \uc815\ub82c \uc785\ub2c8\ub2e4. The code above sorts in descending order.<\/p>\n\n\n\n
3)sort\ud568\uc218\ub294 \uc790\uccb4 \ub0b4\ubd80 \uc54c\uace0\ub9ac\uc998\uc5d0 \ub530\ub77c \uc815\ub82c\uae30\ub2a5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. The sort<\/code> function performs sorting based on its own internal algorithm.<\/p>\n\n\n\n
“And everything you ask in prayer, believing, you will receive.”<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb \uc774\ubc88\uc5d0\ub294 \uc54c\ub9bc \uae30\ub2a5\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4 \ubd05\ub2c8\ub2e4.Next, we will take a look at the notification feature. \ud83d\udc49\ud83c\udffb \uc774\uc804\uc5d0 \ud398\uc774\uc9c0\ub124\uc774\uc158\uc744 \uc704\ud574 \ub2e4\ub8e8\uc5c8\ub358 \ud0c0\uc784\ub77c\uc778 \uad6c\uc870\uc640 \ub9e4\uc720 \uc720\uc0ac\ud569\ub2c8\ub2e4.It is very similar to the timeline structure we previously covered for pagination. \ud83d\udc49\ud83c\udffb API\ubd80\ubd84\uc758 \ud398\uc774\uc9c0\ub124\uc774\uc158\uc740 \uc544\uc9c1 \uc644\uc804\ud788 \uad6c\ud604\ub418\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4.Pagination for the API section has not yet been fully implemented. \ud83d\udcc1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,27,1,7],"tags":[],"class_list":["post-12990","post","type-post","status-publish","format-standard","hentry","category-news","category-nextjs","category-uncategorized","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=12990"}],"version-history":[{"count":57,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12990\/revisions"}],"predecessor-version":[{"id":13051,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/12990\/revisions\/13051"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=12990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=12990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=12990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/10\/Notifications-jpg.jpg\")