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

프론트엔드 개발자로 2.5년 경력이 되었다

---

 

우선 글을 시작하기 앞서, 최근에 블로그 글을 작성하지 못했다💧

정보처리기사 필기 시험을 준비하느라 그랬는데, 저번주에 필기 가채점 결과 합격하고 아주 조금의 여유가 생겼다.

문득 돌아보니 벌써 현재 회사에서 1.5년을 채우고, 프론트엔드 개발자로서는 딱 2.5년의 경력을 채운 시점이었다.

이 시점에서 전 회고록 작성 이후부터 현재까지 어떤 업무를 진행했고 어떤 생각을 했는지 정리하는 것이 좋을 것 같았다.

 

1. 진행한 업무
2. 3년차 프론트엔드 개발자의 고찰

 

이렇게 2가지 카테고리로 나누어 봤다.

 

☄️ 진행한 업무

진행한 업무는 아래와 같은 순서로 정리해보려고 한다.

• 담당 페이지 리팩토링
• 서비스 포털 페이지 작업
• 라이브러리 업데이트
• QA

 

# 담당 페이지 리팩토링

개인적으로 작업한 화면은 항상 부족하다고 생각하고 시간 여유가 있을 때마다 리팩토링을 하는 편이다.

마음에 품고 있었던 페이지 하나부터 작업을 시작하게 되었다.

이 페이지는 사용자가 많이 방문하는 페이지다. 하지만 입사한지 얼마 안된 시점에서 작업한 페이지이기도 했고 기능이 정말 구석구석 많은 큰 규모의 페이지였기에 소스 코드가 정말 더러웠다.

 

처음 작업을 시작할 때는 여러 서비스에서 사용되어야 할 페이지라는 기획이 없었다.

따라서 그 기획에 맞춰서 작업을 해놨는데, 제품에 서비스들이 점점 추가되면서 여러 서비스에서 가져다가 사용해야 하는 상황이 되었다.

여러 개발자들이 그때 그때 동작은 되게끔 하려다 보니 컴포넌트에 정돈되지 않은 소스가 계속 추가되는 상황이었다.

 

개발자들이 컴포넌트를 가져다 쓸 때 편리하게끔 공통화하는 작업이 필요했고,

소스 분석이 어렵지 않도록 정리하는 것이 필요했다.

 

추가되어야 할 페이지 작업들이 끝나고 여유가 생겨서 리팩토링 작업을 시작했다.

먼저 기존에는 컴포넌트 내부에서 부모 컴포넌트가 어떤 서비스인지 판단해서 데이터를 세팅하는 로직들이 많았다.

이는 마운트 되는 시점에 계산을 해서 데이터를 세팅한 뒤에 보여줘야 되기 때문에 비효율적이고 소스 분석도 쉽지 않았다.

그래서 부모 컴포넌트에서 데이터를 세팅해서 넘겨주는 식으로 수정하였다.

공통 컴포넌트화 하기 위해서 최대한 컴포넌트 간의 의존성을 낮추고 복잡한 로직은 제거하려고 했다.

그래서 컴포넌트를 가져다 쓸 때 복잡함은 많이 줄였지만 아직도 전반적으로 소스를 갈아엎고 싶은 생각이 크다..

 

# 서비스 포털 페이지 작업

서비스의 첫 화면으로, 실시간 현황과 요약 정보를 한눈에 보여줄 수 있는 포털 페이지의 작업을 맡게 되었다.

기존 디자인 시스템이 아닌 새로운 디자인이라 스타일 작업을 처음부터 해야됐다.

큰 규모의 작업인데 공수가 빠듯해서 검색 기능을 주로 진행하게 되었다.

통합 검색을 할 수 있는 페이지로, 검색 조건을 URL query string 에 세팅하여 새로고침해도 조건이 남아있도록 세팅해야 됐다.

 

