GitHub를 탐색하고 협업할 오픈 소스 프로젝트를 찾는 동안 Neo.mjs를 발견했습니다. 나는 이 프로젝트에 관심을 갖게 되었고 이 새로운 프레임워크에 대해 더 많은 연구를 시작했습니다. 이 블로그 게시물에서 제가 알아낸 모든 것을 공유하고 싶습니다.

Neo.mjs란 무엇인가요?

Neo.mjs는 향상된 UI 응답성을 위해 웹 작업자를 활용하는 데 중점을 두고 고성능 데이터 기반 웹 애플리케이션을 구축하도록 설계되었습니다. 제공할 수 있는 기능에 대한 자세한 개요는 다음과 같습니다.

• 웹 작업자를 사용한 멀티스레딩: Neo.mjs의 주요 혁신 중 하나는 웹 작업자의 기본 사용입니다. 복잡한 논리, 과도한 계산, 데이터 처리 작업을 백그라운드 스레드(웹 작업자)로 오프로드하여 기본 UI 스레드가 계속 응답할 수 있도록 합니다.
• 빠르고 가벼운: 프레임워크의 공간을 줄이면서 매우 효율적인 고속 애플리케이션을 만드는 것을 목표로 합니다. 따라서 대시보드, CRM 및 데이터 시각화 도구와 같은 대규모의 데이터 집약적 애플리케이션을 구축하는 데 이상적입니다.
• 데이터 기반 UI: 프레임워크는 개발자가 데이터 모델을 UI 구성 요소에 효율적으로 바인딩하는 데 도움이 되는 데이터 기반 접근 방식을 제공합니다.

프레임워크 기능:

• 반응형 프로그래밍: Neo.mjs는 반응형 프로그래밍 모델을 사용합니다. 이는 데이터 모델의 변경 사항이 자동으로 UI 구성 요소에 전파되어 원활한 사용자 경험을 보장한다는 것을 의미합니다.
• 구성 요소 기반 아키텍처: 많은 최신 JavaScript 프레임워크와 마찬가지로 Neo.mjs는 개발자가 재사용 가능한 UI 구성 요소를 생성할 수 있도록 하는 구성 요소 기반 아키텍처를 사용하여 코드 모듈성과 유지 관리성을 향상시킵니다.
• 선언적 UI: 사용자 인터페이스를 정의하는 선언적 방식을 지원하여 개발자가 보다 명확하고 이해하기 쉬운 코드를 작성할 수 있습니다.
• 최소 종속성: Neo.mjs는 최소한의 종속성으로 작동하도록 구축되어 번들 크기와 로드 시간을 줄이는 데 도움이 됩니다.
• UI/작업자 분리: 프레임워크는 반응형 애플리케이션을 유지하는 핵심 요소인 과도한 데이터 처리 작업에서 UI 렌더링을 효과적으로 분리합니다.

설정: Neo.mjs 시작하기

첫 번째 프로젝트를 설정하는 것은 간단합니다. 시작하는 방법은 다음과 같습니다.

1단계: Neo.mjs 앱 생성기 설치

터미널을 열고 다음 명령을 실행하여 새로운 Neo.mjs 작업공간과 애플리케이션을 생성하세요:

npx neo-app@latest

2단계: 설정 프롬프트 따르기

명령을 실행한 후에는 새로운 Neo.mjs 애플리케이션을 사용자 정의하기 위한 일련의 프롬프트가 표시됩니다. 설정 방법은 다음과 같습니다.

> npx neo-app@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Welcome to the neo.mjs app generator!
current version of neo-app: 7.10.0
? Please choose a name for your neo workspace: neo-workspace
? Please choose a name for your neo app: MyApp
? Please choose a theme for your neo app: 
  neo-theme-dark 
  neo-theme-light 
  neo-theme-neo-light 
  all 
❯ none 
? Please choose your main thread addons: (Press  to select,  to toggle all,  to invert selection, and  to proceed)
❯◯ AmCharts
 ◯ AnalyticsByGoogle
 ◉ DragDrop
 ◯ HighlightJS
 ◯ LocalStorage
 ◉ Navigator
 ◯ MapboxGL
(Move up and down to reveal more choices)
? Do you want to use SharedWorkers? Pick yes for multiple main threads (Browser Windows): no
? Do you want to use a ServiceWorker for caching assets? no

이 링크에서 모든 설정을 더 자세히 설명하는 멋진 비디오를 볼 수 있습니다.

3단계: 애플리케이션 실행

설정이 완료되면 필요한 패키지가 자동으로 설치됩니다. 그러면 애플리케이션이 기본 브라우저를 시작하여 localhost:8080을 엽니다. 여기에서 새로 생성된 Neo.mjs 애플리케이션이 실행되는 것을 볼 수 있습니다:

Neo.mjs가 작업 공간에 앱 폴더를 자동으로 생성하는 것을 볼 수 있습니다. 이 폴더 내에서 애플리케이션의 기본 진입점은 view/MainContainer.mjs 파일에서 찾을 수 있습니다. 여기에서 UI 구성요소와 애플리케이션 로직 구축을 시작합니다.

4단계: 구조 탐색

새로운 Neo.mjs 작업 공간에는 보기, 구성 요소 및 기타 응용 프로그램 파일용 폴더가 미리 구성되어 있습니다. 앱의 다양한 부분이 어떻게 구성되어 있는지 이해하려면 파일 구조를 탐색하는 데 시간을 투자하세요. 이렇게 하면 사용자 정의 구성요소 구축을 시작할 때 더 쉬워집니다.

미리 알림

Neo.mjs는 기존 JavaScript 프레임워크와 약간 다르게 보일 수 있는 고유한 구문을 가지고 있습니다. 객체 리터럴을 광범위하게 사용하여 JSON과 유사한 방식으로 UI 구성 요소를 정의합니다. 이 구문은 성능을 최대화하고 복잡한 데이터 기반 애플리케이션을 구축하기 위한 유연성을 제공하도록 설계되었습니다.

초보자로서 처음에는 파일이 서로 상호 작용하고 통신하는 방식을 파악하는 것이 어려웠습니다. 그건 제가 아직도 배우고 있는 부분이에요.

다음은 무엇입니까?

저는 Neo.mjs에 대해 더 깊이 파고들어 간단한 UI 구축을 실험하고 멀티스레드 성능 기능을 최대한 활용하는 방법을 탐구할 계획입니다. Neo.mjs를 사용하여 고성능 웹 애플리케이션을 구축하는 데 대한 더 심층적인 팁, 요령 및 예를 공유할 향후 블로그 게시물이나 비디오 튜토리얼을 계속 지켜봐 주시기 바랍니다.

저와 함께 이 학습 여정에 참여하고 싶다면 Neo.mjs GitHub 저장소를 탐색하고 해당 웹사이트에서 일부 예제 애플리케이션을 사용해 보세요.

이전에 Neo.mjs를 사용하셨다면 몇 가지 팁을 댓글로 남겨주세요!