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