코딩 기록 저장소

1. 클라우드 스토리지클라우드 스토리지란?- 클라우드 스토리지는 인터넷 상의 가상 저장소- 실제 USB나 외장하드처럼 물리적으로 존재하지 않지만 데이터를 안전하게 보관하고 필요할 때 언제든 접근할 수 있음 클라우드 스토리지 장점접근성언제 어디서나 데이터에 접근 가능스마트폰, 태블릿, 노트북 등 다양한 기기에서 동일한 데이터를 열어볼 수 있어 편리함확장성저장 공간이 부족해질 때마다 새로운 하드웨어를 구매할 필요가 없음클릭 몇 번으로 저장 공간을 늘릴 수 있어 비용 효율적데이터 보안클라우드 제공업체는 최신 보안 기술을 적용해 데이터를 안전하게 보호함자동 백업 기능으로 데이터 손실 위험 크게 줄일 수 있음2. 클라우드 스토리지 비교Amazon S3무한한 저장 공간과 편리한 데이터 관리- 데이터를 체계적으로 정..

1. 프론트엔드 Dockerfile 작성Visual Studio Code 실행프로그램 실행 후 frontend 폴더를 선택한 후 'Dockerfile' 파일을 추가함다음과 같이 Dockerfile 내용을 작성함 2. 프론트엔드 프로젝트 EC2 업로드프론트엔드 프로젝트 EC2 업로드- 계산기 프론트엔드 프로젝트는 백엔드 IP 주소를 포함하므로 외부에 노출될경우, 백엔드로 DDoS 공격 등보안 위협에 취약해짐- 민감한 정보를 포함한 프로젝트는 Docker Hub나 Git과 같은 공개 저장소에 등록하지 않도록 주의해야 함- 계산기 프론트엔드는 Docker Hub에 등록하지 않고, EC2에 직접 업로드하여 Docker 이미지를 생성함프로젝트 업로드 프로그램 설치- https://filezilla-project...

1. EC2 생성 실습EC2 생성 실습- AWS 사이트 로그인 후, 지역은 서울로 설정하고 서비스-컴퓨팅-EC2를 누름- 인스턴스 시작을 클릭함EC2의 이름과 Ubuntu 리눅스를 선택함키 페어 생성- 클라우드 배포 시, 프론트엔드 파일을 EC2에 업로드해야 함- EC2 파일 업로드를 위해 새로운 키 페어가 필요함- 새 키 페어 생성을 클릭키페어 이름 및 ppk형식 선택- 키페어 파일을 c:\cloud_project01에 안전하게 저장- 키페어 파일은 재발급되지 않으므로 분실 시 EC2 접근이 불가능함- 보안을 위해 키페어 파일을 안전하게 관리하고 외부 유출을 방지해야 함- EC2에 생성한 키페어가 설정되었는지 확인함2. EC2 보안설정EC2 보안 설정- EC2의 3000 포트를 사용 가능하도록 설정함프..

1. AWS EC2- AWS EC2 (Amazon Elastic Compute Cloud)는 아마존 웹 서비스의 클라우드 컴퓨팅 서비스- 실제 서버 관리 없이 필요한 컴퓨팅 자원을 사용하여 비용 효율성을 높이고 유연한 IT 인프라를 구축EC2의 기본 개요- EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스- 사용자는 가상 컴퓨터를 생성하고 관리하여 실제 서버와 유사한 기능을 활용할 수 있음- EC2를 이용하면 필요에 따라 CPU, 메모리, 스토리지, 네트워크 등의 컴퓨팅 리소스를 조합하여 원하는 환경을 구축- 실제 서버 관리 비용과 시간을 절감할 수 있음- 비즈니스 요구사항에 따라 컴퓨팅 자원을 쉽게 확장하거나 축소하여 유연하게 대응할 수 있음2. EC2 보안설정- 계산기를 배포하기 위해 AWS 사이트..

1. DockerfileDockerfile설계 스케치- Dockerfile은 컨테이너를 어떻게 구축할지 설명하는 간략한 설계 스케치필요한 것들- 필요한 장비, 재료를 간략히 명시함설계도 생성- 이 스케치를 바탕으로 실제 컨테이너를 구현하는 완성된 설계도(Docker Image)를 생성Docker ImageDocker Image- Docker Image는 Dockerfile 스케치를 바탕으로 만들어진 상세하고 완성된 컨테이너 설계도상세한 설계- 컨테이너의 모든 세부 사항을 포함하며 실제 동작 가능한 컨테이너를 설계함컨테이너 생성- 실제 컨테이너(Docker Cointainer) 생성에 사용됨Docker Container실제 컨테이너- Docker Container는 Docker Image 설계도에 따라 구..

1. 프로젝트 열기Visual Studio code 실행File-Open Folder 선택c:\cloud_project01\calculator_frontend 프로젝트 열기App.js 파일 열기2. 초기값 설정 및 입력값 업데이트입력 상자 초기값 설정아래의 코드를 추가함 setInnum1, setInnum2- 숫자를 바꾸는 도구- React에서는 데이터를 직접 바꾸지 않고, setInnum1이나 setInnum2라는 도구를 사용해서만 데이터 변경 가능useState(0)- 상태를 만드는 React의 함수- 0은 초기값, innum1의 첫 번째 값- React는 이 초기값을 기억하고, 이후에 숫자가 변경되면 화면을 자동으로 업데이트함HTML상에서 변수 값을 텍스트 박스에 출력하도록 코드를 추가함npm st..