분류 전체보기 43

AWS 스토리지(1)

S3 개요AWS S3(Simple Storage Service)는 다양한 용도로 활용 가능한 객체 스토리지 서비스이다. 아카이브, 로그 파일, 재난 복구 이미지 등의 백업 관리는 물론, 저장된 빅데이터의 분석 작업에도 활용할 수 있다. 또한, 정적 웹사이트 호스팅에도 사용할 수 있다.객체 스토리지와 블록 스토리지의 차이블록 스토리지: NTFS, Btrfs, ext4와 같은 파일 시스템을 위해 물리적 저장 장치를 블록 단위로 나누는 저장 방식이다. EC2 인스턴스의 OS 볼륨은 블록 스토리지에 속한다.객체 스토리지: 어떤 형식의 데이터든 저장할 수 있는 공간으로, 복잡한 규칙 없이 누구나 접속하여 어떤 데이터든 어떤 용량이든 저장할 수 있다. S3는 객체 스토리지이다. S3 서비스 아키텍처버킷 생성: 기본..

aws 2024.06.28

[AWS]Compute Service(2)

1편 https://jjongsk.tistory.com/entry/AWSCompute-Service1 EC2 Auto ScalingEC2 Auto Scaling은 애플리케이션 실패 및 복구 상황을 방지하기 위해 사용자가 미리 지정한 수 만큼의 EC2 인스턴스를 자동으로 프로비저닝하고 시작하는 서비스이다.환경 설정Auto Scaling은 인스턴스 설정 내용을 복사하여 사용하며, 필요에 따라 수정할 수 있다. 환경 설정만으로는 직접 인스턴스를 시작할 수 없으며, Auto Scaling에서만 사용할 수 있다. 생성된 환경 설정은 수정이 불가능하며, 새로운 설정을 생성해야 한다.템플릿환경 설정과 유사하지만, 템플릿은 더 직관적이고 이해하기 쉽다.Auto Scaling 그룹Auto Scaling 그룹은 Auto ..

aws 2024.06.23

[AWS]Compute Service(1)

인스턴스 환경설정리전리전은 AWS 서버가 물리적으로 존재하는 위치이다. 사용자는 자신의 필요에 맞게 리전을 선택할 수 있다. 예를 들어, 서비스의 주요 사용자 기반이 있는 지역에 가까운 리전을 선택하면 지연 시간을 최소화할 수 있다.VPC (Virtual Private Cloud)VPC는 AWS에서 네트워크를 생성하고 관리하는 도구이다. VPC를 사용하면 인스턴스를 다른 환경과 쉽게 격리시킬 수 있어 보안과 네트워크 관리를 효과적으로 수행할 수 있다.TenancyEC2 인스턴스를 시작할 때 Tenancy 모델을 선택할 수 있다. 기본 설정은 공유 Tenancy로, 이는 인스턴스가 다른 인스턴스와 동일한 물리적 서버에서 실행됨을 의미한다. 전용 인스턴스 서버를 사용하면 물리적으로 인스턴스를 격리할 수 있지..

aws 2024.06.20

Git push시 ECS를 통해 자동으로 서버 배포해보기

Github Repository에 서버 코드를 push했을 때 자동으로 ECS를 통해 서버 코드가 배포되는 실습을 진행할것이다. 이 글로 실습하기 전에 아래 글을 참고하면 좋다.https://jjongsk.tistory.com/entry/Docker이미지를-ECS를-통해-배포해보기1. Git Repository 생성 및 설정github repository를 생성해준뒤 이름, public, private 유무는 편한대로 설정한다. repository 생성이 완료되었으면 서버 코드를 push해준다. 서버 코드 설정은 아래 링크를 참고하자https://jjongsk.tistory.com/entry/Docker이미지를-ECS를-통해-배포해보기이제 ECS 배포를 위한 AWS env를 설정할 차례이다. reposi..

devops 2024.06.16

React19 Support for Document Metadata / stylesheets / async scripts / preloading resources

Support for Document Metadata / stylesheets / async scripts / preloading resourcesSupport for Document Metadata ... 이를 통해 초기 렌더링을 늦출 수 있는 요소들을 우선순위 혹은 설정에 따라 미리 가져오거나 최적화하여 가져와 초기 렌더링을 향상시킬 수 있음주요 기능preinit:초기 로드 시 중요한 스크립트를 미리 로드하여 페이지 로드 시간을 단축preload:폰트, 스타일시트, 이미지 등 다양한 리소스를 미리 로드prefetchDNS:특정 호스트에서 요청이 발생하지 않을 경우에도 DNS fetch를 미리 실행하여 네트워크 지연을 감소preconnect:특정 호스트에 대해 요청이 발생할 가능성이 있지만 ..

frontend 2024.06.04

두 가지 종류의 공백문자

