StarLord

1) packages/app/src/App.tsx에 아래 코드를 추가합니다.import { UnifiedThemeProvider, themes, } from '@backstage/theme'; // MUI themesimport LightIcon from '@material-ui/icons/WbSunny'; // Additional iconsimport { multicolorTheme } from './theme/theme'; // Custom multicolor theme components: { SignInPage: props => ( ), }, themes: [ // Keeping the original themes is completely optional { ..

아래의 과정을 통해 획득한 Key는 모두 잘 보관한다.GitHub Authentication Setup1. Create GitHub OAuth App in your organization settings 2. Configure Homepage URL and Authorization callback URL:- 로컬개발시에는 localhost 를 callback으로 한다. http://localhost:7007/api/auth/github/handler/frame - 만약 정말 서버에 provisioning을 한다면 그에 응하는 URL을 callback으로 한다. https://.spotifyportal.com/api/auth/github/handler/frame 3. Copy clientId ..

더보기앞으로 한동안은 Backstage에 대한 여정을 기록하려고 한다. 현재 나의 프로젝트는 완전한 MSA를 지향하여 시스템을 구축하고 있다. 여기서 많은 거버넌스적인, 사일로 이슈들이 발생하며 이를 한번에 극복할 수 있는것이 Portal Concept라고 믿는다. 우선, Internal Developer Portal이란 무엇인가? 내부 개발자 플랫폼(IDP)은 플랫폼 팀이 골든 패스(Golden Path)를 구축하고 개발자 셀프서비스를 지원하기 위해 구축합니다. IDP는 다양한 기술과 도구로 구성되어 있으며, 맥락과 기반 기술을 추상화하지 않고도 개발자의 인지 부담을 줄이는 방식으로 통합됩니다. 플랫폼 팀은 모범 사례를 준수하여 플랫폼을 하나의 제품으로 취급하고 사용자 연구를 기반으로 구축하며, 유지..

SetupSetting up a new project is quite simple with the Nest CLI. With npm installed, you can create a new Nest project with the following commands in your OS terminal:$ npm i -g @nestjs/cli$ nest new nest new protobuf-sample InstallationTo start building gRPC-based microservices, first install the required packages:$ npm i --save @grpc/grpc-js @grpc/proto-loader Protoc 컴파일러 설치https://www.npmj..

import { CommandBus, QueryBus } from '@nestjs/cqrs';@Controller()export class EmployeeController { constructor( private readonly commandBus: CommandBus, private readonly queryBus: QueryBus, ) {} CommandsCommands are used to change the application state. They should be task-based, rather than data centric. When a command is dispatched, it is handled by a corresponding Command Handler. Th..

넷플릭스는 Key-Value String Data의 영속성 Layer로 어떠한것을 사용했는지, 어떤 비즈니즈 요구사항에 적용했는지 리서치 해보았다. 관련 포스팅https://netflixtechblog.com/introducing-netflixs-key-value-data-abstraction-layer-1ea8a0a11b30 Introducing Netflix’s Key-Value Data Abstraction LayerVidhya Arvind, Rajasekhar Ummadisetty, Joey Lynch, Vinay Chellanetflixtechblog.com https://netflixtechblog.com/introducing-netflix-timeseries-data-abstraction-l..

커먼 JS는 모든 버전의 노드에서 지원하는 일반적인 모듈 패턴이다.(https://oreil.ly/CN-gA). 여전히 이런 방식의 모듈을 바벨이나 웹팩에서 사용할 수 있다. 커먼 JS를 사용하면 module.exports를 사용해 자바스크립트 객체를 익스포트할 수 있다.  예를들어 커먼 JS에서 print와 log 함수를 객체로 반환할 수 있다. const print(message) => log(message, new Date());const log(message, timestamp) => console.log('${timestamp.toString()}: ${message}'}; module.exports = {print, log}; 커먼 JS는 import 문을 지원하지 않는다. 그 대신, ..

자바스크립트 모듈은 다른 자바스크립트 파일에서 이름 충돌이 없이 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각을 말한다. 자바스크립트는 모듈을 한 모듈당 하나씩 별도의 파일로 저장한다. 모듈을 만들고 외부에 익스포트 하는 방법에는 한 모듈에서 여러 자바스크립트 객체를 외부에 노출시키는 방식과 한 모듈에 하나의 자바스크립트 객체를 노출시키는 방식이 있다.  text-helper.js 파일에 있는 다음 모듈은 두 함수를 외부에 노출시킨다.export const print(message) => log(message, new Date());export const log(message, timestamp) => console.log('$(timestamp.toString()): ${message}'}; e..

ES2015이전에는 공식적으로 자바스크립트 명세에 클래스 문법이 없었다. 클래스가 도입되면서 자바나 C++ 과 같은 전통적인 객체지향 언어와 비슷한 구문을 제공한다는 점으로 인해 흥분한 개발자들이 많았다. 과거 몇 년간은 리액트 라이브러리가 사용자 인터페이스 컴포넌트를 만들때 클래스에 주로 의존했다. 오늘날, 리액트는 점차 클래스를 멀리하기 시작했고, 함수를 사용해 컴포넌트를 구성한다. 하지만 레거시 리엑트 코드나 다른 자바 스크립트 세계에서 클래스를 자주 볼 것이다. 따라서 간단하게 클래스에 대해 살펴보자.  자바스크립트는 프로토타입을 사용한 상속라고 불리는 방법을 사용한다. 이 기법은 객체지향처럼 느껴지는 구조를 만들어내기 위한 기법이다. 예를 들어, new를 사용해 호출해야 하는 Vacation 생..

1. 단순한 프라미스와 FetchREST API에 요청을 보내는 일은 상당히 귀찮은 일이었다. REST API로 부터 간단한 데이터를 앱이 받아오려면 20 줄이 넘는 코드를 작성해야 한다. 그 후 Fetch()함수가 등장하면서 구현이 편해졌다.fetch("https://api.ramdomuser.me/?nat=US&results=1").then(res => console.log(res.json()));  then은 프라미스가 정상적으로 완료되면 콜백함수를 한번만 호출한다. 이 콜백함수가 반환하는 값은 그다음에 오는 then 함수의 콜백에 전달되는 인자가 된다. 따라서 성공적으로 처리된 프라미스를 처리하기 위해 then 함수를 연쇄적으로 호출할 수 있다. fetch("https://api.ramdomus..