리팩토링

1. 팀별 컨벤션

   • 컨벤션이란 특정 팀이나 조직에서 코드 작성 시 지켜야 하는 규칙과 가이드라인입니다.

   • 팀 내에서 아래 부분에 대해 미리 상의하고, 일관성이 지켜져야합니다.

     • 들여쓰기, 띄어쓰기, 괄호 위치, 주석 작성법
     • 디렉토리 구조
     • 커밋 메세지

2. 이상한 이름 (Mysterious Name)

   • 이상한 변수명이나 함수명은 코드의 가독성을 떨어뜨리고 다른 개발자들이 이해하기 어렵게 만듭니다.

   • 변수명이나 함수명은 누가봐도 명확하고 의미 있는 이름이어야 합니다.

     // Bad: 이상한 변수명
     const a = 10;
     const b = "hello";
     
     // Good: 명확한 변수명
     const age = 10;
     const greet = "hello";

3. 중복 코드 (Duplicated Code)

   • 중복된 코드는 유지보수에 비용을 증가시키고 버그 발생 가능성을 높입니다.

   • 중복된 코드는 재사용 가능하도록 하나로 만드는 것이 좋습니다.

     // Bad: 중복 코드
     function calculateAreaA(width, height) {
       return width * height;
     }
     
     function calculateAreaB(width, height) {
       return width * height;
     }
     
     // Good: 중복 코드를 함수로 추상화
     function calculateArea(width, height) {
       return width * height;
     }

4. 긴 함수 (Long Function)

   • 함수가 너무 길면 이해하기 어렵고 유지보수가 어려워집니다.

   • 기능을 분리하거나 작은 함수로 나누는 것이 좋습니다.

     // Bad: 긴 함수
     function complexLogic(data) {
       // ... 복잡한 로직 ...
     }
     
     // Good: 기능을 분리한 함수
     function processData(data) {
       // ... 데이터 처리 ...
     }
     
     function applyLogic(data) {
       // ... 로직 적용 ...
     }

5. 전역 데이터 (Global Data)

   • 전역 데이터를 남발하면 코드 간의 의존성이 높아지고 충돌이 발생할 수 있습니다.

   • 전역 변수를 최소화하고 필요한 경우에만 사용하는 것이 좋습니다.

     // Bad: 불필요하게 선언된 전역 데이터
     const globalValue = 10;
     
     function addValue(num) {
       return num + globalValue;
     }
     
     // Good: 전역 데이터를 사용하지 않고 인자로 전달
     function addValue(num, globalValue) {
       return num + globalValue;
     }

6. 주석 (Comments)

   • 주석은 코드의 이해를 도와줄 수 있지만, 코드 자체가 명확하게 설계되어 주석이 필요 없도록 하는 것이 가장 좋습니다.

   • 길어지는 코드에 대해서는 블록단위로 나누어 다른사람이 확인하기 쉽도록 주석을 작성해야 합니다.

     // Bad: 필요 이상의 주석
     function calculateArea(width, height) {
       // 너비와 높이를 곱하여 면적 계산
       return width * height;
     }
     
     // Good: 주석이 필요 없는 명확한 함수명과 변수명
     function calculateArea(width, height) {
       return width * height;
     }
     

7. README 작성

   • 프로젝트 소개
     • 프로젝트의 목적과 주요 기능에 대한 간략한 설명
   • 작성자 정보
     • 프로젝트를 개발한 팀 또는 개발자들의 정보를 제공합니다.
     • 연락처 정보나 웹사이트 등을 포함할 수 있습니다.
   • 프로젝트 상태
     • 프로젝트의 현재 상태를 설명합니다(개발중, 개발 완료, 배포 중 등)
   • 도움말
     • 추가적인 도움말이나 문서로 연결할 수 있는 링크 등이 포함 될 수 있습니다.

8. 웹개발에 따른 구조 최적화

   • 구조에 따라 시멘틱 태그 적용
   • 메타태그 작성