1. AWS 계정 만들기 AWS 계정 만드는 방법은 생략. 프로젝트 진행은 루트 계정이 아닌 IAM 계정으로 진행하는 것을 권장한다. 2. Amplify CLI 설치 우선은 amplify cli를 전역적으로 설치해주고, amplfiy 설정을 해준다. npm i -g @aws-amplify/cli amplify configure amplfiy configure을 입력하면 aws console에 로그인하라는 창이 뜬다. 로그인. Specify the AWS Region ? region: # Your preferred region Specify the username of the new IAM user: ? user name: # User name for Amplify IAM user Complete the ..

AWS Amplify란 AWS Amplify는 안전하고 확장 가능한 모바일 및 웹 애플리케이션을 구축하기위한 개발 플랫폼이다. 간단하게 요약해보자면 EC2, RDS, Cognito, Lambda 등과 같은 독립적인 서비스는 아니다. Amplify CLI로 다수의 독립적인 서비스를 자동으로 생성하고 연결해 준다. 프로젝트 내에서 Amplify 객체로 생성된 AWS 서비스에 접근할 수 있다. Amplify의 장점으로는 클릭 몇번으로 Github, Gitlab 등의 리포지토리에 있는 프로젝트를 배포할 수 있다. 여러 브랜치르 띄워서 본인의 브랜치가 배포됐을때 어떻게 보이는지 확인할 수 있으며, 대쉬보드를 통해 현재 상황이 어떤지 알 수 있고 빌드에 실패하더라도 이전 버전의 빌드가 계속 유지되고있기 때문에 운영..

IAM 이란 IAM이란 Identify and Access Management의 약자로 AWS 리소스를 사용하는 유저, 그룹 사용권한 등을 전체적으로 관리하는 서비스이다. 모든 서비스에 걸쳐 영향을 미치기 때문에 AWS를 잘 사용하기 위해서나 특히 팀이나 여러명이 작업하는 프로젝트라면 필수적으로 알고 넘어가야 하는 부분이다. AWS 계정을 처음 생성하는 경우에는 전체 AWS 서비스 및 계정 리소스에 대해 완전한 액세스 권한을 지닌 단일 로그인 자격증명으로 시작한다. 이 자격 증명은 AWS 계정 루트 사용자이다. 일상적인 작업, 관리작업의 경우에도 루트 사용자를 사용하지 않는 것을 AWS는 강력히 권장한다. IAM 사용자를 처음 생성할 때만 루트 사용자를 사용하는 모범 사례를 준수한다. 그런 다음 루트 사..

Vite로 React-ts를 빌드하고 Tslint, Prettier 설정을 해보자 Vite 설치 yarn create vite 위 명령어를 입력하면 어떤 환경을 설정할지 가이드가 주어진다. 가이드에 따라 진행하면 아래와 같이 된다. npm을 이용해도 된다. vite공식 문서를 참고하자. 이후 만든 디렉토리로 이동 후 yarn으로 패키지들을 설치 yarn vscode 확장 설치 eslint prettier package 설치 "yarn add -D" 를 통해 아래 패키지들을 설치해준다. eslint 관련 eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prett..

javascript는 C, Java등과 같은 언어와 구별되는 아래와 같은 특성이 있다. - Prototype-based Object Oriented Language - Scope와 this - 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosely typed) 언어 이와 같은 특성때문에 C, Java등에 익숙한 개발자를 혼란스럽게 하고 코드가 복잡해질 수 있고 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다. 이런 Javascript의 문제를 극복하고자 Typescript가 만들어지게 되었다. Prototype-based Object Oriented Language 프로토타입 기반 객체 지향 언어는 클래스 기반 언어에서 상속을 사용하는 것과 다르게, 객체를 원형으로 하여 ..

React에서 CSS를 입힐 때 여러모로 불편한 점이 많다. css파일을 import 해서 사용하면 class 이름을 일일이 관리해주어야하고 인라인으로 작성된다면 가독성이 좋지 않다. 중복되는 코드들도 해결하고 싶은경우가 많다. 이러한 불편한 점을 많이 해소해주는 것이 styled-components이다. https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components 문서에서 다양한 기능들을 확인해 볼 수 있다. 간단한 사용법은 아래와 같다 imp..

AWS Lambda를 API Gateway를 통해 연결을 해보자. AWS Lambda 함수 생성 클릭을하면 아래와 같은 화면이 나온다. 적절한 함수 이름을 정하고, 함수 작성시 사용할 언어를 선택해준다. 나는 Python을 이용해서 만들었다. 위와 같은 예제 코드가 나온다. 기본적으로 Lambda는 event와 context를 파라미터로 가진다. 테스트를 위해 body에 json을 넣지 않고 hello를 넣어 반환해보자. 코드를 완성하고 베포를 누르면 함수 작성이 완성된다. 미리 만들어둔 API Gateway > 경로 탭으로 이동하면 위와같은 페이지가 나온다. Lambda 함수와 연결을 위해 Create버튼을 누르고 Get 방식으로 루트 경로에 생성해보자. 그런 다음 위에서 만든 Lambda와 통합연결을..

Amazon Web Service에서 제공하는 Amazon API Gateway에 대해 알아보자. API는 3종류로 구분할 수 있다. HTTP API REST API WebSocket API HTTP API와 REST API는 거의 같은 의미로 사용되지만 조금 디테일하게 들어가면 두 API는 차이가 있다. HTTP API HTTP를 통신 방식으로 사용하는 API를 HTTP API라고 한다. HTTP API는 endpoint를 API gateway로 활용하여 HTTP 요청을 통해서 서버에 접근할 수 있도록 만둘어준다. 대부분의 Web API가 HTTP API로 이루어지고 있다. REST API REST는 웹 서비스의 구조를 만드는데 활용되는 패턴이다. RESTful API가 되려면 CRUD 방식의 메소드,..