성장과정

프로그래밍을 통한 동아리 홍보 효과 증가, 그로 인한 웹 개발의 흥미

대학 시절, 전공 동아리 홍보와 부원 모집에 있어서 불편함을 느꼈습니다. 수업 시간에 잠시 동아리를 소개하는 방식은 정보 전달에 한계가 있었습니다. 부원들과 누구나 정보에 더 쉽게 접근할 수 있는 방법을 고민하다, 웹 페이지를 구축했습니다.

이 과정에서 웹 개발을 접하게 되었고, 프로그래밍을 통해 전달하고자 하는 정보의 접근성을 높이고 홍보 효과까지 높을 수 있다는 점이 흥미로웠습니다. 또한 자신이 작성한 코드가 실제로 웹 페이지에 구현된다는 점이 매력적이었습니다.

HTML에서 Vue.js까지

전공 특성상 임베디드 위주의 수업으로 이루어져 있어, 당시에 빠르게 페이지를 배포해 공유할 목적으로 HTML, CSS, JavaScript만을 사용해 퍼블리싱을 진행했습니다. 이때 깃을 사용한 협업을 처음 경험했는데, 브랜치 충돌 및 중복된 클래스명의 사용으로 인해 발생한 에러를 해결하면서 브랜치 분리 및 클래스 BEM 방법론 등의 필요성을 알게 되었습니다.

또한 당시 똑같은 구조의 페이지임에도 불구하고 각각의 파일을 구현한다는 점이 코드 재사용성 면에서 아쉬움을 느꼈는데, 이는 컴포넌트를 사용하는 웹 프레임워크를 사용해 문제 해결이 가능하다는 사실을 인지하였습니다. 더 나아가, 전공 캡스톤 디자인 프로젝트에서 Vue.js를 도입해 서비스를 성공적으로 구현하고 배포해 ‘대상’을 수상하였습니다.

성격의 장단점

적극적인 성격으로, 모든 활동에 주도적으로 참여하는 자세

새로운 지식을 배우고, 도전하는 것을 두려워하지 않습니다.

임베디드, 네트워크 기반의 대학 전공에서 전공 동아리에 참여하며 웹 개발을 접해 교내 학과 학술제에서 웹 서비스로 대상이라는 결과를 성취했습니다. 또한 이 과정에서 XD를 활용한 디자인에도 참여하였고, 이후 개인적으로 Figma를 학습하여 토이 프로젝트의 UI/UX 디자인을 구현했습니다.

새로운 아이디어를 팀에게 제안하는 것을 즐깁니다.

실제로 ‘프로젝트 관리 서비스’ 개발 과정에서 데일리 스크럼을 건의해 프로젝트 효율성을 높였습니다. 이전에 진행한 프로젝트에서 아쉬웠던 부분이 각자의 진행 상황을 파악하지 못하면서 진행 속도가 늦어진 것이었습니다. 데일리 스크럼 도입 후, 진행이 더딘 기능은 재조정하고, React-dnd 라이브러리도 추가로 도입했습니다.

프로젝트가 끝난 이후에는 팀원들과 좋은 관계를 유지하며 다양한 스터디를 진행했습니다.

이렇게 적극적으로 배우고 도전하는 자세는, 회사 입사 후 새로운 기술을 익힐 때 거부감 없이 빠르게 습득할 수 있을 것입니다. 또한, 빠르게 변화하는 기술 트렌드에 뒤처지지 않도록 공부하고 컨퍼런스 등을 참여하며 얻은 지식을 바탕으로 회사 서비스에 적용해 개발 생산성을 높일 수 있을 것입니다.

단점 극복: 긍정적인 태도와 단호함의 균형 잡기

항상 웃는 얼굴로 긍정적인 분위기를 만들다 보니, 가끔 상대방이 저를 가볍게 보는 경우가 있었습니다. 이러한 상황이 반복되면서 제 의견이나 요구가 제대로 전달되지 않을 수 있다는 점을 깨닫게 되었습니다. 이를 해결하기 위해, 필요할 때는 의견을 명확하게 표현하고, 중요한 사안에 대해 단호하게 대응하는 법을 배우기 시작했습니다.

이 과정에서 긍정적인 태도와 단호함 사이의 균형을 맞추는 것이 중요하다는 것을 깨달았습니다. 현재는 긍정적인 분위기를 유지하면서도, 중요한 순간에는 명확하게 의견을 제시하고 있습니다. 이를 통해 팀워크와 프로젝트 결과 모두에서 긍정적인 성과를 얻을 수 있었습니다.

경력 및 경험

프로젝트의 개선점을 발견하는 자세

예전 프로젝트에서는 각자의 진행 상황을 제대로 파악하지 못하고 프로젝트 속도가 느려지는 문제가 발생했습니다. ‘프로젝트 관리 서비스’ 개발 과정에서는 이러한 문제를 예방하기 위해 데일리 스크럼을 도입했습니다.