검색 화면에 대한 이해도가 부족해서 네이버 같은 포털을 여러 군데 돌아보며 어떤 식으로 동작하는지 파악했다.

기획자와 개발자들과 함께 어떤 식으로 사용자 흐름을 가져갈지 많은 이야기를 나누면서 작업하는 과정들이 재밌었다.

물론 완료까지 기한이 짧아서 매일 야근을 했지만, UI/UX에 대해 고민하면서 좀 더 알아가는 의미 있는 시간이었던 것 같다.

 

리뷰가 끝나고 로딩중 UI 표시 로직을 개선하였다.

 

기존 로직

• 첫 진입 : 전체 로딩중 표시
• api 호출 후 데이터가 없는 경우 : Empty UI + 페이징 UI
• 페이징 변경 중(=데이터가 있는 경우) : 리스트 로딩 UI

개선 로직

• 첫 진입 : 전체 로딩중 표시
• api 호출 후 데이터가 없는 경우 : Empty UI
• 페이징 변경 중(=데이터가 있는 경우) : 리스트 로딩 UI + 페이징 UI

 

주요 변경점은 api 호출 후 데이터가 없는 경우에는 페이징 컴포넌트를 표시하지 않고, Empty 컴포넌트만 표시하도록 한 점과

페이징을 변경했을 경우 페이징 컴포넌트를 보여주는 식으로 변경했다.

데이터가 없는 경우에는 페이징할 데이터가 없기 때문에 컴포넌트를 숨기는 것이 필요했고,

페이징을 변경했을 때 페이징 컴포넌트를 숨기면 사용자가 어느 페이지를 선택했는지 길을 잃거나 바로 다른 페이징을 선택하고 싶은데 선택할 수 없기 때문에 보여줄 필요가 있었다.

결론적으로 첫 진입때 전체 로딩과 페이징을 변경할 때 리스트 로딩을 구분하기 위해 상태 값을 두 개로 분리해서 관리하는 방식으로 개선했다.

 

# 라이브러리 업데이트

최근에 모든 페이지에서 사용하는 그리드 라이브러리를 버전업 하였다.

QA가 시작된 시점에 버전업을 한 상태로 패치된 파일이 QA팀에 넘어가서 결함이 많이 나오고 있다.

버전업을 하고 각자 개발한 화면에 문제가 없는지 확인하고 패치를 했으면 어떨까 하는 아쉬움이 있다.

그리드로 인한 결함이 대부분인데 바로 바로 처리하기엔 전반적인 로직이 꼬였거나 새 버전에 대한 파악이 필요하기 때문에 쉽지 않다.

개인 프로젝트를 진행할 때는 버전업을 해도 별 문제가 없었는데, 규모가 있는 프로젝트이다보니 버전업으로 인한 문제가 많은 것 같다.

버전업에 대해서는 신중해야 된다고 느꼈고, 충분한 테스트를 통해 안정된 상태로 만들고 메인 브랜치로 합쳐야 된다고 생각했다.

 

# QA

회사에 입사한 후 3번째 QA를 진행하고 있다.

일주일에 한 번씩 패치된 파일을 QA팀에 전달하면, 그 파일을 가지고 QA를 진행하고 결함을 개발자들에게 넘긴다.

처음에는 다른 개발자들이 개발한 페이지의 결함을 받으면 부담스러웠는데, 최근에는 오히려 더 재밌는 것 같다.

다른 사람의 소스를 보면서 배우는 점도 있고, 개선하면 좋을 부분들도 발견하고 수정하는 것이 재밌다.

나에게 할당된 결함을 다 쳐내면 쌓여있는 다른 사람의 결함들도 가져와서 바로바로 처리하고 있다.

 

☄️ 3년차 프론트엔드 개발자의 고찰

고찰은 아래와 같은 순서로 해보려고 한다.

• 업무 진행에 대한 고찰
• 평가로 인한 회의감
• AI 교육 후 고찰

 

# 업무 진행에 대한 고찰

