인턴십 회고록

Winney·2020년 12월 18일

목록 보기

1/5

인턴십을 돌아보며

2020/11/16 ~ 2020/12/10

1. 인턴십 소개

총 3개월의 마지막으로 인턴십을 가게 되었다.

인턴십을 간 곳은 사고 · 보험대차 렌터카 요청 서비스를 제공하는 곳이었다.
가서 하게 된 업무는 회사의 초기 서비스 형태를 일부 수정한 모습의 웹 앱을 Zeplin 시안을 보고 완성하는 것이었다. 그리고 문서화 작업도 하기로 했다.

2개의 웹 앱을 제작해야회기 때문에 사용자 앱 3명, 업체 앱 2명으로 구성된 2개의 팀으로 나누어졌고 나는 사용자측의 웹 앱을 만드는 팀이 되었다.

전체적인 사용모습은 사용자의 보험대차 요청 ⇒ 업체의 차량 제안 ⇒ 사용자의 요청수락이라는 일련의 flow를 구현하는 것을 목표로 프로젝트를 시작했다.

2. 처음 내 목표

2차 프로젝트에서 목표로 한 것을 달성하지 못 한 부분이 있었기 때문에 그 부분을 가장 우선해서 달성해보기로 했다.

axios를 사용해 API 요청해보기
postman 사용해 API 요청해보기
필터기능 해보기
상태관리 라이브러리 사용해보기
기능 구현에 다양한 방법 사용해보기

3. 사용스택

Next.js, MobX, SASS, git flow

4. 나의 역할

회원가입 구현(약관동의, 핸드폰 인증, 대표 및 직원 정보입력)
렌터카 요청하기 페이지 구현
요청목록 페이지 구현

5. 기억나는 코드

1) try.. catch... 사용

const goToComplete = async () => {
    const postData = {
      customer_contact: userContact,
      location: usingRegion,
      customer_car: carName,
      customer_car_number: carNumber,
      extra: additionalRequest,
      request_type_id: 1,
    };
    const config = {
      Authorization: `${cookies.TOKEN}`,
    };
    try {
      const res = await axios.post(
        `${wecodeURL}/api/v1/requests`,
        postData,
        config
      );
      if (res.message === "success") {
        RequestStore.addInfo("requestId", res.request_id);
        RequestStore.addInfo("companyCount", res.company_count);
        route.push("/request/complete");
      } else {
        console.log("실패");
      }
    } catch (e) {
      console.log(e);
    }
  };

처음으로 try.. catch...를 사용했다.
에러처리를 하고 싶은데 이렇게 작성하는게 맞나하고 계속 헤맸던 기억이 난다.
개발자의 능력의 에러 핸들링에서 차이가 난다는데 앞으로 많이 써보고 익혀야겠다.

2) 쿼리스트링을 이용한 필터 기능(2가지 필터 + 검색)

const PERIOD_FILTER = {
  oneMonth: 1,
  threeMonth: 2,
  lastMonth: 3,
};

const STATE_FILTER = {
  none: 0,
  requesting: 1,
  confirmation: 2,
  dispatching: 3,
  returned: 4,
  cancel: 5,
};

const RequestList = observer(function RequestList() {
  const [stateParam, setStateParam] = useState(STATE_FILTER["none"]);
  const [periodParam, setPeriodParam] = useState(PERIOD_FILTER["oneMonth"]);

  // 필터 적용 버튼
  const filterApply = () => {
    const searchParam = RequestStore.infos.searchValue || null;
    axios
      .get(`${wecodeURL}/api/v1/requests`, {
        params: {
          status: stateParam,
          period: periodParam,
          search: searchParam,
        },
        headers: {
          Authorization: cookies.TOKEN,
        },
      })
      .then((res) => {
        setCarList(res.data.message);
      });
  };
	(중략)
});

export default RequestList;

