2,868 판독값

이제 안녕 Webpack 및 Node.js, Hello Rails 및 가져오기 맵

~에 의해 John Vester7m2024/08/07

너무 오래; 읽다

Rails 7에는 Node.js와 Webpack을 더 쉽게 사용할 수 있는 새로운 기능이 도입되었습니다. 새로운 지도 가져오기 기능을 사용하면 개발자가 지도를 애플리케이션으로 가져올 수 있습니다. 이를 통해 패키지 번들링 및 ES6 및 Babel 트랜스파일과 관련된 복잡성을 처리할 필요가 없습니다. 이 문서에서는 Ruby on Ruby에서 새로운 맵 가져오기 기능을 사용하는 방법을 설명합니다.

featured image - 이제 안녕 Webpack 및 Node.js, Hello Rails 및 가져오기 맵

나는 새로운 기술을 배우는 데 시간을 보내는 것을 좋아합니다. 그러나 새로운 기술을 사용할 때의 가장 큰 단점은 초기 채택에 따른 피할 수 없는 문제점입니다. “ 2022년 풀스택 개발자에서 Web3 파이오니어로 전환하는 방법 ”에서 Web3에 대해 알아가는 과정에서 이런 내용을 꽤 많이 보았습니다.

소프트웨어 엔지니어로서 우리는 새로운 기술을 테스트해 볼 때 이러한 얼리 어답터의 과제를 받아들이는 데 익숙합니다. 나에게 가장 효과적인 방법은 비논리적으로 보이는 단계는 내 기억에 남지 않기 때문에 내가 실행한 메모와 명령의 실행 목록을 유지하는 것입니다.

Web3 외에도 Node.js 및 Webpack을 사용하는 준표준 요구 사항이 있는 JavaScript 공간에서도 이러한 문제를 발견했습니다. 저는 Node.js와 Webpack을 사용하지 않고도 JavaScript를 있는 그대로 사용할 수 있는 솔루션을 찾고 싶었습니다. 나는 최근에 Rails 7 릴리스가 바로 이러한 상황을 어떻게 해결했는지 읽었습니다. 이것이 제가 이 기사에서 다룰 사용 사례입니다.

레일스 소개

완전히 투명하게 말하자면 Ruby 및 Ruby on Rails에 대한 나의 경험은 거의 없습니다. 몇 년 전 누군가가 완전한 기능을 갖춘 서비스를 만들기 위해 몇 가지 명령을 내리는 것을 보고 "와, 그거 정말 멋지구나"라고 생각했던 기억이 납니다. 하지만 저는 서비스와 애플리케이션을 구축하는 데 이러한 접근 방식을 가지고 놀며 시간을 보낸 적이 없습니다.

Rails가 2005년 말에 처음 등장했기 때문에 이 데모를 2006년 초에 본 것으로 확신합니다. 데모에서 본 것처럼 최종 결과는 모델-뷰-컨트롤러(MVC) 디자인 패턴을 지원하는 서비스였습니다. 나는 Spring, Struts, JSF 및 Seam 프레임워크를 초기에 사용하면서 익숙했습니다.

Rails는 DRY(반복하지 마세요) 관행을 준수하면서 일을 간단하게 유지하겠다는 약속을 유지합니다. 이 약속을 이행하기 위해 Ruby는 엔지니어용 Gems를 사용하여 프로젝트에 공유 종속성을 도입합니다.

버전 7 하이라이트

2021년 말, Rails의 7번째 주요 버전에는 몇 가지 흥미로운 기능이 도입되었습니다.

비동기 쿼리 – 쿼리를 순차적으로 실행하는 것에서 벗어나기
암호화된 데이터베이스 계층 – 서비스 계층과 지속성 계층 간의 데이터 보호
비교 유효성 검사기 – 지속성 전에 객체 유효성 검사를 허용합니다.
맵 가져오기 - 더 이상 JavaScript 라이브러리용 Node.js 및 Webpack이 필요하지 않습니다.

마지막 특징이 제가 이 글을 쓰게 된 계기가 되었습니다.

지도 가져오기는 어떻게 작동하나요?

높은 수준에서 importmaps-rails Gem을 사용하면 개발자가 지도를 자신의 애플리케이션으로 가져올 수 있습니다. /bin/importmap 을 사용하면 엔지니어가 필요에 따라 종속성을 업데이트, 고정 또는 고정 해제할 수 있습니다. 이는 Maven 및 Gradle이 Java 기반 프로젝트에서 작동하는 방식과 유사합니다.

이를 통해 패키지 번들링 및 ES6 및 Babel 트랜스파일과 관련된 복잡성을 처리할 필요가 없습니다. 안녕 웹팩! Node.js는 안녕!

뭔가를 만들어 보자

저는 거의 20년 동안 Ruby on Rails를 사용해 본 적이 없었기 때문에 가장 먼저 해야 할 일은 이 가이드 에 따라 MacBook Pro에 Ruby 3.3을 설치하는 것이었습니다. 설치한 후에는 IntelliJ IDEA IDE의 일부로 Ruby 플러그인을 설치 하기만 하면 되었습니다.

그런 다음 IntelliJ에서 import-map 이라는 새 Ruby on Rails 프로젝트를 만들고 JavaScript 프레임워크에 Importmap 을 사용하도록 지정했습니다.