디자이너 인력이 부족해서 최근 진행 프로젝트는 디자인 시안이 안나온채로 대강 기존 공통 디자인에 맞게 개발을 먼저 진행한 후,

디자인 시안이 나오면 다시 작업 해야되는 경우가 많았다.

시안이 기존 페이지들과 비슷하게 나오면 수정할 부분이 많이 없겠지만, 새로운 레이아웃의 시안이 나와서 개발 공수가 꽤 들어갔다.

이런 과정이 정말 비효율적이라고 느꼈고, 적어도 기획-디자인-개발의 순서 정도는 지켜졌으면 하는 생각이 들었다.

 

# 평가로 인한 회의감

현재 회사에서 처음으로 인사평가를 받았다. 연초에 받은 평가 결과는 회의감을 들게 하였다.

입사 후에 맡은 일을 최선을 다해 해냈고, 부족한 온보딩 교육과 팀 해체가 되며 방치되는 상황에서도 적응을 잘 했다고 생각했다.

하지만 회사의 생각은 그게 아니라는 걸 확인하게 되었고, 그로 인해 얼마 간은 정말 정신적으로 힘든 날들을 보낸 것 같다.

나에 대한 어필을 할 기회도 주지 않고 일방적인 평가를 받는 것은 참 쉽지 않은 것 같다고 느꼈다.

지금은 많이 진정이 되었지만 평가에 대한 기억은 잊혀지지 않을 것 같다.

 

# AI 교육 후 고찰

AI에 대한 관심도가 많아지고 업무에서도 활용도가 높아지는 시점에서 사내에서 AI 교육을 제공해주었다.

나의 경우에도 chat GPT 유료 버전을 지원해줘서 사용하고 있고, 업무를 진행하면서도 많은 도움을 얻고 있다.

AI가 보편화되어 있지 않았을 때는 로직에 대한 고민을 하는데 많은 시간을 보내고, 시니어 개발자에게 조언을 구하면서 코드를 작성해 나갔다. 현재는 그런 부분은 chat GPT를 활용하기 때문에, 처리 속도가 훨씬 높아졌다는 걸 느낀다.

이런 상황에서 AI를 너무 많이 사용하게 되면 스스로 생각하는 능력이 없어지지 않을까 하는 두려움이 많았다.

그래서 1차적으로 로직의 흐름은 스스로 생각해내고, 세부적이고 복잡한 로직은 AI에게 조언을 받아 작성하는 식으로 업무를 진행했다.

 

하지만 최근에 두 번의 AI 교육을 들으면서, 강사분들이 하는 말이 인상 깊었다.

AI를 동료라고 생각하고 함께 일하면서 업무 능률을 높이는게 중요하다는 것이다.

첫 번째 강의에서는 업무에 AI를 활용할 때 어떻게 사용해야 좀 더 좋은 답을 들을 수 있는지를 배웠다.

두 번째 강의에서는 Cursor를 어떻게 사용하는지 실습을 했고, 효율적인 활용 방안을 배웠다.

확실히 기업들이 AI에 대한 관심이 높아졌다는 걸 느꼈다.

나 또한 AI와 밀접하게 연결된 상황에서 어떻게 하면 좀 더 생산성을 높일 수 있을지 고민하는 계기가 되었다.

정말 세상은 빠르게 흘러가는 것 같다. 정신 똑바로 차리자😂

 

---

 

앞으로의 계획은 정보처리기사 실기 시험 공부를 빡세게 해서 합격하는 것이다.

공부를 하면서 비전공자로서 부족했던 지식들을 쌓아가는 느낌이 들어서 즐겁게 하고 있다.

실무에서 접했던 내용들을 책 속에서 마주하게 되면 반갑고, 이를 머릿속에 개념화할 수 있어서 좋다.

당분간은 실기 시험 공부를 하느라 힘들겠지만 잘 해내자! 한 번에 붙을 수 있길🔥🙏

 

END