목차 이 게시글은 시리즈물입니다! 아래 목차를 먼저 확인해주세요 1. Lambda@Edge란? 2. S3, CloudFront 셋팅 3. CloudFront 쿼리스트링 캐시 셋팅 4. IAM 역할 생성 5. Lambda@Edge 배포 셋팅 및 로그 확인 6. 리사이징 로직 작성 및 테스트 람다 로컬에서 실행하기 serverless framework를 이용하면 람다를 로컬에서 실행할 수 있는데, 함수에 전달되는 event 객체가 비어있는 상태에서 실행되어 에러가 발생합니다. 서버리스의 --path 옵션을 이용하여 로컬의 json파일을 읽어 event 객체에 데이터를 넣어줍시다. 1. 이전 게시글에서 확인한 로그데이터에서 event객체를 그대로 복사하여 OriginResponseEvent.json 파일로 만..

목차 이 게시글은 시리즈물입니다! 아래 목차를 먼저 확인해주세요 1. Lambda@Edge란? 2. S3, CloudFront 셋팅 3. CloudFront 쿼리스트링 캐시 셋팅 4. IAM 역할 생성 5. Lambda@Edge 배포 셋팅 및 로그 확인 6. 리사이징 로직 작성 및 테스트 프로젝트 셋팅 serverless framework를 사용하여 람다를 배포할 예정입니다. 이미 존재하는 S3와 CloudFront에 Lambda@Edge를 연결하므로 serverless-lambda-edge-pre-existing-cloudfront 플러그인을 사용합니다. Serverless Framework: Plugins The Serverless Framework Plugin Registry. Search thou..

목차 이 게시글은 시리즈물입니다! 아래 목차를 먼저 확인해주세요 1. Lambda@Edge란? 2. S3, CloudFront 셋팅 3. CloudFront 쿼리스트링 캐시 셋팅 4. IAM 역할 생성 5. Lambda@Edge 배포 셋팅 및 로그 확인 6. 리사이징 로직 작성 및 테스트 역할 생성 1단계 : 신뢰할 수 있는 엔터티 선택 신뢰할 수 있는 엔터티 유형 : AWS형 서비스 사용 사례 : Lambda 2단계 : 권한 추가 AWSLambdaExecute를 검색하고 선택한다 AWSLambdaExecute는 클라우드워치와 S3를 읽어올 수 있는 권한입니다. 3단계 : 이름 지정, 검토 및 생성 Lambda@Edge가 수행될 수 있도록 신뢰관계 정책 편집 https://docs.aws.amazon.c..

목차 이 게시글은 시리즈물입니다! 아래 목차를 먼저 확인해주세요 1. Lambda@Edge란? 2. S3, CloudFront 셋팅 3. CloudFront 쿼리스트링 캐시 셋팅 4. IAM 역할 생성 5. Lambda@Edge 배포 셋팅 및 로그 확인 6. 리사이징 로직 작성 및 테스트 CloudFront 캐시 정책 생성 이름 : cache-policy-lambda-edge-image-resize 캐시 키 설정 > 쿼리문자열 : 모두 나머지는 기본값으로 두고 생성 CloudFront 원본 요청 정책 생성 이름 : origin-request-policy-lambda-edge-image-resize 원본 요청 설정 > 쿼리 문자열 : 모두 나머지는 기본값으로 두고 생성 CloudFront 동작 편집 1. ..

