<div id="readability-page-1" class="page"><div><article>

비즈니스 로직 위주로만 생각하고 바로 코드를 작성하다보면 코드가 길어지고, 가독성이 떨어지는 경우가 많다. 특히 가독성이 떨어지면 코드를 리팩토링할때도 이상한 방향으로 할 때가 있다. 이럴때 가독성을 높이기 위해 코드 배치와 변수를 줄이는 방법을 알아보자.
<h2 id="예제" data-ke-size="size26">예제</h2>
ORM 없이 직접 SQL을 작성하는 환경에서 다음과 같이 코드를 작성했다고 가정하자.
<pre data-ke-language="typescript"><code>export class ProductRepository {
 async create (createDtos: ProductCreateDto[]) {
 const promiseList = [];
 const results: Product[] = [];
 
 // 반복문을 수행하면서 DTO를 Entity로 변환하고 SQL Promise를 쌓아둔다.
 for(const dto of createDtos) {
 const entity = dto.toEntity(generateId());
 const queryParams = [];

 const query =
 `INSERT INTO product (${ Object.keys(entity) }) `
 + 'VALUES (?, ?, ?, ?, ?, NOW(), NOW() )';

 queryParams.push(
 entity.id,
 entity.name,
 entity.price,
 entity.status,
 entity.description
 );
 
 // Promise.all로 일괄처리를 위해 SQL 실행 Promise를 모아둔다. 
 // (물론 트랜잭션 등 단일 커넥션을 사용해야하니 이렇게 사용하면 안된다.) 
 promiseList.push(this.dbConnection.query(query, queryParams));
 results.push(entity);
 }
 
 // 모아둔 Promise SQL들을 실행
 await Promise.all(promiseList);
 
 // 반복문을 돌면서 쌓아둔 결과를 반환
 return results;
 }
 }</code></pre>
