[ 💻 코드스테이츠 x 경남abclab/Section 4 ]Reference 4 - S3로 정적 웹 호스팅 가이드2024-02-26 22:15:04여러분이 향후 각자 개인의 AWS 그룹 계정을 활용하는 경우에는, 아래 가이드에 따라서 S3로 정접 웹을 호스팅하고 관리할 수 있습니다. 이번 실습에서는 S3 버킷을 이용하여 정적 웹 사이트를 호스팅하는 방법에 대해서 알아보겠습니다. 먼저 정적 웹 사이트를 호스팅하는 과정은 4 단계로 요약됩니다. 첫 번째로 구현이 완성된 정적 웹 페이지를 빌드합니다. 빌드 과정이 끝나면 S3 대시보드에 접속하여 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성합니다. 그다음으로 빌드된 정적 웹 페이지를 버킷에 업로드합니다. 업로드가 완료되면 퍼블릭 액세스 차단 설정을 해제하고, 다른 사용자의 접근 권한을 부여하는 버킷 정책을 생성합니다. 먼저 '빌드(build)'에 대해 잠시 알아보는 시간을 가지겠습니..
[ 💻 코드스테이츠 x 경남abclab/Section 4 ]2-2. [Project] AWS 배포2023-12-20 13:24:29# AWS를 활용한 배포 전략 개발한 서비스를 사용자가 이용할 수 있도록 하는 것을 배포라고 합니다. 작성한 Client 코드를 사용자들에게 어떻게 제공할지 생각해 봅시다. AWS에서 제공하는 서비스인 S3라는 서비스를 통해 사용자들에게 Client를 제공할 수 있습니다. 로컬 환경에서는 자체 개발 서버 (예, create-react-app)를 이용해서 클라이언트 앱을 실행시키는 것이 보통입니다. 그럼, 클라이언트를 위해서 EC2 인스턴스를 사용해야 할까요? 그렇지 않습니다. 클라이언트 앱을 정적 파일로 빌드하여 제공합니다. 따라서 S3를 이용해서 클라이언트를 배포합니다. 이때 필요한 것이 빌드입니다. 빌드란 쉽게 말해서 불필요한 데이터를 없애고, 여러 갈래로 퍼져있는 데이터들을 통합/ 압축하여 배포하기..
[ 💻 코드스테이츠 x 경남abclab/Section 4 ]2-1. [Project] Amazon Web Service2023-12-20 13:22:13#1. AWS 서비스 회원가입 1. 준비물 이메일 주소: AWS 계정 생성 시 필요한 유효한 이메일 주소가 필요합니다. 인증 과정과 로그인시 아이디로 사용됩니다. 해외 결제가 가능한 신용 카드 혹은 체크 카드: AWS 회원 가입 시 카드 정보가 필요하며, 작은 금액이 결제되지만, 인증 후에 해당 금액은 바로 환불됩니다. 휴대전화: 회원 가입시 AWS는 전화나 문자 메시지를 통한 인증이 요구됩니다. 영문주소: 영문으로 된 주소를 기입해야 합니다. 도로명 주소를 영문으로 변경하여 기입해야 합니다. 2. 주의사항 비밀번호 설정: 강력한 비밀번호(대문자, 소문자, 숫자, 특수문자 포함)를 사용하고, 별도로 안전한 곳에 저장하세요. 프리 티어 사용: AWS는 신규 가입자에게 12개월 동안의 프리 티어 서비스를 제..
[ 💻 코드스테이츠 x 경남abclab/Section 4 ]1-3. [PROJECT] JSON Server2023-12-20 09:36:19JSON Server 개념학습 API를 통해 받아오는 데이터를 기준으로 화면을 구성 해야 합니다. 그런데, API 개발 일정이 늦어지면 어떻게 해야 할까요? API 개발이 지연될 때, 이러한 상황에서 JSON Server와 같은 도구를 사용하는 것이 매우 유익합니다. JSON Server를 사용하면 최소한의 설정으로 가짜 REST API를 만들 수 있고, 실제 API에서 기대하는 데이터 구조를 나타내는 JSON 파일을 정의할 수 있습니다. 이를 통해 프론트엔드 개발자들은 백엔드 API가 준비될 때까지 UI 구축 및 테스트를 계속할 수 있습니다. JSON Server 는 리액트 프로젝트 안에서 다음과 같이 설치할 수 있습니다. 1 npm install json-server --save 이후, JSON Se..
[ 💻 코드스테이츠 x 경남abclab/Section 4 ]1-2. [PROJECT] POSTMAN2023-12-20 09:36:10Postman 개요 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저입니다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용합니다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보냅니다. 테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 합니다. 매번 코드를 작성할 수는 있습니다. 그러나 테스트를 위해 매번 코드를 작성하는 것은 상당히 번거로운 작업입니다. 매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있습니다. 이러한 API 테스트 도구는 클라이언트 입장에서 서버 A..
[ 💻 코드스테이츠 x 경남abclab/Section 4 ]1-1. [PROJECT] REST API2023-12-19 17:03:52REST API 개요 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신합니다. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다. 이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라집니다. 이런 사용은 아무런 규칙 없이 이루어지는 것이 아닙니다. 요청과 응답을 할 때, '제대로 보내고 받을 수 있는' 일종의 규약이 존재합니다. 이번 챕터에서는 REST API를 학습하고, 이를 통해 어떻게 요청과 응답을 하는 것이 바람직한 방법인지를 이해할 수 있습니다. 1. REST API 디자인 개념학습 REST API에서 REST는 “Representati..