why not

1. React Router React 어플리케이션에서 페이지/컴포넌트 내비게이션 (i.e. 페이지 라우팅; page routing)을 위해 쓰이는 표준 라이브러리이다. URL에 따른 UI (User Interface)를 동기화하여 일정한 경험을 제공한다. 페이지 라우팅(Page routing)? 주어진 요청(URL)에 따라 해당 URL을 어떤 handler에서 처리하고 어떤 페이지를 렌더링 할 지 결정하는 과정 공식 document 참고: https://reactrouter.com/en/main 공식 문서를 통해 모르는 개념을 배워나가는 연습이 필요하다. Home v6.9.0 I'm on v5 The migration guide will help you migrate incrementally and k..

1. React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 2. 특징 2-1. 선언형 어플리케이션의 각 상태에 따라서 어떤 뷰(view)를 보여주면 될지, 뷰(view)만 설계하면 됨 상태가 달라짐에 따라 React가 알아서 필요한 컴포넌트만 업데이트하여 렌더링 2-2. 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트이다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나눌 수 있다. 컴포넌트 간 재사용 및 조합이 가능하다 → 복잡한 UI도 조금 더 쉽게 구현이 가능 외부에서 주어지는 인풋인 props와 내부에서만 관리하는 상태인 state로 이루어졌다. 3. 꼭 짚고 가야 할 핵심 개념 3-1. 가상 DOM(virtual DOM) 노드 트리를 메모리 상에 ..

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..