나는 새로운 기술을 배우는 데 시간을 보내는 것을 좋아합니다. 그러나 새로운 기술을 사용할 때의 가장 큰 단점은 초기 채택에 따른 피할 수 없는 문제점입니다. “   ”에서 Web3에 대해 알아가는 과정에서 이런 내용을 꽤 많이 보았습니다. 2022년 풀스택 개발자에서 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이 필요하지 않습니다.  마지막 특징이 제가 이 글을 쓰게 된 계기가 되었습니다.  지도 가져오기는 어떻게 작동하나요?  높은 수준에서   Gem을 사용하면 개발자가 지도를 자신의 애플리케이션으로 가져올 수 있습니다.   을 사용하면 엔지니어가 필요에 따라 종속성을 업데이트, 고정 또는 고정 해제할 수 있습니다. 이는 Maven 및 Gradle이 Java 기반 프로젝트에서 작동하는 방식과 유사합니다. importmaps-rails /bin/importmap  이를 통해 패키지 번들링 및 ES6 및 Babel 트랜스파일과 관련된 복잡성을 처리할 필요가 없습니다. 안녕 웹팩! Node.js는 안녕!  뭔가를 만들어 보자  저는 거의 20년 동안 Ruby on Rails를 사용해 본 적이 없었기 때문에 가장 먼저 해야 할 일은   에 따라 MacBook Pro에 Ruby 3.3을 설치하는 것이었습니다. 설치한 후에는 IntelliJ IDEA IDE의 일부로   하기만 하면 되었습니다. 이 가이드 Ruby 플러그인을 설치  그런 다음 IntelliJ에서   이라는 새 Ruby on Rails 프로젝트를 만들고 JavaScript 프레임워크에   을 사용하도록 지정했습니다.  import-map Importmap 프로젝트가 생성되면서 먼저 로컬 JavaScript 라이브러리를 사용하는 것이 얼마나 쉬운지 확인하고 싶었습니다. 그래서 다음 내용으로   라는 새 JavaScript 파일을 만들었습니다. /public/jvc_utilities.js   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 플랫폼에 배포하려는 노력은   생성과 세 가지 CLI 명령으로 구성되었습니다. Procfile  두 경우 모두 Rails와 Heroku는 제가 고객에게 가치를 제공하는 데 집중하고 Webpack, Node.js 또는 DevOps 작업과 관련된 문제로 인해 어려움을 겪지 않도록 함으로써 저의 사명 선언문을 고수합니다.  나는 우리가 새로운 기술을 탐색할 때 그다지 이상적이지 않은 문제점에 계속 직면하게 될 것이라고 확신하지만, 시간이 지나면 이 기사에서 설명한 것과 유사한 성과를 보게 될 것이라고 확신합니다.  언제나 그렇듯이 제 소스 코드는   GitLab에서 찾을 수 있습니다. 여기  정말 좋은 하루 보내세요!

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

이 오디오는 이야기의 원래 언어로 제작되었습니다!

너무 오래; 읽다

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

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

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

이 18가지 개발자 도구로 생산성을 높이세요 🚀🔥

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

포럼에서 피드까지: 소셜 미디어 알고리즘이 디지털 상호작용을 형성하는 방식

이 18가지 개발자 도구로 생산성을 높이세요 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps