FE Develop

https://www.youtube.com/watch?v=3H4umWD5bwI

문제 해결 역량

• 왜 이것을 해야하지?

• 어떤 목적을 가지고 있지?

• 누가 쓰는 거지?

• https://kidongg.github.io/posts/product-and-platform-engineers/

소프트웨어 라이프사이클

• 서비스가 지속적으로 성장하면서 자연스레 규모가 커짐

• 매번 새로운 기능이 출시 될 때마다 개발자 수는 지속적으로 증가했지만, 코드 생산성은 한 곳으로 수렴함

• 처음 만들 때에는 생산성이 100%지만 출시할 때 마다 급격하게 하락하게 됨

  • 코드(또는 맥락)를 이해하거나 고려해야 할 부분이 많아져 시간과 비용이 증가하고, 그만큼 생산성은 떨어지게 됨

사람은 늘었는데 왜 생산성은 떨어질까?

• 코드 퀄리티를 중요하게 생각하지 않고, 빠르게 서비스를 만들기 위해 지저분한 코드를 작성했기 때문

• 재사용성과 유지보수성을 고려해서 제품을 만들면, 생산성이 급격하게 하락하는것을 막을 수 있음

재사용성

작성된 함수, 스타일, 공통 컴포넌트 등이 여러 페이지나 프로젝트에서 재사용될 수 있는 정도

• 여러 페이지에서 반복적으로 사용되는 UI 요소들을 공통 컴포넌트로 분리

• 공통 기능을 위한 라이브러리 또는 유틸리티 함수 구축

  • 한 곳에서 관리하므로 중복 방지, 테스트 용이, 변경 시 영향 최소화 가능

• 디자인시스템 구축

  • 개발자와 디자이너가 공통 언어로 협업할 수 있게 돕고, 전체 서비스에 일관된 UI를 제공

• API 추상화

  • API 호출 로직을 직접 페이지나 컴포넌트에 작성하는 대신, 추상화 계층을 두어 재사용 가능하게 분리

  • 공통적으로 처리해야 하는 에러 핸들링, 로딩 상태, 인증, 캐싱 등을 한 곳에서 관리 가능

유지보수성

서비스의 기능이나 화면에 새로운 요구사항을 반영하거나 수정할 때, 얼마나 쉽고 효율적으로 수행할 수 있는지를 나타내는 정도

• 코드 디자인 구조

  • 기능/도메인별로 코드를 잘 나누고, 역활을 명확히하면 의존성과 책임이 분리되어 재사용과 유지보수가 쉬워짐

  • 코드를 일관된 구조로 작성하면, 가독성이 높아지고 팀원들이 코드를 빠르게 이해할 수 있음

  • 어디에 어떤 코드가 있을지 예측 가능해지기 때문에 유지보수성과 협업 효율이 크게 향상됨

• 테스트 자동화

  • 코드 변경에 따른 오류를 빠르게 파악

  • 기능을 수정하거나 추가하는 과정에서 사이드 이펙트가 자주 발생하기 때문에 불안감 해소와 신뢰감 높히는 역할

• 문서화

  • 기존 코드나 기능에 대한 히스토리를 알 수 없을 경우, 파악하는 데 많은 시간과 비용이 들게 됨

  • 문서는 개발이 끝난 후가 아니라 시작 전에 작성하는 것이 효과적

  • "테크 스펙" 문서 등을 활용해 개발 방향과 구조를 미리 정리해두면 이후 개발 및 커뮤니케이션이 훨씬 원활해짐

• 모듈화 / 코드 분리 / 응집도 / 추상화

  • 코드를 작은 단위의 모듈로 나누고, 관심사와 책임에 따라 구조화하면 유지보수가 쉬워짐

  • 모듈화는 코드의 응집도를 높이고, 역할에 따른 추상화 수준을 적절히 조절함으로써 변경에 강하고 확장에 유연한 구조를 만들 수 있음

• 리팩터링 (기술 부채)

  • 주기적인 리팩터링은 기술 부채를 해결하고, 코드의 품질과 일관성을 개선하는 데 필수적인 작업