Angular로 8개월간 서비스 개발 회고

지난 8개월 동안 회사에서 Angular를 사용하여 하나의 서비스를 개발하고 유지보수하는 경험을 통해 많은 배움을 얻었습니다. 이 기간 동안의 성과와 문제점, 그리고 앞으로 개선할 부분을 KPT(Keep, Problem, Try) 방식으로 정리해보았습니다.

---

Keep (유지할 점)

1. Angular의 구조적 장점

   • 데이터 전달과 상태 관리의 편리함: Angular에서 서비스를 통해 컴포넌트 간 데이터 전달과 상태 관리가 매우 체계적으로 이루어졌습니다. 서비스 레이어를 통한 데이터 관리는 복잡한 로직도 깔끔하게 처리할 수 있게 도와주었습니다.
   • RxJS를 통한 비동기 처리: RxJS의 비동기 처리 덕분에 데이터를 효율적으로 관리할 수 있었고, 비동기 로직을 간결하고 직관적으로 유지할 수 있었습니다.
   • 프레임워크의 일관성: Angular는 프레임워크로서 구조가 미리 정해져 있어, 팀원들이 코드를 작성할 때 일관성을 유지하는 데 큰 도움이 되었습니다. 특히, 코드가 각기 다르게 작성되는 일이 거의 없어 협업이 수월했습니다.
   • 객체지향 프로그래밍의 장점: 코드의 가독성과 유지보수성을 높이기 위해 객체지향 프로그래밍 방식을 적용했습니다. 덕분에 코드의 모듈화가 용이해졌고, 재사용성 또한 크게 개선되었습니다.

2. 효율적인 협업 도구

   • JetBrains Space: 팀원들과 이슈 관리, 코드 리뷰, 그리고 소통을 효율적으로 진행할 수 있도록 JetBrains사의 Space를 적극 활용했습니다. 이를 통해 개발 중 발생하는 문제를 빠르게 해결할 수 있었습니다.

3. 기술적 접근 방식

   • 어댑터 패턴 적용: 어댑터 패턴을 도입하여 외부 API와의 통신을 더 유연하고 확장성 있게 관리할 수 있었습니다.
   • 멀티 패러다임 프로그래밍: 객체지향 프로그래밍과 함께 함수형 프로그래밍 방식을 혼합하여, 보다 유연하고 재사용 가능한 코드를 작성하는 데에 중점을 두었습니다.

---

Problem (문제점)

1. Angular의 러닝 커브

   • 초기 이해의 어려움: Angular의 서비스, 의존성 주입, 생명주기 등을 이해하는 데 많은 시간이 소요되었습니다. 특히 Angular의 복잡한 구조는 처음에 러닝 커브를 높이는 요인이었습니다.

2. RxJS의 복잡성

   • 과도한 오퍼레이터 사용: RxJS의 오퍼레이터를 지나치게 많이 사용하다 보니 코드가 점점 복잡해졌고, 예측하기 어려운 코드가 되는 문제를 겪었습니다. 비동기 처리의 강점에도 불구하고, 로직의 복잡성은 큰 도전이었습니다.

3. 지도 렌더링 성능 문제

   • 브라우저 성능 저하: 지도 라이브러리를 사용하여 마커를 여러 개 추가하는 작업에서 브라우저 성능이 크게 떨어졌습니다. 이로 인해 사용자 경험이 저하될 위험이 있었고, 개선이 필요했습니다.

4. Angular Material 커스텀 스타일링의 어려움

   • 스타일링의 제한: Angular Material은 강력한 UI 라이브러리이지만, 특정 요구사항을 반영하는 커스텀 스타일링이 어려웠습니다. 특히 UI가 자주 변경되는 요구사항에서는 대응이 힘들었습니다. => 변경이 잦은 유저단 UI는 Headless UI가 더 적합할 거라 생각했습니다.
     반대로 어드민단 UI는 Angular Material로 진행해도 좋다고 생각합니다.