사실 백엔드에서 필터를 해서 쿼리로 받아오면 되는거라 크게 어려운 기능은 아니였다. 하지만 처음 쿼리를 이용해서 필터를 구현한다는 자체가 미지의 세계처럼 느껴졌던 기억이 난다. 그리고 처음으로 axios도 쓴 기능이었다.

필터 버튼은 기간 버튼(3개) 상태 버튼(6개)가 있다.
디자인만 나와있어서 처음에는 기획할 때는 모든 요청을 보여주려 했지만 백엔드와 이야기 끝에 요청 목록이 길어질 것을 생각해 처음 1개월내의 차량만 보여주는걸 초기값으로 결정했다.

처음에 구현 할 때는 fetch로 하려고 생각을 했었다. 하지만 fetch로 작성하는 건 너무 복잡하다는 생각이 들었고 이전에 axios를 사용하려고 읽었던 문서가 생각이나서 axios로 작성을 했다. axios는 params라는 키를 사용해서 parameter를 적용하면 되니 굉장히 편했다!!

그럼에도 처음에는 parameter를 적용하는 방법이 잘 못 되었는 건지 계속 필터가 검색 => 기간선택 => 상태선택을 하면 작동이 잘 되었는데 그 외에는 일부만 작동을 했다. 그 후에 변경을 했을 때는 검색이 한 박자씩 늦어서 고민을 했었다.

고민끝에 기간이랑 상태 객체를 컴포넌트 외부에 만들어서 그 값을 받을 수 있도록 작성을 했다. 작성을 하고 보니 지난 2차 프로젝트 때 리팩토링 하라고 했던 코드가 생각이 났다. 해당 코드도 객체를 만들어서 리팩토링을 하라고 리뷰를 받았었는데 그 때는 객체를 어떻게 만들어서 쓰지? 라는 생각에 리팩토링을 미뤄두고 있었는데 이번 필터를 하면서 직접 작성해보니 어떤 의미인지 잘 알 수 있었다.

하지만 이 코드도 리팩토링 할 여지가 있다고 생각한다. 왜냐하면 필터 버튼을 클릭할 때 버튼 색상이 바뀌는데 색 변경을 index를 받아서 하기 때문이다.

  // 버튼 색 변경
  const btnColorChange = (e, idx) => {
    const { name } = e.target;
    name === "period"
      ? setChangePeriodBtnColor(idx)
      : setChangeStateBtnColor(idx);
  };

index만으로 할 수 있는 방법이 있는지 한 번 생각해봐야겠다.

6. 협업에 대하여

이번 협업에서 느낀점은 공용 컴포넌트를 쓸 때는 처음에 대화를 많이 해야한다는 것이다.
처음으로 공용 컴포넌트를 만들어서 썼는데 한 팀원이 모든 컴포넌트를 만들었다. 그런데 그 컴포넌트로 내 작업을 하려고 보니 이런 저런 부분을 추가 할게 많았다. 결국 계속 공용 컴포넌트를 수정하고 또 수정했다.
리뷰를 아토믹 디자인을 적용해보라고 하셨는데 그 때는 이미 너무 수정할게 많아서 시간상 적용하지 못 했었다.
지금 생각해보면 애초에 정확히 어떤 부분만을 공용 기능으로 사용할지라던가 시간을 투자해서 이야기를 했어야 하는 부분이 아닌가 싶다.
이전 프로젝트를 하면서 처음에 많은 시간을 투자해서라도 초기세팅을 제대로 하고 시작하는 것이 훨씬 현명한 방법이라는 것을 깨달았었는데 공용 컴포넌트에 대한 것도 똑같이 적용을 해야할 것같다.
프로젝트는 시작 전 사전준비가 정말 중요한 것같다.

7. 반성

