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
  • 좋은 웹페이지 즐겨찾기