Ember.js 프레임워크 완벽하게 이해하기 – 개념부터 설치 활용까지!

웹 개발을 하다 보면 프로젝트를 시작할 때마다 “어떤 라우터를 쓰지?”, “상태 관리는 어떻게 하지?”처럼 끊임없이 선택해야 하는 순간들이 있죠. 이런 고민들이 피곤하게 느껴진다면, Ember.js를 한번 살펴보시면 좋겠습니다.

Ember.js는 개발자가 확장 가능한 단일 페이지 웹 애플리케이션을 만들 수 있도록 설계된 오픈소스 자바스크립트 웹 프레임워크입니다. Apple Music, LinkedIn, Twitch, Discourse, Groupon 같은 대형 서비스들이 실제로 사용하고 있다는 점에서 검증된 프레임워크라고 할 수 있습니다.

이번 포스트에서는 Ember.js가 무엇인지, 왜 “고민 없이” 개발할 수 있는지, 그리고 실제로 어떻게 시작하는지까지 초보자 눈높이에 맞춰 차근차근 설명해드려보고자 합니다.

Ember.js

목차(Contents)

1. Ember.js는 정확히 무엇인가요?

Ember.js를 한마디로 정의하자면 “모든 것이 이미 준비된 완성형 프레임워크”입니다.

Ember.js는 컴포넌트-서비스 패턴을 활용하는 오픈소스 자바스크립트 웹 프레임워크인데요. React나 Vue처럼 “라이브러리”가 아니라 “프레임워크”라는 점이 중요합니다.

React를 사용한다면 라우팅은 React Router를, 상태 관리는 Redux나 Zustand를, 빌드 도구는 별도로 선택해야 합니다. 하지만 Ember는 다릅니다. Ember CLI, 라우팅, 상태 관리, 템플릿 엔진이 모두 기본으로 포함되어 있습니다.

Convention over Configuration – 규칙이 주는 자유

Ember.js는 “설정보다 관례(convention over configuration)” 접근 방식을 따릅니다. 쉽게 말하면, 여러분이 일일이 설정 파일을 만들고 구조를 고민할 필요 없이, Ember가 정해놓은 규칙을 따르면 자동으로 모든 게 작동한다는 뜻입니다.

예를 들어볼게요:

파일 이름을 app/routes/scientists.js로 만들면? 자동으로 /scientists 경로가 생성됩니다
컴포넌트를 app/components/people-list.gjs로 만들면? <PeopleList> 태그로 바로 사용 가능합니다

일일이 설정하지 않아도 되니 개발에만 집중할 수 있는 거죠.

2025년 10월 기준 최신 버전

Ember.js의 최신 안정 버전은 6.8이며, 2025년 10월 25일에 릴리즈되었습니다. 이 버전에서는 Vite가 기본 빌드 시스템이 되어 빌드 속도가 획기적으로 빨라졌습니다.

버전 6.4는 LTS(Long Term Support)로 승격되어, 36주 동안 버그 수정을 받고 54주 동안 보안 업데이트를 받습니다.

주요 공식 링크:

공식 홈페이지: https://emberjs.com/
공식 가이드: https://guides.emberjs.com/
API 문서: https://api.emberjs.com/

2. 왜 Ember.js를 선택할까요?

개발 속도가 정말 빠릅니다

Ember는 개발 시간을 줄이고 생산성을 높이도록 설계되었습니다. 프로젝트를 시작할 때 “뭘 써야 하지?”라는 고민 없이 바로 비즈니스 로직 개발에 집중할 수 있어요.

ember new 명령어 하나로 이런 것들이 모두 준비됩니다:

개발 서버 (Development Server)
템플릿 컴파일 (Template Compilation)
JavaScript/CSS 최소화 (Minification)
Babel을 통한 최신 JavaScript 기능 지원
npm을 통한 의존성 관리
테스팅 환경

처음부터 프로덕션 준비가 된 상태로 시작할 수 있다는 게 큰 장점입니다.

안정성과 장기 지원

Ember는 시맨틱 버저닝을 따르며, 약 6주마다 마이너 릴리즈를 하고 약 18개월마다 메이저 릴리즈를 합니다.

더 중요한 건 LTS 버전이 54주 동안 지원되어, 자주 업그레이드하지 않는 팀도 보안 업데이트와 버그 수정을 계속 받을 수 있다는 점입니다.