프로젝트가 생성되면서 먼저 로컬 JavaScript 라이브러리를 사용하는 것이 얼마나 쉬운지 확인하고 싶었습니다. 그래서 다음 내용으로 /public/jvc_utilities.js 라는 새 JavaScript 파일을 만들었습니다.

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

기본 기능은 단순히 일부 명령을 JavaScript 콘솔에 반영합니다.

다음으로 다음 내용이 포함된 HTML 파일( /public/jvc-utilities.html )을 만들었습니다.

 <!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>

이 예에서는 추가 작업 없이 로컬 JavaScript 파일을 공개 HTML 파일과 함께 사용하는 방법을 보여줍니다.

다음으로 Example 라는 새 컨트롤러를 만들었습니다.

 bin/rails generate controller Example index

이 예에서는 Lodash 라이브러리를 사용하고 싶었으므로 다음 명령을 사용하여 import-map 프로젝트에 라이브러리를 추가했습니다.

 bin/importmap pin lodash

일부 JavaScript 기반 기능을 컨트롤러에 추가하기 위해 javascript/controllers/example_controller.js 다음과 같이 업데이트했습니다.

 import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }

이 논리는 세 가지 값의 배열을 설정한 다음 값을 두 배로 늘립니다. 이를 위해 Lodash map() 메소드를 사용합니다.

마지막으로 다음을 포함하도록 views/example/index.html.erb 업데이트했습니다.

 <h3>Example Controller</h3> <div data-controller="example"></div>

이 시점에서 이제 다음 URI를 사용할 수 있습니다.

/jvc-utilities.html
/example/index

배포하고 검증하자

Rails 서비스를 로컬에서 실행하는 대신 Heroku를 사용하겠다고 생각했습니다. 이렇게 하면 다른 소비자가 내 서비스에 액세스할 수 있는지 확인할 수 있습니다.

내 Heroku 계정을 사용하여 " Ruby로 Heroku 시작하기 " 가이드를 따랐습니다. 내 프로젝트를 기반으로 첫 번째 단계는 다음 내용이 포함된 Procfile 이라는 파일을 추가하는 것이었습니다.

 web: bundle exec puma -C config/puma.rb

다음으로 Heroku CLI를 사용하여 Heroku에서 새 애플리케이션을 만들었습니다.

 heroku login heroku create

create 명령을 사용하여 다음 애플리케이션을 시작하고 실행했습니다.

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

이 단계에서는 Heroku 생태계가 사용하는 Git 원격도 생성되었습니다.

이제 내가 해야 할 일은 최신 업데이트를 Heroku에 푸시하고 애플리케이션을 배포하는 것뿐이었습니다.

 git push heroku main

이를 통해 내 코드가 Heroku로 푸시되었고, Heroku는 내 애플리케이션을 컴파일하고 배포했습니다. 1분도 안 되어 다음 내용을 확인하고 애플리케이션을 사용할 준비가 되었음을 알렸습니다.

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

그런 다음 내 Heroku URL(내 애플리케이션에 고유하지만 이후 삭제했음)을 사용하여 /example/index 페이지로 이동했습니다. https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

이것이 내가 본 것입니다:

브라우저에서 JavaScript 콘솔을 보면 다음 로그가 나타납니다.

/jvc-utilities.html 로 이동하여 다음 정보를 확인했습니다.

브라우저에서 JavaScript 콘솔을 볼 때 다음 로그를 확인했습니다.

성공. 저는 Rails 7 애플리케이션에서 자체 포함된 JavaScript 라이브러리와 공용 Lodash JavaScript 라이브러리를 사용할 수 있었습니다. 모두 Import Maps를 사용하고 Webpack이나 Node.js를 다룰 필요 없이 가능했습니다. 이제 안녕, Webpack과 Node.js!

결론

독자들은 모든 IT 전문가에게 적용될 수 있다고 생각하는 나의 개인적인 사명 선언문을 기억할 것입니다.

“지적 재산의 가치를 확장하는 특징/기능을 제공하는 데 시간을 집중하십시오. 다른 모든 것에 프레임워크, 제품, 서비스를 활용하세요.” — J. 베스터

이 기사에서는 먼저 Rails 7을 살펴보고 Import Maps를 사용하여 Webpack 및 Node.js를 사용할 필요 없이 JavaScript 라이브러리를 얼마나 쉽게 사용할 수 있는지 보여주었습니다. Rails를 마지막으로 본 지 20년이 넘었음에도 불구하고 목표를 달성하는 데 필요한 짧은 시간에 깊은 인상을 받았습니다.

배포 관점에서 Rails 애플리케이션을 Heroku 플랫폼에 배포하려는 노력은 Procfile 생성과 세 가지 CLI 명령으로 구성되었습니다.

두 경우 모두 Rails와 Heroku는 제가 고객에게 가치를 제공하는 데 집중하고 Webpack, Node.js 또는 DevOps 작업과 관련된 문제로 인해 어려움을 겪지 않도록 함으로써 저의 사명 선언문을 고수합니다.

나는 우리가 새로운 기술을 탐색할 때 그다지 이상적이지 않은 문제점에 계속 직면하게 될 것이라고 확신하지만, 시간이 지나면 이 기사에서 설명한 것과 유사한 성과를 보게 될 것이라고 확신합니다.

언제나 그렇듯이 제 소스 코드는 여기 GitLab에서 찾을 수 있습니다.

정말 좋은 하루 보내세요!