리팩토링(Code Refactoring)

장형원·2022년 4월 9일

wecode

목록 보기

7/20

리팩토링(Code Refactoring)이란?

코드 작성은 단시간에 끝나는 것이 아니다. 한번 작성해 둔 코드를 기능을 유지하면서 간소화하고, 추후 유지보수하기 쉽도록 변경하는 작업 또한 필요하다.
리팩토링을 한다고 코드의 기능이나 성능이 개선되거나 하지는 않는다. 하지만 좋은 코드를 만들어 가기 위한 노력이라고 생각하면 될 것이다.

좋은 코드란 어느 한 코드를 두고 누구나 이해하기 쉽게 작성해 놓은 코드를 의미한다. 이 함수는 어느 기능을 구현하였는지 등의 내부 로직을 한눈에 알아볼 수 있어야 한다는 것이다. 변수명이나 함수를 실행시키는 방법 등을 혼자만 알아볼 수 있는 방법으로 작성했다면, 그것은 좋은 코드가 될 수 없다.

그렇다면 좋은 코드를 작성하기 위한 방법은 무엇이 있을까

1. console.log() 지우기

console.log("안녕하세요")

console.log는 기능을 구현하는 과정에서 input값이 제대로 들어오는지, 함수가 제대로 실행이 되는지, 또는 디버깅 과정에서 어떤 오류가 나는지 등의 내용을 확인할 수 있는 가장 많이 사용하는 방법이다.
console.log는 로직을 짜면서 아마 가장 많이 사용할 것이다. 하지만 이는 기능을 구현하기 위해 중간 과정에서 확인하기 위한 수단이고, 개발자도구 console창에서 확인하는 것 외에는 최종적으로는 기능 개선에 전혀 영향을 미치지 않기 때문에 git에 올릴 때는 모두 지워주는 것이 가독성 개선에 도움이 된다.

2. 변수 이름은 직관적으로

const goGoogleSite = () => {
	document.querySelector(".classname").addEventListener("click", function() {
    	console.log("구글 페이지로 이동하겠습니다.")
   	})
}

//

const fruitArray = ["사과", "포도", "수박", "오렌지", "참외", "바나나"]

코드를 작성해 가다보면 이름을 지어야 하는 일이 상당히 많다. 거의 절반 가까이라고 해도 과언이 아닐 것이다.
실제로 프로그래머들이 뽑은 힘들어하는 일 중 첫번째가 이름짓는 일이다.

프로그래머들이 가장 힘들어 하는 일

여기서 html에서의 id값이라던지, class명, 또한 javascript에서의 함수명 등의 이름을 잘 지어주는 것이 중요하다.

예를 들면 버튼 클릭으로 로그인이 되는 함수에서는 clickToLogin()이라던지, 검색기능을 구현하는 함수에서는 goSearch()라는 등의 직관적인 이름을 설정해 두어야 후에 내가 아닌 다른사람이 내가 쓴 코드를 리뷰 혹은 수정해야 할 때도 어떤 함수를 건드려야 하는지에 대한 이해도가 올라가게 된다.

정 이름짓는 일이 어려우면 도와주는 웹사이트도 있다. 그대로 따라하진 않아도 이름짓는 것에 대해 가이드 정도는 잡아갈 수 있을 것이다.

3. Semantic Tag 사용

* 참조(Semantic Tag란?)

<main>
    <article>
        <div class="feed">
            <title>제목</title>
            <h1>단락1</h1>
            <p>본문1</p>
            <h1>단락2</h1>
            <p>본문2</p>
        </div>
    </article>
</main>

html에는 다양한 태그들이 많이 사용된다. 하지만 가장 기본적인 태그라고 하여 div 태그나 span 태그 만을 남발하거나 하는 것은 좋은 코드가 될 수 없을 것이다.

Semantic Tag를 사용하면 우선적으로 0과 1밖에 모르는 컴퓨터도 이 태그가 무슨 태그인지 인지할 수 있다. 어디까지가 제목이고 어디까지가 본문이며 어느 단락에서 나뉘는 지를 파악할 수 있으며, 문서의 각 부분이 어떤 의미를 가지는 지 표시할 수 있다.
이것은 코드의 가독성 향상에 많은 도움이 된다.

4. img태그의 alt속성

<img src="이미지의 위치" alt="이미지 설명">

이미지 태그를 쓸 때 보면 항상 img와 함께 src와 alt가 같이 따라 나오게 된다.
여기서 src는 source이며 이미지가 들어있는 폴더의 위치, 혹은 웹사이트 링크를 넣을 수 있다.
그리고 alt는 이미지의 설명을 써 넣을 수 있는데,

이미지 태그의 alt 속성은 여러가지 이유로 이미지가 로딩되지 않았을 때 alt속성의 설명을 노출시켜 로딩되지 않은 이미지가 어떤 이미지인지 보여줄 수 있다.
시각장애인의 경우 alt속성을 통해 음성 서비스를 제공하여 첨부된 이미지가 어떤 이미지인지 알려줄 수 있다.
SEO검색 엔진 최적화에서 어떤 img인지 인식하는 코드가 alt속성이다.

회사에 따라 src alt 순서가 아닌 alt src 순서로 사용할 수 있다. 그것은 각 회사 지침에 따르면 된다.

5. 스스로 닫히는 태그들

태그는 일반적으로 여는 태그와 닫는 태그로 이루어져 있다.

<div></div>
<span></span>
<form></form>

하지만 예외적으로 태그 하나만으로 구성할 수 있는 것들이 있다.

<br />
<hr />
<img />
<meta />
<link />
<input />

등이 있고, 어찌되었든 닫는 태그가 하나 줄어들어 가독성에 있어서도 향상될 수 있는 태그이다.
물론 이 태그들도 열고 닫는 태그 따로 구성할 수 있지만, 불필요하게 코드를 늘릴 필요는 없을 것이다.

6. CSS 속성 순서

CSS 속성은 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성해 주는 것이 좋다.
사실 CSS 속성 순서는 기능이나 적용 순서에 영향이 있지는 않다. 하지만 CSS스타일 속성이 뒤섞여 있다면 추후 유지보수할 때 어떤 속성에 맞는 CSS 작성한 곳을 찾는 것이 쉽지 않을 것이다.

CSS끼리는 특히 부모 자식관계에서 영향을 많이 미치고, 이 코드가 길어질수록 복잡해지기에 조금이라도 쉽게 파악하기 위해서 컨벤션을 지키며 작성하는 습관을 들여야 한다.

권장하는 순서는 다음과 같다.
1. 레이아웃 속성 (position, float, cear, display)
2. 박스 모델 속성 (width, height, margin, padding)
3. 비주얼 속성 (color, background, border, box-shadow)
4. 텍스트 속성 (font-size, font-family, text-align, text-transform)
5. 기타 속성 (cursor, overflow, z-index)

7. 불필요한 스타일 속성 지양

div {
	display: block;
    width: 100%
}

span {
	display: inline;
}

각각의 태그에는 default값으로 설정되어 있는 CSS 속성들이 있다.
div태그에는 display block, width 100%가, span은 display inline 등이 있다. 구태여 이 태그들에 따로 같은 속성을 부여할 필요는 없다.

8. bottom-up 방식의 사용

레이아웃을 구성할 때 부모요소의 크기를 고정해 둔다면, 후에 자식 요소가 부모요소보다 커질 경우
부모 요소의 크기를 다시 수정해주어야 하는 경우가 생길 수 있다. 따라서 부모요소의 크기는 고정적이지 않은 유동적으로 속성을 부여해 준다. 이를 bottom-up방식이라고 한다.