첫 번째 팀 프로젝트를 마치며

2주 간의 팀 프로젝트가 끝이났다. 한 문장으로 총평을 하자면 다음과 같다.

'인간은 같은 실수를 반복한다.'

프로젝트 기간 동안 최선을 다하지 못한 순간들이 너무나 아쉽다. 다시 마음을 다 잡고 변화의 발판으로 삼을 수 있던 순간들은 몇 차례고 있었다. 프로젝트 기간 내내 무기력한 감정을 떨쳐낼 수 없었다. "무엇이 문제였을까?" 실력이 부족했다. 적극적이지 못했다. 어떠한 변명도 문제 해결의 근본책은 되지 않는다.

하인리히 법칙은 '1:29:300 법칙'이라고도 부른다. 즉 큰 재해와 작은 재해 그리고 사소한 사고의 발생 비율이 1:29:300이라는 것이다. 다시 말하면 큰 재해는 항상 사소한 것들을 방치할 때 발생한다는 것이다.

현재의 '나' 는 과거의 나의 사소한 행적들이 쌓여서 만들어진 결과물일 뿐이다. 하인리히 법칙이 프로젝트의 결과를 절실히 말해준다. 부트 캠프를 시작하고 2~3개월이라는 시간이 흘렀다. 하루하루 최선을 다하지 못했던 날들이 쌓여서 내 부족한 실력이 되었다. 남들을 배려한다는 핑계삼아 자기 주장없이 살아온 지난 날들이 오늘날 나를 소극적인 사람으로 만들었다.

나는 변해야 한다. 하지만 현재 이 글을 쓰는 이 순간도 위의 말처럼 같은 실수를 반복할까 두렵다. 하루아침에 완전히 변할 수는 없겠지만 조금씩 의식적으로 부족한 부분을 개선하기 위해 노력해야 한다. 너무나 상투적인 말이지만 지금 떠오르는 문장은 이 두 문장이다. '나는 할 수 있고 일단 그냥 하자.!!!'

I can do it.     Just do it.

잘한 점

프로젝트 기간 중 떠오르는 기억 100가지 중 아쉬웠던 순간이 9할이라면 뿌듯한 순간 1할을 떠올려보자.
우선 문제에 봉착했을 때 스스로 고민하고 인터넷 검색을 하며 문제 해결을 하기 위해 사용했던 시간들이 기억에 남는다. 정말 많은 고민 끝에 도저히 안되겠다 싶으면 주변의 도움을 구했다. 그리고 도움을 요청했을 때는 "이 문제 좀 해결해주세요. 가 아니라 A의 문제가 있고 제가 생각한 건 B의 방법인데 잘 안되네요. 혹시 C의 해결책이나 xx님은 어떤 방식으로 하셨나요?" 를 물어보면서 상대방이 내가 겪고 있는 문제나 질문의 요지를 잘 파악할 수 있게 노력했다. 그 결과 적절한 피드백이 돌아왔고 온전한 해결책이 아닌 힌트를 통해 스스로 문제를 해결했던 순간이 뿌듯했다.
사소한 부분일 수 있으나 문제 해결을 앞둔 내 마음 상태는 많이 상기 되었고 찰나의 순간이었지만 개발 일에 대한 매력을 다시 한번 느낄 수 있었다.

아쉬운 점

앞서 말한 바와 같이 최선을 다하지 못한 게 아쉽다. 팀 프로젝트의 중요성을 너무 늦게 알아차렸다. 너무 가벼운 마음으로 참여하게 되었다. 내 역할만 충실히 하자는 마인드였다. 돌이켜보면 우리 팀원 뿐만 아니라 다른 팀들의 열정을 보고 반성하게 되었다. 나의 참여도에 따라 2주동안 더 많은 것을 배울 수 있던 기회였다. 그 기회를 놓친 것 같아 너무나 아쉽다. 이미 지나간 것에 후회를 기회 삼아 2차 프로젝트에는 나의 역량을 최대한 끌어 올릴 수 있는 모멘텀이 될 수 있게 노력해야겠다.

프로젝트 영상

https://youtu.be/TkbnRMxwWDI

코드 공유

회원가입 유효성 검사를 실시하였다. 조건이 모두 충족이 안되면 에러문이 뜨게 되어있고 다음 페이지로 넘어가지 않는다. 회원가입의 경우 조건이 많아 validate 함수에 if, else if등으로 인해 코드가 길어졌다. id, password 마다 validate 함수를 나누는게 좋은지 혹은 더 나은 방법을 찾고 있다.

function Signup() {
  const initialValues = {
    username: '',
    email: '',
    password: '',
    passwordcheck: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState({});
  const [isSubmit, setIsSubmit] = useState(false);

  const handleChange = e => {
    const { name, value } = e.target;
    setFormValues({ ...formValues, [name]: value });
  };

  const handleSubmit = e => {
    e.preventDefault();
    setFormErrors(validate(formValues));
    setIsSubmit(true);
    sendForm(formValues);
  };

  const sendForm = formValues => {
    fetch('http://localhost:8000/user/signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: formValues.username,
        email: formValues.email,
        password: formValues.password,
      }),
    })
      .then(res => res.json())
      .then(res => console.log(res));
    console.log({
      username: formValues.username,
      email: formValues.email,
      password: formValues.password,
    });
  };

  const navigate = useNavigate();

  useEffect(() => {
    if (Object.keys(formErrors).length === 0 && isSubmit) {
    }
  }, [formErrors, isSubmit]);

  const validate = values => {
    const errors = {};
    const emailRegex =
      /^([0-9a-zA-Z_.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
    const pwRegex =
      /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;

    if (!values.email) {
      errors.email = '아이디를 입력해주세요.';
      return errors;
    } else if (!emailRegex.test(values.email)) {
      errors.email = '아이디가 형식에 맞지 않습니다.';
      return errors;
    } 

	if (!values.password) {
      errors.password = '비밀번호를 입력해주세요.';
      return errors;
    } else if (
      values.password.length < 8 ||
      values.password.length > 16 ||
      !pwRegex.test(values.password)
    ) {
      errors.password = '비밀번호가 형식에 맞지 않습니다.';
      return errors;
    }

    if (values.password !== values.passwordcheck) {
      errors.passwordcheck = '비밀번호가 일치하지 않습니다.';
      return errors;
    }

    if (!values.username) {
      errors.username = '이름을 입력해주세요.';
      return errors;
    } else if (values.username.length < 2 || values.username.length > 5) {
      errors.username = '이름이 형식에 맞지 않습니다.';
      return errors;
    }

    return navigate('../login');
  };