블록체인하는 만두아빠

바젤(Bazel)은 소프트웨어 빌드 및 테스트 자동화를 돕는 오픈소스 기반 툴입니다. Google 내부에서 사용중인 빌드 툴인 Blaze를 대외에서 사용할 수 있도록 일부 공개한 버전의 툴을 Bazel이라 부릅니다. 2015년 3월 출시되어 2024년 7월 현재 배포된 최신 버전은 7.2.1 버전입니다.

바젤의 장점은 Java, C++, Go, Android 및 iOS 등 다양한 플랫폼을 지원하고, 빠른 빌드 속도를 자랑한다는 점이 된다고 합니다. 바젤은 현재 Adobe나 ASML, Canva, Compass 등 다양한 기업에서 사용중인 것으로 알려져 있습니다. 

저는 Windows 환경에서 사용할 예정이라 Windows에서 설치하는 법을 알아보도록 하겠습니다.

먼저 바젤 설치 전에 Windows에서는 Microsoft Visual C++ Redistributable package 설치가 필요합니다.

이 링크를 통해서 설치를 먼저하시고 다음을 진행해주세요.

https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170

링크는 MS 공식 링크이니 걱정하시지 않으셔도 됩니다!

바젤에서는 권장 버전의 업데이트를 자동으로 할 수 있게, Bazelisk 사용을 권장하고 있습니다. Bazelisk는 Go로 래핑한 Launcher입니다. MacOS의 경우 Brew를 통해 간편하게 설치할 수 있는데, Windows의 경우 설치 과정에서도 Chocolatey를 사용하도록 하며, Path 관리가 필요합니다.

일단 직접 바젤을 설치하려면, 총 5가지 방법을 사용할 수 있습니다.

권장되는 방법은 Bazelisk를 사용하는 것입니다. 제가 이 방법을 따라가기 때문에 가장 마지막에 안내드릴께요.

1. Github에서 Bazel binary 다운로드받기
바젤 공식 깃허브에서 latest 버전에 대한 다양한 asset을 지원하니 다운받아주시면 됩니다. 

https://github.com/bazelbuild/bazel/releases

원하는 형태의 확장자를 확인하시고 다운받아주시면 됩니다. Windows 환경 기준에서는 bazel-{version}-windows-x86_64.exe를 확인하세요.

2. Chocolatey에서 Bazel 설치

Chocolatey 패키지를 미리 설치해뒀다는 가정하에 다음 커맨드를 통해 Bazel 패키지를 설치할 수 있습니다.

$ choco install bazel

3. Scoop에서 Bazel 설치

Scoop은 저도 잘 모르는 패키지라, 공식 홈페이지의 안내를 꼭 확인해주시기 바랍니다. 기본 내용은 다음과 같습니다.

• Scoop 패키지 설치

$ iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

• Bazel 패키지 설치

$ scoop install bazel

4. 소스에서 Bazel 컴파일하기

내용이 굉장히 길고 복잡한데, 굳이 소스에서 컴파일해오는게 개인적으로는 큰 의미가 있을지는 모르겠어서, 관련 내용을 첨부해드립니다. 필요하신 분은 직접 확인해보시면 좋을 것 같습니다.

https://bazel.build/install/compile-source?hl=ko

5. Bazelisk를 통한 설치 (Bazel 공식 권장)

Bazelisk를 통한 설치를 권장하는 이유는 자동 업데이트를 통한 버전 관리가 용이하기 때문입니다. Bazel이라는 툴이 자주 사용되는 툴은 아니기 때문에 업데이트에 굳이 신경쓰지 않는 것이 좋다면, Bazelisk를 통해 설치하는 것이 좋겠습니다. 

위에서 말씀드린대로 저는 Bazelisk를 통해 설치했는데, 아래 링크를 통해 간편하게 설치할 수 있습니다.

https://github.com/bazelbuild/bazelisk/releases

위의 2번에서 Chocolatey를 사용하는 방법이 있었는데, Bazelisk도 chocolatey를 통해 쉽게 설치할 수 있습니다.

