YoungJin Shin

테스트 주도 프로그래밍, 스크럼, 페어 프로그래밍 같은 애자일로 분류되는 많은 방법론들이 있다
좋아하는 것들도 있고 그렇지 않은 것들도 있다. 그중에 특히 극혐하는 것은 스크럼과 페어 프로그래밍이다.
내가 만약 면접 자리에서 궁금한게 없냐는 질문을 받는다면 반드시 물어볼 것이다.
스크럼과 페어 프로그래밍을 하나요? 만약 한다면 강제 사항인가요?
강제 사항이라면 나는 그 회사를 입사하지 않을 생각이다. 그만큼 싫어한다.
일단 스크럼은 차치하고, 오늘은 페어 프로그래밍에 대해서만 알아보자.
개인적으론 페어 프로그래밍이란 메커니즘이 두 페어가 현재 수행하고 있는 과제에 대해서 비슷한 지적 능력을 가졌을 때
그 효과가 절정에 이른다고 생각한다. 그렇지 않고 차이가 일정 수준 이상 난다면 그건 페어 프로그래밍이라기 보다는
도제식 교육이나 수업에 가까워진다고 생각한다. 물론 그렇지 않다는 수많은 연구 결과가 존재한다는 것은 나도 알고있다.
하지만 연구 결과는 연구 결과고 임상은 임상이니까. 내가 현업에서 느낀 심정은 연구 결과와는 많은 차이가 있었다.
그렇다면 두 페어의 실력만 비슷하면 시너지가 날까?
그렇지도 않다. 왜냐면 우리는 사람이기 때문이다.
사람이 뭔가? 아 다르고 어 다르게 느끼는 게 사람이다.
심지어 똑같은 아도 그사람 기분이 어떤지에 따라 몹시 다른 결과를 가져오는게 사람이다.
즉, 둘이서 한 모니터를 바라보며 사이좋게 작업을 하기 위해서는 케미라는 아주 미묘한 성질의 것이 또 잘 맞아야 한다는 말이다.
그렇다면 현실 세계에서 비슷한 지적 능력을 가진 케미가 잘 맞는 파트너를 만나서 페어 프로그래밍을 할 수 있는 확률은 얼마가 될까?
자세히 계산해 보지 않아도 내가 로또에 당첨되는 게 더 빠르다는 생각이다.
이렇게 설명하면 지적 우위를 가진 사람이 꼭 손해를 보는 느낌인 것 같다.
하지만 내가 현실 세계에서 느낀 페어 프로그래밍은 루즈 루즈 게임인 경우가 많았다.
실력이 좋은 사람은 딱히 페어 프로그래밍으로 얻은 이득은 없다고 느끼고 불편했다는 말을 많이 했다.
그런데 재미있게도 실력이 낮아 보이는 프로그래머도 똑같은 얘기를 하는 경우가 많았다.
이 지점이 도제식 교육과 페어 프로그래밍의 차이인 것이다.
도제식 교육이었다면 아마 배우는 사람은 그나마 그래도 만족했을 것이다.
무튼 이런 여타의 이유로 나는 페어 프로그래밍을 싫어했다.
뭐, 지금까지는 말이다.
하지만 올해 2월을 기점으로 세상이 바뀌었다.
ChatGPT가 등장한 것이다.
이 친구는 내가 앞서 서술한 페어 프로그래밍의 모든 단점을 단박에 없앤다.
지적 능력은 당연히 나보다 월등하다. 그럼에도 감정이 없고 내가 어떤 쌉소리를 하더라도 화내는 법이 없이 친절하게 알려준다.
그리고 365일 24시간 내내 내가 원할 때 언제든지 나와 함께 코딩할 준비가 돼 있다.
물론 가끔 openai 서버가 다운되긴 한다. 자주 있는 일은 아니니 그럴 땐 쉬면 되겠다.
ChatGPT와 근 9개월 가량 페어 프로그래밍을 함께 하면서 나는 앞선 단점들만 없으면 페어 프로그래밍이 확실히 효과적이라는 생각이 들 게 되었다.
그래서 이제는 입사 면접 자리에서 나에게 뭐가 궁금한지 물어보면 다음과 같이 물어볼 것 같다.
인공지능 사용이 가능한가요? ChatGPT를 지원해 주나요?
아래는 블로그의 테이블 셀 크기를 동적으로 변경하는 자바스크립트 코드를 작성하기위한 ChatGPT와의 대화 일부다.
복사해놓고 다시 보니 이건 페어 프로그래밍이라기보다는 코딩 노예를 고용한 것에 가깝지 않냐는 느낌이 약간 들긴 한다.
어쨌든 이러나 저러나 멋진 신세계다.
ChatGPT와의 페어 프로그래밍이라 쓰고 코딩 시키기
You
ChatGPT
... 중략 ...
CSS
Inline 스타일
자바스크립트 사용
... 중략 ...
You
ChatGPT
... 중략 ...
document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector('.my-table'); // 대상 테이블 선택
  const rows = table.getElementsByTagName('tr');
  for (let row of rows) {
    const cells = row.getElementsByTagName('td');
    for (let cell of cells) {
      const contentLength = cell.textContent.length;
      // 셀의 내용 길이에 따라 셀 크기 조정
      if (contentLength < 10) {
        cell.style.width = '20%';
      } else if (contentLength < 20) {
        cell.style.width = '30%';
      } else {
        cell.style.width = '50%';
      }
    }
  }
});
You
ChatGPT
... 중략 ...
document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector('.my-table'); // 대상 테이블 선택
  const rows = table.getElementsByTagName('tr');
  let maxContentLengths = [];
  let totalMaxLength = 0;
  // 각 칼럼의 최대 길이 계산
  for (let row of rows) {
    const cells = row.getElementsByTagName('td');
    cells.forEach((cell, index) => {
      const contentLength = cell.textContent.trim().length;
      maxContentLengths[index] = Math.max(maxContentLengths[index] || 0, contentLength);
    });
  }
  // 전체 최대 길이 계산
  totalMaxLength = maxContentLengths.reduce((acc, length) => acc + length, 0);
  // 각 칼럼에 비율에 따른 너비 설정
  for (let row of rows) {
    const cells = row.getElementsByTagName('td');
    cells.forEach((cell, index) => {
      const widthPercentage = (maxContentLengths[index] / totalMaxLength) * 100;
      cell.style.width = `${widthPercentage}%`;
    });
  }
});
You
ChatGPT
... 중략 ...
document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector('.my-table');
  const rows = Array.from(table.getElementsByTagName('tr'));
  let maxContentLengths = [];
  let totalMaxLength = 0;
  // 각 칼럼의 최대 길이 계산
  rows.forEach(row => {
    const cells = Array.from(row.getElementsByTagName('td'));
    cells.forEach((cell, index) => {
      const contentLength = cell.textContent.trim().length;
      maxContentLengths[index] = Math.max(maxContentLengths[index] || 0, contentLength);
    });
  });
  // 전체 최대 길이 계산
  totalMaxLength = maxContentLengths.reduce((acc, length) => acc + length, 0);
  // 각 칼럼에 비율에 따른 너비 설정
  rows.forEach(row => {
    const cells = Array.from(row.getElementsByTagName('td'));
    cells.forEach((cell, index) => {
      const widthPercentage = (maxContentLengths[index] / totalMaxLength) * 100;
      cell.style.width = `${widthPercentage}%`;
    });
  });
});
You
ChatGPT
... 중략 ...
You
ChatGPT
... 중략 ...
You
ChatGPT
따라서 Array.from을 사용하기 전에 반드시 해당 객체가 null이 아닌지 확인해야 합니다. 예를 들어, document.getElementsByTagName나 document.querySelectorAll과 같은 DOM 메서드가 비어있는 NodeList를 반환할 경우, 이를 배열로 변환하기 전에 null 여부를 검사해야 합니다.
You
ChatGPT
... 중략 ...
You
ChatGPT
다음은 수정된 코드입니다:
document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector('.my-table');
  if (!table) {
    console.log('테이블이 존재하지 않습니다.');
    return;
  }
  const rows = Array.from(table.getElementsByTagName('tr'));
  if (rows.length === 0) {
    console.log('테이블에 행이 없습니다.');
    return;
  }
  let maxContentLengths = [];
  let totalMaxLength = 0;
  let isCellPresent = false;
  rows.forEach(row => {
    const cells = Array.from(row.getElementsByTagName('td'));
    if (cells.length > 0) {
      isCellPresent = true;
    }
    cells.forEach((cell, index) => {
      const contentLength = cell.textContent.trim().length;
      maxContentLengths[index] = Math.max(maxContentLengths[index] || 0, contentLength);
    });
  });
  if (!isCellPresent) {
    console.log('테이블의 행에 셀이 없습니다.');
    return;
  }
  totalMaxLength = maxContentLengths.reduce((acc, length) => acc + length, 0);
  let widthPercentages = maxContentLengths.map(length => (length / totalMaxLength) * 100);
  let adjustedPercentages = widthPercentages.map(width => Math.max(width, 15));
  let adjustedTotal = adjustedPercentages.reduce((acc, width) => acc + width, 0);
  rows.forEach(row => {
    const cells = Array.from(row.getElementsByTagName('td'));
    cells.forEach((cell, index) => {
      const adjustedWidth = (adjustedPercentages[index] / adjustedTotal) * 100;
      cell.style.width = `${adjustedWidth}%`;
    });
  });
});
You
ChatGPT
비율을 조정하는 과정에서, 각 칼럼의 비율이 최소 15%가 되도록 하면서도 전체 합이 100%를 넘지 않도록 조정하는 방법은 다음과 같습니다:
먼저, 모든 칼럼의 비율을 계산합니다.
15% 미만인 칼럼의 비율을 15%로 조정합니다.
조정 후 총합이 100%를 넘는 경우, 15% 이상인 칼럼들의 비율을 적절히 감소시켜 총합이 100%가 되도록 합니다.
이 과정은 비교적 복잡할 수 있으며, 특히 칼럼의 수나 비율에 따라 다양한 시나리오를 고려해야 할 수 있습니다. 간단한 해결책으로, 모든 칼럼이 최소한 15%를 차지할 수 있도록 고정된 비율을 설정하거나, 동적으로 비율을 조정하는 더 복잡한 알고리즘을 구현할 수 있습니다.
You
ChatGPT
... 중략 ...
document.addEventListener("DOMContentLoaded", function() {
  const table = document.querySelector('.my-table');
  if (!table) {
    console.log('테이블이 존재하지 않습니다.');
    return;
  }
  const rows = Array.from(table.getElementsByTagName('tr'));
  if (rows.length === 0) {
    console.log('테이블에 행이 없습니다.');
    return;
  }
  let maxContentLengths = [];
  let totalMaxLength = 0;
  let isCellPresent = false;
  rows.forEach(row => {
    const cells = Array.from(row.getElementsByTagName('td'));
    if (cells.length > 0) {
      isCellPresent = true;
    }
    cells.forEach((cell, index) => {
      const contentLength = cell.textContent.trim().length;
      maxContentLengths[index] = Math.max(maxContentLengths[index] || 0, contentLength);
    });
  });
  if (!isCellPresent) {
    console.log('테이블의 행에 셀이 없습니다.');
    return;
  }
  totalMaxLength = maxContentLengths.reduce((acc, length) => acc + length, 0);
  let widthPercentages = maxContentLengths.map(length => (length / totalMaxLength) * 100);
  let adjustedPercentages = widthPercentages.map(width => Math.max(width, 15));
  let adjustedTotal = adjustedPercentages.reduce((acc, width) => acc + width, 0);
  // 총합이 100%를 초과하는 경우, 초과분을 줄이는 로직
  if (adjustedTotal > 100) {
    let excess = adjustedTotal - 100;
    adjustedPercentages = adjustedPercentages.map(width => {
      if (width > 15 && excess > 0) {
        let decrease = Math.min(width - 15, excess);
        excess -= decrease;
        return width - decrease;
      }
      return width;
    });
  }
  rows.forEach(row => {
    const cells = Array.from(row.getElementsByTagName('td'));
    cells.forEach((cell, index) => {
      cell.style.width = `${adjustedPercentages[index]}%`;
    });
  });
});

[소고] 페어 프로그래밍에 관한 단상 feat. ChatGPT

댓글