데이터 분석 웹 서비스 1주차 회고 (04/19~04/23)

엘리스 4기에서 이루어지는 팀 프로젝트 2번째가 시작되었다! 데이터 분석 웹 서비스로, Kaggle에서 데이터셋을 가져와 정제하고, 그것을 시각화하여 사용자에게 제공하는 웹 페이지를 구현하는 것이 목표이다. 이전 프로젝트와는 다르게 기획부터 직접 하게 되면서, 백엔드 3명, 프론트엔드 3명 총 6명으로 구성된 우리팀은 하루의 대부분을 회의로 보내게 되었다....^^ 아침 스크럼부터 오후 오피스아워까지!! 이번에 만난 팀원들의 에너지가 얼마나 좋은지 ㅋㅋㅋ 아이디어도 통통 튀고, 열정적이었던 분위기 덕분에 나도 점점 의욕이 솟은 것 같다.

그렇게 우리팀의 프로젝트 주제는 보드게임 추천 웹 서비스가 되었다. 

 

---

 

프로젝트 소개

팀 구성	Frontend - 3명, Backend - 3명
프로젝트명	BOARDMON : 보드게임 추천 웹 서비스
프로젝트 기능 설명	보드게임 조회, 사용자들과 소통할 수 있는 커뮤니티, 찜 기능, 상세 페이지 등
언어 및 프레임워크	JavaScript, React, MongoDB, Express, Python
라이브러리 및 도구	front - mui, react-chartjs-2, redux, aws-sdk back - nodemailer, redis recommend system - sickit-learn, pandas wordcloud - wordCloud, nltk, googletrans, pandas, colab
사용 데이터	BoardGameGeek Reviews - 보드게임 리뷰, 설명, 랭킹 등 Board Games Dataset - 인원 수, 연령, 리뷰 수 등 Fantastic Board Games : TU Wien DOPP 3 Submission - 추천 시스템 참고 코드

 

기능 구현 내용

• Header 메뉴 클릭 시 각 페이지로 네비게이트 될 수 있게 구현
• 회원가입 기능 구현 : DB에 유효한 User 정보를 저장
• 기본적인 Boardgame 페이지에 필요한 컴포넌트 생성

 

Note. 회원가입 기능

• useState : 입력한 정보 저장
• useNavigate : 회원가입이 완료될 때, 페이지 이동
• handleSubmit : 회원가입 버튼 클릭 시 실행할 함수 ("user/register" 엔드포인트로 post 요청)
• MUI : 회원가입 폼 디자인

 

전체 코드

import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import * as Api from "../../api";
import { Button, Grid, TextField, Box } from "@mui/material";
import { toast } from "react-toastify";

function RegisterForm() {
    const navigate = useNavigate();
    const [name, setName] = useState("");

    // 유효한 이름인지 확인
    const isNameValid = name.length >= 2;
    
    // 회원가입 버튼 클릭 시 실행할 함수
    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            await Api.post("user/register", {
                user_name: name,
            });

            // 가입 완료 시 페이지 이동
            navigate("/");
        } catch (err) {
            toast.error("회원가입에 실패하였습니다.", err);
        }
    };

    return (
        <Box id="register">
            <Grid style={{ height: "80px" }}>
                <TextField
                    label="NAME"
                    helperText={isNameValid ? "" : "두 글자 이상 입력해주세요."}
                    onChange={(e) => setName(e.target.value)} />
            </Grid>
            <Button
                variant="text"
                type="submit"
                onClick={handleSubmit}
                disabled={!isFormValid}
                setRegister={false}>
                회원가입
            </Button>
        </Box>
    )
}

export default RegisterForm;

 

결과 화면

회원가입 화면