모아이

Service엠버의 서비스는 애플리케이션이 동작하는 동안 유지되는 숫자 개체이며 애플리케이션의 다른부분에서 사용할 수 있다.번역 본이라 조금 이상한데 여러개의 컴포넌트에서 service1을 사용할 수 있다는 뜻.예시로 로그인이라는 서비스를 통해 로그인 페이지에서 로그인 서비스로 로그인을 보낸뒤 사용자 페이지에서 받을 수 있도록 할 수 있다.개념적으로만 보면 전역 상태가 생각되는데 한번 사용 예시를 봐봐야 겠다먼저 service를 만드려면 동일하게 emberCLI로 만드는데ember g service shopping-cart 이러면 app/services/shopping-cart.js 파일이 하나 만들어 진다// app/services/shopping-cart.jsimport Service from '@e..

Helperember에는 helpler라는 개념이 있는데 이는 이전 글에서 action을 사용할 때 이용했던 on,fn 등이 이런 helper에 해당된다그런데 한가지 다른게 보이는데 on을 사용할 때는{{}}안에서 사용했고 fn은 ()안에서 사용됐다이는 최상위 수준에서의 도우미가 {{}}로 시작하기 때문이다.{{helper1, (helper2 ... (helper3 ....))}} 가장 최상위는 {{}}로 시작하고 이후 중첩되는 도우미들은 ()로 둘러싼다.Built-in Helperember에 내장된 도우미들 몇개만 살펴보자면{{on{{concat :여러 문자열을연결하는데 도움이 된다. `class={{concat "active-" @color}}{{get : 가져오는 것으로 {{get this.prod..

제목에 적어놓은 Tracked, Getter, Actions는 컴포넌트에만 존재하는 것이 아니라 Controller에서 사용된다.뿐만아니라 관련해서는 현재 튜토리얼 페이지에서 따라해보면 Route에서도 사용되는 것 같다.Tracked properties & Getter먼저 컴포넌트의 구성부터 살펴보자면import Component from '@glimmer/component'import {tracked} from '@glimmer/trancking'export default class MyComponent extends Component { @tracked firstName = 'Shawn'; @tracked lastName = 'Chen' get fullName() { return this...

Component재사용 가능한 독립된 모듈로 주로 React를 한번쯤은 다뤄봤다면 아주 흔한 개념이다.이는 Ember에서도 동일하게 있는데 한번 알아보자라우터 내부나 다른 컴포넌트 또 그 컴포넌트 안에 컴포넌트 이렇게 React처럼 중첩이 가능하다.예시우리가 index route에 있다고 가정했을 때 제품목록 안에 2개의 제품이 있다그럼 각 제품 카드들의 프로덕트 모양은 동일할텐데 이미지 관련 로직이나 다른 구성들이 동일하게 동작한다면 이는 중복됨으로 하나의 컴포넌트로 처리하는 것이 맞다.직접적인 전체 코드를 가져오진 않고 component를 어떻게 만들고 어떻게 사용하는 지에대해서 간단하게 다루고 넘어가보자컴포넌트를 처음 만들때도 동일하게 emberCLI를 사용해 만들 예정이다ember g compon..

라우팅 시스템과 Router와 controller는 밀접한 연관이 있으니 바로 다뤄보는 게 좋을 것 같다.유튜브 ember tutorial에서 만드는 페이지로 연습을 같이 해보려고 하는데 일단 이전에 만든 필요없는 경로를 삭제해보자router 삭제당연하게도 이를 도와주는 emberCLI가 존재하는데ember destroy route clothes/index && ember destroy route clothes/t-shirt && ember destroy route clothesclothes경로에는 중첩된 부분이 많기 때문에 중첩된걸하나하나 지워가며 마지막에 가장 큰 경로를 삭제하는 게 좋다.바로 큰 경로를 삭제해봐야 폴더 내부는 안지워지고 `clothes.hbs`와 테스트 등 `clothes` 경로에 ..

업무 진행을 위해 Ember를 처음부터 배워보고 있는데 단순히 보고 Tutorial 을 따라한 것으로는 부족한 것 같아 정리 차 작성해보려 한다모든 내용은 Ember 공식문서의 Tutorial과 예전 버전이긴 하지만 2022 ember beginners라는 외국 유튜브를 보고 적절히 섞어 작성하였다.물론 Test에 관련된 부분은 적당히 제거했다먼저 tutorial에서 만들어지는 웹사이트는 공식문석에 실제로 netlify를 통해 배포되어 있으니 직접 확인해 봐도 된다Tutorial완성페이지 확인하기Ember CLI 설치먼저 Ember를 쉽게 사용하기 위한 CLI를 먼저 설치 했다npm install -g ember-cli설치가 잘 완료되었는지 확인해보자ember --version입력시 이런..