\ud83d\udc49\ud83c\udffb \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \ud314\ub85c\uc6b0\ub9ac\uc2a4\ud2b8 \ubd80\ubd84\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4 \ubd05\ub2c8\ub2e4. In this post, we take a look at the “following” list section.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ud314\ub85c\uc6b0\ub9ac\uc2a4\ud2b8\ub294 \ub0b4\uac00 \ub2e4\ub978\uc11c\ubc84\uc758 \uc0ac\uc6a9\uc790\ub97c \ud314\ub85c\uc6b0\ud55c \uc0ac\ub78c\uc758 \ubaa9\ub85d\uc785\ub2c8\ub2e4. The “following” list is a list of users from other servers whom you have chosen to follow.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb\uc774 \ubd80\ubd84\uc740 \ud14c\ub9c8\ub514\ub809\ud1a0\ub9ac\uc758 MainTheme.tsx\ud30c\uc77c\uc5d0\uc11c \ud638\ucd9c\ub418\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4. This part is called from the MainTheme.tsx file in the theme directory.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \ud398\uc774\uc9c0\ub124\uc774\uc158 \ubd80\ubd84\uc5d0\uc11c \uc124\uba85\ud588\ub358 TimelineList\ubd80\ubd84\uacfc \ub9e4\uc6b0 \uc720\uc0ac\ud569\ub2c8\ub2e4. This is very similar to the TimelineList<\/code> component discussed in the section on pagination.<\/p>\n\n\n\n
\u2714\ufe0f themeex\ub97c \ud14c\ub9c8\ub85c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0 \ud314\ub85c\uc6b0\ub9ac\uc2a4\ud2b8 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 UI component for the follow list can be found at the following path, relative to the project root:<\/p>\n\n\n\n
1)\uc704\uc640 \uac19\uc740 \ub77c\uc6b0\ud2b8\ub85c \uc2e4\ud589\uc2dc \ud314\ub85c\uc6b0 \ub9ac\uc2a4\ud2b8\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. You can view the follow list by accessing the route mentioned above.<\/p>\n\n\n\n
2)\ub77c\uc6b0\ud2b8 \uc2e4\ud589\uc2dc @userid \ub610\ub294 usersui\/userid \uc774\ub807\uac8c \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. When executing a route, you can use either @userid<\/code> or usersui\/userid<\/code>.<\/p>\n\n\n\n
3)\uc774 \ubd80\ubd84\uc740 next.config.ts\uc5d0 \ubcf4\uc2dc\uba74 \uc774 \uc124\uc815\uc774 \uc788\uc2b5\ub2c8\ub2e4. You can find this configuration in next.config.ts<\/code>.<\/p>\n\n\n\n
4)\ubcf8\uc778\uc758 \uacc4\uc815\uc73c\ub85c SNS\ud398\uc774\uc9c0\uc5d0 \uc811\uc18d\ud6c4 \ud504\ub85c\ud544 \ubd80\ubd84\uc758 “\ud314\ub85c\uc789\/Followng”\uc744 \ud074\ub9ad\ud558\uba74 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. You can view this by accessing your social media page and clicking on “Following” in your profile section.<\/p>\n\n\n\n
1)UI \ubd80\ubd84 \ucf54\ub4dc\ub97c \ud655\uc778\ud558\uc2dc\uba74 \ud398\uc774\uc9c0\ub124\uc774\uc158 \uad6c\ud604\uc744 \uc704\ud574\uc11c useCursorPagination \ud6c5\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. If you look at the UI-related code, you will see that the useCursorPagination<\/code> hook is being used to implement pagination.<\/p>\n\n\n\n
2)\ucf5c\ubc31\ud568\uc218\ub85c useCursorPagination\uc5d0 \uc804\ub2ec\ud569\ub2c8\ub2e4 Pass it to useCursorPagination<\/code> as a callback function.<\/p>\n\n\n\n
3)\uadf8\ub9ac\uace0 \ud6c5\ub0b4\ubd80\uc758 \ud568\uc218\uc640 \ubcc0\uc218 \uac12\uc744 \ub2e4\uc2dc \ub9ac\ud134\ud574\uc11c FollowingList.tsx\uc5d0\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. Then, the functions and variable values \u200b\u200bfrom within the hook are returned so that they can be used in FollowingList.tsx.<\/p>\n\n\n\n
4)\uc774\ub7f0 \ubc29\uc2dd\uc740 \uae30\uc874\uc758 \ud0c0\uc784\ub77c\uc778\uc5d0\uc11c \uad6c\ud604\ud558\ub294 \ubc29\uc2dd\uacfc \ub3d9\uc77c\ud569\ub2c8\ub2e4. This approach is the same as the one implemented in the existing timeline.<\/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 \ud30c\ub77c\uba54\ud130 \ubcc0\uc218\uc5d0 username\uc774 \uc5c6\uc73c\uba74 \uc5d0\ub7ec\ub97c \ub9ac\ud134\ud569\ub2c8\ub2e4. If ‘username’ is missing from the parameter variables, an error is returned.<\/p>\n\n\n\n
\u2714\ufe0f\ub370\uc774\ud130\ubca0\uc774\uc2a4 following \ud14c\uc774\ube14\uc5d0\uc11c username\ubcc0\uc218\uc758 \uac12\uacfc \uc77c\uce58\ud558\ub294 \ud544\ub4dc\ub97c \uac80\uc0c9\ud569\ub2c8\ub2e4. Search for a field in the following database table that matches the value of the username<\/code> variable.<\/p>\n\n\n\n
const rows = db.prepare(`SELECT actor FROM following WHERE username=? ORDER BY created_at DESC`).all(username) as any[];\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0f map\ud568\uc218\ub85c \ub370\uc774\ud130\ub97c \ubf51\uc544\ub0c5\ub2c8\ub2e4. Extract data using the map function.<\/p>\n\n\n\n
const data = rows.map(r => { ... }<\/code><\/pre>\n\n\n\n
\u2714\ufe0f URL\uc5d0\uc11c id\ubd80\ubd84\ub9cc \ubd84\ub9ac\ud569\ub2c8\ub2e4. Extract only the ‘id’ portion from the URL.<\/p>\n\n\n\n
const url = new URL(r.actor);\n const hostname = url.hostname; \/\/ ex) freelifemakers.com\n\n const parts = url.pathname.split('\/').filter(Boolean);\n let remoteName: string | null = null;\n const idx = parts.indexOf('users');\n if (idx!== -1) remoteName = parts[idx+1];\n else if (parts[0]?.startsWith('@')) remoteName = parts[0].substring(1);\n else remoteName = parts[0];<\/code><\/pre>\n\n\n\n
1)URL\uc5d0\uc11c ‘\/’\ub97c \uae30\uc900\uc73c\ub85c \ubd84\ub9ac\ud558\uace0 \uac12\uc774 null,false\uba74 \ubc84\ub9bd\ub2c8\ub2e4. Split the URL by ‘\/’ and discard any values \u200b\u200bthat are null or false.<\/p>\n\n\n\n
const parts = url.pathname.split('\/').filter(Boolean);<\/code><\/pre>\n\n\n\n
A.URL\uac1d\uccb4\ub294 ‘\/’\ub97c \uae30\uc900\uc73c\ub85c \ubd84\ub9ac\ud558\uba74 ‘https:\/\/’\uc774 \ubd80\ubd84\uc740 \uc774\ubbf8 \ubd84\ub9ac\ub418\uc5b4 \ubc30\uc5f4\uc5d0 \ud3ec\ud568\ub418\uc5b4 \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. When a URL object is split based on the ‘\/’ character, the ‘https:\/\/’ portion is already separated out and is not included in the resulting array.<\/p>\n\n\n\n
B.\uc989 0\ubc88 \ubc30\uc5f4\uc740 ‘https:\/\/’ \ub2e4\uc74c \uac12 \uc785\ub2c8\ub2e4. In other words, the element at index 0 is the value that follows ‘https:\/\/’.<\/p>\n\n\n\n
2)URL\uc5d0 users\uac12\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc73c\uba74 user\ub2e4\uc74c \uac12\uc774 0\ubc88 \ubc30\uc5f4\uc774 \ub429\ub2c8\ub2e4. \uc989 users\/user2\uc758 \uacbd\uc6b0 user2\uac00remoteName\uc5d0 \uc800\uc7a5\ub429\ub2c8\ub2e4. If the URL contains the value ‘users’, the segment following ‘user’ becomes the first element (index 0) of the array. For example, in the case of ‘users\/user2’, ‘user2’ is stored in ‘remoteName’.<\/p>\n\n\n\n
A.URL\uc5d0 ‘@’\uac12\uc774 \ud3ec\ud568\ub418\uc5b4 \uc788\uc73c\uba74 1\uc778\ub371\uc2a4 \ubd80\ud130 \ub05d\uae4c\uc9c0 \uc798\ub77c\uc11c remoteName\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4. If the URL contains an ‘@’ character, the portion from index 1 to the end is extracted and stored in remoteName<\/code>.<\/p>\n\n\n\n
B.substring(1)\uc740 ‘@’\ub97c \uc790\ub974\uace0 \ub2e4\uc74c \ubb38\uc790\uc5f4\ubd80\ud130 \ubb38\uc790\uc5f4 \ub9c8\uc9c0\ub9c9\uae4c\uc9c0 \uc120\ud0dd\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. substring(1)<\/code> serves to remove the ‘@’ character and select the remainder of the string, from the next character to the very end.<\/p>\n\n\n\n
\u2714\ufe0f \ub85c\uceec \ub3c4\uba54\uc778\uc778\uc9c0 \ud655\uc778\ud574\uc11c \ub85c\uceec\ub3c4\uba54\uc778\uc774\uba74 \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c username\uacfc display_name\uc744 \uac80\uc0c9\ud569\ub2c8\ub2e4. Check whether it is a local domain; if it is, retrieve the username<\/code> and display_name<\/code> from the database.<\/p>\n\n\n\n
const isLocalDomain = hostname === DOMAIN || hostname === 'localhost' || hostname.endsWith(`.${DOMAIN}`);\n\n let info = null;\n if (isLocalDomain && remoteName) {\n info = db.prepare('SELECT username, display_name FROM users WHERE username=?').get(remoteName) as any;\n }\n\n const isLocalUser = isLocalDomain &&!!info;<\/code><\/pre>\n\n\n\n
A.isLocalUser\uc5d0\ub294 true\/false \uac12\uc774 \uc800\uc7a5\ub429\ub2c8\ub2e4. isLocalUser stores a true\/false value.<\/p>\n\n\n\n
B.isLocalDomain\uc774 \uc874\uc7ac\ud558\uace0 info\uac12\ub3c4 \uc874\uc7ac\ud574\uc57c isLocalUser\uc5d0 true\uac12\uc774 \uc800\uc7a5\ub429\ub2c8\ub2e4. isLocalUser<\/code> is set to true<\/code> only if both isLocalDomain<\/code> and info<\/code> are present.<\/p>\n\n\n\n
C.\uc989 URL\ub85c\uc811\uc18d\ud55c ID\uc640 \ub85c\uceec \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc5d0\uc11c \uc870\ud68c\ud55c \uacb0\uacfc\uac00 \ubaa8\ub450 \uc874\uc7ac\ud574\uc57c \ub85c\uceec\ub3c4\uba54\uc778\uc73c\ub85c \uc778\uc815\ud569\ub2c8\ub2e4. In other words, a domain is recognized as a local domain only if both the ID accessed via the URL and the result retrieved from the local database exist.<\/p>\n\n\n\n
\u2714\ufe0f UI\uc5d0\uc11c \uc77d\uc744 \uac12\uc744 \uc544\ub798 \ucc98\ub7fc \ub9ac\ud134\ud569\ub2c8\ub2e4 Return the values \u200b\u200bto be read by the UI as shown below.<\/p>\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \ud314\ub85c\uc6b0\ub9ac\uc2a4\ud2b8 \ubd80\ubd84\uc5d0 \ub300\ud574\uc11c \uc0b4\ud3b4 \ubd05\ub2c8\ub2e4.In this post, we take a look at the “following” list section. \ud83d\udc49\ud83c\udffb \ud314\ub85c\uc6b0\ub9ac\uc2a4\ud2b8\ub294 \ub0b4\uac00 \ub2e4\ub978\uc11c\ubc84\uc758 \uc0ac\uc6a9\uc790\ub97c \ud314\ub85c\uc6b0\ud55c \uc0ac\ub78c\uc758 \ubaa9\ub85d\uc785\ub2c8\ub2e4.The “following” list is a list of users from other servers whom you have chosen to follow. \ud83d\udc49\ud83c\udffb\uc774 \ubd80\ubd84\uc740 \ud14c\ub9c8\ub514\ub809\ud1a0\ub9ac\uc758 MainTheme.tsx\ud30c\uc77c\uc5d0\uc11c \ud638\ucd9c\ub418\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.This part is called from the MainTheme.tsx […]<\/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-13052","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\/13052","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=13052"}],"version-history":[{"count":49,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/13052\/revisions"}],"predecessor-version":[{"id":13103,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/13052\/revisions\/13103"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=13052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=13052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=13052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/10\/followlist-jpg.jpg\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2026\/10\/API-jpg.jpg\")