일반 공백 (space)과 &nbsp(non-breaking space)는 서로 다른 문자이다. 이로 인해 디버그깅이 어려운 문제가 발생하기도 하고, 코딩할 때 어떤것을 사용해야할 지 헷갈릴 수도 있다. 그렇다면 왜 이 두개를 나눠 놓았을까? 이제부터 알아보도록 하자 특징일반 공백문자 (space)코드: U+0020키보드의 스페이스바를 눌러 생성되는 공백 문자.여러 개의 일반 공백문자는 HTML에서 하나의 공백으로 압축될 수 있다.nbsp (non-breaking space)코드: U+00A0HTML에서   로 표현된다.줄바꿈을 방지하고, 여러 개의 비깨짐 공백문자는 연속해서 표시된다.  위 내용에서 알 수 있듯이 두 종류의 공백은 코드부터 시작해서 표현되는 모양도 다르다. 또한 두 공백의 출력..

frontend 2024.05.23

Docker이미지를 ECS를 통해 배포해보기(2)

이전 내용은1편을 참고하자https://jjongsk.tistory.com/entry/Docker%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-ECS%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%B0%B0%ED%8F%AC%ED%95%B4%EB%B3%B4%EA%B8%B0 Docker이미지를 ECS를 통해 배포해보기(1)ECS는 쿠버네티스와 같은 컨테이너 이미지 오케스트레이션 도구이다. 이를 사용하여 Docker이미지를 ECS에 배포하는 과정을 실습해보겠다.1. 테스트용 노드 서버 만들기여기서는 fastify를 사용한jjongsk.tistory.com 5. Load balancer 생성이 설정을 통해 밖에서 오는 HTTP 요청을 application 서버로 보내줄 수 있다.E..

devops 2024.05.16

Docker이미지를 ECS를 통해 배포해보기(1)

ECS는 쿠버네티스와 같은 컨테이너 이미지 오케스트레이션 도구이다. 이를 사용하여 Docker이미지를 ECS에 배포하는 과정을 실습해보겠다.1. 테스트용 노드 서버 만들기여기서는 fastify를 사용한 서버를 만들어보겠다. 먼저 아래 문서를 참고하여 노드 서버를 만들어보자https://fastify.dev/docs/latest/Guides/Getting-Started/디렉토리를 만들고 아래 명령어를 실행해준다.>yarn init >yarn add fastifypackage.json에 아래 코드를 추가해준다.{... "scripts": { "start": "node index.js" }, "type": "module"}index.js 파일을 루트에 만든 뒤 아래 코드를 추가한다.import Fa..

devops 2024.05.14

웹 성능 측정에 대한 주관이 많이 들어간 설명(feat.performance api)

프론트엔드에서 측정해야하는 성능 웹을 개발할 때 성능 관련하여 신경써야 하는 부분은 뭐가있을까?아래의 3가지가 가장 중요한 3가지 요소라고 생각하고 있으며 위에서 부터 아래순으로 더욱 중요하다고 봐도 무방할 것 같다.로딩렌더링메모리 로딩FCP(First Contentful Paint): 첫 요소가 로드 될 때까지 걸리는 시간* 로딩바, 텍스트 등FMP(First Meaningful Paint): 의미 있는 첫 요소가 로드 될 때까지 걸리는 시간* 많은 크기를 차지하는 부분 (이미지) , deprecated 되었다고 생각해도 됨LCP(Largest Contentful Paint): 주요 콘텐츠가 로드 될 때까지 걸리는 시간* 뷰포트 내에 있는 가장 큰 이미지, 텍스트의 렌더링 시간 * FMP가 부정확해서 ..

frontend 2024.05.08

EventLoop에 대한 완벽하지는 않지만 자세한 설명

개요 자바스크립트는 단일 스레드로 동작하며, 이는 한 번에 하나의 작업만을 처리할 수 있다는 의미를 갖는다. 그러나 자바스크립트가 이러한 단일 스레드 모델에도 불구하고 여러 이벤트를 동시에 처리할 수 있는 이유는 바로 **이벤트 루프**에 있다. 이벤트 루프는 이름 그대로 끊임없이 루프하여 현재 큐에 태스크가 있는지 확인하며 큐에 태스크가 있을 경우 이벤트 루프의 내부 동작 알고리즘에 따라 태스크를 처리해주는 역할을 하며 이를 통해 I/O와 같은 이벤트들을 차단하지 않고 부드럽게 동작하게 해준다. 물론 정확히 말하면 차단이 되지만 우선순위를 높여 마치 차단되지 않는 것처럼 동작하게 해준다.이벤트 루프의 역할 정리하자면 이벤트 루프의 주요 역할은 다음과 같다:이벤트 처리: 이벤트 루프는 비동기적으로 발생하..

javascript 2024.05.03