코딩할 때 먼저 고민하면 좋을 10가지

다 깨버려 씟

 
비전공자로 개발자를 하게 된지 벌써 일년............
벌써 일년이 지났지만~~ 휴
 
어떤 코드가 좋은 코드고 나쁜 코드인지에 대한 궁금증이 계속 있었다.
왜 이렇게 내가 짠 코드들은 똥덩어리 같고 더럽고 보기 힘든 건지....................... 엉엉
물론 사람마다 주관적이겠으나........
 
며칠 전에 우리 팀 최강 프로님이 몰래 알려주신 약간의 팁(?)과
평소에 노마드 코더 유튜브를 보고는 하는데...
공통적인 요소들이 이 글에 총집합 되어 있어서 다 같이 공유하기 위해 끌올해왔다! 크크 
물론 자바스크립트 기준의 글이긴 함
 

1. env(환경변수) 활용하기

• dotenv 라는 npm 라이브러리를 설치하고 프로젝트 루트에 .env 파일을 만들어 환경변수를 넣을 수 있다.
  이를 활용하여 매직넘버를 줄이자.
• env에는 API 주소 등이 포함될 수 있다.

 

2. 커밋 단위를 작게작게 줄이자

• 함수 하나가 동작이 된다면 커밋을 날리는 습관을 들여 보자.
• 함수 = 하나의 기능으로 생각하고 함수가 완료되면 커밋을 보낸다면, 커밋 로그를 보다 자세하게 기록할 수 있다.

 

3. 커밋을 할 때는 오류가 없는 상태여야 한다.

• 다른 협업자가 내 오류 코드를 사용하게 될 수 있다. 오류가 있는지 없는지 확인해야 한다.
• 오류보다는 미구현이 낫다. (개인적인 생각)

 

4. 많이 쓰이는 기능은 함수화시켜서 util.js, common.js에 따로 저장해 두자

• Vanilla JS로 코딩할 때 자신만의 라이브러리를 만들어 볼 수 있다.
• util이나 common에 함수를 만들 때는 범용적인 역할을 할수록 다양한 프로젝트에서 활용할 수 있다.
• 기능이 작더라도 추상화된다면 좋다.

util이나 common 에 따로 만들어 두면 유용한 기능

• querySelector
• querySelectorAll
• fetch 요청 함수 - 에러 처리까지 포함하여 만들면 더욱 좋다.
• 타겟을 지정해 스타일을 변경하는 함수
• 기타 프로젝트에서 여러 번 동일하게 작동하는 함수

 

5. 커밋 시 불필요한 코드 삭제하기

• 특히 console.log 나 주석은 지우고 커밋한다.

 

6. 매직넘버 상수화시키기

• 0, 3, "문자열" => 모두 매직넘버이다.
• 이런 매직넘버는 LIMIT_SIZE, MIN_COUNT, MESSAGE 등과 같이 상수화해서 저장시켜 활용하기
• 상수들은 constants.js 로 따로 저장하기도 한다.

 

7. early return하기

• if문에 에러 상황을 작성하고, 에러 상황이라면 빨리 리턴하게 만들자.
• else if 나 else 문을 없애고, 불필요한 추가적인 행동을 안 하게 할 수 있다.
• 아래와 같은 예시를 참고할 수 있다. 
• // 안 좋은 예 const checkId = () => { if (isValid(a, b)) { successFn(); } else { return; } } // 좋은 예 const checkId= (a, b) => { if (!isValid(a, b)) return; successFn(); }

 

8. 객체 형태 다양하게 활용하기

• Destructuring을 사용하면 불필요하게 객체 참조 길이를 줄이고, 가독성도 높일 수 있다.
  따로 선언해 주지 않아도 객체의 이름으로 변수를 사용할 수도 있다.
• 아래와 같은 상수를 담은 변수가 있다고 할 때 Destructuring으로 어떻게 활용할 수 있는지 살펴보자.

  const formInfo = {
      id: "sohyun4283",
      password: "qwertu123",
      name: "Hoo"
  }
  
  // 사용하는 변수만 Destructuring하기
  const templating = ({name}) => {
      return `<li>${name}</li>`;
  };

• 더 다양한 예시는 모던 자바스크립트에서 볼 수 있다.

 

9. switch문이 불편하다면 객체를 활용하기

• 다음과 같이 객체를 만들어 사용하면, switch나 if문으로 분기처리 할 필요 없이 간편하게 함수를 찾아갈 수 있다.

  const _map = {
    "email" : checkEmail,
    "pswd1" : checkPswd1
  }
  
  const checkInputName = ({id, value}) => {
      _map[id](value);
  }
  
  const checkEmail = (value) => regex.test(value);

 

10. 네이밍은 어려운 것이 맞으나 제대로 생각하기

• 함수, 변수 네이밍은 모두에게 어려운 작업이다.
• 그렇다고 test1, test2, checkN 와 같은 의미를 알 수 없는 네이밍을 계속 쓰다 보면 나중에 바꾸기도 더 어려워 진다. (나조차 헷갈려 지는 내 코드가 된다.)
• 함수는 동사+명사 로 이름을 꼭 짓는다는 자신만의 일관성 있는 규칙을 지키면서 네이밍을 고민하면서 하는 것이 좋다.
• 오픈소스 네이밍이나 네이밍 팁을 참고하는 것도 네이밍하는 데 도움이 된다.

 
 
출처
https://egg-programmer.netlify.app/blog/Javascript-%EC%BD%94%EB%94%A9%ED%95%A0-%EB%95%8C-%EB%A8%BC%EC%A0%80-%EA%B3%A0%EB%AF%BC%ED%95%98%EB%A9%B4-%EC%A2%8B%EC%9D%84-10%EA%B0%80%EC%A7%80