생각나는대로 코드를 작성하다보면 위와 같이 코드가 길어지고, 가독성이 떨어지는 경우가 많다. 어디서부터 리팩토링을 시작해야할지, 차근차근 시작해보자.
<h2 id="리팩토링" data-ke-size="size26">리팩토링</h2>
가장 먼저 해야할 것은 연관된 코드들끼리 근처에 두는 것이다.
<img src="https://blog.kakaocdn.net/dn/ltrSh/btsz9ntseeO/A4h6pdgazvghbQRCXcnojK/img.png" alt="ref1">
<ul data-ke-list-type="disc">
<li><code>entity</code> 와 관련된 코드들을 모아두고</li>
<li><code>queryParams</code> 와 관련된 코드들을 모아두고</li>
<li><code>promiseList</code> 와 관련된 코드들을 모아둔다.</li>
</ul>
연관된 코드끼리 근처에 두니 dto를 entity로 변환하는 코드 외에는 dto가 필요없다는 것을 알 수 있다. 그럼 이 반복문은 굳이 Dto를 통해 할 필요가 없고 Entity의 배열을 통해 수행할 수도 있다.
<img src="https://blog.kakaocdn.net/dn/EQS7G/btsz9XuCBZq/3KcohVuLRDWWzIR0yM7pF1/img.png" alt="ref2">
그래서 dto를 통한 반복문에서 entity를 통한 반복문으로 변경하는 것이 좋다. 그리고 이를 위해서는 entity의 배열을 만들어야한다.
반복문이 있음에도 <code>map</code> 을 통해 collection 작업을 한번 더 하는 것이 불편하지만, 한번 해보자.
<pre data-ke-language="typescript"><code>async create (createDtos: ProductCreateDto[]) {
 const entites = createDtos.map(dto =&gt; dto.toEntity(generateId()));
 
 for(...) {
 ...
 } 
 
 ..
}</code></pre>
그럼 다음과 같이 dto가 필요하지 않고, entity만 있으면 반복문이 수행가능 함을 알 수 있다.
<img src="https://blog.kakaocdn.net/dn/dVDMCs/btsz91Do520/HvSSDVyGQMQh08ern8kkmk/img.png" alt="ref3">
이를 entity의 배열로 교체하고, 반복문 내의 코드들도 변경한다.
<img src="https://blog.kakaocdn.net/dn/evhyGa/btsAbpcLtEO/bka6aJPTb0g5gJKtyjXIgk/img.png" alt="ref4">
그럼 다음과 같은 효과가 생긴다.
<ul data-ke-list-type="disc">
<li>불필요하던 <code>results</code> 변수가 삭제된다.</li>
<li>dto와 entity라는 2개의 값 변수가 하나로 통일 된다.</li>
</ul>
이제 <code>queryParams</code> 와 <code>query</code> 를 처리해보자. 물론 <code>queryParams</code> 와 <code>query</code> 라는 변수는 "의미가 있는 변수인데 굳이 줄여야하나?" 라는 생각도 든다. 그렇지만 일단은 한번 코드를 줄일 수 있는 만큼 줄여보자.
<img src="https://blog.kakaocdn.net/dn/bEwoLM/btsz6ghxLa0/nbw3DaY1igziCKf7lguEuK/img.png" alt="ref5">
그럼 다음과 같이 반복문 안에는 <code>promiseList.push()</code> 만 남게된다.
<img src="https://blog.kakaocdn.net/dn/LblnQ/btsAbox8X94/cA6SHGSkofAJMVHCTLaam1/img.png" alt="ref6">
그럼 결국 다음과 같이 <code>promiseList</code> 배열 변수와 반복문, entity 배열만 남게되었다.
<img src="https://blog.kakaocdn.net/dn/m1fwq/btsAalaQ2vX/c6iFKP2qW3VD4kLWj0Zh5k/img.png" alt="ref7">
그 전과 마찬가지로 다시 연관된 코드를 한 곳으로 모아둔다.
<img src="https://blog.kakaocdn.net/dn/buW4AY/btsz9y9iVmp/akW9ccKTTr3ZEIhkHKmqoK/img.png" alt="ref8">
반복문과 이를 저장할 배열만 있다면 이 <code>map</code> 을 통해 줄일 수 있으니, 다음과 같이 변경해보자.
<img src="https://blog.kakaocdn.net/dn/c81hyS/btsz9xP42Uq/R5SgPmZBEOJJKLHOUhlTQ1/img.png" alt="ref9">
남은 변수인 <code>promiseList</code> 도 삭제해보자. 그럼 다음과 같이 <code>entities</code> 와 <code>Promise.all()</code> 만 남게된다.
<img src="https://blog.kakaocdn.net/dn/bBtjpu/btsz7S1v6f6/eohZRfPeUmvkVIjp16VYWK/img.png" alt="ref10">
그래서 최종적으로 다음과 같은 코드가 된다.
<pre data-ke-language="typescript"><code>export class ProductRepository {
 ...
 
 async create (createDtos: ProductCreateDto[]) {
 const entites = createDtos.map(dto =&gt; dto.toEntity(generateId()));

 await Promise.all(entites.map(entity =&gt;
 this.dbConnection.query(
 `INSERT INTO product (${Object.keys(entity)}) `
 + 'VALUES (?, ?, ?, ?, ?, NOW(), NOW() )',
 [
 entity.id,
 entity.name,
 entity.price,
 entity.status,
 entity.description
 ])));

 return entites;
 }
}</code></pre>
물론 좀 더 리팩토링한다면 좀 더 함수를 분리할 수도 있다.
<pre data-ke-language="typescript"><code>export class ProductRepository {
 ...
 
 async create (createDtos: ProductCreateDto[]) {
 const entites = createDtos.map(dto =&gt; dto.toEntity(generateId()));

 await Promise.all(entites.map(entity =&gt;
 this.dbConnection.query(getInsertQuery(entity), getParams(entity))));

 return entites;
 }
}</code></pre>
<ul data-ke-list-type="disc">
<li><code>getInsertQuery</code> : entity를 통해 insert 쿼리를 생성한다.</li>
<li><code>getParams</code> : entity를 통해 쿼리 파라미터를 생성한다.</li>
</ul>
너무 극단적인 코드 줄임이 오히려 가독성을 방해해서 중간 변수등을 활용하고 싶다면 다음과 같이 할 수도 있다.
<pre data-ke-language="typescript"><code>export class ProductRepository {
 ...
 
 async create (createDtos: ProductCreateDto[]) {
 const entites = createDtos.map(dto =&gt; dto.toEntity(generateId()));

 await Promise.all(entites.map(entity =&gt; {
 const query = `INSERT INTO product (${Object.keys(entity)}) `
 + 'VALUES (?, ?, ?, ?, ?, NOW(), NOW() )';
 const params = [
 entity.id,
 entity.name,
 entity.price,
 entity.status,
 entity.description
 ];
 return this.dbConnection.query(
 query,
 params);
 }));

 return entites;
 }
}</code></pre>
<h2 id="마무리" data-ke-size="size26">마무리</h2>
하나의 레거시 코드를 리팩토링 하는 과정을 진행했다. 어마어마한 원칙을 따랐다기 보다는 크게 2가지를 우선 고려해서 진행했다.
<ul data-ke-list-type="disc">
<li>연관된 코드끼리 근처에 두기</li>
<li>변수 줄이기</li>
</ul>
이렇게 줄이고 난 뒤, 가독성을 위해 다시 변수를 추가하거나 함수를 분리하는 등의 작업을 진행했다. 이렇게 하면 가독성을 높이면서도 코드를 줄일 수 있다.
코드를 리팩토링할 때 어디서부터 시작해야할지 감이 잡히지 않는다면, 위 2가지를 우선 고려해보자.
<blockquote data-ke-style="style2">
물론 기존 함수의 테스트 코드가 있을때 리팩토링을 진행해야한다. 리팩토링은 정확히 이전과 동일하게 작동한다는 확신하에 시작해야만 한다.
</blockquote>
</article></div></div>

