소스 코드 빌드 (Source Code Build)

소스 코드 빌드

빌드란 프로그램 소스 코드에 배포할 파일을 생성하거나 관련 문서를 생성하는 공정을 가리키는 단어 입니다. 패키지 소프트웨어나 게임 소프트웨어 등에서는 일반적인 공정입니다. 개발자가 직접 손을 대는 파일과 최종 사용자에게 사용하는 실제 파일은 다르므로 빌드 실행 후의 상태에서는 프로그램이 어떻게 동작하는지 알기 어려운 상태일 때가 대부분입니다.

최근 프론트앤드 개발에서는 당연한 듯 빌드 프로세스가 포함됩니다. 또한 빌드 환경이 자주 업데이트되기 때문에 "프론트앤드 개발의 흐름이 빠르다."로 여겨지기도 합니다. 그만큼 개발 환경이 성숙하지 않았음을 의미하며 발전시키고자 많은 개발자가 관여하는 세계라 할 수 있습니다. 아울러 항상 최신 정보를 확인하고 적용함으로써 개발 환경을 업데이트하며 개발 효율 향상을 꾀합니다.

하지만 원래 HTML은 물론, CSS와 JavaScript에서도 빌드는 필요하지 않습니다. 그래서 이번에는 어떤 언어가 어떤 특성이 있는지, 왜 빌드 프로세스가 생겨났는지, 그리고 왜 추천하는지를 설명하려 합니다.

Node.js

웹 프론트앤드 개발 환경이 크게 변화한 것은 Node.js의 보급과 밀접한 관계가 있습니다. 이전의 JavaScript 실행 환경은 웹 브라우저가 중심이었지만, Node.js의 등장으로 상황이 바뀌었습니다. 왜 서버 사이드 실행 환경이 프론트앤드 빌드와 관련이 있는 것일까요?

지금은 다양한 패키지가 npm으로 제공되기 때문에 직접 제품에 영향을 주게 됩니다. 또한 개발 프로세스를 효율적으로 만드는 도구도 많이 공개됐습니다.

Node.js의 보급과 함께 로컬에서의 이용을 전제로 하는 편리한 패키지가 많이 생겼습니다. 특히 상징적인 것이 컴파일러형 언어처럼 컴파일 공정을 빌드 작업에 포함하여 최종적인 실행환경과 개발시의 작업환경을 분리할 수 있게 되었다는 점 입니다. 이러한 변화에는 크게 다음과 같은 2가지 이점이 있습니다.

각 브라우저의 실행환경 차이 흡수

브라우저마다 동일한 성능과 기능을 구현하지 않기 때문에 브라우저 차이를 인지하고 작업을 해야 합니다. 하지만, 개발자는 프로그램 구현에 집중하여 더 효율적인 개발을 진행하는 바람이 있습니다.

JavaScript 언어 사양은 자주 업데이트되어 사용할 수 있는 메서드가 늘어납니다. 그러나 실제로 이용할 수 있는 브라우저는 일부에 한정됩니다. 이에 동작하지 않는 브라우저를 위해서는 폴백(fallback)한 코드로 자동 변환하여 편리한 최신 언어 사양으로 소스 코드를 기술할 수 있습니다.

또한, 최근의 웹 프론트앤드 기술은 그 대부분이 빌드를 전제로 하고 있습니다. 언어 사양은 앞으로도 계속 업데이트되므로 이후에도 계속 빌드 공정을 포함하는 것에는 이점이 있습니다.

최적화된 코드 제공

개발시 요구되는 코드와 실행시 요구되는 코드는 다릅니다. 개발시 코드에 요구하는 것은 알기 쉬운 주석이나 분명한 메서드 이름 등 높은 가독성과 유지보수성입니다. 그러나 실행시 코드는 빠르게 실행되어야 하며, 보안 측면에서도 안심할 수 있는 관점에서 읽기 어려워야 합니다. 이렇듯 실행시 요구사항은 개발시의 요구와는 완전히 다릅니다.

npm이 제공하는 Node.js 생태계를 최대한으로 활용함으로써 개발할 때는 개발 현장에 어울리는 소스 코드를 만드는데 집중하고, 최종적으로는 가장 효율적이고 표준화한 코드로 변환하여 최종 사용자에게 전달할 수 있습니다. 그러나 이러한 최적화 작업을 모두 직접 수행해야 하는 것은 현실적이지 않습니다. 따라서 프론트앤드 개발자가 여러가지 빌드도구를 사용할 줄 아는것이 요구되고 있습니다.

사람과 기계가 해야 할 일

빌드의 이점을 간단하게 정리하면, '개발자가 머리를 써야 할 일', '기계적으로 실행하는 것이 빠른 일'로 나누어 효율적으로 개발할 수 있다는 것입니다. 개발 현장의 효율을 올리는 것과 관련된 키워드로 최근 '자동화'가 자주 등장합니다. 사람이 실행하는 이상 실수는 피할 수 없습니다. 그러나 기계적으로 자동화하면 매번 확실하게 처리하여 실수를 줄일 수 있으며, 남는 시간은 다른 작업에 더욱 전념할 수 있습니다. 프론트앤드 개발에 빌드 공정을 적용하면 구축 작업을 자동화하여 편리한 개발 환경을 만들 수 있습니다. 이를 통해 개발자는 고품질 코드를 만드는 데 집중할 수 있게 됩니다.

또한 자동화는 코드 품질 유지와 밀접한 관련이 있습니다. 미리 귀띔하자면, 개발 환경 구축의 대표적인 요건 중 하나로 자동화가 가능한 작업이 어느 정도 있어야 한다는 것 입니다.

보통 코딩 작업에서는 머리를 쓰지 않고 묵묵히 같은 작업을 반복할 때가 흔합니다. 일정한 규칙에 따라 해당 부분을 변경하거나, 혹은 최신 언어 사양을 조사하여 이에 맞게 수정하는 일이 이에 해당합니다. 당연히 비슷한 문제를 지닌 개발자가 많기 때문에 '어떻게 이를 기계적으로 실행할 수 있을까?'라고 생각하며 연구하는 사람이 나타납니다. 그 결과, 지금은 프로그램으로 해결하는 방법이 많이 생겼습니다. 일단 환경을 구축하면 영구적인 작업 효율 향상으로 이어지므로 반복된 작업에 대해서는 자동화 할 좋은 방법이 없는지 적극적으로 고민하는 것이 좋습니다.

<참조>

1. 이시바시 케이타. ⌜더 괜찮은 웹 개발자가 되기 위한 리액트 스타일 가이드⌟. 구멍가게 코딩단, 안동현(옮김). 프리렉, 2019