시베리안 허숙희의 자바스크립트 비기닝 26 (리팩토링...)

자바스크립트

by e7e 2023. 6. 21. 12:33

리팩토링(Refactoring)에 대해 간략히 느낌있겡 이야기 해보장.

사전적 의미는 재정의, 재 인수분해등 어디서 그리 잘 찾는지 느낌 먼 말들로만

지루하고 느낌없게 학문적으로 설명한당.

규모와 영역에 따라 구체적이고 세부적인 설명이 당연 달라질것이다. 꽤 다름의 원리당.

억지로 느낌오게 현실감 있게 팍 줄이면 , 집안의 물건들을 잘 정리 하는 것이라 생각하자.

왜 정리하는가?, 찾기쉽게(효율), 보기 좋게(가독성), 필요 없어진 건 버린당(공간확보)등..

결국 유지보수, 업그레이드도 쉬워지고, 다음 개발에 보일러플레이트로 활용될 수 있당,

무엇보다도 개발자의 뇌와 습관에 좋은 경험치를 올려 레벨을 올려줄 수 있당.

물론 매니저의 IQ가 나쁘면 진행과정이 지루하고 시간소비만 많고 얻는 게 적을 수 있당!

마리 기럭지가 기러지기 전에 코드 레벨에서 리팩토링으로 느낌을 느낌받아보장

아래는 로또번호 발생 프로그램 코드당 (로직은 얼마든지 다양하게 나올 수 있당,내 맘이당)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 로또 번호 생성 프로그램
    const lotto = function(){
        const sixNums = [];  // 6개의 다른 번호를 담을 배열
        
        for(;;){             // 랜덤 몇번을 돌아야 할지 몰라 무한루핑
            
            if(sixNums.length == 6){  // 종료 조건
                return sixNums.sort((a,b)=> a - b); // 정렬해서 return
            }
            
            // 1~ 45 사이의 랜덤 넘버 발생!
            let ranSu =  Math.round(Math.random()*45); // 1~45발생

            // 중복 체크, isNot에 주목 상태변수,flag변수등으로 불림!
            let isNot = true;   // 없다고 가정!(증명엔 가정이 필요)
            for(let i=0; i <sixNums.length; i++){
                if(sixNums[i] == ranSu){
                    isNot = false;   // 가정이 틀렸음을 표시
                    break;           // 더 Looping 할 이유 없음
                }
            }

            // 판단! isNot이 true면 중복아니니 추가, 반대면 아무일 없음(안 추가)
            if(isNot){
                sixNums.push(ranSu);
            }

        }
    }

    // 테스통 5번만
    const loopCnt = 5;
    for(let i=1; i<=loopCnt; i++){
        alert(`${i}번째 결과  ${lotto()}` );
    } 
</script>

주석을 멋지게 다라노아서 코드 이해는 그리 어렵지 않을 것이당.

무한루핑 사용할 땐 항상 종료조건을 먼저 생각해야 함을 기억하고, 6개의 번호는 모두 달라야 하므로

중복체크 로직을 넣었는데, 수학이나 과학에서 사용하는 가정법을 사용하였당.(마니 사용해보장!)

중복체크 로직은 특히 반복문 for문 안에 필요없는 else 구문을 넣어, 오동작을 많이 발생시키니,

꼬옥 집중력 있게 왜 if문만 있어야 되는지 이해하자.(몇 줄 안되고, IQ상승작용이 있당)

이때 사용된 isNot과 같은 변수를 상태변수, flag(깃발)변수라 한당.

옛날 사람들은 깃발의 색깔이나 모양을 이용해서 먼거리 통신도 하였당!

결과는 예상대로 잘 나올 것이당!

이제 위 소스를 코드 레벨에서 한번 리팩토링 해보장!

단일 책임 원칙(Single Responsibility Principle)이라는 멋진 객체지향 Class 설계 원칙을

결코 무모하지 않게 괘니 여기에도 끌어다 적용해 보장!

랜덤숫자 발생 책임과 중복체크 책임까지 함수 lotto가 책임지고 있당.(불쌍타)

랜덤숫자 발생 함수는 이전에 한번 보았으니 아래 코드 처럼 할 수 있겠당.

    // 랜덤 정수(범위) 발생 함수
    const ranNum = function(pStart,pEnd){
        return pStart + Math.floor(Math.random()*(pEnd - pStart));
    }

중복체크도 포함여부체크로 책임 분산을 위해 아래 처럼 별도 함수화 할 수 있을 거시당.

    // 배열에 해당값이 포함되어 있는지 체킁
    const isInclude = function(pArr,pVal){
        for(let i=0; i<pArr.length; i++){
            if(pArr[i] == pVal){   // 배열에 pVal과 같은 값이 있음
                return true;
            }
        }
        return false;   // 배열에 pVal과 같은 값이 없음
    }

