Pre-project | Stack Overflow 클론 개발 회고

프로젝트 시작 이전

부트캠프하면서 CS 대학교 수업도 듣고 7-8월엔 개인적으로 정말 힘든일도 겹치면서.. 부트캠프 과정에 온전히 몰두해도 부족한 시간들이었음에도 부트캠프 코스에 온 마음과 정신을 100% 전념하지 못한채로 프로젝트 기간까지 어떻게 왔다. 

5-6월에 섹션2를 배울때 여러 페어들을 만나고 얘기해보면서 결과물로 만들어내야되는 "프로젝트"에 대해서 부담/불안감이 가장 심했고,  나의 개발 output에 대해, 통과가 안되는 몇개의 테스트때문에, 구현 안되는 몇가지 때문에 개발 공부가 정말 힘들었고 스스로를 힘들게 했다. 이때 하차를 정말 진지하게 고려했었다...

그 이후로 마음을 고쳐먹고, 개발 공부할때의 관점을 조금 바꾸고, 내 마음에 여유를 두고 난 이후부터는 프로젝트? 어차피 남들은 아무도 관심없음. 솔직히 구현하는 기능은 다 비슷. 전부가 아님. 될대로 되라~~ 라고 맘 편히 갖고 부담감은 거의 없는 채로 프로젝트 기간이 시작되었다. 솔직히 다른 몇몇 수강생 분들은 프로젝트 시작 전까지 D-day를 체크하면서 리액트로 이것저것 만들어보고 프로젝트를 엄청 대비하는 것 같아 보였지만.. 나는 내가 선택한 것인걸... 다른 걸 같이 준비했어서 어쨌든 하차 안하고 내가 설정한 목표도 끝내고, (어쨌든 내가 리액트와 보낸 순수 시간은 정해진 시간의 총량에서 포기를 많이 해야했지만) 프로젝트까지 온 것만 해도 그래도 잘 해오고있다고 스스로에게 자기 합리화를 하면서 프로젝트라는 새로운 환경에 놓여졌다. 

 

Pre-project 시작 

이제 배우는 코스는 모두 마무리가 되고 본격 프로젝트 기간으로 들어오면서 정말 웹서비스를 만들어보는 실전이 펼쳐지게 되었는데, 우선 Pre-project로는 모든 팀이 Stack Overflow 사이트 클론을 구현하는 사전 프로젝트를 부여받았다. 

팀장을 맡게되어 부담도 많이 되고 처음 구현해보는 것들이 많이 막막하기도 했다. 그리고 살면서 개발 프로젝트를 처음 해보는 거다 보니 백엔드 팀원 분들이랑도 소통하는데 정확히 어떤 말인지 감이 안 잡히고 배포도 정확히 어떻게 하는 걸 지도 모르겠고.. 걱정이 정말 많았다. 

정말 흐릿한 안개속에서 정해진 목적지를 시간 내에 가야 되는 느낌이 많이 들었다. 

 

결론 

https://github.com/codestates-seb/seb39_pre_052

 

그치만 프리프로젝트를 끝낸 지금 시점에 회고하면서 내리는 결론은 일단...

정말정말 인텐스한 나날들이었고 해내가는 재미도 많이 느꼈다.

그리고 진심 나는 부트캠프 들어와서 앞서 배운 4개월보다 프리프로젝트로 코드 짜보면서 배운게 더 많은 느낌.... 

그리고 무엇보다 가장 중요하게 생각하는 것. 나는 정말 팀원 운이 좋다..! 정말 좋은 팀원들을 만나서 많은 도움을 받았고,  그 덕분에 내가 정말 프리프로젝트까지 잘 완주할 수있었다. 너무 감사하다. 🐣

 

이번 프리프로젝트에서 사용자요구사항 명세서, 화면정의서를 그려보고 틀을 잡는 시간을 제외하고는 실제 개발을 한 기간은 8/25 ~ 9/6 이었다. 백엔드 프런트 다같이 맨날 모여 개발한건 평일만 따지면 순수 8일이다. (팀원분들은 9일이지만 나는 초기에 정해진 휴가를 하루갔어서 나한텐 8일..) 

물런 거의 저녁없는 삶이었... + 주말에도 하루는 내내 컴터를 붙잡고 있던 적이 많지...

 

회고

좋았던 부분

