React 및 Appwrite로 포럼 만들기 - 2부

React 및 Appwrite를 사용하여 포럼을 만드는 방법에 대한 이 여러 부분으로 구성된 시리즈의 두 번째 부분에 오신 것을 환영합니다. 아직 보지 못했다면 1부로 이동하여 확인하세요. 이미 읽었습니까? 엄청난. 크랙하자!

이 부분은 아마도 짧을 것입니다. appwrite 기능을 사용하기 시작했기 때문에 자체 문서에 게시물을 추가하고 싶습니다. 베어주세요!

데이터 베이스



먼저 Appwrite 콘솔로 이동하여 '데이터베이스'를 클릭합니다. 카테고리에 대한 게시물을 보관하려면 새 컬렉션이 필요합니다. 컬렉션 추가를 클릭하고 아래와 같이 프롬프트를 작성합니다.



속성



방금 생성한 컬렉션의 속성 탭으로 이동하여 다음 속성을 추가합니다.


속성 ID
유형
크기
필수의
정렬
기본값


카테고리 ID

255



사용자 ID

255



제목

255
아니


콘텐츠

255
아니


작가

255
아니



인덱스



방금 만든 컬렉션의 인덱스 탭으로 이동하여 다음 인덱스를 추가합니다.


인덱스 키
유형
속성


사용자 ID
열쇠
사용자 ID(ASC)

카테고리 ID
열쇠
카테고리 ID(ASC)


💾 새 파일



현재 프로젝트 폴더에 있는지 확인하고 다음 명령을 실행하여 내가 생성한 몇 가지 새 템플릿 파일을 가져올 수 있습니다.

git pull


다음과 같은 새 파일이 추가된 것을 볼 수 있습니다.


이 파일은 범주 목록으로 돌아가서 새 게시물 만들기(다음 할부!)를 처리하기 위한 두 개의 새로운 UI 요소뿐만 아니라 범주의 게시물 나열과 관련됩니다.

🖱 카테고리 클릭



먼저 각 범주를 클릭할 때 '속으로' 탐색할 수 있는 기능을 추가해야 합니다. src/Components/Forum/Categories/Category/Category.js로 이동하여 다음과 같이 업데이트합니다.

export function Category(props){
    const {id, name, description} = props;

    const navigate = useNavigate();

    return (
        <Card style={{marginTop: '1rem'}}>
            <CardActionArea onClick={() => {
                // Navigate to the 'posts' route with the 'id' property of the category ID.
                navigate(`/posts?id=${id}`);
            }} >
                <CardContent>
                    <Typography gutterBottom variant="h5" component="div">
                        {name}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                        {description}
                    </Typography>
                </CardContent>
            </CardActionArea>
        </Card>
    )
}


또한 src/Components/Forum/Categories/Categories.js로 이동하여 다음을 업데이트해야 합니다.

return categories.map((category) => (
        <Category key={category.$id} id={category.$id} name={category.name} description={category.description} />
));


모든 작업을 올바르게 수행했다면(앞서 설명한 새 제공된 파일 다운로드 포함) 이제 범주를 클릭할 수 있습니다.



✉️ 목록 게시물



'가짜' 게시물을 보는 것은 별로 재미도 없고 유용하지도 않습니다. 이미 데이터베이스에 몇 가지 테스트 게시물을 추가하여 쿼리하고 있음을 알 수 있습니다.
src/Components/Forum/Posts/Posts.js로 이동하여 return 문 앞에 다음을 추가합니다.

const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();

function fetchPosts(){
    api.listDocuments(REACT_APP_POSTS_COLLECTION, [Query.equal('categoryId', searchParams.get("id"))]).then((result) => {
        setPosts(result.documents);
    }))
}

useEffect(() => {
    if(searchParams.get("id")){
        fetchPosts();
    } else {
        navigate('/');
    }
}, []);



그런 다음 return 문에서 <PostItem title={'Test PostItem'} />를 다음으로 바꿉니다.

{posts.map((post) => (
    <PostItem title={post.title} description={post.description} author={post.author} key={post.$id}/>
))}



이제 해당 카테고리를 클릭하면 Appwrite 콘솔에 추가한 게시물을 볼 수 있습니다.



결론



이 부분에서는 범주를 클릭하고 게시물을 나열하는 방법을 살펴보았습니다. 중첩 부분에서는 실제로 포럼 UI에서 바로 새 게시물을 추가하고 권한이 올바르게 설정되었는지 확인합니다(게시물을 편집/제거하기 위한 관리자 역할의 기초 작업!).

늘 그렇듯이 제가 잘 설명하지 못하거나 놓친 부분이 있으면 연락주세요! 다음 기사를 게시할 때 내 눈을 유지!

📚 더 알아보기


  • Appwrite's Docs
  • Appwrite's Discord
  • 좋은 웹페이지 즐겨찾기