위 함수들을 포함하여, 정리하면 대략 아래처럼 lotto 함수 내부가 잘 정리된당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 랜덤 정수 발생 함수
    const ranNum = function(pStart,pEnd){
        return pStart + Math.floor(Math.random()*(pEnd - pStart));
    }

    // 배열에 해당값이 포함되어 있는지 체킁
    const isInclude = function(pArr,pVal){
        for(let i=0; i<pArr.length; i++){
            if(pArr[i] == pVal){   // 배열에 pVal과 같은 값이 있음
                return true;
            }
        }
        return false;   // 배열에 pVal과 같은 값이 없음
    }

    // 로또 번호 생성 프로그램 흐름이 정리됨
    const lotto = function(){
        const sixNums = [];  // 6개의 다른 번호를 담을 배열 결과
        
        for(;;){             // 랜덤 몇번을 돌아야 할지 몰라 무한루핑

            if(sixNums.length == 6){  // 종료 조건
                return sixNums.sort((a,b)=> a - b); // 정렬해서 return
            }
            
            // 랜덤 숫자 발생!
            let ranSu =  ranNum(1,45) // 1~45발생

            // 포함 여부 판단! false면 추가
            if(!isInclude(ranSu)){ // 
                sixNums.push(ranSu);
            }
        }
    }

    // 테스통 5번만
    const loopCnt = 5;
    for(let i=1; i<=loopCnt; i++){
        alert(`${i}번째 결과  ${lotto()}` );
    } 
</script>

정리하고 보니, ranNum, isInclude는 다른 곳에서도 재활용할 수 있는 함수가 되었공,

lotto함수도 흐름이 아주 잘 보여, 확장도 쉽게 할 수 있는 느낌같은 느낌이당!

이런 거시 리팩토링의 장점이당!

어디선가 들린당(처음부터 그렇게 짰어야 하는 거 아니예용? 설계부터~~ 흥!)

개인적인 생각은 항상 상황과 맥락에 따라 다르다.

마니 안타까운 경우가 이제 시작한 지 얼마 안된 초보자가 디버깅 연습없이 완벽한 코드!

있어 보이는 코드!를 짜려고, 해당 상황에 맞지 않는 과한 코드를 작성하는 경우다.

우선 실행결과가 나오도록 짜고(디버깅 연습 우선),

자신의 코드를 마구 고쳐보는 경험치를 올려 전두엽을 자극하라!

당신이 꽤 경험치가 높거나,높아졌다 생각된다면 당신과 다른 방식의 코드를 억지로 많이

접해서 그 다양성으로 전두엽의 이곳 저곳을 계속 찔러 융합의 맛을 봐야한당

요즘 꽤 많이 누네띠는 케이스가 단순 for문은 아예 사용하지 않고, 배열의 forEach나

jQuery의 $.each만을 사용하는 사람들이 있당. (있어보이지만 어떤 문제가 있을깡?)

jQuery의 $.each를 직접 구현해 본다면 대략 아래와 같을 것이당! (사용의 장단점은?)

(배열의 forEach는 이전에 구현해 보았당. 기억남? 안남? 주의력결핍 ADHD?)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // jQuery의 $.each를 초간단 구현해본다면
    const $ = {};
    $.each = function(pArg,pCallback){
        if(Array.isArray(pArg)){
            for(let i=0; i< pArg.length; i++){
                pCallback(i,pArg[i]);
            }
        }else{
            for(let key in pArg){
                pCallback(key,pArg[key]);
            }
        }
    }
    
    //테스통
    $.each(["로제","제니","리사"],(index,val)=>{
        alert(`${index}  ${val}`);
    });

    $.each({name:"로제",age:26,songgs:["Gone","너였다면"]},(key,val)=>{
        alert(`${key}  ${val}`);
    });
</script>

마음 약해서 힌트~~ ㅠㅠ. (주행 중에 브레이크(break)를 밟을 수 있는강?)

물론 $.each 코드를 콜백리턴값과 연동시켜 break를 넣을 수는 있당.(지식 공유의 문제?)

바깥에서 빠르게 흐르는 시간

내 아네서 멈춰버린 시간

균형을 일코 회오리 시간속에 탄생한 길 잃은 공간

아는 바깥에게 '고마워 날 지켜줘서'

아는 바깥에게 '너 때문에 여긴 감옥이얌'

바까튼 안의 눈치를 본다.

바깥의 선택은 있거나 없거나 양자의 탄생

제게 뇌를 달라 하신 분이 있습니다. 아덕 할 일이 남아있으니, 기억을 가져가세요

https://www.youtube.com/watch?v=z5O5Fr4UMuY

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 28 (모달 modal) (2)	2023.06.23
시베리안 허숙희의 자바스크립트 비기닝 27 ( 스크립트 게시판!) (0)	2023.06.22
시베리안 허숙희의 자바스크립트 비기닝 25 (LocalStorage...) (0)	2023.06.21
시베리안 허숙희의 자바스크립트 비기닝 24 (JSON 유틸) (2)	2023.06.20
시베리안 허숙희의 자바스크립트 비기닝 23 (ArrayList, HashMap도..) (0)	2023.06.19