$ choco install bazelisk

Bazelisk는 npm으로도 배포되어있어 $ npm install -g @bazel/bazelisk 로도 설치할 수 있습니다.

저는 bazelisk-windows-amd64.exe를 다운받아 설치했습니다.

설치는 자동으로 진행되니, 설치가 완료되면 $ bazel version을 통해서 제대로 설치되었는지 확인하시면 됩니다.

ESLint는 위키백과에 따르면 자바스크립트 코드 상에서 발견되는 문제 패턴을 식별하기 위한 도구입니다. 개인적으로 작업하는 프로젝트야 사실 본인만 알아볼 수 있다면 큰 문제가 되지 않겠지만 한 프로젝트를 공동 작업할 경우 공통된 규칙으로 작성해야 협업에 수월할 것입니다. ESLint는 현행 ECMA스크립트 표준을 지원해 코드 품질과 코딩 스타일을 일관성있게 구성할 수 있도록 돕습니다.

ESLint는 VSCode 사용자의 경우 Extension을 통해 간편하게 설치, 사용할 수 있습니다. 혹은 원하는 프로젝트에만 설치, 적용하는 방법도 있습니다.

적용을 원하는 프로젝트 터미널에서 ESLint를 설치해줍니다.

설치 
- npm 사용
$ npm install eslint

- yarn 사용
$ yarn add eslint

npx eslint --init

React 17버전 이후로 Import React from 'react'; 없이도 문제없이 코드를 작성할 수 있습니다만 ESLint는 별도의 설정없이는 이 React Import를 오류로 잡아냅니다. 이렇게요.

오류를 해결하기 위해 일일이 Import React from 'react'; 해주는 방법도 해결방법..이긴 하겠지만 ESLint 규칙에서 이 부분을 꺼버리는 것도 방법이 되겠습니다.

위의 과정대로 생성한 .eslintrc.js 파일 내에 rules 아래에 다음과 같이 입력해주면 됩니다.

module.exports = { 
...

    "rules": {
      ...
    	"react/react-in-jsx-scope": "off",
      ...
    }

...
}

프론트엔드 작업 중 Compile Error는 아니지만 아래와 같이 Warning이 떴습니다.

React를 사용하여 작업 중에 <a> 태그를 사용해서 링크를 연결했는데 이 <a> 태그의 href="" 부분에 유효한 값을 할당하지 않아서 생기는 경고입니다. 

유효한 링크를 걸어두면 쉽게 해결이 가능하나 테스트 중인 경우나 유효한 링크가 준비가 안된 경우 우선적으로 아래의 예시들과 같이 처리하여 오류를 없앨 수 있습니다.

<a href="#!">오류 해결</a>
<a href="/#">오류 해결</a>
<a href="{()=>false}">오류 해결</a>
<a href="javascript:void(0);">오류 해결</a>
<a href="javascript:;">오류 해결</a>

혹은 해당 경고가 뜬 코드의 최상단에 /* eslint-disable jsx-a11y/anchor-is-valid */ 를 입력하여 eslint를 비활성화하는 것도 방법이 되겠습니다. <a>태그가 너무 많아 일일이 처리를 해주기 어려운 경우에 간편하게 사용이 가능합니다.

기존의 Javascript에서는 변수선언할 때 기본적으로 variable을 줄인 var를 사용했습니다만 ES2015(ES6)에서 let와 const가 추가되었습니다. 기존의 var 선언과 다른 점이 있기 때문에 추가된 것이겠죠? var, let, const는 각각의 역할을 가지고 있습니다. 당연한 이야기겠지만 Javascript 개발자들은 이 세 가지의 차이점을 잘 알고 사용하는 것이 필요할 것입니다. 

var 선언

같은 변수명으로 중복 사용이 가능합니다. 여러번 중복으로 사용될 경우 가장 마지막으로 할당된 값이 변수에 저장됩니다. 따라서 var은 재선언되고 업데이트 가능합니다.

