어리둥절 분석가 그리고 개발자

Next 13에서 API Route를 사용해보려고 한다. 아직 정확한 의미는 잘 알지 못하지만, Next에서 아주 간단하게 API를 만들 수 있는 것으로 이해하고 있다. 먼저, Next 13은 그사이에 File Structure가 변했다. 이제 app이라는 src와 비슷한 역할을 하는 directory 밑에서 모든 것을 구성한다. pages라는 폴더가 사라진 것도 처음에는 헷갈렸다. 여하튼 API를 만들기 위해서 다음과 같은 디렉토리 구조를 만들었다. 그리고 app/api/route.tsx를 만들어주고 다음과 같이 작성했다. import { NextResponse } from "next/server"; export async function GET() { const data = { pokemon: { n..

데이터 아키텍쳐의 변화 - DynamoDB도 S3나 RDS같은 Storage System이다. - 데이터 레이크 : S3라고 생각하면 된다 - 요새는 압축해서 저장하는 것이 아니라 그냥 raw 데이터를 그대로 저장한다 - 서비스 자체 뿐만아니라 저장한 DB의 가능성을 보고 투자를 받는다. DynamoDB - DynamoDB는 AWS의 Nosql 서비스이다 - 빠르고(Primary Key를 기준으로 찾을때) 백업이 되기 때문에 빅데이터에서 유용하게 사용된다 - Primary Key가 아닌 값으로 찾을때 느리다 - 자유도가 높을수록 비용이 저렴해진다. RDS >> DynamoDB >> S3 - 조인과 같은 복잡한 쿼리 불가능하다 DynamoDB의 구성요소 - Item은 row라고 생각하면 된다 - 형식이 정..

Step Function 어떤 유저가 API를 콜했을 때, 그 API의 결과값에 따라 다른 Lambda 함수가 실행된다 Lambda 안에 Step Function이 있는 것이 아니라 Lambda와 별개의 AWS 서비스이다 실습 - 람다함수를 2개 만든다 (Step1, Step2) - Lambda 함수의 ARN을 복사해둔다 - IAM에서 역할을 만들어야 한다 - 역할 만들기에서 Step Function을 클릭한 다음에 AWSLambdaRole을 생성해두자 - Step Function으로 가서 만들자. Step Function이 길어지면 GUI로 생성하기보다 JSON을 활용해서 코드로 만든다 - 상태 머신 생성 클릭 >> 코드로 워크플로 작성 이렇게 코드로 만들면 된다 Step Function이 lambda..

Cold Start - 10분 지나도 아무런 새로운 트리거가 없으면 만들어놓은 서버(EC2)를 닫아버린다. - 10분 이내에 새로운 트리거가 생기면 이미 만들어놓은 서버를 계속 사용한다. - Cold Start의 문제가 생겨서 이걸 해결하기 위한 개념이 2019년에 나왔다. 그런데 이게 Serverless가 맞나? - 이런 경우에는 EC2가 더 저렴하지 않나요? 버전과 Alias - lambda 함수를 하나 새로 만든다 - 작업 dropbox에서 "새 버전 발행"을 할 수 있다 - colon 뒤에는 버전의 이름이 붙는다 환경변수 - 환경변수를 사용하는 이유는 노출되면 안되는 정보를 담기 위해서 - lambda는 MSA보다 얕고 가볍다 - CLI에서 이것저것 코드 짜는게 아니라 그냥 콘솔(GUI)에서 지정..

API Gateway REST API에서 CORS 설정하는 방법 API를 호출했을 때 요청한 메서드를 콜하기 이전에, CORS를 확인하기 위해서 OPTIONS 메서드를 먼저 콜한다. Lambda 함수에서도 CORS를 위한 headers를 추가하기

Lambda 함수 생성 1. 콘솔에서 lambda 검색 2. 함수 생성 3. 새로 작성 4. 런타임 -> 어떤 환경에서 만들 것인가? Node.js / Python / Ruby 5. 함수 생성 lambda_handler라는 이름과 event, context라는 argument는 기본값이다. 고정이다! json 같이 간단한 라이브러리는 import가 되는데 pandas 같은 것은 추가 설정을 해주어야 할 수도 있다 Deploy 버튼을 클릭해야 배포가 되어서 실행 가능한 상태가 된다 Lambda 함수 실행하기 Lambda 함수를 실행하는데 다양한 방법이 있다. 실무에서는 주로 트리거를 추가해서 여러가지 트리거를 발생시켜서 함수를 실행시킨다! 테스트 이벤트를 구성해서 Lambda 함수를 실행시킬 수도 있다 테..

API Gateway - AWS Gateway도 하나의 서버라고 생각하면 된다 - 하나의 도메인으로 모았다가 다시 뻗어나가는 거라고 생각하면 된다 - Redirect와 비슷한 개념으로 생각하면 된다 - 본질적으로는 단순한 개념인데, 한 곳에서 관리할 수 있기 때문에 부가적으로 붙여서 사용할 수 있는 기능이 많다. - API가 지나가는 통로 (반드시 지나야 하는 하나의 gateway) 라는 개념을 갖고 있다. - API Gateway를 Trigger함으로써 lambda를 실행할 수 있다 - Rest API는 복잡하고 느리고, customize 할 수 있다 - HTTP API는 단순하다 - CORS (보안)을 설정할 수 있다 CORS (Cross Origin Resorces Sharing) - Cross O..

서버리스의 개념 - EC2, ECS 같은 것을 사용하면 관리 - 항상 대기하는 전용 서버가 있는 것이 아니라, 사용할 때마다 쓰는 것이다 - 알바를 한 명을 정규 고용을 해 둔 것이 아니라, 주문이 들어왔을 때만 알바를 쓰는 것 (?ㅎㅎ) - (함수의 처리 결과에 따라 상태를 따로 저장) 어마어마하게 독립적이다. 따로논다. 함수의 처리 결과를 DB에 저장하는 것이 기본적인 설정이 아니다. 극단적으로 독립적인 형태이다. - 일반적인 서버리스는 Function-as-a-Service이다. - FaaS 대표 : AWS lambda - BaaS 대표 : 구글 Firebase AWS Lambda - Lambda는 cold-start 이슈가 있다 (시작이 오래 걸림 0.8초) - cold-start를 해결하기 위해..

SVG 파일에서 fill="#A6D4FF"로 컬러셋이 들어가있는 곳을 찾아서 "current"를 대신 넣어준다 리액트 svg 컴포넌트에 fill argument를 추가하면서 색깔을 자유롭게 변경할 수 있다. import React from 'react'; import { VictoryChart, VictoryScatter, VictoryBar, VictoryAxis, VictoryLabel, VictoryContainer } from 'victory'; import { ReactComponent as Svg2} from "./svg/file2_.svg"; ... return ...

downloadjs와 html-to-image 라이브러리를 활용해서 React에서 만든 컴포넌트를 이미지 파일로 export 할 수 있다 import React, { useCallback, useRef } from 'react'; import Victory from './Victory'; import styled from '@emotion/styled'; import downloadjs from "downloadjs"; import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image'; const Container = styled.div` display: 'flex'; ` const Image = styled.div` width: max-..