프론트엔드에서의 재사용성과 유지보수성이란?

재사용성(Reusability)

• 한번 작성된 공통 컴포넌트나 스타일, 함수 등이 여러 페이지나 프로젝트에서 재사용 될 수 있는 능력을 의미.

유지보수성(Maintainability)

• 서비스의 기능, 화면에 새로운 요구사항을 반영하거나 수정을 쉽고 효율적으로 이루어지는 정도를 의미

왜 중요한가?

소프트웨어 제품의 라이프 사이클

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

• 매번 새로운 기능을 출시 할 때마다 개발자의 수는 지속적으로 증가했지만, 코드 생산성은 한 곳으로 수렴한다.
  
• 처음 만들 떄에는 생산성이 100%이지만 출시할 때마다 급격하게 하락하게 된다.

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

• 빠르게 서비스를 만들기 위해 지저분한 코드를 작성했기 때문

프론트엔드에서 재사용성을 위해 할 수 있는 것들

1. 컴포넌트화

import React from 'react';

const Button = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

export default Button;

2. 공통 라이브러리 및 유틸리티 사용

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('/example');
    return response.data;
  } catch (error) {
    console.error('Error : ', error);
  }
};

3. 디자인 시스템 구축

• 타이포그래피 스타일, 색상 등을 미리 지정

4. API 추상화, 코드 디자인 등

프론트엔드에서 유지보수성을 위해 할 수 있는 것들

1. 코드의 가독성과 일관성을 향상(eslint)

module.exports = {
    env: {
      browser: true,
      es2021: true,
      node: true,
    },
  ...

2. 테스트 자동화

// EX> Jest
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
});

3. 문서화

• 주석을 달아 어떻게 돌아가는 코드인지 작성

4. 모듈화와 코드 분리, 응집도 등

src/
├── components/
│   ├── Header.js
│   ├── Sidebar.js
│   └── ...
├── utils/
│   ├── api.js
│   ├── helpers.js
│   └── ...
└── ...

5. 리팩토링(기술 부채)

// 리팩토링 이전
const total = items.reduce((acc, item) => {
  if (item.status === 'completed') {
    acc += item.price * item.quantity;
  }
  return acc;
}, 0);

// 리팩토링 이후
const completedItems = items.filter(item => item.status === 'completed');
const total = completedItems.reduce((acc, item) => acc + item.price * item.quantity, 0);

[출처] 책 - '클린 아키텍쳐'