항해99

6주차 미니프로젝트 주차는 협업이 어떻게 이뤄지는지 알 수 있는 주차였다. 백엔드와 프론트가 같이 API설계를 하고 프론트끼리 와이어프레임을 만들고 컴포넌트를 쪼개보았다. 항해에서 요구하는 중요 능력 중 하나인 협업능력을 어떻게 길러야 하는지 알아갔다. 때론 의견 충돌이 있었고 다투기도 했지만 결과적으로는 나쁘지 않은 협업의 사례였다고 생각한다.

chapter6. 미니프로젝트

이번주차는 직접 팀끼리 어떤 웹사이트를 만드는 미니 프로젝트를 실행하였습니다. 전 주차까지는 파이어베이스를 이용하여 웹사이트를 만들었지만 이번에는 백엔드에서 만든 서버와 프론트에서 만든 클라이언트 페이지가 상호작용하는 사이트를 만들었습니다. 제가 맡은 파트는 axios를 이용하여 POST로 유저 정보 생성, 로그인 및 로그인 유지 였습니다.

const signupM = (formData) => {
  return async (dispatch, getState, { history }) => {
    // console.log(userId, userName, password, pwConfirm, userProfile, gender);
    let userInfo = {
      formData,
    };
    console.log(userInfo);
    console.log('회원 가입 중입니다.');

    await axios({
      method: 'post',
      url: 'https://95bdde78-b028-4db6-b139-9f7e8f06b2e5.mock.pstmn.io/post',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
      .then((res) => {
        console.log(res);
        dispatch(getUser(userInfo));
        window.alert('회원가입이 완료되었습니다.');
        history.replace('/login');
      })
      .catch((error) => {
        console.log(error, '회원가입에 실패했습니다.');
      });
  };
};

회원가입 시 아이디, 닉네임, 비밀번호, 비밀번호 확인, 성별, 프로필사진을 넣었는데 프로필 사진의 이미지는 json 형식이 아닌 formdata로 가져와야 했습니다. 이 formdata로 가져오는게 문제가 있어서 삽질을 하다가 결국 이미지 뿐만 아니라 모든 데이터를 formdata로 묶어서 가져올 수 있다는 것을 발견하여 그대로 진행하니 잘 작동이 되었습니다.

const signup = (e) => {
    e.preventDefault();

    const file = fileInput.current.files[0];
        console.log(file);

        const formData = new FormData();

        formData.append('userId', userId);
        formData.append('password', password);
        formData.append('pwConfirm', pwConfirm);
        formData.append('userName', userName);
        formData.append('gender', gender);
        formData.append('userProfile', file);

        console.log('formData', formData);
    
    return dispatch(userActions.signupM(formData));
  };

마무리

이번 주차는 프론트엔드에서 분업을 어떻게 해야 일을 효율적으로 할 수 있는가 알 수 있었다. 중간에 팀원이 한 명 나가고 그 뒤로 하던 일을 바꿔서 진행하니 절대적인 시간이 부족했다. 이런 와중에 팀원과의 지금보면 사소하지만 그 때에는 큰 문제로 인해 감정소모가 있었다. 건강한 멘탈과 집중력이 필요한 한 주였다고 생각한다. 앞으로 현재 진행중인 클론코딩에서는 실력적인 부분의 발전도 중요하지만 협업의 측면에서 팀원과의 대인관계를 어떻게 유지하느냐가 큰 요소가 될 것 같다. 즉 조금 더 배려하고 이해하며 내 문제와 상대방이 느끼는 문제의 간극을 적절히 조절할 수 있으면 좋겠다. 끝까지 좋은 말투와 예의를 지키며 항해를 나아가야겠다. 물론 개인 공부도 놓쳐서는 안되는 일이다. 현재 공부하는 습관이 궤도에 오르고 있으니 남들보다 더디더라도 초조해하지 말고 묵묵히 나만의 길을 가야할 것이다.

이번주 WIL 키워드

프론트엔드, 백엔드로서 첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점

아쉬웠던 점

• 중간에 한 명이 나가서 일 분배를 어설프게 한 것이 아쉽다.
• 그 주차때 배워가야 할 게 있었고 마지막에도 조금 더 시간을 내었다면 get과 edit을 시도해 볼 수 있었을 것 같다.
• 멘탈이 살짝 나가서 같은 팀원에게 예민한 부분이 있었다. 돌이켜보면 조금 더 상냥하게 얘기 할 수 있는 부분이었는데, 감정이 앞서는 실수를 한 것 같다.

뿌듯한 점

• 어찌 됐든 결과물을 완성했다는 것.
• 백엔드와의 원활한 소통이 좋았다.
• ui 패키지를 이용한 css를 건드려 봤다는 것.
• 회원가입과 로그인, 로그인 유지를 어느정도 할 수 있게 됬다는 것.