• Redux toolkit은 정말 거의 혼자 다뤄본적이 없어서 자신이 1도없는 상태였지만 수진님이 로그인 상태와 글(questions, answers, comments) 을 상태로 관리하면 더 좋을 것 같다고 해주셔서 open-mind로 받아들이고 실제로 Redux로 상태관리를 했는데 로직이 덜 복잡해지는 것 같아 좋았다. 
• 우리 팀이 '상'으로 정해둔 필수 구현 기능은 그래도 프런트 쪽에서 모두 시간내에 구현을 할 수 있었다.
• catch up 미팅때 문제점을 늘 공유했고 모르는 것에 대해 가만히 있지 않았다. 
• 우리팀의 지향점이 over communication이었는데 프로젝트 하면서 그 점을 잘 지킨 것이 좋았다. 

아쉬웠던 부분

• Merge를 아직 잘 못하는 것.. 아직 Merge에 대한 두려움이 조금 있다. 수진님한테 맨날 물어보면서 우리 둘의 다른 git 브랜치를 프런트엔드 폴더에 머지했는데.. 아직 혼자하라고하면 잘 못한다. 메인 들어가기 전에는 꼭 익숙해져야 될 것 같다.
• CSS를 자유자재로 잘 활용하지 못한 것
  • 
  • 회원가입 페이지에서 이메일/비밀번호에 대한 유효성 검사를 해주는데 비밀번호의 제한을 설명해주는 저 밑의 p 태그 부분이.. 한번에 보이면 좋을텐데 자꾸 짤려져 보였는데 시간내에 해결하지 못했다.
  • 상세페이지의 Header부분에 제목과 글작성 버튼이 있는 한 줄이랑 상세 Title Info 를 보여주는 한 줄이 있는데 flex로 묶여 있다보니 윗 줄에 justify-content: space-between을 하니 아랫 줄 Title Info의 자식들도 브라우저 width 기준으로 띄엄띄엄 보여졌다. 
• 코드 리팩토링을 하지 못한 것. 시간적 여유가 없어 수진님과 코드 리뷰라던지, 내 스스로 코드에 대한 코드 리팩토링을 할 시간이 없었다. 

개선해야할 부분

• Redux toolkit 활용 
  • 상태관리 툴인 리덕스 툴킷을 더 공부해야된다. 감으로 가져다 쓴 느낌
• 계획하고 컴포넌트 구현하기 
  • Component로 관리할 수 있는 겹치는 코드가 많았음에도 불구하고 기능을 구현하기 급급해서 복붙으로 컴포넌트 설계를 잘 하지 못했다.
• 스타일드 컴포넌트 더 익숙해지기
  • Styled components로 더 짧은 코드로 줄일 수 있을 것 같았지만 class형 css와 혼용해서 사용했던 것 같다. 
• 에러 핸들링 세분화하기 
  • 회원가입을 짤때 서버에서 받아오는 응답이 ok이면 로그인 시켜주고 ok가 아니면 "이미 존재하는 이메일입니다"라는 메시지를 띄워주는 걸로 분기를 나눴더니, 배포환경에서 테스트해 봤을 때 서버에서 응답을 못받아 오는 경우(?)에도 "이미 존재하는 이메일"이라는 메시지를 띄워줬다. 

 //Sign up 버튼 누르면 POST 요청하기
  const handleSubmit = (event) => {
    event.preventDefault();
    let newUser = {
      name: name,
      email: email,
      password: password,
    };
    // console.log(newUser);
    if (email.length === 0) {
      setEmptyEmailMsg("Email cannot be empty.");
    }
    if (password.length === 0) {
      setEmptyPasswordMsg("Password cannot be empty.");
    }
    fetch("/signup", {
      method: "POST",
      headers: {
        'Accept': 'application/json, text/plain',
        'Content-Type': 'application/json;charset=UTF-8',
      },
      body: JSON.stringify(newUser),
    })
      .then((res) => {
        //이미 존재하는 이메일로 회원가입 실패시
        if (!res.ok) {
          setPasswordMessage("The email already exists");
        }
        //회원가입 성공시
        else if (res.ok) {
          navigate("/login");
        }
        return res.json();
      })
      .then((res) => console.log(res)) //{failureReason: '', success: true}
      .catch(() => console.log("error"));
  };

•  충분히 테스트 하기 
  • 유저에 보여주는 feedback을 위해 에러를 세분화하고 테스트도 충분히 해봐야 유저가 혼동하지 않고 알맞은 feedback을 받아 ui/ux 를 향상시킬 수 있을 것 같다. 

 

 

메인프로젝트에서도 더 많이 배우고 성장했으면 좋겠고 회고할 때는 좋았던 부분이 더 많아지기를 바란다.