분류 전체보기103 Go 언어 Front End 제작해보기 1장 ◆ node 설치 ◆ react 설치 : npm install -g create-react-app ◆ 참고할 내용 ▶ 리액트 라우터 패키지: https://reacttraining.com/react-router/ ▶ 스트라이프: https://stripe.com/ ▶ 리액트 폼 제어: https://reactjs.org/docs/forms.html ◆ 프로젝트 생성: create-react-app music_frontend ◆ src 디렉토리에서 다음 파일 삭제 ▶ App.css ▶ index.css ▶ logo.svg ◆ public 디렉토리에 다운로드 받은 파일을 복사 ◆ Main 페이지를 위한 3개의 자바스크립트 파일을 src 디렉토리에 생성 ▶ Navigation.js: 탐색 메뉴 컴포넌트 ▶ P.. 2023. 5. 5. [Micro Service] Micro Service 상세 설계(도메인 모델링, 헥사고날 구조, 엔티티, Value object, 표준타입, 애그리거트, 도메인 서비스 및 이벤트) 2장 ◆ 도메인 모델링 ▶ 마이크로서비스의 내부 구조는 폴리글랏하게 접근할 수 있는데 폴리글랏하다 라는 의미는 애플리케이션을 구현하는 언어나 데이터를 저장하는 저장소를 서비스마다 다양하게 활용할 수 있다는 의미인 동시에 내부 아키텍처 구조를 서비스 특성에 맞게 다양하게 수립할 수 있다는 의미이기도 하므로 서비스의 내부 영역의 구조를 도메인 모델 중심으로 만들 수도 있고 트랜잭션 스크립트 형태로 만들 수도 있음 ▶ 도메인 모델 형태의 헥사고날 구조 ▶ 단순한 로직인 경우에는 트랜잭션 스크립트 구조로 만들어도 무방하지만 비즈니스가 복잡해질수록 비즈니스 개념들을 잘 구조화할 수 있는 도메인 모델 구조가 효과적 ▶ 도메인 모델 구조는 복잡함을 다루어 쉽게 표현할 수 있는 구조를 제공하기 때문인데 이러한 내부 구조를 .. 2023. 5. 4. [Micro Service] Micro Service 상세 설계(프런트엔드 모델링, 백엔드 모델링, API 설계) 1장 ◆ 마이크로서비스 상세설계 ▶ 프런트엔드 모델링 ● 웹과 모바일 기술의 발전에 따라 사용자 경험에 민감하게 반응할 수 있는 ui 기술과 개념이 등장했고 이를 잘 지원할 수 있는 다양한 프런트엔드 프레임워크가 등장 ● 대표적인 프레임워크로 앵귤러(Angular), 리액트(React -> next), 뷰(Vue.js) 등이 있고 모두 사용자 경험을 잘 지원하는 SPA(Single-Page Application)를 지원 ● 이러한 경향은 프런트엔드에서 수행해야 할 일들이 점점 많아지고 중요해졌음을 의미 ● 프런트엔드 영역의 모노리스 구조를 분리하기 위한 마이크로 프런트엔드 등의 패턴이 등장하고 있으며 갖가지 유연한 아키텍처 등이 소개되고 있음 ● 최소한의 설계 영역 ⊙ 프런트 아키텍쳐 정의 ⊙ 표준 레이아웃 .. 2023. 5. 2. [Micro Service] Micro Service 설계(이벤트 스토밍 워크숍 진행, 엑터 도출, 애그리거트 정의, 바운디드 컨텍스트, 컨텍스트 매핑) 2장 ◆ 이벤트 스토밍을 통한 마이크로서비스 도출 ▶ 이벤트 스토밍 워크숍 진행 ● 워크숍 진행 ⊙ 액터 도출 → 커맨드까지 찾고 나면 커맨드를 실행하는 액터(Actor)를 도출하는데 액터는 사용자 또는 조직, 역할자를 의미 → 액터는 추상적으로 식별하지 않고 비즈니스를 수행하는 구체적인 역할을 고려해서 도출 → 단순히 모든 업무에서 보편적으로 사용되는 회원이나 관리자로 정의하지 않고 특정 비즈니스를 실제로 수행하는 판매자, 구매자, 상품 관리자, 배송 관리자, 시스템 관리자와 같이 명확한 역할자를 도출하려고 노력해야 함 → 액터를 도출하면서 이전에 식별하지 못했던 커맨드와 도메인 이벤트가 추가로 도출될 수 있는데 이 경우에도 추가로 식별되는 사항들을 모델링 공간에 붙이면 됨 → 액터는 노란색의 작은 포스트잇.. 2023. 5. 2. 이전 1 ··· 8 9 10 11 12 13 14 ··· 26 다음
