crazygun22
586
2019-04-04 12:40:23 작성 2019-04-11 10:46:15 수정됨
16
3733

가독성 높은 코드 만들기 방법 #1 - 멤버 변수의 개수를 줄여라!


한개의 클레스에서 멤버변수가 많을 수록 가독성이 떨어 집니다.

코드 분석시, 한 class 안에서 변수들 어떻게 읽히고, 쓰이고, 그것들의 관계가 어떻게 되는지 추적 해야 하기 때문인데, 그 수가 많을 수 록 마구 뭉쳐진 실타레 처럼 분석하기 어렵습니다. 

즉 가독성이 떨어지면 분석하는데 시간이 많이 걸립니다.

그리고 "가독성이 좋다" 는 결국 "모듈화가 잘 되어 있다" 가 됩니다.


아래는 예제는 선과 원을 그리는 가독성이 낮은 코드의 예제 입니다. 



class Line {

	int startX, startY;
	int endX, endY;
	int colorR, colorG, colorB;


	public void setStart(int x, int y){

		startX = x;
		startY = y;
	}


	public void setEnd(int x, int y){

		endX = x;
		endY = y;
	}


	public void setColor(int r, int g, int b){

		colorR = r;
		colorG = g;
		colorB = b;		
	}
	

	public void draw() {

		// Implementation required
	}

}



class Circle {
	
	int centerX, centerY;	
	int radius;
	int colorR, colorG, colorB;
	int borderThickness;
	int borderColorR, borderColorG, borderColorB;


	public void setCenter(int x, int y){

		centerX = x;
		centerY = y;
	}



	public void setRadius(int r){

		radius = r;
	}


	public void setColor(int r, int g, int b){

		colorR = r;
		colorG = g;
		colorB = b;
	}



	public void setBorderThickness(int thickness) {
		
		borderThickness = thickness;
	}	


	public void setBorderColor(int r, int g, int b){

		borderColorR = r;
		borderColorG = g;
		borderColorB = b;	
	}


	public void draw(){

		// Implementation required
	}

}




int main() {

	Line line = new Line();

	line.setStart(10, 10);
	line.setEnd(20, 40);
	line.setColor(255,0,0);

	line.draw();


	Circle circle = new Circle();

	circle.setCenter(20, 40);
	circle.setRadius(10);
	circle.setColor(0,0,255);
	circle.setBorderThickness(2);
	circle.setBorderColor(0,255, 0);

	circle.draw();
}


위의 코드에서 Line class는 멤버변수(startX, startY, endX ...) 가 7개 이고, circle은 10개가 됩니다.


그럼 위의 코드를 리펙토링 해보겠습니다.

멤버변수들 에서 X(statX ..), Y(startY ..) 로 끝나는 좌표 값들과 들과 R,G,B 로 끝나는 Color 값들을 묶을수가 있겠네요.

묶는 기준은 항상 같이 사용 된다고 판단 되기 때문 입니다. 좌표는 X, Y가 항상 같이 쓰이고  Color 의 r,g,b 또한 그렇지요.


그럼 아래와 같이 좀더 가독성이 좋은 코드가 됩니다.

class Point{

	int x;
	int y;
}


class Color{

	int r;
	int g;
	int b;
}



class Line {

	Point start;
	Point end;
	Color color;


	public void setStart(Point point){
		
		start = point;
	}


	public void setEnd(Point point){

		end = point;
	}


	public void setColor(Color rgb){

		color = rgb;		
	}
	

	public void draw() {

		// Implementation required
	}

}



class Circle {
	
	Point center;
	int radius;
	Color color;

	int borderThickness;
	Color borderColor;


	public void setCenter(Point point){

		center =  point;
	}



	public void setRadius(int r){

		radius = r;
	}


	public void setColor(Color rgb){

		color = rgb;
	}



	public void setBorderThickness(int thickness) {
		
		borderThickness = thickness;
	}	