릴리즈 종류	업데이트 주기	특징
Canary	매일	최신 개발 중인 기능 테스트용
Beta	6주	다음 릴리즈 미리보기
Stable	6주	현재 안정 버전 (일반 사용 권장)
LTS	~24주마다	54주 장기 지원 (기업용 추천)

대규모 서비스에서 검증됨

Apple Music은 Ember로 만든 데스크톱 애플리케이션의 가장 주목할 만한 사례입니다. iTunes 데스크톱 애플리케이션의 일부로 작동하는 이 앱이 Ember로 만들어졌다는 사실, 신기하지 않나요?

실제 사용 중인 주요 서비스:

Apple Music – 수백만 사용자의 음악 스트리밍
LinkedIn – 전문가 네트워킹 플랫폼
Twitch – 라이브 스트리밍 서비스
Discourse – 오픈소스 커뮤니티 플랫폼
Square – 결제 솔루션
Intercom – 고객 메시징 플랫폼
DigitalOcean – 클라우드 인프라

이런 대형 서비스들이 Ember를 선택한 이유는 복잡한 기능을 안정적으로 관리하기에 적합하기 때문입니다.

3. React, Vue와 비교하면 어떨까요?

많은 분들이 궁금해하실 것 같아 비교표로 정리해봤습니다.

특징	Ember.js	React	Vue.js
타입	완성형 프레임워크	UI 라이브러리	프로그레시브 프레임워크
데이터 바인딩	양방향	단방향	양방향 (선택 가능)
학습 난이도	처음엔 어렵지만 익히면 빠름	중간 정도	비교적 쉬움
번들 크기	큼	중간	작음
기본 제공	라우팅, CLI, 상태관리 모두 포함	React만 포함	코어만 포함
유연성	정해진 구조 (일관성 높음)	매우 자유로움	자유로움
커뮤니티	작지만 충성도 높음	매우 큼	큼
취업 시장	좁지만 전문성 인정	가장 넓음	넓음

어떤 상황에 Ember가 맞을까요?

Ember는 일관성과 확장성이 필요할 때, React는 가볍고 커스터마이징 가능한 접근이 필요할 때 선택하는 것이 좋습니다.

Ember가 적합한 경우:

대규모 엔터프라이즈 애플리케이션 개발
팀 내에서 일관된 코드 구조가 중요할 때
처음부터 완성된 도구 세트가 필요할 때
5년, 10년 장기적으로 유지보수할 프로젝트
“어떤 걸 쓸까?” 고민보다 개발에 집중하고 싶을 때

React가 적합한 경우:

빠른 프로토타이핑이 필요할 때
작은 프로젝트부터 점진적으로 키울 때
최대한의 자유도가 필요할 때
풍부한 서드파티 라이브러리를 활용하고 싶을 때

React(리액트)란? – 컴포넌트 기반 JavaScript 라이브러리, 쉽게 이해하기

Vue.js란? – JavaScript 프론트엔드 개발 프레임워크(Progressive Framework)

4. 실제로 시작해보기 – 설치부터 첫 앱까지

이제 실제로 Ember.js를 설치하고 간단한 앱을 만들어볼게요. 천천히 따라하시면 10분 안에 첫 Ember 앱을 실행할 수 있습니다.

시작하기 전에 필요한 것

먼저 Node.js와 npm이 설치되어 있어야 합니다. 터미널(또는 명령 프롬프트)에서 확인해보세요:

node --version
npm --version

설치되어 있지 않다면 Node.js 공식 사이트에서 LTS 버전을 다운로드하세요.

Ember CLI 설치하기

Ember CLI를 전역으로 설치하려면 다음 명령어를 사용합니다:

npm install -g ember-cli

설치가 잘 됐는지 확인해볼까요?

ember --version

버전 정보가 나오면 성공입니다!

첫 번째 프로젝트 만들기

ember new 명령어로 새 애플리케이션을 만들 수 있습니다:

ember new my-first-app --lang ko --strict

이 명령어가 하는 일:

my-first-app이라는 폴더를 만듭니다
필요한 모든 파일과 의존성을 자동으로 설치합니다
--lang ko는 접근성을 위해 기본 언어를 한국어로 설정합니다
--strict는 더 엄격한 타입 체크를 활성화합니다

커피 한 잔 하시면서 기다리시면 됩니다. 조금 시간이 걸릴 수 있어요.

개발 서버 실행하기

프로젝트 폴더로 이동한 후 개발 서버를 시작합니다:

cd my-first-app
npm start

몇 초 후 로컬 개발 서버가 http://localhost:4200에서 실행됩니다:

