1년 7개월차 주니어 프론트엔드 개발자의 회고록

현재 회사에 이직한지 7개월이 되었다

---

 

사실 이직한지 3개월 되는 시점에 회고록을 작성했는데

좋은 내용만 담겨있지 않아서 혼자만 보기로 결정했다..😃

다시 기억을 더듬어 현재 회사에서 어떤 업무를 진행했는지 기록해 보고자 한다!

 

 

진행한 업무

👩‍💻 사용기술 | React + TypeScript + Recoil + ag-grid + echarts + SCSS

 

🍏 '시스템 관리' 페이지 개발

입사한 후 2개월 정도 작업했던 페이지이다.

개발 목표는 노코딩 툴, 커스터마이징 폼 디자인을 할 수 있는 페이지를 만드는 것이었다.

기능에 대한 제대로된 설계와 디자인 시안이 없었기 때문에, '페이지 기능 구현 - 다시 설계 - 기능 수정' 의 과정이 계속 반복되었다.

 

해당 프로젝트는 신제품에 들어가기로 예정되어 있었지만 취소되었다. 갑자기 기존 제품을 고도화한다고 결정이 난 것이다.

그렇게 팀이 와해되었고, 이 시점에는 신규 업무가 없어서 작업한 페이지를 리팩토링 하거나 개발 공부를 하였다.

 

 

🍏 '통합 신제품' 개발

입사한 팀이 와해되고, 다른 팀으로 변경되었다.

(인사발령이 나기도 전에) 급히 스프린트에 투입되어 통합 신제품 관련 개발을 시작하게 되었다.

 

[ 주요 작업 내용 ]

• Interval 을 활용한 목록 자동 갱신 기능 개발
• 사용자가 선택한 옵션에 따른 목록 조회 기능
• 새 창 열기 : 목록과 동일한 내용의 새 창 열기 기능 (해당 기능을 구현한 내용을 정리한 블로그 게시글)
• 태그 필터 on/off 에 따른 데이터 표출, 목록 데이터 삭제, 수정, 상세 드로워 등 작업
• bar 차트 세팅 (echarts)

 

새 창 열기 기능을 구현하는데 조금 힘들었던 것 같다.

URL query string 을 활용해 데이터를 조회하는 작업을 해봐서 어렵지 않을 것이라고 생각했지만 아니었다.

현재 프로젝트는 모노레포를 기반으로 한 MFA 환경을 갖추고 있다.

하나의 레포지토리에 여러 프로젝트들이 들어 있어서, 공통 컴포넌트나 router 등을 중앙에서 관리하고 있다. 따라서 여러 서비스들이 이를 가져다가 사용할 수 있는 구조이다.

내가 어려움을 느꼈던 점은 이러한 환경에서 router 를 새로 세팅해서 새 창 열기를 해야 하는 부분이었다.

또한 데이터 동기화 작업도 복잡했다. 사용자가 기존 화면에서 세팅한 조건이 새 창을 열었을 때 그대로 유지되어야 했기 때문이다.

기존 화면에서 세팅할 수 있는 조건이 많아서 URL query string 을 통해 하나하나 동기화 작업을 하는 것이 어려웠던 것 같다.

(useEffect 로 URL query string 을 가져오고, 관리하는 것은 해도해도 어려운 것 같다😭)

 

 

 

🍏 '공통 컴포넌트' 개발

프로젝트의 다국어 처리와 함께 Alert 메시지 통일 작업이 필요했다.

프로젝트 내 서비스들이 각자 다른 Alert 메시지 문구를 표출하고 있어서, 이를 통일하기 위해 공통 컴포넌트를 개발하는 작업을 진행했다.

가장 신경 쓴 부분은 내부 개발자들이 공통 컴포넌트를 가져다 쓸 때, 사용법을 이해하기 위해 많은 시간이 걸리지 않게끔 로직을 작성하는 것이었다.

시니어 개발자의 조언을 통해 로직을 개선해 나가며 작업을 완료할 수 있었다.

 

개선했던 부분

