why not

1. AWS Amplify란? 모바일/웹 어플리케이션을 빠르게 구성+빌드+배포+운영까지 서비스의 모든 라이프사이클을 한 곳에서 관리할 수 있도록 통합해둔 AWS에서 만든 풀스택 개발 통합 솔루션 서비스 2. 둘러보기 Admin UI 제공 App setting 메뉴 도메인 관리 페이지 웹앱과 앱을 빌딩할 때 환경 변수 설정 접근 권한자 설정 서비스 모니터링 배포 모니터링 Connect branch 깃허브가 연결 된 특정 branch에 push가 되거나, 새로운 커밋이 올라오게 되면 빌드, 배포 및 배포된 버젼을 검증하는 것을 자동으로 수행함 AWS 서비스와의 연동이 간편하다. 인증(Cognito서비스와 연동) - 로그인, 회원가입, 추가 인증 등을 지원하는 서비스 서비스 모니터링/로깅(CloudWatch ..

1. DevOps 란? 비교적 최근에 생긴 Development(개발) + Operation(운영)의 합성어 소프트웨어 개발에서 배포까지의 전달(delivery) 과정을 자동화 하고 빠르게 하여, 결국에는 비지니스의 가치를 높일 수 있도록 도움을 주기 위한 개발 환경이나 문화를 만들어 가는 것을 의미한다. 2. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅하기 배포 process(단계)를 수립하는 것이 쉬운가 여부 테스트 코드를 배포 전에 돌려보기 배포가 쉬운가? 서버를 직접 관리해야 하는가 여부 오토스케일링이 되는가? 트래픽이 많을 때 자동화 되면 편의성이 높아짐 웹 사이트 호스팅(도메인)를 쉽게 할 수 있는가? Github과 연동되어 git push시 자동으로 배포 프로세스를 시작할 수 ..

1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅하기 페이지 라우팅 UI 코드를 최대한 재활용 할 수 있는가? 상태관리가 가능한가 여부? 컴포넌트 간의 데이터를 공유하고 전달할 때의 편의를 위해서 상태 관리가 필요하다. 싱글 페이지 어플리케이션이기 때문에 비용이나 그룹 데이터 등을 한 곳에서 관리할 필요가 있다. 테스트 코드의 작성이 용이한가? 개발 커뮤니티의 활성화 정도 기술의 안정성 정도 v.0.0.1같이 너무 새로운 기술을 사용하는 것이 아닌, 안정된 버전이 있고, 오픈 소스를 유지보수 하는 단체가 안정적이어야 좋다. 팀 내 기술 친숙도 기술 친숙도 만으로 기술을 결정하는 요소가 될 수는 없지만, 후보군들이 다 비슷비슷할 경우 기술 친숙도로 결정할 수 있다. 2. 후보군 조사 Reac..

1. 올바른 기술셋 선정하기 하루가 멀다하고 계속 나오고 있는 새로운 기술들? 계속 배우자. 트렌드(흐름)를 읽는 능력을 기르자. 새롭게 변하는 패러다임, 프로그래밍 기술의 철학을 이해하자. 다양한 기술 안에서 우리는 어떤 기술을 사용해야 할까? 내가 알고 있는 기술셋 안에서 어떤 기술을 선택할지 나만의 기준을 정하자. 2. 올바른 기술셋은 무엇일까요? 내가 사용하고 싶은 최신 기술 보다는 시스템의 요구사항을 잘 충족시키고 서포트 할 수 있는 기술을 선택해야 한다. 기술셋을 위해서 프로젝트를 하는 것이 아니라, 프로덕트 방향과 성향에 맞는 기술을 선택하자. ex) 이번에 Vue가 새로 나왔다고 하니 써볼래요! -> 기술 후보군의 비교/분석 없이 결정한다면 추후에 해당 기술이 지원하지 않는 피쳐가 있을 경..

1. 프론트 엔드 설계란? 프론트엔드의 아키텍처를 설계할 수도 있고, 컴포넌트 간 의존 관계를 나타내는 다이어그램을 그려볼 수도 있다. 더치페이의 프론트엔드 아키텍처 자체는 심플하기 때문에, 리액트 컴포넌트 간의 의존성을 나타내기 위한 클래스 다이어그램을 그려보는 것이다. 2. 설계를 잘하기 위한 팁? 2-1. 페이지별로 컴포넌트를 정의한다. 2-2. UI 디자인을 살펴보면서 한 페이지 당 재사용이 가능한 공통된 요소들이 있는지 파악한다. 공통된 요소들에 대해 컴포넌트화하기 (DRY;Don’t Repeat Yourself 원칙; 중복 코드를 줄이기 위해서 반복하지 말라) → 페이지 별로 컴포넌트를 계층화 해서 트리 구조로 잡아나갈 수 있다. 2-3. 사용할 만한 컴포넌트 디자인 패턴은 어떤 것이 있는가?..

1. Sequence Diagram 설계 1-1. 설계에 앞서 준비하기 설계에 Plant UML을사용 Plant UML을 사용하는 이유? 사용하기 쉽다. Eclipse, VSCode 등 다양한 플러그인을 지원한다. UML syntax를 이용하여 다이어그램을 만들면, 다이어그램 이미지 파일을 자동으로 생성해 준다. 1-2. 시퀀스 다이어그램 시작하기 자바 설치하기 GraphViz 설치하기 VS Code marketplace에서 PlantUML 플러그인 설치하기 1-3. PlantUML - Visual Studio Marketplace 사용하기 프로젝트 폴더 아래에 /docs 폴더 생성 sequence_diagram.plantuml 파일 생성 Participant 선언 User, Database, Web c..

1. Architecture Diagram 설계 1-1. 설계에 앞서 준비하기 설계에 LucidChart 툴을 이용 LucidChart 툴을 사용하는 이유? 드래그앤 드랍으로 쉽게 컴포넌트를 설계가 가능하다. 다양한 아이콘을 지원함 1-2. 아키텍처 다이어그램 시작하기 Software Requirement (요구사항 내용) - 그룹 이름을 입력할 수 있는 창을 제공 프론트 엔드 - 시스템은 그룹에 속하는 사람들의 이름을 입력할 수 있는 창을 제공 프론트 엔드 - 각 그룹은 그룹명과 그룹원들의 이름을 담고 있어야 함 데이터에 대한 구조 (데이터 베이스) -> 프론트 엔드로 충분히 구현 가능 --> 데이터 베이스 보류 - 시스템은 내가 사용한 비용을 입력할 수 있도록 입력 창 제공 프론트 엔드 - 시스템은 ..

1. 클래스 다이어그램(Class diargram)이란? 한 시스템을 구성하는 클래스들의 구조를 나타내고 클래스 내의 속성(attribute)이나 메소드(method)를 시각화 한 diagram이다. 클래스의 구조 및 클래스 간의 상호 작용 방법이나 클래스의 구성 방법을 표현하는데에 촛점을 맞춘 structural diagram이다. 클래스는 정적이어서 동적인 객체와 다르다. 정적이라는 것은 시간과 조건이 고려되지 않은 것을 말한다. 클래스 다이어그램에서는 sequence diagram과 다르게 조건이나 순차적인 것들이 들어가지 않는다. 철저하게 클래스가 어떤 의존성을 가지고 있는지 그 관계를 나타내기 위한 다이어그램이다. CreateGroup과 AddMembers 그리고 ExpenseMain이라는 클래..