5. 공통 서비스의 복잡성 증가

   • 유지보수의 어려움: 공통 서비스가 방대해지면서 유지보수가 어려워졌습니다. 공통 기능들을 더 작은 단위로 나누어 관리할 필요성이 절실히 느껴졌습니다.

6. 협업에서의 소통 문제

   • 작업 방식 변경으로 인한 혼선: 일정에 쫓겨 작업 방식을 임의로 변경한 적이 있었는데, 이로 인해 팀원들과의 소통에서 문제가 발생했습니다. 이런 상황은 팀워크에 부정적인 영향을 미쳤고, 중요한 교훈을 얻는 계기가 되었습니다.

---

Try (시도할 점)

1. 디렉티브 활용: 앞으로는 Angular의 디렉티브를 더 적극적으로 사용하여 컴포넌트의 재사용성을 높이고, 코드의 가독성을 더욱 향상시키고자 합니다.

2. Headless UI 도입: Angular Material의 커스텀 스타일링 한계를 극복하기 위해, 다음 프로젝트에서는 Headless UI를 사용해 더 유연하고 커스터마이즈 가능한 UI 스타일링을 적용할 계획입니다.

3. 공통 서비스의 모듈화: 공통 서비스를 더 작은 모듈로 분리하여 코드의 결합도를 낮추고, 유지보수를 쉽게 만드는 방안을 시도할 예정입니다.

4. 협업 방식 개선: 앞으로는 작업 중 발생하는 모든 상황을 팀과 더 자주 소통하고, 작업 방식을 변경할 때는 반드시 팀원들과 공유하여 혼선을 방지할 것입니다.

5. 신중한 라이브러리 선택: 프로젝트에 사용하는 라이브러리를 더 신중하게 선택하고, 각 라이브러리의 장단점을 충분히 고려하여 적절히 사용할 것입니다.

6. 지속적인 학습: Angular뿐만 아니라 자바스크립트 전반에 걸친 학습을 지속하며, 프로젝트에 기여할 수 있는 새로운 기술을 꾸준히 익혀 더 나은 개발자가 되기 위해 노력할 것입니다.

---

근황

1. 2024 인프콘

한 달 전 참석했던 인프콘에서 다양한 세션과 부스 체험, 그리고 참가자들과의 네트워킹을 통해 많은 것을 배웠습니다.
앞으로 실천해야 할 내용들이 늘어나며, 제 부족한 부분도 많이 느낄 수 있는 뜻깊은 시간이었습니다.
이번 경험을 바탕으로 저 자신을 돌아볼 수 있었고, 추후 블로그에 포스팅할 계획입니다. 😊

2. 자바스크립트 책 스터디

프로젝트가 어느 정도 마무리되어 여유가 생긴 덕분에,
온라인 커뮤니티에서 알게 된 멋진 분들과 함께 YDKJSY(You Don't Know JS Yet)라는 책을 읽고 있습니다.
매주 한 번씩 모여 각자가 요약한 내용을 공유하고 토론하며,
깊이 있게 이해하는 것을 목표로 하고 있습니다.

이를 통해, 앞으로 다양한 라이브러리나 프레임워크로 빠르게 전환할 수 있는 기반을 마련하려고 합니다.

3. 알고리즘

또한 매주 최소 한 번 이상 JS로 알고리즘 문제를 풀고 있습니다.
현재 0레벨과 1레벨 문제는 모두 풀이 완료했고,
2레벨은 코딩 테스트 합격자 되기 - 자바스크립트 편 책을 참고하며 해결해 나가고 있습니다.
현재까지 책을 보며 풀이할 때 좋았던 점은

문제별로 어떻게 풀이해야하는지 방향성을 잡아주는 점이 좋았습니다

ex) 구현 문제는 함수를 나눠서 풀이하는게 좋아요.

그리고 풀이한 문제는 크롬 익스텐션인 백준 허브를 활용해서 깃허브에 꾸준히 업로드 하고 있습니다.

언젠간 2~3레벨을 스스로 해결할 수 있는 수준으로 풀이 능력을 가지는걸 목표로 하고있습니다.