기억보단 기록을

이동욱 (향로)

비즈니스 로직 위주로만 생각하고 바로 코드를 작성하다보면 코드가 길어지고, 가독성이 떨어지는 경우가 많다. 
특히 가독성이 떨어지면 코드를 리팩토링할때도 이상한 방향으로 할 때가 있다. 
이럴때 가독성을 높이기 위해 코드 배치와 변수를 줄이는 방법을 알아보자.
예제
ORM 없이 직접 SQL을 작성하는 환경에서 다음과 같이 코드를 작성했다고 가정하자.
export class ProductRepository {
    async create (createDtos: ProductCreateDto[]) {
        const promiseList = [];
        const results: Product[] = [];
        
        // 반복문을 수행하면서 DTO를 Entity로 변환하고 SQL Promise를 쌓아둔다.
        for(const dto of createDtos) {
            const entity = dto.toEntity(generateId());
            const queryParams = [];
            const query =
            `INSERT INTO product (${ Object.keys(entity) }) `
            + 'VALUES (?, ?, ?, ?, ?, NOW(), NOW() )';
            queryParams.push(
                entity.id,
                entity.name,
                entity.price,
                entity.status,
                entity.description
            );
            
            // Promise.all로 일괄처리를 위해 SQL 실행 Promise를 모아둔다. 
            // (물론 트랜잭션 등 단일 커넥션을 사용해야하니 이렇게 사용하면 안된다.) 
            promiseList.push(this.dbConnection.query(query, queryParams));
            results.push(entity);
        }
        
        // 모아둔 Promise SQL들을 실행
        await Promise.all(promiseList);
        
        // 반복문을 돌면서 쌓아둔 결과를 반환
        return results;
    }
 }
