14,235 판독값

Rust와 WebAssembly를 사용하여 간단한 웹 앱 구축: 단계별 가이드

~에 의해 Max Zhuk8m2023/10/26

너무 오래; 읽다

Rust와 WebAssembly를 사용하여 고성능 웹 애플리케이션을 구축하는 방법을 알아보세요.

featured image - Rust와 WebAssembly를 사용하여 간단한 웹 앱 구축: 단계별 가이드

소개

JavaScript의 성능 제한으로 인해 좌절감을 느낀 적이 있습니까? 당신은 혼자가 아닙니다. 웹 애플리케이션이 더욱 복잡해짐에 따라 고성능 솔루션의 필요성이 더욱 분명해졌습니다. 성능뿐만 아니라 안전성과 효율성도 약속하는 두 가지 기술인 Rust와 WebAssembly를 만나보세요. 이 글에서는 Rust 와 WebAssembly를 사용하여 간단한 웹 애플리케이션을 구축하는 과정을 살펴보겠습니다.

Rust와 WebAssembly를 사용하는 이유는 무엇인가요?

러스트란 무엇인가요?

Rust는 메모리 안전성, 동시성 및 성능을 제공하는 것을 목표로 하는 시스템 프로그래밍 언어입니다. 강력한 유형 시스템과 소유권 모델 덕분에 널 포인터, 버퍼 오버플로 및 데이터 경합으로 인해 발생하는 일반적인 버그를 제거하도록 설계되었습니다. 따라서 Rust는 안정적이고 효율적인 소프트웨어를 구축하기 위한 이상적인 선택입니다.

러스트의 장점

메모리 안전성 : Rust의 소유권 모델은 변수가 단일 소유자를 갖도록 보장하여 메모리 누수 및 무단 데이터 액세스를 방지합니다.
성능 : Rust는 속도를 위해 설계되었으며 C 및 C++와 같은 언어와 긴밀하게 경쟁합니다.
동시성 : Rust의 언어 설계는 동시 코드 작성을 더 쉽게 만들어 확장성이 뛰어납니다.
풍부한 생태계 : 지속적으로 성장하는 패키지 저장소인 Cargo를 통해 Rust는 웹 개발, 데이터 조작 등을 위한 광범위한 라이브러리와 프레임워크를 제공합니다.

웹어셈블리란 무엇인가요?

WebAssembly(종종 wasm으로 축약됨)는 C, C++, Rust와 같은 고급 언어의 컴파일 대상 역할을 하는 이진 명령어 형식입니다. 웹 브라우저에서 거의 기본 성능을 구현하는 이식 가능하고 효율적인 코드 형식으로 설계되었습니다.

웹어셈블리의 장점

성능 : WebAssembly 코드는 일반적인 하드웨어 기능을 활용하여 거의 기본 속도로 실행됩니다.
보안 : WebAssembly는 안전하고 샌드박스 처리되도록 설계되어 호스트 시스템과 별도의 보호된 환경 내에서 실행됩니다.
이식성 : WebAssembly는 플랫폼 독립적입니다. 즉, 호환되는 웹 브라우저가 있는 모든 컴퓨터에서 실행될 수 있습니다.
상호 운용성 : WebAssembly 모듈은 JavaScript 애플리케이션에 쉽게 통합될 수 있으므로 기존 웹 기술을 활용할 수 있습니다.

Rust와 WebAssembly의 시너지 효과

Rust의 성능 및 안전 기능과 WebAssembly의 속도 및 이식성을 결합하면 웹 개발을 위한 강력한 듀오가 탄생합니다. 두 제품이 함께 잘 작동하는 이유는 다음과 같습니다.

최적화된 성능 : Rust는 비용이 들지 않는 추상화에 중점을 두어 WebAssembly 모듈을 간결하고 빠르게 만듭니다.
안전 및 보안 : Rust와 WebAssembly는 모두 보안 실행을 우선시하여 웹 애플리케이션의 안정성을 높입니다.
통합 용이성 : Rust는 WebAssembly에 대한 최고 수준의 지원을 제공하므로 Rust 코드를 wasm으로 컴파일하고 이를 웹 애플리케이션에 통합하는 것이 간단합니다.

