작고 귀여운 개발일기

jest와 ts-jest 버전이 안맞아서 발생하는 에러다.

버전을 맞춰주면 해결된다.

npm i -d jest@^27.1.4 ts-jest@^27.1.4

jest를 돌렸을 때 babel-core@5.18 이후 버전이랑 expo가 호환이 안돼서 발생하는 에러다.

babel-core@5.17.12로 다운그레이드하면 고쳐진다.

npm i -D @babel-core@5.17.12

Google made Flutter -- a UI toolkit to build beautiful native apps from a single code base without compromising on quality, speed or performance.

• Flutter 없이 한 개의 Codebase로 개발할 경우 공통언어(Javascript)를 다리역할(Bridge)로 사용해서 component를 접근할 때마다 다리를 건너야하는데 스와이프, 터치, 등 다양한 형태로 초당 60회만큼 자주 일어난다는 있다는 점을 고려할 때 이는 성능저하로 이어질 가능성이 매우 높다.

• Flutter는 렌더링을 앱 안에서 처리한다.
• Flutter는 렌더링을 플랫폼에 맡기는게 아니라 직접하기 때문에 어디에서도 Run 할 수 있고 플랫폼과 앱 사이에 Bridge나 Context switch도 필요없으며, 플랫폼에 요구하는 것은 위젯을 그릴 Canvas 뿐이다.

• 내부적으로 Flutter는 Dart로 만들어진 프레임워크로 구성되어있으며, C++로 만들어진 렌더링 엔진을 사용한다. Top Region에 있는 모든게 Dart로 구성되어있기 때문에 완전한 stack trace로 디버깅을 수월하게 진행할 수 있을 뿐만 아니라 원한다면 프레임워크의 모든 레벨에 있는 요소를 접근하여 변경(수정)하는 것도 가능하다.
• Flutter에서는, 화면에 보이는 모든것은 "위젯"이다.
• 위젯은 버튼이나 메뉴와 같은 구조적 엘리먼트(structural element)일 수도 있고, 폰트나 color scheme과 같은 스타일 엘리먼트(stylistic element)이거나 패딩과 같은 레이아웃의 한 특징일 수도 있다.

• Flutter 샘플 코드를 살펴보면, dart로 간결하게 위젯을 짜는 형식으로 UI를 구성하며 익숙해지기만 한다면 Javascript를 이용하는 것보다 빠르게 구현이 가능하다.

1. Vs Code를 사용하고 있다면 extensions > flutter 검색 후 설치

2. 1대로 하면 되는줄 알았는데 안된다... 먼저 플러터 공식닥스에서 시키는대로 sdk를 다운받고 환경변수에 추가

https://docs.flutter.dev/get-started/install/macos

AWS Amplify란?

AWS Amplify는 프런트엔드 웹 및 모바일 개발자가 애플리케이션을 추가적으로 사용자 지정하기 위해 다양한 AWS 서비스를 활용하는 유연성을 바탕으로 AWS에 풀스택 애플리케이션을 쉽고 빠르게 구축할 수 있도록 지원하는 특별히 제작된 도구와 서비스 집합입니다. Amplify는 웹 앱의 경우 JavaScript, React, Angular, Vue, Next.js를 비롯한 널리 사용되는 언어, 프레임워크 및 플랫폼을 지원하고 모바일 앱의 경우 Android, iOS, React Native, Ionic, Flutter를 지원합니다.

AWS Amplify 공식 문서에 의하면 위와 같다. 결론적으로, 이용자가 힘들게 개별적으로 세팅 하고 연결할 필요없게, CLI로 명령어 몇개만 입력하면 자동으로 웹 어플리케이션 배포에 필요한 여러 AWS 서비스를 연결해주는 것이다.

세팅 방법은 간단하다. 우선 Administration Full Access 권한을 가진 IAM role 한개를 생성하여, .pem 파일을 로컬에 다운로드 받는다. 로컬에 AWS CLI를 설치한 뒤 (pip로 설치가능), profile을 set 하면 된다. 공식문서에서 단계별로 안내가 되어있어서 그대로 따라하기만 하면 된다. 

[ Configuring the AWS CLI ]  https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html

세팅이 완료가 되면,

amplify auth add

amplify push

명령어만 순서대로 입력하면 자동으로 amplify가 모든 설정을 하고 배포를 해준다. AWS Amplify가 없었다면 CodePipeline, EC2, S3 등 여러 서비스를 모두 수동으로 연결해야 했을 것이다. 

AWS Cloudfront란?

Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다.

S3 Bucket에 업로드한 파일을 웹 어플리케이션에서 출력하려고 할 때, 웹 어플리케이션 자체는 S3에 접근권한이 없기 때문에 Null값을 불러오는 문제에 직면했다. S3 Bucket을 Public으로 돌리는 방법도 있지만, 여러모로 문제가 생길 수 있는 방법이기 때문에 권한이 없는 모든 사용자가 특정 영상만 조회할 수 있도록 정적파일을 "재배포"해주는 Cloudfront의 Cloudformation을 이용하기로 했다.

추상적인 Cloudfront의 개념을 돕기 위한 이미지다. Origin Access Identity(OAI)의 기능이 있는 Cloudfront의 특성을 이용하여 S3의 내용물에 접근하기 위한 Access Point를 Cloudfront에 등록된 웹 어플리케이션의 도메인 네임으로 하여, 일반 유저들도 파일에 접근을 할 수 있게됩니다.

위와 같이 AWS권한이 없는 일반 유저도 파일 접근이 가능해진다.

[공통점]

등장배경: 기존 mvc framework를 개선하기 위해

1.  서버에서 정적 웹처럼 html, css, js로 된 코드들을 브라우저에 전송
   • 여기서 js 코드가 주어진 데이터에 따라 html 웹페이지를 렌더링
   • 동적웹에서 서버가 하던일을 사용자의 컴퓨터에서 브라우저가 해내도록 함
2.  서버에서 데이터를 받아와야 할 때마다 요청을 보내서 반환된 데이터로 사이트 내용을 갱신함
   • 사이트에서 뭘 할 때마다 새로 접속하지 않고 한번 로드된 화면에서 많은 기능이 사용 가능

[각자의 특성]

• React
  • 대표 use case : facebook, instagram, airbnb, netflix
  • 사실 framework보다는 library 개념이 강하다
  • Typescript 지원
  • JSX 기반의 Component : js와 xml이 공존하는 jsx로 컴포넌트들을 관리
    • 변화가 일어나면 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트할 수 있음
    • 프로젝트 관리가 수월하고 테스트할 때도 좋음

• Vue
  • 대표 use case : xiaomi, grammarly, alibaba, adobe
  • React에 비해 Typescript 지원이 조금 미흡한 편
  • Single File Component : html, css, js 를 .vue 확장자의 단일 파일에 정의한다