Ecoexlab 기업 협업 회고록

김종진·2021년 4월 14일
0

Project

목록 보기
4/5
post-thumbnail

본 회고록은 Ecoexlab과 확인된 내용으로 작성된 내용입니다.

기업 협업

프론트엔드 2명 백엔드 2명 한 팀으로
에코엑스랩이라는 회사에서 개발자로서 첫 현업을 진행하게 되었다.
직접 현업 개발자들로부터 실무에 대한 이야기도 들어보고 새로운 기술 스택도 접해보고 여러모로 케어를 받아서 짧은 한달이었지만 값진 경험을 얻을 수 있었다.

에코엑스랩은 화물 운송 시장의 IT화를 추구하는 스타트업으로 CS 관리자의 업무를 위한 어드민 페이지를 구축하는 업무에 참여하게 되었다.

프로젝트 Jandari

프로젝트 내용: CS 관리자 업무용 어드민 페이지 구현

프로젝트 인원: 프론트엔드 2명 백엔드 2명

기간: 4주

프론트엔드 기술스택

  • React
  • React Hook
  • React Router
  • Redux, Redux-thunk
  • TypeScript
  • Tailwind CSS
  • Balsamiq
  • react-hook-form
  • Axios
  • Restful API
  • Git

협업 Tool

  • Github
  • Slack
  • Notion

1-2 주차

새로운 어드민 페이지를 제작해야 했고 직접 기획부터 참여하였다. WECODE에서 진행했던 프로젝트는 기존 사이트를 클론했다면 이번 기업협업 프로젝트는 기획부터 참여하여 좀 더 넓은 시각에서 개발 현업을 배우고 진행 할 수 있어서 좋았다.

처음은 운송업의 시스템을 이해하는데 있어 시간을 많이 할애했다. 실제 관리자가 사용할 프로그램이기에 개발과정에 있어 소통을 원활하게 하고 개발 프로그램의 확장성을 갖추기 위해서 회사 서비스의 이해는 상당히 중요한 부분임을 배웠다.

프론트엔드의 경우에는 UI부터 그려나가야 했기에 Balsamiq을 이용하여 대략적인 화면을 구상한 후 Pigma로 더 디테일하게 기획 화면을 그렸다.

이번 기업협업에서 Redux, TypeScript, TailwindCSS 새로운 기술 스택을 적용해야 했기에 틈틈히 공부하였다. 새로운 기술을 배우는 건 재밌는 일이지만 이번엔 정말 어렵다..!를 수 없이 외친듯 하다.

3주차

생각보다 길어진 기획으로 3주차에 개발 초기세팅을 진행하게 되었다.

구현 사항은 데이터 생성,수정 등을 처리하는 폼과 데이터를 보여주는 테이블로 나뉘었는데 나는 테이블 부분을 맡게 되었다.

( 해당 이미지의 데이터는 임의로 구성된 데이터입니다.)

개발을 하면서 가장 힘들었던 부분은 Redux-thunk와 TypeScript를 함께 적용하여 코드를 짜는 것이었다.

정말 다양한 에러와 고군분투 하였지만 점차 조금씩 감을 잡았고 Redux를 사용하여 백엔드와 통신후 데이터를 렌더링했을때 정말 기뻤다. 러닝커브가 다소 높았지만 막상 Redux로 전체적인 상태관리를 하도록 구축해두니 state관리, 함수 사용, 프론트엔드 협업 등 여러가지로 너무 편하다는 것을 느꼈다.

TypeScript는 꼭 공부하고 싶은 기술 스택이었는데 거의 anyScript인 듯 싶을 정도로 제대로 사용하지 못했다.

기억하고 싶은 코드

이번 프로젝트에서 가장 핵심적인 부분이었던 원하는 데이터를 조건 별로 필터링하여 데이터를 요청해 받아오는 기능을 구현했다.

검색 조건의 유효성을 확인 후 문제가 없다면 필터링 값을 요청했다.

4주차

개발을 진행하면서도 수시로 기획에 대한 변경이 이루어졌다.

특히 기획부터 참여한 프로젝트여서 개발을 하면서 UI를 재구성하거나 이러한 기능을 추가했으면 좋겠다는 회의를 자주 했다.
여러 변동사항이 있었지만 개발 방식의 경우 에자일 방식으로 진행하였기 때문에 보다 유연하게 개발을 할 수 있었다.

초기에 기획한 프로젝트에서 구현하지 못한 부분들이 몇 가지 남게 되었다. 실무에 사용되기에 더욱 더 신중하고 천천히 가더라도 최대한 문제 없이 구현하는 과정을 우선 순위로 하였다.

쉴새 없이 회의하고 개발하며 실무자들에게 발표까지 마친 후 인수인계 문서까지 잘 작성하여 이번 프로젝트도 마무리하게 되었다.

완성된 테이블 필터링 검색 기능

( 해당 영상의 데이터는 임의로 구성된 데이터입니다.)

  • 조건별 데이터 검색 기능
  • 테이블 날짜별 열제목 클릭 시 오름차순, 내림차순 정렬 기능
  • 원하는 데이터 행 클릭시 조회 기능

기업 협업 후기

기업 협업은 WeCode 커리큘럼에서 기대가 많았던 기간이었고 한달 동안 재밌고 또 많은 것을 배웠던 의미있는 시간이었다.

현직자들과 실무를 함께 하고 조언을 들으며 개발자라는 직업의 마인드셋에 더 깊게 생각해 볼 수 있게 되었다.

프로젝트를 마무리하면서 마지막으로 CTO님과 이야기를 나눴는데 나는 왜 개발자가 되려 하는지에 대해서 많이 생각해보도록 좋은 말씀을 많이 해주셨고 나의 개발자 인생의 첫 걸음에 의미를 찾아 갈 수 있도록 해주셨다.

같이 프로젝트를 한 사랑님, 수아님, 승연님 다들 너무 좋고 열심히 해서 재미있게 프로젝트를 진행할 수 있어서 고마움이 컸다.

또 늦게까지 우리를 케어 해주신 멘토 상원님! 하나라도 더 배워가라고 케어해주신 덕분에 힘들더라도 끝까지 할 수 있었다.

개발 이외에도 많은 것을 경험할 수 있던 너무나 값진 인턴쉽이었다.
더욱 더 발전하는 개발자가 되기 위한 소중한 경험이었다!

profile
FE Developer

0개의 댓글