목차 이 게시글은 시리즈물입니다! 아래 목차를 먼저 확인해주세요 1. Lambda@Edge란? 2. S3, CloudFront 셋팅 3. CloudFront 쿼리스트링 캐시 셋팅 4. IAM 역할 생성 5. Lambda@Edge 배포 셋팅 및 로그 확인 6. 리사이징 로직 작성 및 테스트 S3 버킷생성 이름 : s3-lambda-edge-image-resize 모두 기본값으로 설정하고 버킷을 생성합니다 CloudFront 생성 보안 > 원본액세스 > 제어 설정 생성 이름 : s3-lambda-edge-image-resize 나머지 기본값으로 두고 생성 배포 생성 원본 원본 도메인 선택 : 위에서 만든 S3선택 (s3-lambda-edge-image-resize.s3.ap-northeast-2.amazon..

목차 회사 서비스에 도입하기 위해 서치하고 정리했던 내용 올려봅니다 기나긴 삽질의 기록들... Lambda@Edge는 뭔가요? Lambda@Edge는 AWS CloudFront의 기능 중 하나로, CloudFront의 다양한 이벤트에서 실행될 수 있는 람다입니다. AWS CloudFront는 Edge Location(데이터 센터의 전 세계 네트워크)를 통해 콘텐츠를 제공하는데, Lambda는 Region별로 생성할 수 있게 되어있습니다. 그렇다면 전 세계 Region에 똑같은 Lambda를 만들어주어야할까요? 이럴 때 사용하는 것이 Lambda@Edge입니다. 버지니아 리전(us-east-1)에 Lambda@Edge를 만들어두면 AWS가 알아서 해당 람다를 Edge Location으로 복제해줍니다. 따라..

목차 Components란? 컴포넌트는 재사용할 수 있는 단위를 말한다. 레고로 자동차를 만들 때, 다양한 크기의 블럭을 조립하여 만들 듯이 공통되는 UI를 조각내고 다양한 곳에서 조립하듯이 앱을 만들 수 있도록 나누는 것이 컴포넌트이다! //리액트 컴포넌트 예시 //클래스형 class App extends React.Component { render() { return Hello world! } } ▶ 컴포넌트 //함수형 function Head(){ return ( 제목1 제목2 ); } ▶ 컴포넌트 우리는 이미 리액트 컴포넌트를 사용해봤다. 리액트 컴포넌트는 HTML에 정의된 태그가 아닌 , 와 같이 사용자 정의 태그를 만드는 것이라 생각해도 될 것 같다. 클래스형 컴포넌트 React.Compone..

목차 Element const element = Hello, world; 리액트의 가장 작은 단위이다. Component와는 다르다! Element는 Component의 구성요소이며 화면에 렌더링할 DOM 정보를 React에 알려주는 객체이다. Element가 있기 때문에 값이 변경된 부분만 다시 렌더링 할 수 있다. 어떻게 가능할까? JS의 경우 변경점은 시간 뿐임에도 불구하고 root부터 모든 태그가 전체적으로 다 변경된다. React의 경우 //root 아이디를 가진 태그를 찾아서 루트로 선언한다 const root = ReactDOM.createRoot( document.getElementById('root') ); //현재 시간을 보여주도록 jsx 작성 function tick() { //ele..

목차 순수 HTML 파일에서 React를 사용해보자 일단은 순수 HTML에서 React를 사용하는 방법을 알아보자. CDN으로 불러오는 라이브러리들은 무슨역할을 하고있는걸까? React - 가장 기본적으로 필요한 라이브러리이다. Babel - 리액트는 JSX라는 문법을 사용하는데, 이 Babel이 JSX를 JS로 변환해준다. - JSX는 다음에 자세히 알아볼 예정. 예제에서 return Hello world! 부분이 JSX가 사용된 부분이다. React-DOM - 최종적으로 Babel을 통해 JS로 변환된 코드를 HTML DOM으로 변환해준다. - 이런 태그는 HTML에 존재하지 않는다. 이런 특이한 태그들을 HTML DOM으로 변환해준다. Script 설명 render() : DOM 노드 렌더링 시 필..

저는 JS와 부트스트랩으로 웹사이트를 만들어본 경험이 있는데 쌩 HTML, CSS, JS로 프론트를 관리하다보면... 만든사람만 알게되는 구조가 되고 심지어 만든사람조차 이게 어디서 호출되는 함수인지 알수없는 현상이 발생하더라구요 그래서.. 프론트엔드 개발자가 사용하는 가장 유명한 라이브러리, React를 배워보려합니다! React가 뭘까?! 간단하게 말해서 웹사이트를 만들 수 있는 자바스크립트 라이브러리. 동적으로 웹사이트를 변화시키려면 수많은 작업이 필요한데, 이 수많은 작업을 쌩 Javascript로만 관리하기엔 복잡하고 어려워서 나오게 된것이 리액트입니다. React 프로젝트 셋팅하기 1. Node.Js 설치 https://nodejs.org/en/ 해당 사이트에 접속해서 LTS 버전 설치 (20..