개발상식 | 좋은 코드란?

웹 프론트엔드 관점에서의 좋은 코드

프론트엔드 개발자가 되기위해 학습을 진행하다 보면 개발자는 좋은 코드를 작성해야한다. 라는 글이 많았다.

그래서 도대체 좋은 코드란 무엇인지에 대해서 탐구해 보려고 한다.

 

좋은 코드라는 것은 개발자들의 관점에 따라 여러 종류로 나뉜다는 것을 알게 되었다.
예를 들어 보면 읽기 쉬운 코드, 중복이 제거된 코드, 테스트를 하기 좋은 코드 등등이 있다..

읽기 쉬운 코드

읽기 쉬운 코드를 작성하는 것은 정말 어렵다고 생각한다. 지금 당장은 내가 이해하고 읽기 쉽다고 생각해서
작성한 코드들을 몇개월이 지난 후 보게 되었을때는 그 코드가 당장 이해가 가지 않는 것처럼 말이다.
읽기 쉬운 코드에는 어떤 것들이 있을까?

일관성이 있는 코드, 문맥이 있는 코드

일관성이 있고 문맥이 있는 코드를 작성하게 되면 코드를 읽다보면 점점 적응이 되고
적응이 되면 다음 코드가 어떤 코드일지 예측이 가능해진다.
이것이 팀원들간의 그라운드 룰 (팀원들간의 규칙)이 필요한 이유이다.

 

1. 일관성이 있는 네이밍
   변수명 뿐만 아니라 함수명에 의해서도 규칙이 있으면 일관성을 지킬 수 있다.
   리액트 훅스에서는 prefit - action, target 으로 나타낸다.

   // prefix: on
   // action: click
   // target: button
   
   const onClickButton = () => {}​

2. 일관성이 있는 들여쓰기
   스페이스를 통해 들여쓰기를 하는 개발자들도 있고 탭키를 통해
   4칸 들여쓰기, 2칸 들여쓰기를 지향하는 개발자들도 존재한다.
   
   파이썬은 정확히 들여쓰기가 지켜져야 정상 동작을 하지만 JavaScript의 경우
   그렇지 않기 때문에 각자의 코드 작성법에 따라 달라질 수 있다고 생각한다.
   
   가장 중요한 것은 협업하는 상대방과의 약속이며
   그 후에는 개발자들의 암묵적인 룰을 따르는 것이 전체적인 커뮤니케이션을 위해 옳은 방법이다.

3. 줄 길이의 제한
   한줄의 긴 코드는 이해하기 쉽지 않으며 읽기도 불편하다.
   현재 약 100열 정도가 표준이라고 한다.

중복이 제거된 코드 (분리하기)

어느날 코드를 작성을 하다가 어딘가 익숙한 느낌이 들었을 수 있다.
이런 로직의 코드 예전에 작성했던 것 같은데?
알고보니 몇일 전 작성한 코드와 동일한 로직의 코드였던 것이다.

 

여기서 로직이란 어떤 코드의 논리적인 흐름이라고 할 수 있다.
예를 들어 입력값을 받았을 때 그 입력값에 1부터 9까지의 수를 더하는 함수가 존재한다고 했을 경우
입력값을 받은 후 1부터 9까지 더해주고 그 결과값을 출력해주는 전체적인 흐름을 로직이라고 할 수 있다.

 

나는 코드를 작성할 때 동일한 로직의 코드를 중복으로 작성하지 않아야 한다고 배웠다.
이것을 해결하기 위해 함수로 분리를 하여 그 로직을 담아 필요할 때 재사용해야 한다고도 말이다.

• 그러나 점점 시간이 흐름에 있어 현재 로직과 미세하게 다른 로직이 필요하게 된다면 어떻게 될까?
• 내가 만일 따로 빼놓은 함수가 있다는 점을 인지하지 못하게 된다면?
• 더군다나 내가 빼놓은 함수는 맨 위에 있고 현재 작업중인 코드는 맨 아래쪽에 위치한다면?
• 실행할 때마다 다른 외부값에 영향을 받는 함수라면? 예를 들어 new Date()를 통한 시간값들, 또다른 함수의 결과값이 필요한 경우

이 부분은 점점 학습을 진행해가면서 알아가보려고 한다.

추출 이 아닌 추상화 를 한다.

추출 은 특별한 기준없이 무작정 밖으로 빼내는 것
추상화 는 일정한 기준을 적용시켜 정리해낸 것

 

결국 별토의 함수, 파일로 추출을 하는 이유는 다른 파일에서도 재사용을 하기 위해서이다.
그러나 단순히 중복된 코드라서 추출을 해낸다면 다른곳에서 재사용하기 어렵다.

함수를 추출할 경우에는 그 함수의 역할 에 대해 정확히 인지를 하고 함수는 하나의 역할만을 담당 해야한다.
즉 서로의 영역을 침범하지 않아야 한다.

어디에 분리할 것인가? (격리의 유무)

• 특정 페이지 내에서만 제한되어 사용되는 함수인가?
• 어디에서든 전역적으로 사용될 수 있는 함수인가?

 

참고

좋은 코드란 무엇일까? (https://jbee.io/etc/what-is-good-code/)