var greeting = "hi";
console.log(greeting);
// 출력 : hi

var greeting = "안녕하세요";
console.log(greeting);
// 출력 : 안녕하세요

var 사용은 아주 간편하지만 중복 사용이 가능하기 때문에 생기는 문제점이 있습니다. 코드의 다른 부분에서 같은 이름의 변수를 사용한 적이 있다면 출력 결과가 달라질 수 있습니다. 위의 코드 예제에서 greeting을 통해 "hi"를 출력하고 싶었는데 아래에 같은 이름의 변수로 "안녕하세요"가 선언되었기 때문에 greeting은 최종적으로 "안녕하세요"를 출력합니다. 혼자 작업하는 경우라면 이를 방지하기 위해 기억해두거나 메모를 해둘 수 있겠지만, 여럿이 협업하는 경우라면 문제가 생길 가능성이 있습니다.

let 선언

let은 var 선언의 문제점인 중복문제를 해결하면서도 재선언이 가능합니다. 

let greeting = "hi";
console.log(greeting);
// 출력 : hi

let greeting = "안녕하세요";
console.log(greeting);
// 출력 시 Syntax Error 발생. 변수 greeting이 이미 선언되었다는 에러 메시지 출력 

greeting = "gracias";
console.log(greeting);
// 출력 : gracias

let을 사용한 변수와 같은 이름으로 다시 let 선언하면 Syntax 에러 메시지가 출력됩니다. 어느 부분에서 문제가 생겼는지 확인한 후에 변수를 업데이트할 것인지 변수명 자체를 수정할지 결정하면 됩니다.

const 선언

let은 재선언을 통해서 업데이트가 가능하지만 const는 업데이트도 불가능합니다. 

const greeting = "hi";
console.log(greeting);
// 출력 : hi

const greeting = "안녕하세요";
console.log(greeting);
// 출력 시 Syntax Error 발생. 변수 greeting이 이미 선언되었다는 에러 메시지 출력 

greeting = "gracias";
console.log(greeting);
// 출력 시 Type Error 발생.

const로 선언된 변수는 일정한 상수값을 유지하게 됩니다. 따라서 중복 사용도 재선언을 통한 업데이트도 할 수 없습니다. 따라서 const 선언의 경우 선언하는 시점에 초기화가 되어야합니다.

var, let, const라는 변수를 선언하는 세 가지 방법의 차이를 확실하게 구분하고 필요한 상황에 맞는 방법을 사용하면 되겠습니다.

폰 노이만이 1945년 개발한 Merge Sort (합병 정렬)은 Divide and Conquer (분할 정복) 알고리즘의 하나입니다.

합병 정렬은 순서없이 뒤섞여 있는 배열(Array)을 길이가 1 이하가 될 때까지 분할하고 재귀적으로 정렬하고 다음 정렬된 부분을 병합하는 방법으로 진행합니다.

27, 10, 12, 20, 25, 13, 15, 22로 구성된 배열을 nondecreasing order(오름차순)로 정렬하는 Merge Sort는 다음과 같습니다.

각각 절반씩 Divide한 후에 길이가 1이하가 되면 정복(Conquer)을 통해 재귀적으로 정렬하고, Merge를 합니다. 최종적으로 Merge된 배열은 nondecreasing order로 정렬되어 있습니다.

위의 내용을 토대로 Input이 n, array s[1...n]이고 Output이 nondecreasing order로 정렬된 S[1...n]이 되는 Merge Sort 알고리즘을 다음과 같이 구성해볼 수 있을 것입니다.

void mergesort (int n, keytype S[]) {
	const int h = [n / 2], m = n - h;
	keytype U[1..h], V[1..m];
	
    if (n > 1) {
		copy S[1] through S[h] to U[1] through U[h];
		copy S[h+1] through S[n] to V[1] through V[m];
		mergesort(h,U);
		mergesort(m,V);
		merge(h,m,U,V,S);
	}
}