VITE v6.3.6 ready in 1202 ms
➜ Local: http://localhost:4200/

브라우저에서 http://localhost:4200을 열어보세요. Ember 환영 페이지가 보이면 성공입니다!

5. 간단한 앱 만들어보기 – 과학자 목록 페이지

이제 실제로 동작하는 페이지를 만들어볼게요. 과학자 목록을 보여주는 페이지를 만들어보겠습니다.

라우트 생성하기

Ember에는 일반적인 작업의 코드를 자동으로 생성해주는 제너레이터가 있습니다. 새로운 터미널 창을 열고 다음 명령어를 입력하세요:

ember generate route scientists

어떤 일이 일어났을까요? Ember가 자동으로:

app/routes/scientists.js – 데이터를 가져오는 라우트 파일
app/templates/scientists.gjs – 화면에 보여줄 템플릿 파일
app/router.js – 라우터에 경로 자동 추가
tests/unit/routes/scientists-test.js – 테스트 파일

이 모든 것을 한 번에 만들어줍니다!

화면 만들기

코드 에디터에서 app/templates/scientists.gjs 파일을 열고 이렇게 수정해보세요:

import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "Scientists"}}
  <h2>위대한 과학자들</h2>
  <ul>
    {{#each @model as |scientist|}}
      <li>{{scientist}}</li>
    {{/each}}
  </ul>
</template>

여기서 {{#each}} 부분은 반복문이에요. @model에 있는 데이터를 하나씩 꺼내서 보여줍니다.

데이터 넣어주기

app/routes/scientists.js 파일을 열고 실제 데이터를 넣어볼게요:

import Route from '@ember/routing/route';

export default class ScientistsRoute extends Route {
  model() {
    return [
      '마리 퀴리 (Marie Curie)',
      '메이 제미슨 (Mae Jemison)', 
      '알베르트 아인슈타인 (Albert Einstein)',
      '장영실',
      '세종대왕'
    ];
  }
}

model() 메서드는 이 페이지에 필요한 데이터를 반환합니다. 여기서는 간단하게 배열을 반환했지만, 실제로는 API에서 데이터를 가져올 수도 있어요.

브라우저에서 http://localhost:4200/scientists를 열면 과학자 목록이 보입니다!

6. 재사용 가능한 컴포넌트 만들기

이 목록을 다른 페이지에서도 쓸 수 있게 컴포넌트로 만들어볼게요.

컴포넌트 생성

ember generate component people-list

컴포넌트 코드 작성

app/components/people-list.gjs 파일을 이렇게 작성합니다:

<template>
  <h2>{{@title}}</h2>
  <ul>
    {{#each @people as |person|}}
      <li>{{person}}</li>
    {{/each}}
  </ul>
</template>

@가 붙은 것들(@title, @people)은 외부에서 전달받는 값입니다. 마치 함수의 매개변수 같은 거라고 생각하시면 됩니다.

컴포넌트 사용하기

이제 app/templates/scientists.gjs를 수정해서 방금 만든 컴포넌트를 사용해볼게요:

import { pageTitle } from 'ember-page-title';
import PeopleList from '../components/people-list';

<template>
  {{pageTitle "Scientists"}}
  <PeopleList
    @title="위대한 과학자들"
    @people={{@model}}
  />
</template>

훨씬 간결해졌죠? 이제 이 컴포넌트를 프로그래머 목록, 작가 목록 등 다른 곳에서도 재사용할 수 있습니다.

7. 클릭 이벤트 추가하기

버튼을 만들고 클릭했을 때 반응하도록 만들어볼게요.

클릭 가능한 버튼과 상태 관리

app/components/people-list.gjs를 이렇게 수정합니다:

import { on } from '@ember/modifier';
import { fn } from '@ember/helper';
import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';

export default class extends Component {
  @tracked currentPerson;

  showPerson = (person) => {
    this.currentPerson = person;
  };

  isCurrentPerson = (person) => {
    return this.currentPerson === person;
  };

  <template>
    <h2>{{@title}}</h2>
    <ul>
      {{#each @people as |person|}}
        <li>
          <button type="button" {{on "click" (fn this.showPerson person)}}>
            {{person}}
          </button>
          {{#if (this.isCurrentPerson person)}}
            ⬅️ 선택됨
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </template>
}

코드 설명:

@tracked – 이 변수가 바뀌면 자동으로 화면이 업데이트됩니다
{{on "click"}} – 클릭 이벤트를 처리합니다
(fn this.showPerson person) – 클릭했을 때 선택된 사람 정보를 전달합니다

이제 버튼을 클릭하면 화살표가 나타나는 걸 볼 수 있어요!

8. 프로덕션 배포 준비하기

앱이 완성되면 실제 서버에 올려야겠죠?

빌드하기

프로덕션용으로 최적화된 파일을 만듭니다:

npm run build

이 명령어는 JavaScript, 템플릿, CSS, 이미지 등 모든 자산을 최적화해서 dist/ 폴더에 저장합니다.

Netlify에 배포하기 (무료!)

Netlify는 Ember 앱을 쉽게 배포할 수 있는 방법 중 하나입니다.

준비 작업:

public/ 폴더에 _redirects 파일을 만들고 이 한 줄을 추가하세요:

/* /index.html 200

이 설정은 모든 URL 요청을 index.html로 보내서 Ember가 라우팅을 처리하게 해줍니다.

다시 빌드합니다:

npm run build

배포 방법 1: 드래그 앤 드롭 (가장 쉬움)

Netlify에 가입합니다 (무료!)
Sites 페이지에서 드래그 앤 드롭 영역을 찾습니다
dist/ 폴더를 드래그해서 떨어뜨립니다
몇 초 후 배포 완료! URL을 받습니다

배포 방법 2: GitHub 연동 (자동 배포)

GitHub에 코드를 올립니다
Netlify에서 “New site from Git” 클릭
GitHub 저장소를 연결합니다
Ember 앱을 자동으로 감지하면 “Deploy site” 클릭
코드를 푸시할 때마다 자동으로 재배포됩니다!

9. 서버에서 데이터 가져오기 – Ember Data

실제 앱에서는 서버 API에서 데이터를 가져와야 하죠. Ember Data는 데이터베이스의 ORM처럼 작동하는 데이터 관리 라이브러리입니다.

모델 정의하기

서버에서 받아올 데이터의 구조를 정의합니다:

ember generate model scientist

app/models/scientist.js:

import Model, { attr } from '@ember-data/model';

export default class ScientistModel extends Model {
  @attr('string') name;
  @attr('string') field;
  @attr('number') birthYear;
  @attr('string') achievement;
}

API에서 데이터 가져오기

app/routes/scientists.js:

import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class ScientistsRoute extends Route {
  @service store;

  model() {
    // 서버의 /api/scientists 엔드포인트에서 데이터를 가져옵니다
    return this.store.findAll('scientist');
  }
}

API 어댑터 설정

서버 주소를 설정합니다:

ember generate adapter application

app/adapters/application.js:

import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  host = 'https://your-api-server.com';
  namespace = 'api';
}

Ember Data는 JSON API 명세를 구현하는 RESTful API를 통해 설정 없이 레코드를 로드하고 저장할 수 있습니다.

10. 개발 도구 – Ember CLI 완전 정복

Ember CLI는 개발 도구에 “설정보다 관례”를 적용하는 명령줄 유틸리티입니다.

자주 쓰는 명령어 모음

명령어	하는 일	예시
`ember new <앱이름>`	새 앱 생성	`ember new blog-app`
`ember serve`	개발 서버 시작	또는 `npm start`
`ember generate route <이름>`	라우트 생성	`ember g route about`
`ember generate component <이름>`	컴포넌트 생성	`ember g component nav-bar`
`ember generate model <이름>`	모델 생성	`ember g model user`
`ember generate service <이름>`	서비스 생성	`ember g service cart`
`ember build`	프로덕션 빌드	`npm run build`
`ember test`	테스트 실행	`npm test`
`ember install <애드온>`	애드온 설치	`ember install ember-bootstrap`

💡 팁: generate는 g로 줄여 쓸 수 있어요!

애드온으로 기능 확장하기

애드온은 ember install 명령어로 설치할 수 있습니다.

자주 쓰는 인기 애드온:

ember-bootstrap – Bootstrap UI 컴포넌트 (링크)

ember install ember-bootstrap

ember-concurrency – 비동기 작업 관리

ember install ember-concurrency

ember-power-select – 강력한 셀렉트 박스

ember install ember-power-select

ember-cli-mirage – 개발용 Mock API 서버

ember install ember-cli-mirage

애드온 찾기: Ember Observer에서 2,000개 이상의 애드온을 검색할 수 있습니다.

11. 테스팅 – 안정적인 앱 만들기

Ember.js는 개발자가 애플리케이션에 대한 자동화된 테스트를 작성할 수 있는 내장 테스팅 프레임워크를 가지고 있습니다.

테스트 종류 이해하기

1. 단위 테스트 (Unit Tests)

개별 함수나 클래스를 테스트합니다
가장 빠르고 간단합니다

2. 통합 테스트 (Integration Tests)

컴포넌트가 제대로 렌더링되는지 테스트합니다
사용자 인터랙션도 테스트할 수 있습니다

3. 인수 테스트 (Acceptance Tests)

전체 앱의 워크플로우를 테스트합니다
“사용자가 로그인 → 글 작성 → 저장” 같은 시나리오를 테스트합니다

컴포넌트 테스트 예제

tests/integration/components/people-list-test.gjs:

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import PeopleList from 'my-app/components/people-list';

module('Integration | Component | people-list', function (hooks) {
  setupRenderingTest(hooks);

  test('제목과 리스트가 제대로 렌더링되는지 확인', async function (assert) {
    await render(
      <template>
        <PeopleList 
          @title="테스트 제목" 
          @people={{array "사람1" "사람2" "사람3"}} 
        />
      </template>
    );

    // h2 태그에 제목이 있는지 확인
    assert.dom('h2').hasText('테스트 제목');
    
    // li 태그가 3개 있는지 확인
    assert.dom('li').exists({ count: 3 });
  });
});

테스트 실행하기

ember test

또는 브라우저에서 실시간으로 보려면:

ember test --server

그리고 브라우저에서 http://localhost:7357을 열면 테스트 결과를 볼 수 있어요.

12. 디버깅 도구 – Ember Inspector

Ember Inspector는 Firefox와 Chrome에서 사용 가능한 Ember 애플리케이션 디버깅 브라우저 확장 프로그램입니다.

주요 기능

Routes (라우트)

현재 활성화된 라우트를 실시간으로 확인
라우트 계층 구조를 시각적으로 표시

Components (컴포넌트)

화면에 렌더링된 모든 컴포넌트 확인
컴포넌트의 속성(props)과 상태(state) 검사

Data (데이터)

Ember Data 모델과 레코드 확인
서버에서 받아온 데이터 디버깅

Deprecations (경고)

더 이상 사용하지 않는 코드 찾기
업그레이드 전에 수정할 부분 확인

Render Performance (성능)

어떤 컴포넌트가 렌더링 시간을 많이 쓰는지 분석
성능 병목 지점 찾기

설치 링크

Chrome: Chrome 웹 스토어
Firefox: Firefox 애드온

설치 후 개발자 도구(F12)를 열면 Ember 탭이 추가된 걸 볼 수 있어요!

13. 학습 리소스 – 어디서 배울까요?

공식 문서 (가장 추천!)

공식 가이드 – https://guides.emberjs.com/

처음 배우기에 가장 좋은 자료입니다
단계별로 아주 자세하게 설명되어 있어요

공식 튜토리얼 – Super Rentals 앱 만들기

실제 앱을 만들어보면서 배웁니다
라우팅, 컴포넌트, 테스트까지 전부 다룹니다

API 문서 – https://api.emberjs.com/

모든 메서드와 클래스의 상세 설명
검색 기능이 잘 되어 있어요

커뮤니티

공식 포럼 – Discuss Ember.js

질문하고 답변 받기 좋습니다
한국어로 질문해도 친절하게 답변해주는 분들이 있어요

Discord – Ember Community Discord

실시간 채팅으로 빠른 답변
#help 채널에서 질문하세요

Stack Overflow – ember.js 태그

영어로 검색하면 많은 해결책을 찾을 수 있습니다

GitHub에서 Ember.js는 약 22,500개의 스타를 받았습니다. React보다는 작지만 열정적이고 도움을 잘 주는 커뮤니티입니다.

학습 팁

공식 튜토리얼부터 – Super Rentals 튜토리얼은 정말 잘 만들어져 있어요
작은 프로젝트로 연습 – Todo 앱이나 간단한 블로그 만들어보기
Ember Observer 탐색 – 어떤 애드온들이 인기 있는지 확인
커뮤니티에 참여 – 막히는 부분은 망설이지 말고 질문하세요

14. 장단점 솔직하게

좋은 점

✅ 완성형 솔루션 – 뭘 쓸지 고민할 필요가 없어요
✅ 일관된 구조 – 팀원이 바뀌어도 코드 구조가 똑같아요
✅ 강력한 CLI – 명령어 몇 개로 파일 자동 생성
✅ 안정성 – 54주 동안 보안 업데이트를 받는 LTS 버전
✅ 대규모 앱에 최적화 – 엔터프라이즈급 서비스에 적합
✅ 명확한 업그레이드 – 버전 업그레이드가 예측 가능하고 안전해요

아쉬운 점

❌ 학습 곡선 – 초보자에게 Ember는 쉽지 않습니다
❌ 큰 번들 크기 – 초기 로딩이 React나 Vue보다 느려요
❌ 작은 커뮤니티 – React에 비해 자료와 개발자가 적어요
❌ 정해진 방식 – 자유롭게 구조를 바꾸기 어려워요
❌ 채용 – Ember 개발자를 찾기가 어려워 프리미엄을 지불해야 할 수 있습니다

15. 프로젝트 구조 이해하기

Ember 프로젝트를 열면 이런 구조를 볼 수 있어요:

my-app/
├── app/
│   ├── components/     # 재사용 가능한 UI 컴포넌트
│   ├── controllers/    # URL 쿼리 파라미터 관리
│   ├── models/         # 데이터 모델 정의
│   ├── routes/         # 페이지별 로직
│   ├── services/       # 전역 상태와 비즈니스 로직
│   ├── styles/         # CSS/SCSS 파일
│   ├── templates/      # 페이지 템플릿
│   └── router.js       # URL 경로 설정
├── public/             # 정적 파일 (이미지, 폰트 등)
├── tests/              # 테스트 코드
├── ember-cli-build.js  # 빌드 설정
└── package.json        # npm 패키지 관리

파일 이름 규칙 (중요!)

Ember는 파일 이름으로 많은 걸 자동으로 처리합니다:

파일 위치	자동으로 하는 일
`app/routes/about.js`	`/about` 경로 생성
`app/components/nav-bar.gjs`	`<NavBar>` 컴포넌트로 사용 가능
`app/models/user.js`	`this.store.find('user')` 사용 가능
`app/services/session.js`	`@service session` 으로 주입 가능

16. 성능 최적화 팁

Lazy Loading (느긋하게 로딩하기)

라우트별로 코드를 분할해서 필요할 때만 로드할 수 있습니다:

// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'my-app/config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('admin', function() {
    // admin 페이지는 필요할 때만 로드
    this.route('users');
    this.route('settings');
  });
});

Fastboot로 서버 사이드 렌더링

Fastboot은 Node.js에서 Ember 앱을 실행해서 사용자가 HTML과 CSS를 즉시 볼 수 있게 하는 애드온입니다.

ember install ember-cli-fastboot

설치하면:

초기 로딩 속도가 빨라집니다
SEO(검색 엔진 최적화)가 좋아집니다
JavaScript가 로드되는 동안에도 콘텐츠가 보입니다

서비스로 전역 상태 관리

Redux 같은 걸 별도로 설치할 필요 없이, Ember의 서비스로 전역 상태를 관리할 수 있어요:

// app/services/cart.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class CartService extends Service {
  @tracked items = [];

  addItem(item) {
    this.items = [...this.items, item];
  }

  removeItem(itemId) {
    this.items = this.items.filter(item => item.id !== itemId);
  }

  get totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }

  get itemCount() {
    return this.items.length;
  }
}

컴포넌트에서 사용:

import Component from '@glimmer/component';
import { service } from '@ember/service';

export default class ProductCard extends Component {
  @service cart;

  addToCart = () => {
    this.cart.addItem(this.args.product);
  };

  <template>
    <div class="product-card">
      <h3>{{@product.name}}</h3>
      <p>{{@product.price}}원</p>
      <button type="button" {{on "click" this.addToCart}}>
        장바구니에 담기
      </button>
    </div>
    
    <p>장바구니: {{this.cart.itemCount}}개</p>
  </template>
}

17. 2025년 최신 기능 – Vite 빌드 시스템

Ember CLI 6.8부터 Vite가 기본 빌드 시스템이 되었습니다. 이게 무슨 의미냐면:

빌드 속도가 엄청 빨라졌어요

개발 중: 파일 수정하면 거의 즉시 브라우저에 반영됩니다
프로덕션 빌드: 번들 크기가 작아지고 빌드 시간도 단축됩니다
Rollup 플러그인: 이제 Vite/Rollup 플러그인을 바로 사용할 수 있어요

더 이상 AMD 모듈 시스템 사용 안 함

프로덕션에서 더 이상 AMD를 사용하지 않아 번들이 더 작고 빠릅니다.

Post Views: 15