Rust와 WebAssembly를 활용하면 최신 웹 개발 동향을 따라갈 수 있을 뿐만 아니라; 당신은 앞서 나가고 있습니다.

개발 환경 설정

코드를 살펴보기 전에 Rust 및 WebAssembly에 맞는 개발 환경을 설정하는 것이 중요합니다. 이렇게 하면 필요한 모든 도구와 라이브러리를 원하는 대로 사용할 수 있어 개발 프로세스가 간소화됩니다.

러스트 설치

Rust 설치 프로그램 다운로드 : Rust 공식 웹사이트를 방문하여 운영 체제에 적합한 설치 프로그램을 다운로드하세요.
설치 프로그램 실행 : 터미널을 열고 다음 명령을 실행하여 Rust와 해당 패키지 관리자인 Cargo를 설치합니다.
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
설치 확인 : Rust가 올바르게 설치되었는지 확인하려면 새 터미널 창을 열고 다음을 실행하세요.
```
 rustc --version
```
Rust 컴파일러 버전이 출력으로 표시되어야 합니다.

wasm-pack 설치

wasm-pack WebAssembly를 대상으로 하는 Rust 상자를 조립하고 패키징하는 도구입니다.

wasm-pack 설치 : 터미널을 열고 다음 명령을 실행합니다.

 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

설치 확인 : 다음을 실행하여 wasm-pack 설치되었는지 확인합니다.
```
 wasm-pack --version
```

Node.js 및 npm 설치

Node.js와 npm은 종속성을 관리하고 웹 서버를 실행하는 데 필수적입니다.

Node.js 다운로드 : 공식 Node.js 웹사이트를 방문하여 운영 체제에 맞는 설치 프로그램을 다운로드하세요.
설치 프로그램 실행 : 설치 메시지에 따라 Node.js와 npm을 모두 설치합니다.
설치 확인 : 터미널을 열고 다음 명령을 실행하여 Node.js 및 npm이 설치되어 있는지 확인합니다.
```
 node --version npm --version
```

IDE 설정

Rust 및 WebAssembly 개발을 위해 모든 텍스트 편집기를 사용할 수 있지만 Visual Studio Code 와 같은 IDE는 코드 완성, Linting 및 디버깅과 같은 기능을 제공하는 Rust용 확장을 제공합니다.

Visual Studio Code 설치 : 공식 홈페이지 에서 다운로드하여 설치하세요.
Rust 확장 설치 : Visual Studio Code를 열고 확장 마켓플레이스로 이동하여 Rust-lang으로 "Rust" 확장을 검색하세요. 향상된 Rust 지원을 위해 설치하세요.

macOS 사용자를 위한 참고 사항 : 이 가이드에 제공된 설치 명령은 macOS와 호환됩니다. 문제가 발생하면 해당 공식 문서에서 플랫폼별 지침을 참조하세요.

간단한 Rust 프로그램 만들기

이 섹션에서 우리는 주어진 숫자의 계승을 계산하는 Rust 프로그램을 만들 것입니다. 이를 통해 우리는 함수, 루프, 조건문과 같은 Rust의 일부 기능을 탐색하는 동시에 계산 집약적인 프로그램을 만들 수 있습니다.

Rust 프로젝트 초기화

새 Rust 라이브러리 만들기 : 터미널을 열고 다음 명령을 실행하여 새 Rust 라이브러리 프로젝트를 만듭니다.
```
 cargo new --lib factorial_calculator
```
프로젝트 디렉토리로 이동합니다 .
```
 cd factorial_calculator
```

계승 함수 작성

lib.rs 파일 열기 : 텍스트 편집기나 IDE에서 src/lib.rs 파일로 이동합니다.
계승 함수 구현 : 계승 함수를 구현하려면 다음 Rust 코드를 추가하세요.
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
여기서는 u32 (부호 없는 32비트 정수)를 인수로 사용하고 u32 를 반환하는 factorial 이라는 함수를 정의합니다. 이 함수는 재귀를 사용하여 주어진 숫자의 계승을 계산합니다.

웹어셈블리로 컴파일

