GitHub Copilot 으로 코딩하기 #2

GitHub Copilot으로 코딩할 때 실시간 자동완성, 코드 리팩토링, 코드 테스트, 코드 디버깅을 어떻게 지원하는지 예시를 통해 알아보겠습니다. 개발환경은 VS CODE, node.js, mariaDB 입니다. 그리고 GitHub Copilot 활용 팁과 주의사항에 대해 소개하겠습니다.

 

1. 실시간 코드 자동완성 ex) 에디터 맨 윗줄 203라인 // .. 입력 후 엔터 : 자동완성 코드가 표시되면 탭하여 적용

• 자동완성 코드가 여러개인 경우 방향키 또는 좌< 우> 부분을 눌러 코드를 넘겨 볼 수 있습니다.
• 컨트롤 + 엔터키를 누르면 자동완성에 참조한 전체 코드를 볼 수 있습니다.
• 컨트롤 + 방향키를 누르면 필요한 부분 까지 코드를 완성 할 수 있습니다.
• 위 참조 이미지 207라인 : // 위 함수를 리팩토링 주석을 달고 엔터를 치면 sumOfSquares 함수를 arr.reduce와 화살표 함수 형태로 바꿔서 생성해줬습니다. 단, 결과는 조금 바뀔 수 있습니다.
• 211라인 : // 위 함수 테스트 : 입력하고 엔터치면 212라인과 같이 테스트 코드를 만들어주고 공백을 입력하면 // 55와 같이 결과도 보여줍니다.
• 214라인 : 주의하셔야 할 점이 생성형 AI가 산수에 약하다는 것 입니다. (결과값이 7335가 아니고 7815 입니다.)

        console.log(sumOfSquares([11, 42, 73, 24, 5])); // 7335

        // sumOfSquares([11, 42, 73, 24, 5]) = 11 * 11 + 42 * 42 + 73 * 73 + 24 * 24 + 5 * 5

        // 11 * 11 = 121

        // 42 * 42 = 1764

        // 73 * 73 = 5329

        // 24 * 24 = 576

        // 5 * 5 = 25

        // 121 + 1764 + 5329 + 576 + 25 = 7335 == false

        // 121 + 1764 + 5329 + 576 + 25 = 7815 == true

        console.log(sumOfSquares([11, 42, 73, 24, 5])); // 7815

• 결과값을 7815로 맞게 출력하도록 위와 같이 알려주면 그 이후로는 값을 바르게 표시하더군요.

        // 위 함수에 null이나 undefined를 전달하면 에러가 발생한다.

        // 에러가 발생하지 않도록 디버깅

        function sumOfSquares(arr) {

            if (!Array.isArray(arr)) return;

            return arr.reduce((acc, cur) => acc + cur ** 2, 0);

        }

• 위와 같이 에러가 나는 상황을 알려주면 디버깅(if (!Array.isArray(arr)) return;)도 해줍니다.

2. html / css 등 프론트 엔드 코드도 생성합니다. 아래 처럼 폼을 만들고 css부분으로 가면 그에 맞는 style을 생성

• 원하는 html 엘리먼트와 항목, css 스타일을 설명해주면 그에 맞는 코드를 생성합니다.
• 네비게이션 html 엘리먼트와 같이 특정 형식이 작성되어 있으면 그에 맞게 추가 코드를 생성합니다.
• 시멘틱 태그를 이해하고, 리액트, 앵귤러와 같은 프론트 엔드 프레임워크도 지원합니다.

3. SQL 쿼리문도 생성해줍니다. 아래는 테이블과 컬럼, 조회 조건을 설명하여 select 쿼리를 생성하는 모습입니다.

        // 아래는 WeatherValueHistory 테이블에서 Type이 3인 데이터를 조회하고, 데이터의 평균, 최대, 최소값을 조회하는 쿼리입니다.

        // 평균은 avgHumi, 최대는 maxHumi, 최소는 minHumi로 조회합니다.

        SELECT

           AVG(a.Value) AS avgHumi, MAX(a.Value) AS maxHumi, MIN(a.Value) AS minHumi

        FROM

            WeatherValueHistory a

        WHERE 1=1 AND a.Type = 3

        <if test="siteId != null and siteId != ''">

            AND a.SiteId = #{siteId}

        </if>

• AVG(.. 같은 내장 함수를 입력하면 자동으로 MAX, MIN 컬럼을 생성해줬습니다.
• mariaDB, mybatis 환경에서 문법에 맞게 코드를 생성하였고, 조회 조건과 변수 등의 코드도 생성해줍니다.

// Members 테이블 생성 = 컬럼 : 아이디, 성명, 패스워드, 이메일, 핸드폰, 주소, 가입일, 수정일, 삭제여부

• 위와 같이 설명하여 테이블을 생성하거나 crud 쿼리를 생성할 수 있고, 프로시저 등도 만들 수 있었습니다.