프론트엔드/JavaScript

PoC는 무엇일까?

홍수성찬 2024. 7. 11. 17:46

원티드의 프리온보딩 프론트엔드 챌린지 실시간 강의를 듣다가 'PoC'라는 말을 듣게 됐다.

강의 내용이 아닌 Q&A 시간에 잠깐 스쳐지나가듯 나온 단어로 어디서 들어본 것 같지만, 정확하게 어떤 의미이고, 무엇인지 알 지 못해서 이번에 알아보기로 했다.

 

PoC

'PoC'는 Proof of Concept의 약자로 개념 증명을 의미한다. 개발에서 새로운 아이디어, 기술, 방법이 실제로 작동하는지 검증하기 위해 간단한 형태로 구현해보는 것이다.

 

강의를 진행하셨던 강사님은 리팩토링 하기 전에 'PoC'를 만들어본다고 말씀하셨다. 아마 그 이유는 리팩토링할 코드가 의도대로 작동할 것인지 확신을 얻기 위해서일 것이다. 'PoC'를 통해 발생할 수 있는 문제를 미리 발견하고, 새로운 접근 방식이 좋은 지 확인해볼 수 있다.

 

즉, 쉽게 말해 'PoC'는 "이 방법이 정말로 효과가 있을까?"를 테스트하는 작은 실험이라고 생각하면 된다.

 

예를 들어, 배열의 각 요소를 제곱하는 작업을 하는 코드가 있다고 치자.

function square(arr) {
	const result = [];
    for (let i = 0; i < arr.length; i++) {
    	result.push(arr[i] ** 2);
    }
    
    return result;
}

 

 

배열의 각 요소를 제곱하는 함수로 위 처럼 작성했다고 쳤을 때, 이를 리팩토링하기 전에 새로운 방법이 잘 동작하는지 'PoC'를 만들어 본다.

function poc(arr) {
	return arr.map(element => element ** 2)
}

const pocArr = [1, 2, 3, 4, 5];
console.log(poc(pocArr)); // [1, 4, 9, 16, 25]

 

 

만약, 'PoC'가 의도한 대로 제대로 동작한다면, 기존 코드를 리팩토링할 때 사용할 수 있게 된다. 리팩토링을 하게 된다면 아래처럼 수정할 수 있다.

function refactoredSquare(arr) {
	return arr.map(element => element ** 2);
}

const refactoredArr = [1, 2, 3, 4, 5];
console.log(refactoredSquare(refactoredArr));

 

 

이렇게 예시 코드를 통해 'PoC'가 새로운 접근 방식을 테스트하는 작은 실험인 것을 쉽게 이해할 수 있었다. 'PoC'는 리팩토링의 성공 가능성을 높이고, 예상하지 못한 문제를 미리 발견할 수 있다는 장점이 있다고 한다. 리팩토링하기 전에 그 코드가 내가 원하는 의도대로 제대로 동작하는지 미리 테스트해보고 적용하는 연습을 해야겠다.