	public void setBorderColor(Color rgb){

		borderColor = rgb;
	}


	public void draw(){

		// Implementation required
	}
}



int main() {

	Line line = new Line();

	line.setStart(new Point(10, 10));
	line.setEnd(new Point(20, 40));
	line.setColor(new Color(255,0,0));

	line.draw();


	Circle circle = new Circle();

	circle.setCenter(new Point(20, 40));
	circle.setRadius(10);
	circle.setColor(new Color(0,0,255));
	circle.setBorderThickness(2);
	circle.setBorderColor(new Color(0,255, 0));

	circle.draw();
}


결국 Line class 는 멤버 변수 개수가 7 -> 3 개로 Circle는 10 -> 5개로 줄었습니다.


위의 코드에 만족 하시나요? 제 눈에는 좀 더 가독성 높은 코드를 만들 수 있어 보이네요.

해당 글의 반응이 좋으면 해당 코드를 가지고  "가독성 높은 코드 만들기 방법 #2" 를 올리겠습니다.


https://okky.kr/article/567331 - "가독성 높은 코드 만들기 방법 #2"

https://okky.kr/article/568261 - "가독성 높은 코드 만들기 방법 #3"

18
4
  • 댓글 16

  • fender
    14k
    2019-04-04 12:45:27 작성 2019-04-04 12:52:37 수정됨

    저런 예제라면 메서드 체이닝(빌더 패턴) 같은 걸 도입하는 것도 가독성을 높이는 방법입니다. 그런 방법으로 예를들어 이런 식의 코딩이 가능합니다:

    Line.from(10, 10).to(20, 40).withColor(255, 0, 0).draw();
    Circle
        .at(20, 40)
        .withRadius(10)
        .withColor(0, 0, 255)
        .withBorder(Border.withThickness(2).withColor(0, 255, 0).build())
        .draw();
    2
  • siepe
    57
    2019-04-04 13:09:17

    질문이 있습니다

    새로 클래스 만들어서 객체에다가 저 정보를 담아서 하는 방식은 어떤가요??

    1
  • fender
    14k
    2019-04-04 13:11:48 작성 2019-04-04 13:15:11 수정됨

    좋은 강좌의 시작이 될 수 있는 글이라고 생각하여 응원드리고 싶습니다.

    조금 다른 관점의 접근을 제시하자면, 예시의 코드는 리팩터링이 아닌 객체지향 설계로부터로 도달할 수도 있습니다.

    즉, 애초에 설계 분석하는 단계에서 "사용자는 선과 원 등의 도형을 그릴 수 있다"라는 요구조건에서 명사를 추려서 Line과 Circle 같은 도메인 클래스를 추출하고, 이를 다시 Shape라는 상위 개념으로 일반화 할 수 있습니다.

    또한 "선은 시작과 끝점, 그리고 색상이라는 속성을 지닌다"라는 정의로부터 start, end, color 속성이 Line이라는 클래스의 속성으로 하는 설계를 도출하고, 이 중 color의 경우 선 뿐 아니라 원과 같은 다른 도형에도 공통적으로 적용할 수 있기 때문에 이는 Shape으로 풀업(pull up)하거나 Paintable 같은 인터페이스로 분리하는 등의 리팩터가 가능합니다.

    물론 본문의 코드는 멤버 변수의 수를 줄이는 리팩터링의 예시로 제시한 것이기 때문에 그 자체로 충분히 의미가 있지만, 실제로 이를 자바 같은 언어로 구현을 한다면 객체지향적 분석, 설계을 통해 어떤 도메인 클래스가 있고 그 클래스의 속성과 동작이 무엇인지 위에서 아래로 내려오는 방향으로 생각을 이어가는 것이, 반대로 선을 그어야 하니까 일단 멤버 변수로 startX를 써 넣고 보는 식의 접근 보다는 바람직하다고 생각합니다.

    2
  • 요런
    84
    2019-04-04 13:42:18

    이런 강좌 감사합니다~

    앞으로 다음 시리즈도 기다릴게요!


    1
  • crazygun22
    586
    2019-04-04 14:32:50

    이글은 초보를 위한것입니다.

    잘하시는 분들 눈에는 두번째 코드도 허접한 것 입니다.

    처음에 제일 허접한 예를 제시하고 

    가독성 높은 코드를 만들기 위한 몇가지 규칙들을 적용해가며 점점 나아지는 코드를 보여주기 위함입니다. 

    이글의 목적은 멤버 변수의 개수를 줄여야 된다. 그것만 알아주셨으면 합니다.

    2
  • lllllllllllllll
    7k
    2019-04-04 14:38:35
    저는 개인적으로 주석이 없어도 쉽게 파악할 수 있는 쉬운 코드가 가장 잘 짠 코드라는 생각이 듭니다. 간단하고 친숙한 예제가 훌륭하다고 느껴집니다 ^^
    1
  • 하마
    6k
    2019-04-04 15:31:05 작성 2019-04-09 12:07:11 수정됨


    class Line
    {
    public:
    	Line from(..) { .... } 
    	Line to(..) { .... } 
            Line withColor(..) { ... }
    	Line draw(..) { .... }  
    private:
        ....
    };
    
    Line line;
    line.from(..).to(..).withColor(..).draw(); 

    C++ 에선 이렇게 짜면 문법상으론 OK 지만 태클 당하죠.(비기너를 위한 퀴즈)

    C++ 로 코딩을 하기 위해 알아야할 3900가지중에 한가지 입니다. ^^ㅋ

    2
  • 아플라
    584
    2019-04-08 09:06:12

    좋은내용 감사합니다~~

    앞으로도 많이올려주세요 ㅎㅎ

    1
  • Karen
    14k
    2019-04-08 10:10:57

    안녕하세요~ :) 좋은 글 올려주셔서 감사합니다!

    포럼 보다는 Tips&강좌 게시판이 맞는 내용인 것 같아 옮겨 드립니다.

    1
  • crazygun22
    586
    2019-04-08 16:18:31

    개인 블로그 운영합니다. 아래 url 에서 더 많은 정보 얻으세요.

    http://crazygun22.com

    1
  • Frudy
    3k
    2019-04-08 18:11:22

    fender

    우와 대박....

    잘배워갑니다.


    1
  • 하자코딩
    138
    2019-04-09 10:54:41

    좋은 내용감사합니다:)

    혹시 더 실무에 가까운 예시가 있을까요~?

    0
  • crazygun22
    586
    2019-04-09 13:38:13

    가독성 높은 코드 만들기 방법 #2 도 올렸습니다.

    https://okky.kr/article/567331

    0
  • exexexe
    130
    2019-04-09 20:42:01

    글이나 코드가 쉽게 읽혔습니다....

    장황하지 않고, 명백하고 쉽게 읽히는 코드 같습니다.

    다음편도 기대할께요...

    (글이나 코드를 보면, 사람도 어렴풋이 보이더라고요..)

    0
  • 전재형
    4k
    2019-04-10 04:00:51
    맴버를 줄이라는 말은.특정 로직에서 관여하는 변수의 갯수를 명시적으로 줄여서 개발자의 메모리에 상황을 제한시키라는 의미랑 같은 것같네요.

    저는 가독성의 의미보다는 위가 더 큰 의미를 가진다고 생각하는데 어떻게 생각하시나요?

     비슷한 맥락으로 가능한한 final로 변수를 선언하는 행위 역시 비슷한 효과를 주는것같습니다.
    0
  • ambition
    1k
    2019-04-11 09:53:40

    블로그 북마크 했습니다 좋은 정보 감사하고 앞으로도 부탁드립니다.

    0
  • 로그인을 하시면 댓글을 등록할 수 있습니다.