생각나는대로 코드를 작성하다보면 위와 같이 코드가 길어지고, 가독성이 떨어지는 경우가 많다. 
어디서부터 리팩토링을 시작해야할지, 차근차근 시작해보자.
리팩토링
가장 먼저 해야할 것은 연관된 코드들끼리 근처에 두는 것이다.
entity 와 관련된 코드들을 모아두고
queryParams 와 관련된 코드들을 모아두고
promiseList 와 관련된 코드들을 모아둔다.
연관된 코드끼리 근처에 두니 dto를 entity로 변환하는 코드 외에는 dto가 필요없다는 것을 알 수 있다. 
그럼 이 반복문은 굳이 Dto를 통해 할 필요가 없고 Entity의 배열을 통해 수행할 수도 있다.
그래서 dto를 통한 반복문에서 entity를 통한 반복문으로 변경하는 것이 좋다.
그리고 이를 위해서는 entity의 배열을 만들어야한다.
반복문이 있음에도 map 을 통해 collection 작업을 한번 더 하는 것이 불편하지만, 한번 해보자.
async create (createDtos: ProductCreateDto[]) {
    const entites = createDtos.map(dto => dto.toEntity(generateId()));
    
    for(...) {
        ...
    } 
    
    ..
}
그럼 다음과 같이 dto가 필요하지 않고, entity만 있으면 반복문이 수행가능 함을 알 수 있다.
이를 entity의 배열로 교체하고, 반복문 내의 코드들도 변경한다.
그럼 다음과 같은 효과가 생긴다.
불필요하던 results 변수가 삭제된다.
dto와 entity라는 2개의 값 변수가 하나로 통일 된다.
이제 queryParams 와 query 를 처리해보자. 
물론 queryParams 와 query 라는 변수는 "의미가 있는 변수인데 굳이 줄여야하나?" 라는 생각도 든다. 
그렇지만 일단은 한번 코드를 줄일 수 있는 만큼 줄여보자.
그럼 다음과 같이 반복문 안에는 promiseList.push() 만 남게된다.
그럼 결국 다음과 같이 promiseList 배열 변수와 반복문, entity 배열만 남게되었다.
그 전과 마찬가지로 다시 연관된 코드를 한 곳으로 모아둔다.
반복문과 이를 저장할 배열만 있다면 이 map 을 통해 줄일 수 있으니, 다음과 같이 변경해보자.
남은 변수인 promiseList 도 삭제해보자. 
그럼 다음과 같이 entities 와 Promise.all() 만 남게된다.
그래서 최종적으로 다음과 같은 코드가 된다.
export class ProductRepository {
    ...
    
    async create (createDtos: ProductCreateDto[]) {
        const entites = createDtos.map(dto => dto.toEntity(generateId()));
        await Promise.all(entites.map(entity =>
            this.dbConnection.query(
                `INSERT INTO product (${Object.keys(entity)}) `
                + 'VALUES (?, ?, ?, ?, ?, NOW(), NOW() )',
                [
                    entity.id,
                    entity.name,
                    entity.price,
                    entity.status,
                    entity.description
                ])));
        return entites;
    }
}
물론 좀 더 리팩토링한다면 좀 더 함수를 분리할 수도 있다.
export class ProductRepository {
    ...
    
    async create (createDtos: ProductCreateDto[]) {
        const entites = createDtos.map(dto => dto.toEntity(generateId()));
        await Promise.all(entites.map(entity =>
            this.dbConnection.query(getInsertQuery(entity), getParams(entity))));
        return entites;
    }
}
getInsertQuery : entity를 통해 insert 쿼리를 생성한다.
getParams : entity를 통해 쿼리 파라미터를 생성한다.
너무 극단적인 코드 줄임이 오히려 가독성을 방해해서 중간 변수등을 활용하고 싶다면 다음과 같이 할 수도 있다.
export class ProductRepository {
    ...
    
    async create (createDtos: ProductCreateDto[]) {
        const entites = createDtos.map(dto => dto.toEntity(generateId()));
        await Promise.all(entites.map(entity => {
            const query = `INSERT INTO product (${Object.keys(entity)}) `
                + 'VALUES (?, ?, ?, ?, ?, NOW(), NOW() )';
            const params = [
                entity.id,
                entity.name,
                entity.price,
                entity.status,
                entity.description
            ];
            return this.dbConnection.query(
                query,
                params);
        }));
        return entites;
    }
}
마무리
하나의 레거시 코드를 리팩토링 하는 과정을 진행했다. 
어마어마한 원칙을 따랐다기 보다는 크게 2가지를 우선 고려해서 진행했다.
연관된 코드끼리 근처에 두기
변수 줄이기
이렇게 줄이고 난 뒤, 가독성을 위해 다시 변수를 추가하거나 함수를 분리하는 등의 작업을 진행했다. 
이렇게 하면 가독성을 높이면서도 코드를 줄일 수 있다.
코드를 리팩토링할 때 어디서부터 시작해야할지 감이 잡히지 않는다면, 위 2가지를 우선 고려해보자.
물론 기존 함수의 테스트 코드가 있을때 리팩토링을 진행해야한다. 
리팩토링은 정확히 이전과 동일하게 작동한다는 확신하에 시작해야만 한다.
            
카카오스토리
트위터
페이스북

[리팩토링] 코드 배치와 변수 줄이기

댓글