모아이

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입력시 이런..

Toast 만들기 업무중 atomic component로 사용될 기본 컴포넌트 들을 만들다 Toast의 차례가 왔다 기본적으로 Toast는 이런식으로 어떠한 동작을 했거나 실패 등 여러 상황에서 alert창이 아닌 쉽게 말해 서비스 디자인 등과 맞춰 제작된 자체적인 알림창이라 봐도 무방하다. React에서 이를 제작할 경우 일단 모든 컴포넌트에서 이 Toast 알림창이 화면에 띄워질 수 있도록 해당 Toast 컴포넌트에 관여 할 수 있어야 한다. 게시판 글이나 뭐 회원가입 버튼이나 각종 여러 군데에서 이 Toast 알림을 띄울 수 있기 때문에 첫번째로 고안한 방법은 Context API와 같은 전역 상태를 활용해서 가장 최상위 루트에서 감싸주는 것이다. 그럴경우 최상위에서 감싸진 ToastContext에..

모노레포 - Monorepo 일단 모노레포가 무엇인지 정의를 두자면 위키에선 ** 모노레포란 버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략** 이라고 기재되어 있다 이전 개발 전략은 모놀리식 애플리케이션으로 모놀리식 애플리케이션은 모듈화 없이 설걔된 소프트웨어 애플리케이션 이라 되어있다 즉, 어떤 하나의 서비스를 개발할 때 모듈화 없이 개발된다면 코드가 서로 직접적으로 의존되며 하나의 버전으로 관리되면서 분리가 어려워지고 새로운 설계 리팩터링 등의 작업들을 진행할 때마다 작업 단위가 거대해진다. 리액트를 배우고 프로그래밍을 배울 수록 딱 봐도 비효율적인 부분을 찾아볼 수 있는데 그렇기에 우리는 모듈화와 재사용성을 신경쓴다 모듈과 재사용성 모듈(modul..

먼저 저는 이 과정을 듣기 전에 광고를 많이 하는 국비 교육을 한번 받은 상태로 수업을 들었고또 현재는 취업한 상태입니다. 인턴이지만😉 아무튼 원래 후기를 잘 안쓰는 편이기도 한데 이번에 새롭게 모집하는 걸 보고 같은 내용이지만 또 듣고 싶은 마음에 지원하려 했다가 다른 개발 막 시작하는 분들에게 양보하고자 아무도 안볼 것 같지만 후기를 남깁니다     제가 SeSAC에서 들었던 과정은 https://url.kr/wcxql7풀스택 프로젝트 실무과정 - 전성호강의로 전성호 강사님의 개인 수업 클래스입니다. 물론 SeSAC에서 운영하는거라 무료로 들을 수 있고 건물도 무료고 개인 노트북만 준비해간다면 6개월 동안 바싹 공부만 집중 할 수 있습니다. 저는 이거 통해서 SeSA..

이번 주는 서버리스 부분 실시간 강의 마지막과 스프링 시작 자바 객체지향 부분을 공부했다. 서버리스 부분은 일단 따라만 해보고 경험을 쌓으며 어떻게 되는 지 알아보는 부분이라 그렇게 어렵지 않았지만 객체지향은 진짜 많이 어려웠던 것 같다. 강의도 보며 직접 해보기도 하는데 이해란 게 머리에 들어오질 않는다. 물론 강의에서도 다른 사람들도 진짜 다양하게 사용해보고 많은 사용을 해봐야 감이 온다고 하니 계속 해보는 수밖에 없다. 다만 이게 도대체 어떤 뜻인가에 대해 궁금한 게 많은데 정작 해결이 안돼 답답한 부분은 있는 것 같다. 그러다 보니 스프링 강의를 많이 못 듣기도 했고.. 황금연휴에 참 사정도 있고 답답한 일이 많이 있었어서 월요일 오후 늦게 집에 도착해 겨우 한주차는 들을 수 있었던 것 같다. 요..