비전공자 주니어 FE 개발자의 2024 - 2분기 회고

무더운 여름이 시작되는 6월 말, 벌써 2024년 절반이 지나갔다.
1분기 회고를 작성한지 얼마 지나지 않은 것 같았는데 벌써 6월 말이라는게 믿기질 않을 정도로 시간이 빠르게 지나가는 것 같다.
2분기 동안에 내가 무얼 배우고 무얼 놓쳤는지 정리하는 시간을 가져보려고 한다.

✍🏻 메가테라 수강 시작

풀무원 프로젝트도 끝나고 어느정도 시간이 생겨서 개발 실력을 향상시키고 싶어

강의를 찾아보던 중 지난 3월 말 경 메가테라라는 부트캠프에 대해 알게 되었다.

 

온라인 부트캠프이고 프로젝트 환경설정, React, TDD 등을 학습하고

이후엔 쇼핑몰 프로젝트를 진행해보면서 배운 것을 습득하는 커리큘럼이었다.

프론트엔드 개발자에게 점점 필수역량처럼 자리매김하고 있다고 생각이 들어 관심이 생겼다.

 

그런데 가격을 듣고는 부담이 되어 포기했었지만

이후에 메일로 성장하는 주니어 개발자를 위한 글을 읽고

마음이 바뀌게 되어 "프론트엔드 생존코스 12기"에 합류하게 되었다.

 

매주 월요일 마다 강의가 올라오고 공부 방법은 강의를 듣고 데브노트 작성, 과제 및 주차별 회고를 작성하면 된다.

아무래도 온라인이고 매니저분들이 계시긴 하지만 혼자의 의지대로 하는 것이 힘들었다.

그래도 퇴근 후 모각코 채널이 있어서 최대한 참석하려고 노력했고 그 결과 예전보다 코드의 질이 더 좋아 진 것 같다.

 

무엇보다 예전에는 디버깅을 할 때, 무작정 오류 메세지 복붙해서 구글링해서 이것저것 블로그글을 찾아봤더라면, 이제는 검색부터 하기 전에 해당 오류가 왜 발생한 것인지 먼저 이해한 뒤 구글링을 하더라도 공식문서 위주로 찾는 습관이 자연스레 생겨서 디버깅 시간도 절약되고 디버깅 원인과 해결방법이 머릿 속에 더 오래 기억에 남는 것 같아서 좋았다.

 

메가테라 수강 후기가 궁금하다면 회고록을 읽어보세요 !

👍 WATA AI 통합물류 프로젝트

WATA AI 통합물류 프로젝트

 

WATA AI 통합물류 프로젝트는 가상의 창고를 Unity로 3D 모델링을 구현하여 그 안에 하이렉, 대차, 평치, 컨테이너 총 4가지 타입의 물류에 대한 상태값들을 확인할 수 있는 프로젝트이다.

 

기존 프로젝트는 보통 하이렉만 사용하거나 대차만 사용했더라면 WATA AI 통합물류 프로젝트에서는 모든 종류의 물류 타입을 다루고 있어 고객사가 원하는 물류에 맞게 원하는 물류만 가져다가 사용할 수 있도록 대응이 가능하다.

 

위 프로젝트에서 내가 맡았던 부분은 아래와 같다.

• 각 물류 타입별로 FE에서 보여주는 패널 UI 개발
• F2U, U2F 메세지를 통한 통신과 그에 따라 이루어지는 로직 개발

위 내용들은 기존에 구현되었던 부분들을 조금씩 수정해나가는 부분들이었고, 새롭게 개발한 부분은 컨테이너 물류 쪽이었다.

컨테이너 물류 포커싱

 

컨테이너 물류 쪽에서는 다음과 같은 순서로 로직이 진행된다.

 

1. 지게차 데이터 송신

2. BE 데이터 수신 및 처리

3. FE-BE 웹소켓 통신

4. FE-Unity 메세지 통신

 

위 로직에서 웹소켓 통신에 응답받아 데이터가 변경될 때마다 이를 FE와 Unity에 반영해주는 중간 다리 역할을 했다.

🎉 디자인 시스템 개편 및 다크모드, 라이트모드 도입

기존 프로젝트에서 디자인 시스템이 있었지만 업데이트도 안된지 오래되어

FE와 디자이너간의 커뮤니케이션 미스가 많이 발생하였다.

 