Rust 코드 컴파일 : 이제 계승 함수가 있으므로 이를 WebAssembly 모듈로 컴파일해 보겠습니다. 터미널에서 다음 명령을 실행하세요.
```
 wasm-pack build
```
빌드 확인 : 명령을 실행한 후 프로젝트 폴더에 pkg 디렉터리가 표시되어야 합니다. 그 안에는 WebAssembly 모듈( factorial_calculator_bg.wasm )과 생성된 JavaScript 바인딩( factorial_calculator.js )이 있습니다.

그리고 거기에 있습니다! 방금 숫자의 계승을 계산하고 이를 WebAssembly 모듈로 컴파일하는 Rust 프로그램을 만들었습니다. 이는 Rust의 기능을 보여줄 뿐만 아니라 이 논리를 웹 애플리케이션에 통합하기 위한 단계도 설정합니다.

WebAssembly를 웹 앱에 통합

이제 계승 계산을 위한 WebAssembly 모듈이 있으므로 이를 간단한 웹 애플리케이션에 통합해 보겠습니다. 우리는 사용자가 숫자를 입력한 다음 Rust에서 생성된 WebAssembly 모듈을 사용하여 해당 숫자의 계승을 표시할 수 있는 기본 HTML 인터페이스를 만들 것입니다.

HTML 및 JavaScript 설정

HTML 파일 만들기 : 프로젝트 디렉터리에 index.html 이라는 새 파일을 만들고 다음 HTML 코드를 추가합니다.

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

여기서는 숫자 입력 필드, 계산을 실행하는 버튼, 결과를 표시하는 단락이 포함된 간단한 인터페이스를 만듭니다.

JavaScript 파일 만들기 : bootstrap.js 라는 새 파일을 만들고 다음 JavaScript 코드를 추가합니다.
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
이 스크립트에서는 WebAssembly 모듈을 동적으로 가져오고 calculateFactorial 이라는 함수를 정의합니다. 이 함수는 입력 필드에서 숫자를 읽고 WebAssembly 모듈에서 factorial 함수를 호출하여 결과를 표시합니다.

웹 앱 실행

웹 서버 설치 : 로컬 웹 서버가 없으면 npm을 사용하여 설치할 수 있습니다.
```
 npm install -g http-server
```
웹 서버 실행 : 터미널에서 프로젝트 디렉터리로 이동하여 다음을 실행합니다.
```
 http-server .
```
웹 앱 열기 : 웹 브라우저를 열고 http://localhost:8080 으로 이동합니다. Factorial Calculator 웹 앱이 표시되어야 합니다. 숫자를 입력하고 "계산"을 클릭하면 숫자의 계승값이 표시됩니다.

그리고 그게 다야! Rust로 생성된 WebAssembly 모듈을 간단한 웹 애플리케이션에 성공적으로 통합했습니다. 이는 Rust와 WebAssembly를 결합하여 고성능 웹 앱을 만드는 강력함과 유연성을 보여줍니다.

결론

이 기사에서 우리는 웹 개발을 위한 Rust와 WebAssembly의 강력한 조합을 살펴보았습니다. 우리는 개발 환경을 설정하는 것으로 시작한 다음 숫자의 계승을 계산하는 Rust 프로그램을 만드는 것으로 넘어갔습니다. 마지막으로 이 프로그램을 간단한 웹 애플리케이션에 통합했습니다.

Rust와 WebAssembly의 시너지 효과는 안전하고 효율적인 고성능 웹 애플리케이션을 구축할 수 있는 수많은 기회를 제공합니다. 기존 프로젝트를 최적화하거나 새로운 프로젝트를 시작하려는 경우 이러한 기술은 고려해 볼 만한 강력한 솔루션을 제공합니다.

웹 기술이 계속 발전함에 따라 앞서가는 것이 중요합니다. Rust와 WebAssembly는 단지 현대적인 트렌드가 아닙니다. 이는 차세대 웹 애플리케이션을 위한 구성 요소입니다.

이 여정에 함께해주셔서 감사합니다. Rust와 WebAssembly의 세계에 더 깊이 빠져보시길 바랍니다. 더 복잡한 기능을 구축하고 실제 애플리케이션을 탐색하는 방법을 자세히 알아보는 향후 기사를 계속 지켜봐 주시기 바랍니다.