원티드 프론트엔드 프리온보딩 인턴쉽

한달동안 실제 T/O가 있는 기업으로부터 과제를받아 프론트엔드 동료들과 함께 과제를 수행하고 기술 면접 통과를 위한 핵심 주제를 학습하는 프로그램이다. 해당 프로그램은 사전과제를 수행하고 합격된 인원만 참여할수 있었다. 사전과제는 요구사항에 맞춰 TODO LIST를 구현하는 과제였고 여기에서 확인할수 있다.

합격자는 최종 참가비 결제후 해당 프로그램을 참여할수 있는데 참가비 같은경우에는 완주조건을 충족하면 환불해준다.

또 이 프로그램을 참여하게되면 아래와 같은 혜택을 받을수 있다. 혜택 안내

이 프로그램에대한 자세한 설명은 여기에서 볼 수 있다.

프로그램을 참여한 이유

내가 프로그램을 참여한 이유는 딱 한 가지다. 참여하게 된다면 프론트엔드 개발자와 협업 할 기회가 생기기 때문에 참여하였다. 나는 혼자서도 프로젝트를 만들어봤고 백엔드 개발자와도 프로젝트를 만들어봤지만 나와 같은 프론트엔드 개발자와는 협업을 해본적이 없었다. 그로 인해 프로젝트에서 프론트를 구현할때는 내가 하고싶은대로 내 방식대로 구현해왔는데 프로그램에서 참여해 실제 프론트엔드 개발자와 프로젝트를 진행해보니 많은걸 느꼇다. 느낀점에 대해서는 좀 아래에 적겠다.

팀원과 기업 과제를 수행한 방식

프로그램 진행하면서 매주 하나씩 과제가 공개되었다. 우리팀은 해당 과제의 Best Practice를 산출해내기 위해 아래와 같은 방법대로 진행하였다.

가장 먼저 컨벤션 통합하기

가장먼저 commit 메세지 방식, 코드 컨벤션, 스타일 등 협약하고 진행하였다. 코드 컨벤션, 스타일은 eslint와 prettier를 사용하여 맞추어 주었고 실수로인해 적용이 안될것을 방지하여 husky설정까지 해주었다. 이외 관련된거는 너무길고 이 글과 취지가 맞지않은거 같아 노션 링크를 남긴다. 팀 노션 링크

요구사항별로 역할분담하지 않기

과제에는 여러가지 요구사항들이 있었는데, 요구사항별로 역할 분담을 하지않았다. 하나의 요구사항을 모두가 구현하고 코드리뷰를 통해 Best Practice를 선정 후 dev 브렌치에 merge후 다음 요구사항을 진행하는 방식으로 진행했다.

Best Practice 선정 방식

Best Practice 선정 방식은 해당 요구사항을 모두가 구현 후 코드 리뷰를통해 Notion에서 가장 인상 깊었던 것과 이유를 적는 방식으로 진행하였다. 좋은 평가를 받은 코드들을 모아 하나의 코드로 만들어 해당 요구사항의 Best Practice로 선정하였다. 2주차 라이크어로컬 기업 과제에서 상품 이미지에 Lazy Loading 기법을 적용한 나의 코드도 모범 코드로 선정되었다. 하지만 초반에는 요구사항이 적고 시간도 넉넉하여 좋은 코드들을 하나로 뭉칠 수 있었지만 3,4 주차 부터는 구현 난이도가 높아지고 시간도 촉박하여 한 사람의 코드만 Best Practice로 선정되었다.

어떤 과제들을 진행 하였는가?

어떤 과제를 진행하엿는지만 간단하게 적어보겠다. 해당 과제를 어떤식으로 구현했는지 해당 과제 Repo에 접속하면 자세히 볼 수 있다.

선발과제 재구현

이 과제는 1주차때 멘토님이 직접 내주신과제이다. 선발 과제였던 TODO LIST를 동료와 토론하여 Best Practice로 만드는게 과제였다. Repo 이동

여행 상품 리스트를 보고 장바구니에 저장할 수 있는 사이트 구현

이 과제는 2주차때 라이크어로컬 기업에서 직접 출제해준 과제이다. 해당 과제의 요구사항은 많지만 간략하게 적어보면 아래와 같다.

ㅁ 상품 리스트 구현 및 장바구니에 제품 추가 기능 구현 ㅁ 상품 가격, 지역으로 필터링 기능 구현 ㅁ 상품 장바구니 구현

해당 과제에서 저는 상품 리스트에 Lazy Loading 기법을 적용하여 상품 이미지를 보여주었고, 이 방법은 Best Practice로 선정 되었습니다. Repo 이동

주어진 데이터를 기반으로 시계열 차트 만들기

이 과제는 3주차때 플렉시스 기업에서 제출해준 과제이다.

ㅁ 주어진 데이터로 시계열 차트 만들기 ㅁ 하나의 차트안에 Area형태의 차트와 Bar 형태의 차트 표시 ㅁ 특정 데이터 hover시 툴팁 기능 ㅁ 필터링 기능 구현 ( 하이라이트 형식 ) 해당 차트 막대 클릭시, 버튼 클릭시

나는 해당 과제로인해 처음으로 차트 라이브러리를 사용해봤다. Repo 이동

주문내역 관리 어드민 페이지 구현

이 과제는 4주차때 스위치원 기업에서 제출해준 과제이다

ㅁ 주어진 데이터를 이용하여 주문 목록 표구현 ㅁ 페이지네이션 기능 구현 ㅁ 정렬 기능 구현 (주문번호 클릭시, 거래시간 클릭시) ㅁ 필터링 기능 구현 ㅁ 고객 이름 검색 ㅁ 테스트코드 작성

해당 과제가 나에게는 가장 어려웠던 과제였다. Repo 이동

협업하면서 느낀점

이 글을 작성하게된 이유인거같다. 협업을 진행하면서 많은걸 느꼈다.

일단 같은 프론트엔드 개발자여도 각자 생각하는것들이 많이 달랐다. 어떤식으로 과제를 진행할지 git 컨벤션, 코드 컨벤션은 어떤식으로할지 등… 그러나, 팀원과의 지속적인 소통을 통해 이러한 문제를 해결하였고, 이는 소통의 중요성을 다시 한번 느끼게 해주었다.

또 느낀점으로는 상황에 따라 적절한 라이브러리를 잘 사용하는것도 능력이다 라는걸 느꼇다. 주어진 데이터를 이용하여 주문 목록 표를 구현하는 과제를 진행할 때, 라이브러리 제한이 없어지만 나는 표 라이브러리를 사용해본적이 없어 직접 구현하였다. 그러나 이를 라이브러리로 대체했다면 필터링, 정렬 등의 기능도 따로 구현하지 않아도 되어 시간을 많이 단축할 수 있었을거 같다. 따라서 상황에 따라 적절한 라이브러리 사용하는것도 개발자의 중요한 역량 중 하나라는 것을 느끼게 되었다.

원티드 프론트엔드 프리온보딩 인턴쉽 회고록