문서화!!!😭
정말 문서화를 꼼꼼하게 해보고 싶었는데 많은 부분이 누락되었었다.
노션을 이용해서 어떤 기능을 구현 할 것이고 flow는 어떻게 되는지 철저하게 생각하고 작성 했어야하는데 처음이라 어떻게 작성해야하는지도 몰랐고 어떤 부분을 팀원이랑 이야기 해야하는지도 몰랐다.
그러다 보니 초기에 기획을 정확하게 잡고 가지 못했고 문서화도 만족스럽지 않았다. 진행하면서도 코드를 작성하는데 이랬다 저랬다 하고는 했다.
처음 조원들이 모여서 기획을 더 정확하게 하고 문서화를 꼼꼼하게 했으면 진짜 코드만 작성하고 헤매는 것없이 부드럽게 과정이 흘러갈 수있지 않았을까 싶다.

8. 칭찬

처음 이루고자 하는 목표의 대부분을 이루었다!!
2차 프로젝트 때는 목표가 많았지만 절반? 절반이 좀 안 되게 목표를 달성 했었다. 그 때는 시간나 체력, 정신적으로 부족해서 목표달성이 힘들었다.

하지만 인턴십을 하면서는 팀 프로젝트보다 좀 더 여유있게 프로젝트가 진행되면서 대부분의 목표를 이루었다. 하나의 기능을 다양한 방법으로 시도해보는 걸 해봐서 좋았다.
MobX를 적용할 때 시행착오를 거치면서 다양한 방법을 시도했다. class로도 바꿔봤다가 context API를 사용했다가 최종적으로는 hooks를 사용해서 MobX를 적용했다.
회원가입 정보를 받는 input창을 관리하는 것도 처음에는 MobX를 사용할 생각을 안 해서 처음으로 context API도 사용해보고 hooks도 사용해보려고 여러 방법을 썼었는데 좋은 경험이 되었다고 생각한다.

9. 앞으로의 목표

요즘 어떤 개발자가 되어야하는지 많이 생각하게 된다. 아직 개발자가 되기로 한 지 얼마되지 않아 충분한 고민의 시간이 없었던 것같아서 어떤 개발자가 되고 싶은지 고민 해야겠다.
배우고 싶은 것도 많다. Redux는 굉장히 유명하지만 아직 써보지를 못 했고 TypeScript도 JavaScript를 쓴다면 거의 필수적으로 알아야 하는 부분이 아닐까 싶다. 1차 프로젝트 때 type 때문에 삽질을 아-주 오래 한 적이 있어서 꼭 배워야겠다고 생각한다.
그 외에 GrahpQL&Apollo도 어떤건지 궁금하고 Jest도 사용해보면서 테스트 코드를 작성해보고 싶다.
당장에 이것저것 궁금한게 많다. 하지만 이런 것들을 무작정 배우기 보다 이유를 제대로 알고 써보고 싶다. 설령 처음에는 이유를 모르더라도 그냥 사용하는게 아닌 그 이유에 대해서 생각해보며 사용하고 싶다.

10. 더 하고 싶은 말

인턴십을 하게 되면서 실제 회사에 가는 거라 정말 많은 긴장을 했다.
하지만 긴장이 무색하게 좋은 분들이랑 좋은 환경에서 인턴십을 할 수 있게 되어서 굉장히 기쁘다.
새로 배운 것도 Next.js랑 MobX로 이전에 관심이 있었던 기술이라 더 재미있게 배운 것같다. 코드 리뷰를 받으면서 몰랐던 문법이라던가 협업을 하기위해 어떤 것들을 이야기 해야하는지 등을 알게되어 너무 좋았다.

기업 협업까지 끝나니 실제 현업에서 함께 만들어 간다는 건 어떤건지 너무 궁금해졌다.
인턴십을 포함해서 3가지의 프로젝트를 협업을 하며 진행하며 굉장히 즐거웠다. 순간순간 힘든 점은 있었지만 분명한 건 다른 사람과 함께 무언가 만들어내는 성과가 나타나고 있다는 것이다. 정말 오랜만에 이런 성취감을 얻는 것같아 스스로 굉장히 기쁘다.
벌써 다음이 기다려진다.🤗🤗

Winney

프론트엔드 엔지니어

다음 포스트