[JustCode] Fastfive 기업과제 회고록

송기민·2022년 12월 27일
1

Justcode

목록 보기
2/2
post-thumbnail

JustCode 마지막 3차 프로젝트가 드디어 끝났습니다. 참 아쉽기도하고 재밌기도하고 힘들기도하고 여러가지 감정들이 많이 들었던 마지막 프로젝트였습니다.

프로젝트 소개

이번 프로젝트는 Fastfive라는 공유 오피스 플랫폼 기업의 기업과제였습니다.
각 카테고리에 맞는 기업들이 글을 쓰게 되고 그 글 내에서 댓글을 달며 소통을 할 수 있는 사이트 입니다.
기업은 처음 가입시 일반 가입자 상태입니다.
일반 가입자는 헤더부분의 모달 창에서 멤버 요청과 대표 요청을 할 수있습니다.
대표가 대표 요청을 신청하게 되면 admin이라는 관리자 계정에서 대표 요청을 수락 할 수 있습니다.
대표가 된 계정은 우리 회사의 게시 글을 작성 할 수 있고 일반 가입자의 멤버 요청을 수락 할 수 있습니다.
카테고리의 이미지 및 이름 설정 등은 admin 계정에서만 진행을 할 수 있고 다른 계정에서는 수정 할 수 있는 모달 등이 보이지 않게 됩니다.

사용된 기술

Front-End : React , sass, Html, Css, Javascript
Back-End : Node.js / Express / Bcrypt / jsonwebtoken(JWT) / MySQL
공통: Trello, Notion, Discord, Slack


나의 역할

  • 홈 페이지 레이아웃
  • 푸터 레이아웃
  • admin 계정만 사용하는 카테고리 추가 및 수정 모달
  • 백엔드와 카테고리 추가, 수정 하는 기능
  • 홈페이지 상단에 프로세스 바 기능
  • 메인 홈 캐러셀

좋았던점

이번에 3번째 프로젝트 였는데 이번에는 전에 잘 맞았던 팀원들과 한 번 더 맞춰볼수 있었던 기회가 생겼는데 소통이 너무 잘되어서 이게 제일 좋았습니다.

이번 프로젝트는 기업에서 준 기획안을 토대로 만드는 프로젝트였는데 이게 팀원들과 소통을 많이해서 정해야 할 부분이 정말 많았기 때문에 소통이 그 어느때보다 중요한 프로젝트였는데 소통이 잘 되서 정말 좋았습니다.

처음 기획안을 이해하는데도 첫날의 대부분을 사용했어서 실제 기업에서 기획안을 받아서 프로젝트를 진행하면 이런 느낌으로 일을 진행하지 않을까? 하는 생각이 들게 되어서 참 좋은 경험이였던것 같습니다.

그리고 최대한 안써본거를 써보려고 조금이라도 라이브러리를 사용하기 위해 찾아보고 진행했던 부분이 좋았습니다.
찾아보다보니 생각보다 리액트 라이브러리 기능이 너무 많아서 조금이라도 더 알아보는 계기가 생겨서 되게 재미있었던 것 같습니다.

아쉬웠던점

최대한 라이브러리들을 사용해보고 싶었는데 너무 오래된 게시글만 있는 기능이라 못쓴 라이브러리도 있고 뭔가 더 만질수 있는데 시간이 빠듯해서 더 만져보지 못해서 사용하지 못한 라이브러리도 있어서 이게 제일 아쉬운 부분인 것 같습니다.

라이브러리 공부도 조금 더 해보고 리팩토링을 하면서 라이브러리를 더 사용해보는 시간을 가지게 될거 같은데 그때 조금 더 다양한 기능을 알게되지 않을까 싶습니다.

공유하고 싶은 코드

이 부분은 카테고리를 추가하고 수정하는 함수중 일부인데 아직 겨우 기능만 구현한 부분이라 잘하시는 분들이 보시면 정말 지저분하고 보잘거없는 코드 일수 있으나 저는 이번에 async, await, axios 같은 문법이나 라이브러리를 처음 사용해서 되게 좋은 경험이 된거 같습니다.

