DATA101

📌 개요 리액트에서 FileReader를 활용하여 업로드한 텍스트 파일의 내용 읽어오기 👨‍💻 코드 import React, {Component} from 'react'; class FileUpload extends Component { onFileChange(e){ let file = e.target.files[0]; let fileReader = new FileReader(); fileReader.onload = () => { console.log(fileReader.result); }; fileReader.readAsText(file); } render(){ return ( ); } } ✅ 결과 아래는 테스트용 텍스트 파일입니다. 아래는 콘솔에 찍힌 테스트 결과입니다. 포스팅 내용에 오류가 있다면 ..

개요 Docker 기반 Ubuntu 이미지 빌드 시 timezone의 default 값: UTC 대한민국 표준시: UTC+9 Dockerfile 수정으로 Ubuntu timezone 변경 가능 설정 방법 1) Dockerfile 코드 Dockerfile에 아래의 코드를 추가하면 대한민국 표준시로 timezon 변경 ARG DEBIAN_FRONTEND=noninteractive ENV TZ=Asia/Seoul RUN apt-get update && \ apt-get install -y tzdata 2) 코드 설명 ARG DEBIAN_FRONTEND =n oninteractive tzdata 설치 시 터미널에서 사용자가 timezone을 직접 설정할 수 있도록 인터페이스를 제공하지만, 도커 이미지 빌드 시에..

👨‍💻 들어가며 본 튜토리얼을 잘 따라오시면 AWS Lambda에서 DynamoDB 테이블에 데이터를 삽입하는 방법과 테이블 데이터를 읽어오는 방법을 알아가실 수 있습니다. 🛠 기술 스택 AWS DynamoDB AWS Lambda (Runtime: Python 3.6) AWS IAM 📚 목차 1. AWS DynamoDB 세팅 1.1. DynamoDB 개념 1.2. DynamoDB 테이블 생성 2. AWS IAM 세팅 2.1. IAM 개념 2.2. IAM Role 개념 2.2. IAM Role 생성 3. AWS IAM 세팅 3.1. Lambda 개념 3.2. Lambda 함수 생성 3.3. Lambda 코드 4. 테스트 4.1. 데이터 삽입 로직 테스트 4.2. 데이터 조회 로직 테스트 1. AWS Dyn..

📚 목차 1. AWS DynamoDB 개념 2. AWS 기본 세팅 3. AWS DynamoDB 테이블 생성 1. AWS DynamoDB 개념 AWS DynamoDB는 Key-Value 형태로 데이터를 저장하는 AWS의 NoSQL 서비스입니다. DynamoDB는 규모와 상관없이 대부분 10ms 내에 데이터를 읽고 처리할 만큼 속도가 매우 빠르다는 장점이 있습니다. 또한, 완전 관리형 서비스라는 큰 장점이 있습니다. 즉, DB의 용량이나 트래픽이 늘어나면 AWS에서 알아서 스케일링 해주며, DB 백업도 알아서 해줍니다. 사용자가 설정한 성능과 사용한 용량에 대해서만 과금을 부과하기 때문에 비용 최적화에도 도움이 됩니다. 2. AWS 기본 세팅 DynamoDB 생성을 위해 AWS 회원가입과 리전 변경과 같은 ..

📚 목차 1. 개요 2. AWS 기본 세팅 3. React 기반 웹 페이지 구현 4. AWS ECR 생성 5. AWS IAM Role 생성 6. 프로젝트 파일 받기 7. Docker 설치 8. AWS CLI 설치 9. Docker 이미지 빌드 10. AWS ECR 로그인 11. 도커 이미지 PUSH 12. Lambda 함수 생성 13. AWS API Gateway 생성 14. Axios 기반 API Call 15. S3 기반 정적 웹 호스팅 16. 파일 읽어오기 테스트 1. 개요 본 포스팅에서는 Docker를 활용하여 AWS Lambda에서 우분투와 파이썬을 사용할 수 있는 환경을 세팅하고, AWS API Gateway를 통해 웹에서 넘어오는 파일의(i.e., POST 메서드) 내용을 출력하는 방법을 소..

📚 목차 ✅ AWS 기본 세팅 1. S3 버킷 생성 2. IAM Role 생성 3. Lambda 함수 생성 4. Lambda 함수 작성 ✅ AWS 기본 세팅 본격적으로 튜토리얼을 시작하기에 앞서, AWS 회원가입 및 리전 변경과 같은 기본적인 세팅이 필요합니다. 기본적인 세팅이 미비된 분들께서는 아래의 '더보기' 버튼을 클릭해 주세요. 더보기 1) 서비스 가입 먼저 AWS 홈페이지에 방문하셔서 회원가입을 하셔야 합니다. 아래와 같이 최초 가입한 이메일 계정으로 1년간 무료 체험판(a.k.a., 프리 티어)을 제공합니다. 물론 무료인 만큼 저사양 서비스 무료로 사용 가능합니다. 회원가입 시 해외 결제가 가능한 신용카드 등록이 필수입니다. 유효한 신용카드인지 100원을 결제했다가 곧바로 승인 취소되니 유효한..

🤖 에러 상황 React에서 배포 파일 생성 시도 중 에러를 마주하였습니다. npm run build 배포 파일 생성뿐만 아니라 React 서버 실행 시도에도 같은 에러를 마주할 수 있습니다. 📝 에러 코드 sh: react-scripts: command not found 💡 원인 package.json 내 모든 dependency를 다운로드하지 않아서 package.json 내 script를 제대로 일어오지 못하여 발생한 에러입니다. ✅ 해결방법 npm install 을 통해 모든 패키지를 설치해 줍니다. npm install npm install로 해결되지 않는 경우 모든 패키지를 설치하였음에도 같은 에러가 발생한다면, node-modules 폴더를 삭제하고 다시 모든 패키지를 설치해 보시길 바랍니다..

📌 시리즈 포스팅 1. 파일 업로드 웹 페이지 구축: (1) React 기반 Frontend 개발 2. 파일 업로드 웹 페이지 구축: (2) AWS IAM 역할 생성 3. 파일 업로드 웹 페이지 구축: (3) AWS Lambda 생성 4. 파일 업로드 웹 페이지 구축: (4) AWS S3 생성 5. 파일 업로드 웹 페이지 구축: (5) AWS API Gateway 생성 6. 파일 업로드 웹 페이지 구축: (6) AWS Lambda 함수 작성 7. 파일 업로드 웹 페이지 구축: (7) Axios 기반 API Call 8. 파일 업로드 웹 페이지 구축: (8) 파일 업로드 테스트 9. 파일 업로드 웹 페이지 구축: (9) AWS S3 기반 웹 호스팅 👨‍💻 들어가며 본 포스팅에서는 AWS S3를 기반으로 정..