하이고니의 개발 스토리

AWS Amplify 소개 모바일/웹 어플리케이션 프로젝트 진행 시, 구성+빌드+배포+운영까지 모든 라이프사이클을 한 곳에서 편리하게 관리할 수 있도록 통합해둔 AWS의 풀스택 개발 통합 솔루션 서비스 둘러보기 - Admin UI 제공 - AWS 서비스와의 연동이 간편하다. - 인증(Cognito) - 로그인, 회원가입, 추가 인증 등 - 서비스 모니터링/로깅(CloudWatch) - 데이터베이스(DynamoDB, Aurora, GraphQL 지원) - 앱 푸시 알림(PinPoint) - CLI(Command Line Interface)으로 할 수 있는 것들이 매우 많다. (CLI 예시. create-react-app, git push, git add ...) - 프론트엔드 초기 프로젝트 셋업 (Reac..

기술셋 선정하기 - DevOps 시작하기에 앞서, DevOps 란? Development + Operation의 합성어 소프트웨어 개발에서 배포까지. 전달(delivery) 과정을 자동화하고 빠르게 하여 결국에는 비지니스의 가치를 높일 수 있도록 하기 위한 개발 환경이나 문화 1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅 배포 단계를 수립하는 것이 쉬운가? 배포가 쉬운가? 서버를 직접 관리해야 하는가? 웹 사이트 호스팅(도메인)를 쉽게 할 수 있는가? Github과 연동되어 git push시 배포 프로세스를 시작할 수 있는가? 추후 백엔드 API를 개발할 경우 통합하고 배포하는데에 용이한가? 배포 모니터링 지원 개발 커뮤니티 활성화 무료인가? 기술의 안정성 - v.0.0.1같이 너무 새..

3/19 (SUN) 들은 강의: Part 3. 프로젝트 설계하기 02. 기술셋 선정하기 (1) - 프론트엔드 기술셋 선정하기 - 프론트엔드 1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅 페이지 라우팅 UI 코드 재활용 가능 상태관리가 가능한가? 테스트 코드 작성 용이 개발 커뮤니티 활성화 기술의 안정성 - 나온지 얼마 안 된 너무 새로운 기술은 X. 안정된 버전이 있고, 유지보수 하는 단체가 안정적인가? 팀 내 기술 친숙도 💡 기술 친숙도 만으로 기술을 결정하는 요소가 될 수는 없다. 하지만 후보군들이 다 비슷비슷할 경우 기술 친숙도로 결정할 수 있다. 2. 후보군 조사 React.js Angular Vanilla JS 3. 비교 테이블 생성 React Angular Vanilla 페이..

올바른 기술셋 선정하기 새로운 기술들이 하루가 멀다하고 나오고 있다. 기술의 호수 속에서 우리는 어떤 기술을 사용해야 할까? 올바른 기술셋은 무엇일까? 내가 사용하고 싶은 최신 기술 ❌ 무조건 최신 기술이라고, 무조건 많은 라이브러리를 쓴다고 올바른 것이 아니다! 시스템의 요구사항을 잘 충족 시킬 수 있도록 서포트 하는 기술 ✅ 왜 중요한가? 어떤 기술을 선택하느냐에 따라 소프트웨어 운영/유지 비용에 영향 🔺 AWS S3가 좋다고 들어서 사용했다가는 요금 폭탄을 맞을 수도 소프트웨어의 한계점을 만들어 낼 수도 💡 특정 기술이 기능 면에서 한정적이거나 개발자가 다룰 수 있는 범위가 한정적이라면 프로젝트에서 많은 문제를 발생시킬 수 있음! 반대로 코드 구현을 수월하게 해준다 하더라도 배포나 다른 기술과의 통..

들은 강의: Part 3. 프로젝트 설계하기 07. [실전] 시스템 설계 (3) - Class diagram for 프론트 엔드 Plant UML 사용 리액트 컴포넌트/클래스의 구조도 작성 1. 자바 설치 https://www.java.com/en/download Download Java for Linux Linux RPM filesize: 76.84 MB Instructions After installing Java, you will need to enable Java in your browser. www.java.com 2. GraphViz 설치 https://plantuml.com/ko/graphviz-dot Test your GraphViz installation This page gives in..

프론트엔드 설계란? 프론트엔드의 아키텍처를 설계할 수도 있고, 컴포넌트 간 의존 관계를 나타낸 다이어그램을 그려볼 수도 있다. 더치페이의 프론트엔드 아키텍처 자체는 심플하기에, 리액트 컴포넌트 간의 의존성을 나타내기 위한 클래스 다이어그램을 그려볼 예정! 잘 설계하기 위한 팁 페이지 별로 컴포넌트를 정의 UI 디자인을 살펴보면서 공통된 요소들이 있는지 파악 공통된 요소들에 대해 컴포넌트화(DRY;Don't Repeat Yourself 원칙) 페이지 별로 컴포넌트를 계층화해서 트리 구조를 만들 수 있겠다. 사용할 만한 컴포넌트 디자인 패턴에는 어떤 것이 있는가? Container 패턴: UI를 렌더링하는 데에 집중하는 컴포넌트, 데이터 불러오기 등의 비즈니스 로직을 담아 둘 Container 컴포넌트로 나..

오 이거 꽤나 어렵군요 ㅎㅎㅎ 좀 더 복습해서 익숙해지도록 해봐야겠습니다. 현재 부트캠프 진도가 굉장히 빡세게 나가고 있어서 언제 보충이 될지는 미지수지만,,,,, User가 처음으로 페이지에 들어왔을 때! (root url을 GET) 아래는 처음 웹 페이지에 접속했을 때의 flow다. @startuml participant User participant "Web Client" as C participant "DutchPay Server" as S User -> C: GET / activate C C -> S: static asset 요청(HTML/CSS 등) activate S S --> C: HTML/CSS 등 응답 deactivate S C -> C: 그룹 입력 페이지로 redirection C -..

들은 강의: Part 3. 프로젝트 설계하기 05. [실전] 시스템 설계 (1) - Architecture diagram 설계에 앞서, 강의에서는 LucidChart 툴을 사용한다고 한다. 아래 링크에서 확인할 수 있다. Intelligent Diagramming | Lucidchart Lucidchart is your solution for visual communication and cross-platform collaboration. www.lucidchart.com 여기서 new document를 만들어 사용할 수 있다. Lucid visual collaboration suite: Log in Log in to access the Lucid Visual Collaboration Suite luci..

들은 강의: Part 3. 프로젝트 설계하기 04. [이론] 시스템 설계 (3) - Class diagram 클래스 다이어그램이란? 한 시스템을 구성하는 클래스들의 구조(structure), 속성(attribute), 메서드(method)를 시각화한 diagram 클래스의 구조 및 클래스 간의 관계에 초점을 맞춘 structural diagram 객체가 아닌 정적인 클래스. '정적'이란 것은 시간이나 조건에 대한 것을 염두에 두지 않은 것. 왜 사용하나요??? 클래스 간의 관계, 의존성을 빠르게 파악할 수 있다. 새로운 요구사항이 들어왔을 때, 재사용하거나 확장할 만한 클래스가 있는지 빠르게 파악 가능 소프트웨어가 완성된 후 구현 설명을 위해 사용할 수 있다. 새로운 팀원이 왔을 때 빠르게 시스템 구조를..

들은 강의 Part 3. 프로젝트 설계하기 03. [이론] 시스템 설계 (2) - Sequence diagram 시퀀스 다이어그램이란? 객체 간의 상호 작용을 시간 순으로 시각화한 다이어그램 시스템의 구조에 초점을 맞춘 것이 아니라 시스템이 어떤 순서로 누구와 상호작용하는지에 포커싱된 behaviour diagram 왜 사용하나요??? 코드를 보고 시스템의 흐름을 파악하기에는 매우 오랜 시간이 걸리고 어렵기 때문에 시스템이 어떤 순서로 받은 요청을 처리하는지, 어떤 시스템과 소통을 하는지 쉽게 이해하기 위해 언제 사용하나요??? 요구사항이 수집되고, 각 시스템 혹은 객체 간의 메시징을 정의하는 설계 단계에서 요청을 처리하기 위해 여러 시스템/외부 서비스 간의 상호 작용이 여러 차례 일어날 때 요청을 처리..