데일리 스크럼을 통해 각각의 개발 진행 상황을 공유하며, 진행이 더딘 기능은 재조정하고 새로운 요구 사항이 생길 경우 즉시 대응할 수 있도록 하였습니다. 또한, React-dnd 라이브러리를 추가로 도입하여 드래그 앤 드롭 기능을 강화했습니다. 결과적으로, 프로젝트 진행 속도가 향상되었고 팀원 간의 소통이 원활해지며 프로젝트 관리의 효율성이 향상되었습니다.

프로젝트를 하며 제가 보완하고 싶었던 점은 관심사 분리입니다. 당시에는 상태 관리 코드와 UI 코드가 하나의 파일에 혼합되어 있었습니다. 이러한 코드는 가독성을 낮춰 타인의 코드를 리뷰하는 데 많은 시간을 소요하게 했습니다. 따라서, 관심사의 분리를 통해 코드의 가독성을 높이고, 오류를 줄이며 협업을 용이하게 해야겠다는 결심을 하게 되었습니다.

또한, 백엔드 개발에 참여하지 못한 점이 아쉬웠습니다. 개인적인 목표로는 풀스택으로 참여하고 싶었으나, 프론트엔드 개발에만 집중하게 되어 데이터베이스 명세서 설계와 서버 및 API 개발에 참여할 기회를 놓쳤습니다. 이를 보완하기 위해, 다음 프로젝트에서는 백엔드 개발에 바로 투입할 수 있도록 SQLD 자격증을 취득하였습니다.

꾸준한 스터디로 발전하는 자세

프론트엔드 기술 책 완독 스터디를 꾸준히 진행하며, 매주 돌아가며 이야기하고 싶은 주제로 발표합니다. 이를 통해 프론트엔드의 기본 지식을 더욱 탄탄히 다지며, 최신 기술 트렌드를 파악하고 적용할 수 있는 역량을 키우고 있습니다.

진행한 발표 주제

React 19의 리액트 컴파일러

모던 리액트 딥다이브 스터디에서 ‘메모이제이션’의 필요성에 대해 토론한 적이 있습니다. ‘필요한 곳에만 메모이제이션을 추가하자’는 의견과 ‘모두 메모이제이션하자’는 의견으로 나뉘었는데, 이와 관련하여 리액트 컴파일러의 등장 배경과 기능에 대해 발표했습니다. 리액트 컴파일러는 개발자가 일일이 useMemo, useCallback을 추가할 필요 없이 자동으로 메모이제이션 처리를 해, 불필요한 렌더링을 방지하고 성능을 최적화합니다.

Sentry를 이용한 에러 추적기

우아한 타입스크립트 스터디에서 ‘에러 바운더리’를 다루던 중, Sentry를 위해 에러 바운더리를 도입했다는 이야기를 접했습니다. 이때, Sentry 자체를 처음 접하게 되어 추가로 공부해 알아보고 싶었고, 스터디 발표 차례에서 이를 정리해 발표하면 좋을 것 같아 카카오에서 발표한 Sentry 도입 영상을 정리해 발표했습니다. Sentry는 프론트엔드 오류 모니터링 툴로, 에러 원인을 추적해 장애 탐지 시간, 원인 파악, 해결까지의 시간을 감소시킵니다.

인상 깊었던 발표

Module Federation을 활용한 Vue2에서 React로의 점진적 마이그레이션

Module Federation을 활용한 Vue2에서 React로의 점진적 마이그레이션 발표가 기억에 남습니다.

발표자분의 회사에서 vue2를 사용하는데, vue2 지원이 종료된다는 소식을 접해 react로 마이그레이션을 제안하였지만 갑작스러운 프레임워크 변경을 부담스러워하셨다고 합니다.

그럼 이를 한꺼번에 마이그레이션하는 방법이 아니라, 조금씩 조금씩 한 페이지마다 마이그레이션을 진행할 수 있는 방법이 있을까 생각하는 과정에서 Module Federation을 생각했다고 합니다.

간단하게 기능을 설명하면, 하나의 서비스를 여러 마이크로 서비스로 나누고 하나의 웹사이트에서 하나의 서비스처럼 동작할 수 있도록 해줍니다. Vue도 화면을 구성하는 과정이 결국에는 이를 js로 변환해 html로 파싱하는 것이고, react도 결국엔 js로 변환되어 파싱되는 것이기 때문에 vue와 react 코드를 합치는 과정에서 문제없이 작동할 수 있을 것이라고 판단했다고 합니다.

결국 해당 기술을 이용해 문제 없이 마이그레이션을 적용했다고 합니다.

문제를 발견하고, 이를 해결하기 위해서 노력하고, 결국은 도입해 좋은 결과를 낸 모습이 존경스러웠습니다.

현실과 타협하지 않고, 계속 발전시키는 자세를 배워야 한다고 판단해 큰 자극을 받았습니다.