취업 후 1개월 반 후기

지난 10월 초에 프론트엔드 개발자로 취업을 한 뒤, 회사에서 다양한 업무를 진행했다.

아직 신입 연차라 대단한 업무는 아니었지만 내가 했던 업무를 정리해 보자면 아래와 같다.

 

어드민 페이지

회사에 기존 존재하던 어드민 페이지 프로그램은 유지보수 난이도가 높아 Vue3를 이용해 새로운 어드민 페이지를 만들고 있다고 했다. 기존 어드민 페이지의 기능을 새로운 프로젝트로 옮기는 작업을 진행했다.

• 요청에 따라 화면 `UI 퍼블리싱`: 중요한 작업보다는, 사용자 편의를 위한 작업이었다. 입사 초기에는 주로 퍼블리싱 작업을 했다.
• json으로 내려온 데이터를 `엑셀로 변환 및 다운로드` 할 수 있게 작업 (xlsx라이브러리 사용)
• 테이블 형태로 데이터를 보여주기 위한 라이브러리 변경: `ag-grid` -> `grid.js`, 라이브러리를 변경한 이유는 `ag-grid`가 유료 기능을 사용하지 않는 한 기능 구현에 한계가 있었기 때문이다. `ag-grid` 유료가가 좀 셌던 걸로 기억하는데 굳이 그 가격을 지불하면서까지 필요한 기능은 없어서 다른 라이브러리로 변경하자는 말이 나왔다. 작업하면서 각각의 라이브러리에서 제공하는 속성을 파악하기 위해 두 개의 라이브러리 공식문서를 많이 참고했다.
  • ag-grid
  • grid.js
• 컬럼 헤더 우클릭 시 기본 메뉴 대신 `커스텀 메뉴` 띄우기: 정말 오랜만에 `addEventListener`를 이용해 직접 DOM 조작을 했다. Vue도 React처럼 직접적인 DOM 조작은 지양하는 라이브러리지만, 커스텀 메뉴 구현을 위해서는 어쩔 수 없이 직접 DOM에 접근해야 했다...🥲 이런 식으로 화면을 직접 조작하여 커스텀 메뉴를 띄워보는 작업은 처음이라 어렵기도 했지만 결과물이 나오기 시작하면서부터는 신기하기도 하고 굉장히 재미있게 작업했다.
• `데이터 정렬 및 포매팅` 작업 (숫자 데이터의 경우 소수점 아래 N자리까지 보여줄 수 있도록, 특정 칼럼의 일부 사용자 데이터는 마스킹 처리 등등...) 
• 커스텀 메뉴 클릭 시 모달 생성 및 데이터 전송: 해당 모달 UI 작업을 진행했고 input 값을 등록해 사용자가 원하는 방식으로 데이터를 보여줄 수 있도록 기능을 구현했다. (데이터 정렬, 컬럼명 조작, 특정 데이터 추가 등등)

 

회사의 메인 프로젝트

Vue2로 작성된 기존 소스를 분석하고, 요청받은 기능을 추가했다.

서버에서 데이터가 어떻게 내려오는지 확인한 뒤 `특정 데이터 유무에 따라 UI를 변경`하는 작업이 주였다. 추가적으로 데이터를 차트 라이브러리(highcharts 사용 중)에서 요구하는 형태로 가공하여 `차트 형태`로 보여주도록 했다. 

기존 코드를 수정하거나 혹은 코드를 기반으로 새로운 기능을 추가하는 작업이었는데, 아직 이렇게 큰 볼륨의 프로젝트는 접해보지 못해서 그런건지 모르겠지만 코드 해석이 좀 어렵게 느껴졌다. 아무래도 기존에는 새롭게 프로젝트를 생성하기만 했지 다른 사람의 코드를 이렇게 파악할 일이 많지 않아서 그랬던 것 같다. 프로젝트 진행하면서 물론 코드 리뷰 진행하며 다른 팀원들의 코드를 보기는 하지만, 이렇게 파헤치듯이 보지는 않으니까...😂

그래도 서비스되고 있는 기존 코드를 확인하면서 새로운 기능을 추가하는 경험을 하면서 많은 걸 배울 수 있었다.

 

 

후기

React, Next는 사용해 봤지만 Vue는 처음이라 많이 헤매고 있다.

분명히 Vue에 대해서 사전 조사 했을 때는 React보다 쉽다고 했는데... 개인적으로는 딱히 그런 것 같지는 않다. 아직 Vue가 많이 어렵게 느껴지기 때문에...😭

주말을 이용해서 Vue를 이용한 프로젝트를 만들어 보거나, 더 공부를 해봐야 할 것 같다.

 

회사에서 업무를 하면서 느낀 건 라이브러리도 중요하지만 가장 중요한 건 자바스크립트 지식이라는 사실이다. 어떤 라이브러리든 기본적으로는 자바스크립트 토대로 만들어졌기 때문에, 쉽게 다른 라이브러리에 적응하기 위해서는 자바스크립트 지식을 탄탄히 해야겠다고 느꼈다.

 

그리고 그것만큼 중요한 게 타자 연습과 단축키에 익숙해지기... 디버거 사용해 보기인 듯 하다😂.

 

아직 회사 업무에 익숙해지고 있는 중이라 많이 미숙하지만 추가적인 공부도 하고 업무를 하며 배운 것을 잘 정리해서 앞으로는 성능까지 챙길 수 있는 프론트엔드 개발자가 될 수 있었으면 좋겠다.☺️