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

여러 부분으로 구성된 이 시리즈에서 우리는 Appwrite의 많은 기능을 다루는 완전한 기능의 포럼을 만들 것입니다. 시리즈가 계속해서 가능한 한 많은 Appwrite 주제를 다루게 됨에 따라 포럼이 발전할 수 있기를 바라며 계속 지켜봐 주십시오.

전제 조건

이 가이드에서는 몇 가지 가정을 할 것입니다. 가장 중요한 것은 Appwrite 설치(로컬 또는 원격)에 액세스할 수 있다는 것입니다. 없는 경우 이 항목installation guide을 확인하십시오. 또한 다음을 가정합니다.

Appwrite CLI가 설치되어 있습니다(here 참조)

간단한 프로그래밍 개념 이해

(진화하는) 프로젝트는 다음에서 찾을 수 있습니다: https://github.com/Swinkid/appwrite-forum

설정하자!

충분한 잡담. 이제 우리는 우리가 무엇을 하는지 알았습니다. 설정을 시작하겠습니다! 먼저, 처음부터 프로젝트를 시작하지 않아도 되는 중요한 파일이 포함된 프로젝트를 복제해야 합니다.

git clone https://github.com/Swinkid/appwrite-forum-setup
cd appwrite-forum-setup/
npm install

다음으로 Appwrite 설치에서 프로젝트를 생성해야 합니다. 수동으로 수행하는 대신 appwrite.json 파일을 컬렉션으로 채웠습니다. 이렇게 하면 컬렉션과 프로젝트 ID가 동일합니다(.env 파일에 중요!).

alex@Alex-PC:~/IdeaProjects/appwrite-forum-setup$ appwrite init project
? How would you like to start? (Use arrow keys)
❯ Create a new Appwrite project
  Link this directory to an existing Appwrite project

Appwrite 리소스가 있는 위치를 반응에 알리려면 .env 파일이 필요합니다. 프로젝트에 예제를 넣었으니 다음을 수행하십시오.

cp .env.example .env

그런 다음 이 .env 파일을 열면 다음이 표시됩니다.

REACT_APP_ENDPOINT=http://localhost:3000/v1
REACT_APP_PROJECT=624096a0130c10e3dceb
REACT_APP_ADMIN_TEAM=6240989c8d1a6db01d39
REACT_APP_CATEGORY_COLLECTION=6240986d4947526ebfd4

프로젝트와 컬렉션을 생성했으므로 이를 조정할 필요가 없습니다. 나중에 프로젝트에서 이 파일에 추가할 것입니다.

마지막으로 포럼 카테고리를 실제로 채워야 합니다. appwrite의 카테고리 컬렉션으로 이동하여 흰 토끼, neo gif를 따르세요.

🛠️ 코딩하자!

주요 초점은 Appwrite와의 인터페이스 방식이므로 일부 페이지는 미리 채워져 있습니다. 원하는 대로 수정할 수 있습니다. 각 페이지에 대한 '비즈니스' 논리를 구현하게 됩니다.

카테고리

src/Components/Forum/Categories/Categories.js를 열면 현재 가짜 포럼 카테고리가 있는 함수를 생성했음을 알 수 있습니다.

function fetchCategories(){
    let stubbedCategories = [];

    stubbedCategories.push({
        $id: 'asdadasdasd',
        name: 'Test Forum',
        description: "We're going to need a bigger boat"
    });

    return stubbedCategories;
}

몇 가지 수정이 필요합니다. 먼저 위의 함수를 다음으로 대체합니다.

function fetchCategories(){
    api.listDocuments(REACT_APP_CATEGORY_COLLECTION).then((data) => {
        setCategories(data.documents || []);
    });
}

다음으로 useEffect 함수를 다음으로 바꿉니다.

useEffect(() => {
    fetchCategories();
}, []);

상황이 구체화되면 이제 react를 실행할 때 포럼 카테고리를 나열할 수 있습니다!

로그인

계속해서 열어보세요src/Components/Auth/Login/Login.js . 다음 코드를 포함하는 handleSubmit이라는 함수를 찾을 수 있습니다.

const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
        email: data.get('email'),
        password: data.get('password'),
    });
};

현재 모든 코드는 브라우저 콘솔에 이메일 및 비밀번호 양식의 내용을 출력하는 작업을 수행하고 있습니다. 이를 수정하고 console.log(...);를 다음으로 바꿉니다.

api.login(data.get('email'), data.get('password')).then((result) => {
    // Store logged in 'state' in redux.
    dispatch(login({
        account: result.account,
    }))
    navigate('/');
}).catch((error) => {
    setErrors(true);
});

간단히 말해서 우리가 하는 일은 계정 데이터를 Redux에 저장한 다음 사용자를 포럼의 홈 페이지로 다시 리디렉션하는 것뿐입니다. 소용돌이를 줄 시간입니다!

등록하다

다음으로 등록 페이지를 알아 보겠습니다. 가서 열어 src/Components/Auth/Register/Register.js . 로그인 페이지와 마찬가지로 handleSubmit 기능이 있습니다. 이전과 마찬가지로 console.log(...); 문을 다음으로 바꿉니다.

api.createAccount(data.get('email'), data.get('password'), data.get('firstName') + ' ' + data.get('lastName')).then((result) => {
    navigate('/login');
}).catch((error) => {
    setErrors(true);
})

이제 Appwrite 콘솔로 이동하지 않고도 자신의 계정을 등록할 수 있습니다! :디

결론

휴! 정말 많았어요! 오늘 우리는 사용자가 로그인, 등록 및 포럼 카테고리를 볼 수 있는 포럼을 만들기 시작했습니다. 다음 기사에서는 여기에 추가하고 새 게시물을 만들 수 있도록 할 것입니다. 다음 기사를 게시할 때 내 눈을 유지!

📚 더 알아보기

Appwrite's Docs

Appwrite's Discord