JetBrains Ai Assistant (2)

지난번에 리펙토링 기능을 잘못썻던거같아서 다시 써보고 나머지 기능들 소개하겠습니다.

리팩터링

리팩터링은 소프트웨어 개발 과정에서 기존 코드를 변경하지 않고도 코드의 구조와 디자인을 개선하는 과정을 말합니다.

간단하게 코드의 품질을 상향시키는 작업입니다!

프로젝트하면서 작업했던 제출 로직을 리펙토링 해보겠습니다.

리팩토링 방법은  우클릭 -> AI Action -> Suggest Refoctoring

리펙토링 전)

function fncSubmit(){
            //$('#submit_btn').attr('onclick',''); 유효성 검사후 실행되도록 아래로 옮김
            var f = document.fncForm;
            var temp_line ="";

            temp_line = document.getElementsByName("service_type");	//결재라인값 세팅
            var service_type_arr = "";
            for (var i = 0; i < temp_line.length; i++){
                if (temp_line[i].checked==true ) {
                    service_type_arr += temp_line[i].value+'|';
                }
            }

            temp_line = document.getElementsByName("project_type");	//결재라인값 세팅
            var project_type_arr = "";
            for (var i = 0; i < temp_line.length; i++){
                if (temp_line[i].checked==true ) {
                    project_type_arr += temp_line[i].value+'|';
                }
            }

            temp_line = document.getElementsByName("selection_method");	//결재라인값 세팅
            var selection_method_arr = "";
            for (var i = 0; i < temp_line.length; i++){
                if (temp_line[i].checked==true ) {
                    selection_method_arr += temp_line[i].value+'|';
                }
            }

            temp_line = document.getElementsByName("known_path");	//결재라인값 세팅
            var known_path_arr = "";
            for (var i = 0; i < temp_line.length; i++){
                if (temp_line[i].checked==true ) {
                    known_path_arr += temp_line[i].value+'|';
                }
            }

            f.service_type_arr.value = service_type_arr;
            f.project_type_arr.value = project_type_arr;
            f.selection_method_arr.value = selection_method_arr;
            f.known_path_arr.value = known_path_arr;
            f.start_ymd.value = start_day;
            f.end_ymd.value = end_day;
            const during = $(".during").text();

            // console.log(f.start_ymd.value);
            // console.log(f.end_ymd.value);

            if (f.user_company.value==""){
                alert("회사명을 작성해주세요.");
                f.user_company.focus();
                return;
            }

            if (f.user_manager.value==""){
                alert("담당자를 작성해주세요.");
                f.user_manager.focus();
                return;
            }

            if(service_type_arr == ""){
                alert("원하는 서비스를 선택해주세요.");
                $(".serve_check").focus();
                return;
            }

            if(project_type_arr == ""){
                alert("프로젝트 유형을 선택해주세요.");
                $(".project_type").focus();
                return;
            }

            if (f.project_budget.value==""){
                alert("프로젝트 예산을 정해주세요.");
                $(".project_budget").focus();
                return;
            }

            if (during == "프로젝트 기간"){
                alert("프로젝트 기간을 정해주세요.");
                $(".during").focus();
                return;
            }

            if (f.selection_method_arr.value==""){
                alert("프로젝트의 선정방식을 골라주세요.");
                $(".selection_method").focus();
                return;
            }

            if (f.project_cont.value==""){
                alert("프로젝트의 문의 내용을 작성해주세요.");
                $(".project_cont").focus();
                return;
            }

            if(known_path_arr == ""){
                alert("알게된 경로를 선택해주세요.");
                $(".known_path").focus();
                return;
            }

            var info_yn = document.getElementsByName("info_yn");
            f.info_yn = info_yn;

            if(f.info_yn.checked == false){
                alert("개인정보 수집이용에 동의해주세요.");
                f.info_yn.focus();
                return;
            }

            //제출 로직
        }

 

리펙토링 후)

function gatherCheckedValues(elementName) {
            const elements = document.getElementsByName(elementName);
            return Array.from(elements).filter(el => el.checked).map(el => el.value).join('|');
        }

        function fncSubmit() {
            const form = document.fncForm;

            form.service_type_arr.value = gatherCheckedValues("service_type");
            form.project_type_arr.value = gatherCheckedValues("project_type");
            form.selection_method_arr.value = gatherCheckedValues("selection_method");
            form.known_path_arr.value = gatherCheckedValues("known_path");
            form.start_ymd.value = start_day;
            form.end_ymd.value = end_day;
            const during = $(".during").text();

            const validationMapping = [
                {value: form.user_company.value, message: "회사명을 작성해주세요.", focus: form.user_company},
                {value: form.user_manager.value, message: "담당자를 작성해주세요.", focus: form.user_manager},
                {value: form.service_type_arr.value, message: "원하는 서비스를 선택해주세요.", focus: $(".serve_check")},
                {value: form.project_type_arr.value, message: "프로젝트 유형을 선택해주세요.", focus: $(".project_type")},
                {value: form.project_budget.value, message: "프로젝트 예산을 정해주세요.", focus: $(".project_budget")},
                {value: during, message: "프로젝트 기간을 정해주세요.", condition: during === "프로젝트 기간", focus: $(".during")},
                {value: form.selection_method_arr.value, message: "프로젝트의 선정방식을 골라주세요.", focus: $(".selection_method")},
                {value: form.project_cont.value, message: "프로젝트의 문의 내용을 작성해주세요.", focus: $(".project_cont")},
                {value: form.known_path_arr.value, message: "알게된 경로를 선택해주세요.", focus: $(".known_path")}
            ];

            for (const validation of validationMapping) {
                if (validation.condition !== undefined ? validation.condition : !validation.value) {
                    alert(validation.message);
                    validation.focus.focus();
                    return;
                }
            }

            const infoConsent = document.getElementsByName("info_yn");
            form.info_yn = infoConsent;
            if (!form.info_yn.checked) {
                alert("개인정보 수집이용에 동의해주세요.");
                form.info_yn.focus();
                return;
            }

            //제출 로직
        }

중복된 코드를 줄여주고 확실히 코드의 품질이 많이 좋아졌다.

 

리펙토링을 하게되면 코드를 제공해주고 버튼

먼저 Show Diff랑 Apply immediately가 있는데

Show Diff를 클릭하면 현재 코드에서 어떤부분이 바뀌였는지 보여주고 적용할 수 있다.

Apply Immediately는 코드 차이점을 보지 않고 바로 적용 시킨다.

 

1. Copy ro Clipboard

제공된 코드를 클립보드로 복사.

복사된 코드를 원하는 로직에 추가하면 된다

 

2. Insert Snippet at Caret

현재 커서 기준으로 제공된 코드를 붙여넣기 한다.

 

3. Create File from snippet

제공된 코드를 새 파일로 만들어준다.

 

다음글에서 또 다른 기능 소개하겠습니다.