• 내부 개발자들이 많은 생각을 하지 않고, 쉽고 간단하게 사용할 수 있도록 로직 짜기
• 사용 예시를 주석으로 자세하게 작성해 이해하기 쉽도록 하기
• 함수의 인자 타입 선언 정확히 하기 
• 직관적으로 이해할 수 있는 네이밍

컴포넌트 개발을 완료한 후, 모든 서비스에 적용을 시켜놓는 작업까지 진행했다.

그동안 담당한 페이지를 구현하기 위한 코드만 작성해 보다가 모두가 함께 사용해야 하는 코드를 작성해 보니,

성능이나 가독성, 사용할 때 에러가 날 부분이 없는지 등등.. 좀 더 신경 써야될 부분이 많다고 느꼈고, 이 경험으로 한 단계 더 성장했다고 느꼈다.

 

 

 

🍏 '테스트 케이스' 작성

제품 릴리즈 전, 결함을 체크하기 위해 테스트 케이스를 작성하였다.

사내에 품질팀이 있지만, 품질팀에 넘기기 전에 내부적인 검증을 마친 후 전달하기 위해 진행했다.

각자 할당된 페이지의 CRUD 정상 동작 여부 부터 시작하여, 디자인 통일 여부, 화면 표출 메시지 통일 여부 등등을 점검했다.

 

점검 중에 결함이 있으면 아래 절차대로 진행하였다.

- 테스트 과정, 결함 설명, 스크린샷 등을 문서로 작성

- 해당 페이지 작업자에게 전달

- 결함 해결

 

내부 테스트는 결함을 발견하고 해결하기까지의 기한을 일주일을 잡아 진행했다.

일정이 매우 촉박하여 주말 출근을 하며 결함을 처리했었다🥹

 

 

 

🍏 '사용자 매뉴얼'  작성

제품을 사용할 때, 사용 방법에 대한 매뉴얼 문서가 필요하여 작성하게 되었다.

팀을 옮긴지 몇 개월 안 된 시점에서 제품의 매뉴얼을 작성해야 해서 (조금 많이) 당황스러웠지만,

기획 문서를 참고하거나 궁금한 점은 물어보면서 작성을 마쳤다.

 

매뉴얼은 제품에 대한 정보가 전혀 없고, 처음 사용하는 사람들을 위해서 쉽고 자세하게 작성하는 것이 중요했다.

본인 또한 이러한 입장과 비슷했기 때문에, 기획 문서를 정독하면서 자세하게 작성할 수 있었던 것 같다.

주로 CRUD 에 대한 절차와 화면 지표에 대한 설명, 어떤 기능을 사용할 때 선행되어야 할 절차들에 대해서 정리해야 했다.

작성 완료 후에, 품질팀의 피드백을 받아서 몇 차례 수정하는 작업도 진행했다.

 

 

 

회고록을 마치며..

회고록을 작성하면서 보니, 7개월이라는 기간동안 많은 일들을 겪은 것 같아서 스스로에게 고생했고 고생하고 있다고 말해주고 싶다.

신제품 출시 일정이 촉박한 상황 속에서 팀이 변경된 거라, 주말 출근과 야근도 종종 하곤 했었다.

그와중에도 바뀐 팀에 피해가 가지 않도록 적응하기 위해 혼자 애썼던 것 같다.

 

실무에서는 내가 원하는 기술 스택을 사용하는 것에 한계가 있다 보니, 이 부분에 대한 갈증이 항상 있었던 것 같다.

그동안은 바쁘다는 핑계로 이러한 갈증을 잠시 외면했지만, 더이상 외면할 수 만은 없을 것 같다.

그래서 이제부터라도 조금씩 천천히 개인 프로젝트를 진행해 보려고 한다.

외부에서 사용할 수 있는 api 등을 가져와서 개인적으로 만들어 보고 싶었던 서비스들을 만들어 보려고 한다!

(어떤 서비스를 만들지 구체적으로 생각해보진 않았지만,, 다짐을 먼저 공유하면 이를 지키기 위해 뭐라도 하지 않을까..!)

 

다음 회고록에는 좀 더 안정적인 상황 속에서 매일 발전하고 있는 개발자가 되어 있으면 좋겠다,,🥲