디자이너분께서 기존 디자인 시스템을 업데이트 해주시면서

FE에서도 더 이상 쓰이지 않는 컴포넌트들을 제거하고

수정된 디자인 시스템에 맞게 컴포넌트를 구현하고 FE와 디자인을 통일하여 커뮤니케이션을 원할하게 하였다.

 

그 과정에서 라이트 모드를 원하는 사용자도 있기에 라이트모드 기능도 구현하였다.

 

다크모드

라이트모드

 

🤔 회고

👍 Liked

• 물경력 주니어가 되지 않기 위해 퇴근후 공부와 강의 수강을 통해 배운 것을 실제 프로젝트에 적용해본 경험이 좋았다.
  • FE 선임님과 코드리뷰때 내가 배운 것을 공유하고 이를 프로젝트에 도입하는 것에 긍정적으로 반응해주셔서 같이 서비스 설계를 개선해나갈 수 있어서 좋았다.
• 디자인 시스템을 개편해서 디자이너와 FE 간의 커뮤니케이션 오류를 줄일 수 있어서 좋았다.
  • 그 과정에서 Sass를 이용해 다크모드와 라이트모드를 토글기능을 구현할 수 있어서 좋았다.
  • 또한, Storybook 코드를 추가하면서 컴포넌트 사용법을 눈으로 보면서 테스트 해볼 수 있어 좋았다.
• 지난 회고 때 고치고 싶었던 부분을 어느정도 달성한 것 같아서 좋았다.
  • 프로젝트 별 라우터 분리하여 대응이 빨라졌다.
  • 테스트 코드 작성을 통해 유지보수 시간이 짧아졌다.

📘 Learned

• 좋은 코드란, 가독성과 유지보수성이 좋아야 한다는 것을 체감하고 TDD를 통해 가독성과 유지보수성을 높일 수 있다는 것을 배웠다.
  • 단위 테스트, E2E 테스트, MSW 등 다양한 테스트 라이브러리를 사용해보면서 좀 더 고도화된 설계를 배울 수 있어서 좋았다.
• 테스트 라이브러리를 회사 프로젝트에 도입할 때, node 버전과 AWS Amplify ubuntu 버전이 호환이 안되어 문제를 겪었는데, ubuntu 18버전이 node 16까지만 지원하는 바람에 node 16버전을 지원하는 테스트 라이브러리로 진행하였다.
  • 이를 통해 새로운 기술을 도입할 때, 현 프로젝트의 환경도 고려해야하는 것도 배울 수 있었다.
• 디자인 시스템 적용할 때, 아이콘 파일이 SVG 파일을 사용했다. 그동안 SVG 파일에 filter CSS를 통해 색상을 입혔었는데, SVG 원본 파일에 fill 속성을 제거하면 fill CSS로 적용이 가능하다는 것을 배웠다.

😅 Lacked

• 코드리뷰 시간을 빼먹었던 경우가 종종 있어서 아쉽다.
• 5월달에 연휴가 많아서 연휴기간에 집중력이 흐려지는 시간이 많았던 게 아쉽다.

😄 느낀점

회사에서 일이 바쁠 때는 바쁜대로 시간이 빨리 갔는데 일이 적을 때는 무엇을 하며 시간을 보내야할지 막막했다. 회사에 일을 하러 왔는데 내게 주어진 일이 없다가 갑자기 몰아서 주어졌을 때 현타가 좀 왔던 것 같다. 그 때마다 내가 이곳에 있는게 맞는 건가 싶은 생각이 들었다.

 

그러다가 나와 비슷한 처지의 개발자 영상을 유튜브에서 보게되었다. 그 영상 댓글에는 여러 사람들이 나와 비슷한 처지의 개발자에게 이런저런 조언을 해주었다. 조언 댓글중 대다수의 의견이 지금 일이 없어 한가한 시간일 때에도 그 시간을 어떻게 보내느냐에 따라 개발자 미래가 달라질 것이라고 말해주었다.

 

당장 지금 회사가 내 성장에 도움이 안된다고 포기하기 보단 지금 내게 주어진 시간을 어떻게든 잘 활용해보기 위해 노력해보는 것이 나에게나 회사에게나 더 중요하다고 생각이 들었다. 그래서 하반기때 부터는 내게 주어진 시간을 헛되이 사용하지 않고 회사에 대한 애정도 더 키우기 위해 노력하고 싶다.