그리고 파일 업로드 부분을 처음 해봤는데 원래 백엔드와 통신시 fetch만 사용해서 통신을 해왔으나 파일 업로드 기능을 구현하다보니 fetch에서 안되는 부분이 존재하여 axios를 사용하면 된다는 이야기를 듣고 사용해 보았습니다.

같은 팀원분이 다른쪽에서 구현후 본 블로그 글들을 보내주셔서 그 글들을 토대로 사용할수 있어서 많은 도움이 되었습니다.

파일 업로드 구현이 해본 기능중 제일 어려우면서도 재밌는 기능이라 제일 기억에 남는거 같습니다.

  const [cardTitle, setCardTitle] = useState('');
  const [cardContent, setCardContent] = useState('');
  const [cardImg, setCardImg] = useState('');

  const onChangeTitle = e => {
    setCardTitle(e.target.value);
  };
  const onChangeContent = e => {
    setCardContent(e.target.value);
  };
  const onChangeImg = e => {
    setCardImg(e.target.files[0]);
  };
  
  const postCategory = async e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('category_name', cardTitle);
    formData.append('description', cardContent);
    formData.append('img_url', cardImg);
    const imgUrl = URL.createObjectURL(cardImg);

    await axios({
      method: 'POST',
      url: `${process.env.REACT_APP_API_URI}/category`,
      mode: 'cors',
      headers: {
        'Content-Type': 'multipart/form-data',
        authorization: localStorage.getItem('token'),
      },
      data: formData,
    });
    onCreate({
      category_name: cardTitle,
      description: cardContent,
      img_url: imgUrl,
    });
    setCardTitle('');
    setCardContent('');
    setCardImg('');
  };

  const onEdit = id => {
    const token = localStorage.getItem('token');
    fetch(`${process.env.REACT_APP_API_URI}/category`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
        authorization: token,
      },
      body: JSON.stringify({
        categoryId: id,
        category_name: categoryTitle,
        description: categoryContent,
      }),
    })
      .then(res => res.json())
      .then(result => {
        if (result.message === 'UPDATE_CATEGORY') {
          setCardData(
            cardData.map(data =>
              data.id === id
                ? {
                    ...data,
                    category_name: categoryTitle,
                    description: categoryContent,
                  }
                : data
            )
          );
          alert('수정완료');
        } else {
          alert('수정 실패');
        }
      });
  };
  
 

느낀점

이번에 JustCode에서 마지막 3차 프로젝트를 진행을 했는데 정말 너무 재미있는 프로젝트 였습니다.
정말 진행하면 진행을 할수록 어려운 프로젝트였는데 매일 새벽까지 다들 디스코드로 이야기를 많이 하면서 서로 부족한 부분도 채우고 정말 시덥잖은 장난도 많이치고 2주간 정말 알차게 보낸거 같습니다.

아직 기능 구현시 기초가 부족해서인지 코드를 작성할 때 부족한 부분이 많이 느껴져서 좀 더 공부를 할 필요가 있구나도 느껴지는 프로젝트였습니다.
이 부족한 부분을 내가 느끼고 채워 나가면 정말 기업에서 필요로하는 그런 사람이 되는 날이 오지 않을까 하는 생각도 들게 되는 프로젝트 였습니다.

JustCode를 진행한지 벌써 사전스터디까지 하면 4개월이 가까워 가는데 부족하지만 주니어 개발자가 되는 과정을 거친거 아닌가 싶습니다.
부족한 점이 많지만 그래도 4개월여간 많은 것을 배우며 개인이 성장을 할수있는 정말 소중한 시간을 보낸거 같아서 너무 귀한 4개월이였습니다.

그리고 마지막으로 부족하지만 너무 잘해준 우리 은또 팀원들 정말 첫프로젝트부터 마지막 프로젝트까지 다들 너무 고생했고 다들 앞으로도 다 잘되면 하는 소망을 마지막으로 글을 마치겠습니다.

글이 너무 길어졌는데 봐주셔서 감사합니다!!

결과물






profile
ㅁㅁ

0개의 댓글