원티드 프리온보딩 프론트엔드 코스 1주차

저번의 프리온보딩 8월챌린지를 끝내고나서 아직 부족하다는 생각이

들어서 이번에는 프론트엔드 코스를 신청하게 되었습니다.

이번 프론트엔드 코스는 저번 챌린지에서는 2주정도 강의를 듣고 자신이 만든

사전과제인 todo를 리팩토링하면서 공부하는 코스였다면

이번에는 4주정도 강의를 듣고 다른 참여자 분들과 같이 팀을

이루어서 기업과제를 수행하는 코스입니다.

이번 코스에서는 사전과제를 수행하고 자신의 naver블로그에 참가 에세이를

작성한 후에 제출해서 통과한 80명만을 뽑습니다.

그리고 일반전형일경우 30만을 내야하며 SBA전형을 신청할경우

무료로 참가할수있습니다. (코스에 성실히참여하면 30만원 돌려줍니다.)

사전과제는 저번 8월챌린지와 거의 흡사한 todolist작성입니다.

대신 정말 기본적인 라이브러리만을 사용해야하는 제한이 있어서

리액트쿼리와 다른 스타일적인 요소를 저는 포함시키지 않았습니다.

처음해보는 협업

7~8명이서 12개 팀을 이루어서 한달동안 사전과제를 같이합니다.

저는 1조에 속하게 되었습니다. ㅎㅎ

첫번째 과제는 8명이서 작성한 todo에서 best부분을 찾아서 새로운

todo를 만드는것이 저희의 과제였습니다. 화요일에 시작해 목요일 낮12시

까지 제출해야 했기때문에 생각보다 매우 빠듯해 급하게 제출해서

아쉬움이 남습니다. 저희팀은 제일 먼저 코딩컨벤션을 설정했습니다.

eslint, prettier, husky를 이용해서 기본적인 룰을 만들었습니다.

그리고 각자가 생각하는 제일 잘만든 todo를 뽑아서 그걸 베이스로 삼아서

리팩토링할려고 하였는데 무료 6표로 제 todo가 선택이 되었습니다. 😄

8명이란 많은 인원수 때문에 분업하는것이 매우 어려웠는데

개발4 사이드4로 분배를 하였고 제 코드가 베이스가 되었기 때문에

저는 개발쪽으로 진행하게 되었습니다.

사이드 쪽에서 배포, 코딩 컨벤션 정리, 위키를 정리하셨습니다.

저는 기존엔 api파일들을 너무 세분화해서 작성했는데 ex) TodoGetApi...

응집도가 떨어진다고 팀원들이 의견을 내주어 다른 한분의 코드인 class의

메소드로 CRUD를 제어하는 코드를 가져와서 저의 비즈니스로직과 결합하는

역할을 맡았습니다. 나뉘어진 모듈을 합쳐서 하나의 클래스로만든코드 👇

import api from 'api/interceptor';

interface ITodo {
  todo: string;
  id: number;
  isCompleted: boolean;
}

class Todo {
  async createTodo(todo: string) {
    const res = await api.post('/todos', {
      todo: todo,
      isCompleted: false,
    });
    return res;
  }

  async getTodos() {
    const res = await api.get('/todos');
    return res;
  }

  async updateTodo({ id, todo, isCompleted }: ITodo) {
    const res = await api.put(`/todos/${id}`, {
      todo: todo,
      isCompleted: isCompleted,
    });
    return res;
  }

  async deleteTodo(id: number) {
    const res = await api.delete(`/todos/${id}`);
    return res;
  }
}

export default new Todo();

첫 번째 과제 여담

저희 팀원중 한분이 개인적인 사정으로 첫번쨰 과제를 수행하시던

도중에 빠지게 되었습니다. ㅠㅠ

8명이나 모이다보니까 서로의견을 취합하고 결론내고 협업하는 과정이

매우 힘들더군요. 차라리 혼자였다면 이렇게해보고 저렇게 해보고

했을텐데 다른분들도 사용하시는 repo라서 섣불리 건들기 어려웠습니다.

다른 팀의 과제 리드미를 읽고 아직 부족하다고

느꼈습니다. 다음 과제에서는 더 업그레이드 하겠습니다!

두번쨰 과제

사실 처음에는 총 4주 * 2개씩 = 8개의 포스팅을 진행할 예정이였지만

8개는 너무 많은것 같은 생각이 들어서 주 단위로 포스팅하겠습니다!

두번째 과제는 프루떼라는 스타트업의 웹을 제작하는 과제를 받았습니다.

프루떼는 국내 농장과 연결되어서 농장 물품들을 사용자한테 판매하는

쇼핑 사이트입니다.

과제를 시작하자마자 저희 팀원중 한분이 또 그만두시게 되었습니다 ㅠㅠ

팀원이 6명이 되니까 생각보다 과제가 매우 힘드네요 시간이 2~3일 정도 밖에없어서

주말에도 프로젝트가 존재하기때문에 시간 맞추기도 어렵고 생각보다 힘듭니다. ㅠ

6명의 팀원이 6개의 페이지를 각각 작성하였습니다.

저는 상세페이지로 실제 제품의 구매 하고싶은 수량을 사용자가 체크하고

구매버튼을 누르면 구매페이지로 넘어가게 설계했습니다.

저희 팀원중 한분이 전에 디자이너로 일하셨던 분이 계셔서 피그마로 페이지를

디자인 해주셨는데 정말 대단하신것 같습니다. ㄷㄷ (피그마 배워볼까..)

저는 주말에도 시간이 많이 남았기 때문에 추가로 리드미 작성도 맡게되었습니다.

프루떼 측에서 api를 제공해 주지 않았기 때문에 mocking 라이브러리인 msw를

사용했습니다. 사실 mocking이란 단어를 이번에 처음 들어봤는데 msw를 전에

사용해보신 분이 계셔서 생각보다 쉽게 msw를 운용할수가 있었습니다.