개발 공부 기록

프론트엔드 웹 성능 최적화 - 2

_김도연 — Mon, 20 Jan 2025 08:48:32 +0900

이미지 레이지(lazy) 로딩

Intersection Observer

웹 애플리케이션에서 특정 요소가 뷰포트(Viewport)나 지정된 부모 컨테이너의 가시 영역과 교차할 때 이를 비동기적으로 관찰할 수 있게 해주는 API

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web APIs | MDN

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

developer.mozilla.org

useEffect(() => {
    const options = {};
    
    const callback = (entries, observer) => {
    	entries.forEach(entry => {
        	if(entry.isIntersecting) {
            	entry.target.src = entry.target.dataset.src;
                observer.unobserve(entry.target);
            }
        	
        });
    }
}, []);

<img data-src={props.imgae} ref={imgRef} />

react-lazyload

https://www.npmjs.com/package/react-lazyload

react-lazyload

Lazyload your components, images or anything where performance matters.. Latest version: 3.2.1, last published: 10 months ago. Start using react-lazyload in your project by running `npm i react-lazyload`. There are 459 other projects in the npm registry us

www.npmjs.com

이미지 사이즈 최적화

PNG - 무손실 압축. 상대적으로 용량 큰편

JPG - 압축. 약간의 화질 저하

WEBP - 구글에서 만든 최근의 이미지 포맷. 지원하지 않는 브라우저도 있음.

JPG에 비해 용량, 화질면에서 성능이 좋음

https://squoosh.app/

Squoosh

Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files.

squoosh.app

ㄴ이미지파일을 압축, webp 파일로 변환할 수 있는 사이트

<picture> 태그

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<picture>: The Picture element - HTML: HyperText Markup Language | MDN

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

developer.mozilla.org

ㄴ 조건을 설정하여 사이즈나 확장자에 따라 다른 이미지를 로드할 수 있음

동영상 최적화

동영상 압축기 이용

<video> 태그에도 동일하게 여러개의 소스 지정가능(가능한 우선순위로 실행)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

<video>: The Video Embed element - HTML: HyperText Markup Language | MDN

The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

developer.mozilla.org

폰트 최적화

FOUT - 폰트 불러오기 전에 기본텍스트 보여주고 나중에 폰트 적용

FOIT - 폰트가 안불러와졌다면 텍스트를 안보여주고 한번에 적용된 글로 보여줌

웹폰트의 최적화 방법

1. 폰트 적용 시점 컨트롤하기

2. 폰트 사이즈 줄이기

폰트 적용 시점 컨트롤하기

https://developer.mozilla.org/ko/docs/Web/CSS/@font-face/font-display

font-display - CSS: Cascading Style Sheets | MDN

font-display 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.

developer.mozilla.org

https://www.npmjs.com/package/fontfaceobserver

fontfaceobserver

Detect if web fonts are available. Latest version: 2.3.0, last published: 3 years ago. Start using fontfaceobserver in your project by running `npm i fontfaceobserver`. There are 548 other projects in the npm registry using fontfaceobserver.

www.npmjs.com

폰트 사이즈 줄이기

웹폰트 포멧 사용

TFF/OTF -> 웹에서 더 사용하기 좋게, 더 효율적으로 -> WOFF/WOFF2

파일크기

TTF/OTF > WOFF > WOFF2

https://transfonter.org/

Online @font-face generator

The @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their

transfonter.org

local 폰트 사용

@font-face {
	font-family: FONTNAME;
	src: loca("FONTNAME"), // 사용자 컴퓨터에 설치되어 있는 경우
    	 url(".../FONTNAME.woff2") format("woff2"),
         url(".../FONTNAME.woff") format("woff"),
    	 url(".../FONTNAME.ttf") format("truetype"),
}

Subset 사용

내가 사용하는 글자만 포함시켜서 폰트 파일 압축

Unicode Range 적용

font-face의 CSS 속성

내가 지정한 범위의 유니코드만 불러올 수 있음

data-uri로 변환

네트워크 리소스 절약 가능

preload

<link rel="preload" href="FONTNAME" as="font" type="font/woff2" crossorigin>

preload 지정하여 가장 먼저 로딩할 수 있음

https://www.npmjs.com/package/preload-webpack-plugin

preload-webpack-plugin

Enhances html-webpack-plugin with link rel=preload wiring capabilities for scripts. Latest version: 2.3.0, last published: 7 years ago. Start using preload-webpack-plugin in your project by running `npm i preload-webpack-plugin`. There are 87 other project

www.npmjs.com

webpack 사용중이라면 설정추가해주기

plugins: [
  new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'font',
    include: 'allAssets',
    fileWhitelist: [/(.woff2?)/i]
  })
]

캐시 최적화

캐시 - 데이터나 값을 미리 복사해 놓는 임시 장소나 그런 동작

캐시 방식 (사용자가 결정X. 브라우저 동작 방식을 따라감)

1. 메모리 캐시

2. 디스크 캐시

캐시 지정

Response Headers에 Cache-Control 를 설정해서 보내줘야 함

설정 값

no-cache: 캐시를 사용하기 전에 서버에 검사 후, 사용 결정
no-store: 캐시 사용 안 함
public: 모든 환경에서 캐시 사용 가능
private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가 (ex. 로그인 정보 등)
max-age: 캐시의 유효시간

html 파일은 no-cache

js, css, img 파일은 hash 값이 파일명에 붙으니 긴 기간으로 max-age 지정 (ex. public, max-age=31536000)

const header = {
	setHeaders: (res, path) => {
    	if(path.endsWith(".html")) {
        	res.setHeader("Cache-Control", "no-cache")
        } else if(path.endsWith(".js") || path.endsWith(".css") || path.endsWith(".webp2")) {
        	res.setHeader("Cache-Control", "public, max-age=31536000")
        } else {
        	res.setHeader("Cache-Control", "no-cache")
        }
    },
}

app.use(express.static(path.join(__dirname, "../build"), header))

불필요한 CSS 제거

Coverage 탭에서 코드 사용량을 검사할 수 있음

빨간색 - 사용하지 않은 코드

검은색 - 사용한 코드

https://purgecss.com/

PurgeCSS - Remove unused CSS | PurgeCSS

purgecss.com

ㄴ Class 네임에 포함되지 않은 클래스들을 다 제거하고 필요한 코드만 남김

Layout Shift 피하기

원인

- 사이즈가 정해져 있지 않은 이미지

- 사이즈가 정해져 있지 않은 광고

- 동적으로 삽입된 콘텐츠

- Web font (FOIT, FOUT)

프론트엔드 웹 성능 최적화

_김도연 — Tue, 14 Jan 2025 09:51:50 +0900

웹의 성능 개선은 크게 두 개

1. 로딩 성능 개선

2. 렌더링 성능 개선

로딩 성능 최적화

- 이미지 사이즈 최적화

- Code Split

- 텍스트 압축

- 컴포넌트 Lazy Loading

- 컴포넌트 Preloading

- 이미지 Preloading

렌더링 성능 최적화

- Bottleneck 코드 최적화

- 애니메이션 최적화 (Reflow, Repaint)

분석툴

- 크롬 Network 탭

- 크롬 Performance 탭

- 크롬 Light house 탭

- webpack-bundle-analyzer

이미지 최적화

CDN - Contents Delivery Network

ㄴ 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술

Image CDN - image processing CDN

화면에 필요한 크기로 이미지를 불러오는 것이 중요.

화면에 그리는 크기의 2배 정도가 적당,,

번들 파일 분석

https://www.npmjs.com/package/webpack-bundle-analyzer

webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap. Latest version: 4.10.2, last published: 9 months ago. Start using webpack-bundle-analyzer in your project by running `npm i webpack-bundle-analyzer`.

www.npmjs.com

Code Splitting

불필요한 코드 또는 중복되는 코드가 없이 적절한 사이즈의 코드가 적절한 타이밍에 로드될 수 있도록 하는 것https://ko.legacy.reactjs.org/docs/code-splitting.html

코드 분할 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

텍스트 압축

서버에서 리소스를 압축해서 보내서 성능 개선 가능

보통 웹상에서는

1. GZIP

2. Deflate

방식을 사용함

(압축이 적용되고 있는지는 Network탭의 Headers-> Response Header -> Content-Encoding 을 통해 확인 가능)

모든 파일을 압축하면 오히려 성능이 느려질 수도 있음

파일이 2KB미만이면 그대로 전송하는 것이 나음

애니메이션 최적화 (Reflow, Repaint)

브라우저는 초당 60 프레임을 보여줌

초당 20-30프레임을 보여주게되면 쟁크(버벅이는 현상) 발생

브라우저 렌더링 과정

DOM+CSSOM -> Render Tree -> Layout -> Paint -> Composite

Reflow - 모두 다 재실행 (위치, 크기 같은 속성 변경)

Repaint - Layout 생략 (색깔, 스타일 같은 속성 변경)

Reflow, Repaint 피하기 (GPU 도움 받기)

ㄴ transform, opacity(GPU가 관여할 수 있는 속성) 변경

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

developer.mozilla.org

컴포넌트 Preloading

Preloaing 타이밍

1. 버튼 위에 마우스를 올려 놨을 때

2. 최초 페이지 로드가 되고, 모든 컴포넌트의 마운트가 끝났을 때

function lazyWithPreload(importFunction) {
	const Component = React.lazy(importFunction)
	Component.preload = importFunction
	return Component
}

이미지 Preloading

이미지는 요청을 계속 보냄. 똑같은 주소여도 요청을 다시 보내기 때문에 캐시를 설정해주는 것도 중요

- 미리로드하고 캐시를 적용하는 것이 중요!

const img = new Image()
img.src = "https://..."

AWS Certified Solutions Architect Associate(SAA-C03) 합격 후기~

_김도연 — Wed, 1 Jan 2025 20:27:20 +0900

취득 이유

스타트업으로 이직을 하고, 개발하면서 문제 상황이 정말 많았다.

일단 인력부족으로 인해 내가 많은 것을 해야했고, 많은 것을 알아야 했다.

프로젝트를 도와주시는 DevOps 개발자 분이 계셨지만,

문제발생시 뭘 물어봐야할지 키워드조차 파악할 수가 없었다.

그런 내가 참 부족하게 느껴졌다.

현재 상황에 답답해하기보단, 해결책을 찾기로 했고

개발자분의 조언에 따라 AWS SAA 자격증을 준비해보기로 했다.

준비 및 공부 방법

나는 주 개발 분야가 FE 였다.

간단한 BE, DB 지식이 있긴 하나 매우 얕은 수준이었고

다뤄본 AWS 서비스는 EC2, RDS, Route 53 뿐이었다..

그래서 처음엔 추천해주신 Udemy 강의를 들었다.

https://www.udemy.com/course/best-aws-certified-solutions-architect-associate

27시간의 분량이었지만, 1달 정도 기간을 잡고 꾸준히 들었다.

인터넷을 찾아보니 노베이스에서 2-3주 빡세게 기출문제를 돌려 합격하는 경우도 봤으나,

업무에 큰 도움은 되지 않을 것 같아 천천히 공부하기로 했다.

처음 강의를 들으며 이해가지 않는 부분도 많았지만, 그냥 틀어놓고 계속 들었다.

어느정도 용어와 서비스가 귀에 익을 때쯤

https://www.examtopics.com/exams/amazon/aws-certified-solutions-architect-associate-saa-c03/view/

기출 문제를 풀었다.

기출 문제는 1000개 정도 있었으나,

다 외울 능력도 없고 외워서 푸는건 무리라고 생각하여

1문제 1문제 개념을 찾아보며 오랜 시간 풀었다.

겹치는 문제가 거의 없고 요구 상황이 정말 달라서

꼼꼼히 다 공부하는게 답이라고 생각했다 ㅜㅜ

매일 하루에 1-2시간 정도 준비했고, 1달 가량 틈틈이 푸니

500문제 정도 푼 것 같다.

2-3회독 하고 응시하시는 분들 정말 대단한것 같다 ㅠㅠ

500문제정도 시간을 들여서 푸니 더 푸는 것은 의미가 없다고 생각하여

부족한 부분 개념을 복습하는데 집중했다

https://www.youtube.com/@AWSClassroom

모르는 개념은 AWS 강의실 유튜버님께 정말 많이 배웠다.

대부분의 서비스에 대해 영상이 올라와있어서 이해하기 정말 좋았다.

결과 발표

나는 12월 31일 오후 6시 30 시험에 응시했고, 8시쯤 시험을 마쳤다.

퇴근하고 시험을 보느라 저녁에 봤는데,

후기를 보니 대부분 오전에 보시는 것 같았다.

결과는 다음날 새벽 4시에 메일로 날아왔다~

낯선 문제가 몇개 있어

혹시나 간소한 차이로 떨어질까봐 걱정했는데

합격해서 정말 뿌듯하다 +_+

2025년도 가보쟈구~

AWS Certified Solutions Architect Associate(SAA-C03) 주요 개념 정리

_김도연 — Tue, 10 Dec 2024 11:28:08 +0900

분석

개념	설명	키워드 or 예제 상황
Amazon Athena	서버리스 대화형 쿼리 서비스. S3에 저장된 데이터를 SQL로 분석. 표준 SQL 사용. 데이터 소스는 주로 S3	S3에 저장된 로그 데이터를 쿼리해 특정 기간 동안의 사용자 트래픽 분석
AWS Data Exchange	외부 데이터 제공자와 소비자를 연결해 데이터를 구매하거나 제공. 상업적 데이터 세트를 쉽게 검색하고 구독 가능	데이터 마켓플레이스. 구독형 데이터 서비스. 금융 데이터를 구독해 주식 시장 분석 애플리케이션 개발
AWS Data Pipeline	데이터 처리 및 이동을 자동화하는 ETL 서비스. 데이터를 지정된 소스에서 대상으로 이동	ETL 작업. 일괄 처리. 자동화 워크플로우. 매일 S3에서 RDS로 데이터를 이동하고 처리하는 배치 작업 설정
Amazon EMR	대규모 데이터 처리용 Hadoop, Spark 등의 빅데이터 프레임워크를 사용하는 클러스터 서비스. 데이터분석, ML 작업에 최적화	Hadoop, Spark, 빅데이터 처리. 사용자 로그 데이터를 분석하여 사용자 행동 패턴을 예측
AWS Glue	서버리스 ETL 서비스로 데이터 카탈로그 생성 및 관리. 데이터 변환 및 로드 자동화. 데이터 카탈로그로 데이터 탐색 간소화	ETL. 데이터 카탈로그. 서버리스. 다양한 소스의 데이터를 변환하여 S3에 적재하고 Redshift로 로드
Amazon Kinesis	스트리밍 데이터 처리 및 분석 서비스.	실시간 스트리밍, 데이터 처리. 분석
AWS Lake Formation	데이터 레이크 구축 및 관리 간소화 * 데이터 레이크는 모든 규모의 정형 및 비정형 데이터를 저장할 수 있는 중앙 집중식 리포지토리	데이터 준비, 카탈로그화, 보안 설정 자동화. S3와 통합되어 작동.
Amazon Managed Streaming for Apache Kafka(Amazon MSK)	Apache Kafka의 서버리스 버전	Apache Kafka, 스트리밍 데이터 관리, 서버리스. IoT 센서 데이터 수집 및 분석.
Amazon OpenSearch Service	검색 및 데이터 분석 서비스. ElasticSearch 기반. 로그 및 운영 데이터 분석. 대화형 데이터 시각화	ElasticSearch, 로그 분석, 검색. 웹사이트 로그에서 오류를 검색하고 원인 분석
Amazon QuickSight	클라우드 기반 BI 도구로 데이터 시각화 및 대시보드 생성. 다양한 데이터 소스와 통합 가능. ML 기반 인사이트	BI 도구, 데이터 시각화, 대시보드. 판매 데이터를 분석하고 대시보드로 월간 매출 현황을 보고.
Amazon Redshift	페타바이트 스케일의 데이터 웨어하우스 서비스. 대규모 데이터 분석. SQL 호환. BI 도구 연동 최적화	데이터 웨어하우스, 대규모 분석, BI 연동

애플리케이션 통합

개념	설명	키워드 or 예제 상황
Amazon AppFlow	SaaS 애플리케이션과 AWS 간의 데이터 통합 서비스. 양방향 데이터 흐름 가능. 데이터 변환 및 필터링 지원	SaaS 통합, 데이터 이동, 자동화. Slack의 데이터를 S3로 이동하여 분석
AWS AppSync	서버리스 GraphQL API 구축 및 관리 서비스. 실시간 업데이트 및 오프라인 지원	GraphQL, 실시간 데이터, 오프라인 지원. 채팅 애플리케이션의 실시간 메시지 업데이트 기능 구축
Amazon EventBridge	애플리케이션과 AWS 서비스 간의 이벤트 기반 통합 서비스. 이벤트 스트리밍과 규칙 기반 라우팅	이벤트 중심 아키텍처, 라우팅, 통합. EC2 인스턴스 상태 변경 이벤트를 Lambda 함수로 전송하여 작업수행
Amazon MQ	메시지 브로커 서비스로 ActiveMQ 및 RabbitMQ를 관리. AMQP, MQTT 등 다양한 프로토콜 지원.	메시지 브로커, ActiveMQ, RabbitMQ. 마이크로서비스 간의 안정적인 메시지 전달 및 처리를 지원.
Amazon SNS	메시지 게시 및 구독을 위한 서버리스 메시징 서비스. 이메일, SMS, HTTP/HTTPS 엔드포인트로 알림 발송.	Pub/Sub, 알림 전송, 서버리스. 애플리케이션 장애 발생 시 운영 팀에 SMS 알림 전송
Amazon SQS	비동기 메시징을 위한 대기열 서비스.	비동기 메시징, 대기열, 워크로드 디커플링
AWS Step Functions	서버리스 워크플로우 자동화 및 오케스트레이션 서비스. Lambda 함수 및 AWS 서비스와의 통합	워크플로우, 오케스트레이션, 자동화. 사용자가 파일을 업로드하면 데이터 처리 및 저장 작업을 순차적 실행

AWS 비용 관리

개념	설명	키워드 or 예제 상황
AWS Budgets	비용 및 사용량 예산을 설정하고 모니터링. 초과 비용 알림 설정 가능. 예산 기반 메트릭 제공	비용 관리, 알림, 예산 설정. 월별 비용 한도를 설정하고 초과 시 알림을 받음
AWS Cost and Usage Report	AWS 비용 및 사용량 데이터를 세부적으로 분석. CSV 형식으로 데이터 제공. 비용 분류 및 태그 분석 가능	비용 분석, 사용량 보고서, CSV 데이터.
AWS Cost Explorer	비용 및 사용량 시각화 도구. 비용 최적화 추천 제공.	비용 시각화, 트렌드 분석, 최적화.
Savings Plans	사용량 기반 요금을 할인받을 수 있는 요금제. 컴퓨팅 사용량에 대해 유연한 할인 적용. 특정 인스턴스 유형에 국한되지 않음.	비용 절감, 유연한 할인, 사용량 기반. EC2 및 Lambda 사용량에 대해 Savings Plans를 적용해 비용 절감.

컴퓨팅

개념	설명	키워드 or 예제 상황
AWS Batch	대규모 배치 컴퓨팅 작업을 실행하는 서비스. 서버리스 환경에서 배치 작업 관리. 작업 큐와 컴퓨팅 환경 분리.	배치 처리, 대규모 컴퓨팅, 자동화. 대규모 데이터를 분석하기 위한 매일 밤 데이터 처리 작업 수행.
AWS Elastic Beanstalk	애플리케이션 배포 및 관리 자동화 플랫폼. 코드만 업로드하면 환경 자동 생성. 다양한 프로그래밍 언어 지원.	PaaS, 자동 배포, 관리 간소화. Python 애플리케이션을 배포하며, 인프라 관리 없이 운영.
AWS Outposts	AWS 서비스를 온프레미스 환경에서도 사용 가능하게 하는 하드웨어 솔루션. 데이터 지연 시간이 중요한 워크로드에 적합.	온프레미스, 하이브리드 클라우드, 로컬 데이터 처리. 공장 내부에서 데이터 분석이 필요한 제조업.
AWS Serverless Application Repository	서버리스 애플리케이션을 공유하고 배포하는 플랫폼. 오픈소스 및 상용 서버리스 애플리케이션 사용 가능. Lambda 기반 애플리케이션 중심.	서버리스 애플리케이션, 배포 간소화, 공유. 기존 서버리스 샘플 애플리케이션을 가져와 고객 서비스 챗봇 개발.
VMware Cloud on AWS	VMware 워크로드를 AWS 클라우드에서 실행	하이브리드 클라우드, 워크로드 마이그레이션.
AWS Wavelength	5G 네트워크에 최적화된 엣지 컴퓨팅 서비스	엣지 컴퓨팅, 5G 네트워크, 저지연

컨테이너

개념	설명	키워드 or 예제 상황
Amazon ECS Anywhere	온프레미스 및 클라우드에서 컨테이너를 실행하는 Amazon ECS 확장.	온프레미스 컨테이너 관리, ECS 확장, 하이브리드 오케스트레이션
Amazon EKS Anywhere	온프레미스에서 Kubernetes 클러스터를 관리하는 EKS 확장.	온프레미스 Kubernetes, EKS 확장, 하이브리드 클라우드.
Amazon EKS Distro	EKS에서 사용하는 Kubernetes 오픈소스 배포판	Kubernetes 배포판, 오픈소스, EKS 호환성.
Amazon Elastic Container Registry(Amazon ECR)	컨테이너 이미지 저장 및 관리 서비스.	컨테이너 레지스트리, Docker 이미지, 보안 스캔
Amazon Elastic Container Service(Amazon ECS)	컨테이너화된 애플리케이션을 실행하는 완전 관리형 서비스. AWS Fargate와 통합으로 서버리스 컨테이너 실행 가능. 클러스터 기반.	컨테이너 오케스트레이션, Fargate, 관리형 서비스.
Amazon Elastic Kubernetes Service(Amazon EKS)	Kubernetes 클러스터를 관리하는 완전 관리형 서비스. AWS 네이티브 서비스와 통합.	Kubernetes 관리, EKS, 컨테이너화된 워크로드.

데이터베이스

개념	설명	키워드 or 예제 상황
Amazon Aurora	고성능 관계형 데이터베이스 서비스 (MySQL, PostgreSQL 호환).	고가용성과 성능 제공 (최대 5배 빠름). 자동 백업 및 다중 AZ 복제.
Amazon Aurora Serverless	자동으로 확장 및 축소되는 Aurora의 서버리스 버전. 트래픽이 간헐적인 애플리케이션에 적합	서버리스 RDBMS, 자동 확장, 비용 최적화. 비정기적으로 접속량이 발생하는 시험 관리 시스템.
Amazon DocumentDB(MongoDB 호환)	JSON 문서 기반의 데이터베이스. 대규모 문서 기반 데이터 처리	NoSQL, MongoDB 호환, 문서 데이터베이스.
Amazon DynamoDB	완전 관리형 NoSQL 데이터베이스 서비스. 밀리초 수준의 응답 속도. 키-값 및 문서 저장.	NoSQL, 저지연, 스케일링 용이. 실시간 게임 애플리케이션의 사용자 세션 관리.
Amazon ElastiCache	Redis와 Memcached를 지원하는 인메모리 캐싱 서비스. 애플리케이션 성능 향상.	인메모리 캐싱, Redis, Memcached. 자주 조회되는 데이터를 캐싱하여 웹사이트 성능 개선.
Amazon Keyspaces(for Apache Cassandra)	완전 관리형 Apache Cassandra 호환 데이터베이스. 글로벌 디비에 적합. 서버리스 운영	NoSQL, Cassandra 호환, 글로벌 데이터 스토어. IoT 데이터를 처리하고 저장.
Amazon Neptune	그래프 데이터베이스 서비스. 관계형 데이터를 그래프 형태로 시각화 가능.	그래프 데이터베이스, 추천 시스템, 지식 그래프. 소셜 네트워크 연결 데이터 관리
Amazon Quantum Ledger Database(Amazon QLDB)	변경 불가능한 트랜잭션 로그 데이터베이스. 데이터 변경 이력 보존. 암호학적으로 검증 가능	불변성, 트랜잭션 로그, 회계 시스템. 금융 거래 기록 추적 및 검증
Amazon RDS	완전 관리형 관계형 데이터베이스 서비스. 자동 백업 및 모니터링 제공.	RDBMS, 관리형 데이터베이스, 다중 엔진 지원.
Amazon Redshift	페타바이트 규모의 데이터 웨어하우스. 고속 쿼리 처리.	데이터 웨어하우스, BI 도구. 고객 행동 데이터를 분석

개발자 도구

개념	설명	키워드 or 예제 상황
AWS X-Ray	분산 애플리케이션의 성능 분석 도구. 요청 흐름 시각화. 병목 지점 및 성능 문제 파악	분산 추적, 성능 모니터링, 애플리케이션 디버깅. 마이크로서비스 아키텍처의 성능 병목점 추적.

프런트엔드 웹 및 모바일

개념	설명	키워드 or 예제 상황
AWS Amplify	풀스택 애플리케이션 개발을 지원하는 도구 세트. 프론트엔드와 백엔드 통합 관리. 서버리스 앱에 적합	모바일 앱 개발 시 Amplify로 인증 및 스토리지 구현.
Amazon API Gateway	API 생성, 배포 및 관리를 지원하는 서비스. RESTful 및 WebSocket API 지원. 트래픽 관리 및 모니터링	API 관리, RESTful API, WebSocket API. 모바일 앱과 백엔드 서비스 간 통신을 위한 API 생성.
AWS Device Farm	애플리케이션 테스트를 위한 클라우드 기반 디바이스 테스트 서비스. 다양한 운영 체제와 브라우저 지원	앱 테스트, 다양한 디바이스 지원, 자동화 테스트. 새로운 모바일 앱을 다양한 OS 버전에서 테스트.
Amazon Pinpoint	고객 참여 및 마케팅 캠페인 관리 서비스. 이메일, SMS, 푸시 알림 지원. 고객 세분화 및 타겟팅 가능	마케팅 캠페인, 고객 세분화, 멀티채널. 푸시 알림을 통해 고객에게 맞춤형 프로모션 전달

머신러닝

개념	설명	키워드 or 예제 상황
Amazon Comprehend	자연어 처리(NLP) 서비스로 텍스트 분석을 자동화	텍스트 분석, NLP, 감정 분석. 고객 리뷰 분석
Amazon Forecast	머신러닝 기반 시계열 예측 서비스.	시계열 예측, 수요 예측, ML 기반. 매장별 재고 예측
Amazon Fraud Detector	사기 탐지를 위한 맞춤형 머신러닝 모델. 로그인, 결제 등의 의심스러운 활동 감지. 사용자 정의 규칙 활용 가능	사기 탐지, 맞춤형 ML, 안전성 강화. 전자상거래에서 의심스러운 주문 감지.
Amazon Kendra	지능형 검색 서비스로, 기업의 문서 및 데이터에서 정보를 쉽게 검색	지능형 검색, 자연어 쿼리, 기업 데이터 검색. 회사의 내부 문서에서 필요한 정보 검색
Amazon Lex	대화형 AI 챗봇 개발 플랫폼. 음성 및 텍스트 기반 대화 지원. 자동 음성 인식(ASR) 및 자연어 처리(NLP) 포함	챗봇, 대화형 AI, ASR, NLP 지원. 고객 지원용 AI 챗봇 개발
Amazon Polly	텍스트를 자연스러운 음성으로 변환하는 TTS(Text-to-Speech) 서비스. 실시간 스트리밍 가능.	TTS, 텍스트 음성 변환, 다양한 음성. 교육용 앱에서 텍스트를 음성으로 출력.
Amazon Rekognition	이미지 및 동영상 분석 서비스. 얼굴 인식, 객체 탐지, 비디오 태깅 지원.	이미지/비디오 분석, 얼굴 인식, 객체 탐지. 보안 시스템에서 얼굴 인식으로 출입 제어.
Amazon SageMaker	머신러닝 모델 구축, 훈련, 배포를 위한 완전 관리형 서비스. 데이터 준비부터 모델 배포까지 통합 지원	ML 모델 개발, 훈련 및 배포, 완전 관리형. 예측 모델 개발.
Amazon Textract	문서에서 텍스트와 데이터를 추출하는 서비스	문서 데이터 추출, OCR, 자동화된 데이터 처리.
Amazon Transcribe	음성을 텍스트로 변환하는 STT(Speech-to-Text) 서비스.	STT, 음성 텍스트 변환, 실시간 변환. 회의 녹음을 텍스트로 변환하여 기록.
Amazon Translate	자동화된 언어 번역 서비스.	언어 번역, 다중 언어 지원, 실시간 번역.

AWS의 관리 거버넌스

개념	설명	키워드 or 예제 상황
AWS CloudFormation	인프라를 코드로 관리하는 서비스. 반복 가능하고 예측 가능한 배포 가능. SON/YAML 템플릿으로 리소스 생성 및 관리.	템플릿 기반 배포, 자동화된 리소스 관리. 개발 환경과 동일한 프로덕션 환경 배포.
AWS CloudTrail	AWS 계정에서의 API 호출 및 활동 로그 기록.	활동 로깅, 보안 감사, API 호출 추적.
Amazon CloudWatch	리소스 모니터링 및 관리 서비스.	모니터링, 알림, 로그 분석.
AWS Compute Optimizer	리소스 사용량 분석 및 최적화 제안 제공. 머신러닝 기반 추천 제공.	리소스 최적화, 비용 절감, ML 추천.
AWS Config	리소스 변경 추적 및 규정 준수 확인.	리소스 변경 추적, 컴플라이언스 모니터링.
AWS Control Tower	멀티 계정 관리 및 거버넌스를 위한 서비스. 계정 설정 및 정책 관리 간소화.	멀티 계정 관리, 거버넌스, Landing Zone. 조직 내 여러 AWS 계정을 일관성 있게 관리.
AWS Health Dashboard	AWS 서비스 상태 및 계정에 영향을 주는 문제에 대한 알림 제공	서비스 상태, 문제 알림, 실시간 업데이트.
AWS License Manager	소프트웨어 라이선스 추적 및 관리.	라이선스 관리, 컴플라이언스 추적.
Amazon Managed Grafana	대시보드 기반 모니터링 및 시각화 서비스.	데이터 시각화, 모니터링 대시보드. CloudWatch 데이터를 실시간 대시보드에 표시.
AWS Management Console	웹 기반 AWS 리소스 관리 도구.	웹 관리 도구, 사용자 인터페이스.
AWS Organizations	여러 AWS 계정을 중앙에서 관리. 계정 생성, 정책 관리, 비용 제어 가능.	멀티 계정 관리, 비용 통제, SCP. 조직의 하위 계정에 특정 리소스 사용 제한.
AWS Systems Manager	인스턴스 및 애플리케이션의 관리 및 제어를 지원.	운영 관리, 패치 관리, 자동화.
AWS Trusted Advisor	AWS 환경을 최적화하기 위한 권장사항 제공. 비용, 성능, 보안 등 다섯 가지 카테고리에서 권장.	AWS 최적화, 권장사항. 리소스 상태를 실시간으로 확인 가능.
AWS Well-Architected Tool	워크로드의 아키텍처를 검토하고 개선점을 제안. AWS Well-Architected 프레임워크에 따라 평가.	아키텍처 검토, 베스트 프랙티스. 신뢰성, 성능, 비용 효율성 등 기준 제공.

미디어서비스

개념	설명	키워드 or 예제 상황
Amazon Elastic Transcoder	비디오 파일을 다양한 디바이스 및 포맷에 맞게 변환하는 클라우드 기반 서비스	비디오 변환, 멀티 디바이스, 자동 스케일링. 고화질 비디오를 모바일 및 웹에서 재생 가능한 형식으로 변환.
Amazon Kinesis Video Streams	실시간 비디오 스트리밍 데이터를 캡처, 저장, 처리 및 분석하는 서비스.	실시간 스트리밍, IoT 통합, AI 분석.

마이그레이션 및 전송

개념	설명	키워드 or 예제 상황
AWS Application Discovery Service	온프레미스 애플리케이션 및 워크로드를 AWS로 마이그레이션하기 위해 분석하고 정보 수집	워크로드 분석, 마이그레이션 준비.
AWS Application Migration Service	온프레미스 서버를 클라우드로 직접 마이그레이션하는 서비스.	리프트 앤 시프트, 자동화된 마이그레이션.
AWS Database Migration Service(AWS DMS)	데이터베이스를 AWS로 마이그레이션하는 관리형 서비스.	데이터베이스 마이그레이션, 가동 중 데이터 이전.
AWS DataSync	데이터를 온프레미스에서 AWS 또는 AWS 내의 다른 스토리지 서비스로 빠르게 전송.	빠른 데이터 전송, 자동화된 동기화. S3, EFS, FSx와 통합 가능.
AWS Migration Hub	마이그레이션 프로젝트를 중앙에서 모니터링하고 관리.	마이그레이션 중앙 관리, 상태 추적.
AWS Snow Family	AWS Snowcone: 소형 데이터 전송 장치. AWS Snowball: 대용량 데이터 전송 장치(컴퓨팅 기능 포함). AWS Snowmobile: 엑사바이트 규모 데이터 전송 트럭.	오프라인 데이터 전송, 보안 강화.
AWS Transfer Family	SFTP, FTPS, FTP 프로토콜을 사용해 데이터를 AWS로 전송. 인프라 관리 필요 없음.	Amazon S3 또는 Amazon EFS와 통합. 파일 전송, SFTP/FTP/FTPS 지원.

네트워킹 및 콘텐츠 전송

개념	설명	키워드 or 예제 상황
AWS Client VPN	AWS 리소스 및 온프레미스 네트워크에 보안 연결을 제공하는 클라우드 기반 VPN 서비스. 확장 가능하며 사용자 인증과 통합 지원.	원격 액세스, 보안 연결, OpenVPN. 재택근무 중 회사 네트워크에 안전하게 접속.
Amazon CloudFront	전 세계 엣지 로케이션을 통해 콘텐츠를 캐싱 및 전송하는 CDN(Content Delivery Network) 서비스. AWS Shield를 통한 DDoS 공격 방어.	동적 콘텐츠와 정적 콘텐츠 모두 지원. CDN, 캐싱, DDoS 방어.
AWS Direct Connect	온프레미스 네트워크와 AWS 간의 전용 물리적 연결을 제공. 데이터 전송 비용 절감 가능.	하이브리드 클라우드 구현. 전용 네트워크 연결, 온프레미스 통합.
AWS Global Accelerator	글로벌 사용자와 AWS 리소스 간 트래픽을 최적의 네트워크 경로로 라우팅하여 성능을 개선.	엣지 로케이션을 사용하여 지연 시간 단축. 고가용성과 DDoS 방어.
AWS PrivateLink	VPC 간 또는 VPC와 온프레미스 간에 안전하게 비공개 연결을 설정. 네트워크 트래픽이 AWS 네트워크를 벗어나지 않음.	프라이빗 연결, 퍼블릭 IP 미사용. VPC 내에서 Amazon S3를 안전하게 액세스.
AWS Site-to-Site VPN	온프레미스 네트워크와 AWS 간에 암호화된 보안 연결을 설정. 인터넷을 통해 AWS VPC와 안전하게 연결	온프레미스 연결, 암호화된 터널. 사무실 네트워크에서 AWS 리소스에 접근.
AWS Transit Gateway	여러 VPC와 온프레미스 네트워크를 중앙에서 연결하는 네트워크 허브. VPC, VPN, Direct Connect 간의 통합 가능.	중앙 네트워크 허브, 대규모 네트워크. 다수의 VPC와 온프레미스 네트워크를 연결하여 중앙에서 관리.

보안, 자격 증명 및 규정 준수

개념	설명	키워드 or 예제 상황
AWS Artifact	규정 준수 및 보고서를 관리하기 위한 중앙 허브로, 감사 보고서와 협정 문서를 다운로드할 수 있음.	규정 준수, 감사 보고서.
AWS Audit Manager	규정 준수를 자동화하고 감사 프로세스를 간소화하는 도구.	자동화 감사, 규정 준수 평가.
AWS Certificate Manager	SSL/TLS 인증서를 쉽게 프로비저닝, 관리, 배포할 수 있는 서비스.	SSL/TLS 인증서, 자동 갱신. 로드 밸런서에 HTTPS를 설정.
AWS CloudHSM	고객이 관리하는 하드웨어 보안 모듈(HSM)을 제공하여 암호화 키를 보호	HSM, 암호화 키 제어. 고급 보안 암호화가 필요한 금융 애플리케이션.
Amazon Cognito	사용자 인증 및 권한 부여를 간단히 구현하는 서비스.	사용자 인증, 소셜 로그인. 웹/모바일 앱에 사용자 로그인 기능 추가.
Amazon Detective	보안 문제의 근본 원인을 파악하기 위해 AWS 환경에서 로그와 데이터를 분석하는 서비스	Amazon GuardDuty, CloudTrail, VPC Flow Logs와 통합. 보안 분석, 근본 원인 파악.
AWS Directory Service	AWS 환경에서 Microsoft Active Directory 또는 LDAP 디렉터리를 설정하고 관리하는 서비스. 사용자 인증과 통합.	Active Directory, 사용자 인증. 조직의 직원 계정을 중앙에서 관리.
AWS Firewall Manager	여러 계정과 리소스에 대해 방화벽 규칙을 중앙에서 관리. AWS WAF, AWS Shield Advanced와 통합.	조직 전체에 일관된 보안 정책 적용. 중앙 관리, 방화벽 규칙.
Amazon GuardDuty	위협 탐지를 위한 관리형 보안 서비스. 악의적인 활동과 비정상적인 동작 감지.	위협 탐지, 로그 분석. AWS 계정에서 비정상적인 API 호출 탐지.
AWS IAM Identity Center(AWS Single Sign-On)	조직의 사용자에게 여러 AWS 계정 및 애플리케이션에 대한 중앙 액세스 제공.	SSO, 중앙 관리. 직원들이 단일 인증으로 여러 AWS 계정에 액세스.
Amazon Inspector	애플리케이션의 취약점을 평가하고 보안을 강화	취약점 평가, 보안 검사.
Amazon Macie	민감한 데이터를 자동으로 식별하고 보호	민감 데이터 보호, PII 탐지. S3 버킷 보안 평가.
AWS Network Firewall	VPC에 대한 네트워크 트래픽을 보호하는 관리형 방화벽 서비스.	네트워크 방화벽, 트래픽 필터링.
AWS Resource Access Manager(AWS RAM)	여러 AWS 계정 간에 리소스를 공유하는 서비스.	리소스 공유, 조직 통합 관리. 여러 계정에서 단일 VPC 서브넷 공유.
AWS Secrets Manager	애플리케이션 비밀을 저장, 관리, 검색하는 서비스.	비밀 관리, 자동 갱신.
AWS Security Hub	보안 상태를 중앙에서 모니터링하고 관리.	중앙 보안 관리, 보안 대시보드.
AWS Shield	AWS 리소스를 DDoS 공격으로부터 보호.	DDoS 보호, 고급 보안
AWS WAF	SQL 인젝션, 크로스 사이트 스크립팅(XSS) 공격 등과 같은 웹 공격으로부터 보호하는 방화벽 서비스	웹 방화벽, 트래픽 필터링, 보안 규칙. 특정 IP 주소나 HTTP 요청을 차단하여 애플리케이션을 보호.

서버리스

개념	설명	키워드 or 예제 상황
AWS AppSync	GraphQL API를 구축하고 관리할 수 있는 서비스로, 실시간 데이터 동기화 및 오프라인 지원 기능을 제공	GraphQL, 실시간 데이터 동기화, API 관리.
AWS Fargate	서버리스 컨테이너 실행 엔진으로, 컨테이너를 실행하기 위해 인프라를 관리할 필요 없이 코드만 배포	서버리스 컨테이너, 인프라 관리 불필요. ECS, EKS와 통합
AWS Lambda	서버리스 컴퓨팅 서비스	서버리스 컴퓨팅, 이벤트 기반 실행.

스토리지

개념	설명	키워드 or 예제 상황
AWS Backup	AWS 리소스의 데이터를 백업하고 복구하는 관리형 서비스	데이터 백업, 복구 관리.
Amazon Elastic Block Store(Amazon EBS)	EC2 인스턴스에 연결된 블록 수준 스토리지	블록 스토리지, 고가용성, 스냅샷.
Amazon Elastic File System(Amazon EFS)	EC2 인스턴스에 쉽게 연결할 수 있는 확장 가능한 파일 시스템 서비스	파일 시스템, 자동 확장, 공유 스토리지.
Amazon FSx(모든 유형)	FSx for Windows: Microsoft Windows 환경과 호환되는 파일 시스템 제공. FSx for Lustre: 고성능 컴퓨팅 워크로드 지원. FSx for NetApp ONTAP: 고급 데이터 관리 기능 제공.	Windows 파일 시스템, 고성능 Lustre.
AWS Storage Gateway	온프레미스 데이터 센터와 AWS 클라우드 스토리지를 연결하여 하이브리드 클라우드 환경을 구현하는 서비스 - 파일 게이트웨이: 파일 기반의 데이터 전송. - 테이프 게이트웨이: 백업 데이터를 클라우드로 전송. - 볼륨 게이트웨이: 블록 수준의 데이터 전송.	하이브리드 클라우드, 온프레미스와 클라우드 통합

워드프레스 개발 공부 기록3

_김도연 — Thu, 9 Nov 2023 10:14:27 +0900

Class

- 클래스 생성자에 add_action, add_filter를 넣음

- new 키워드로 클래스를 생성함

- action, filter는 내부적으로 call_user_func 함수를 사용함

call_user_func([$object, 'function_name']);

Ajax

- 관리자단에서 사용할 경우

add_action(

'wp_ajax_{my_action}',

function () {

// ...

die();

}

);

- 비관리자(클라이언트)단에서 사용할 경우 (php)

add_action('wp_ajax_nopriv_{my_action}', 'my_action_callback');

(js)

$.get(ajaxurl, {

action: 'my_action',

key: value

});

워드프레스 개발 지식 정리2

_김도연 — Wed, 8 Nov 2023 17:43:57 +0900

훅(Hook) : 워드프레스 CMS 코드를 수정하지 않고 함수의 동작을 바꾸도록 해주는 것

1. 액션(Action) : 아무것도 리턴하지 않음. 대체로 출력에 사용

2. 필터(Filter) : 콘텐츠를 받아서 바꾼 뒤 리턴. (변형/추가/제거)

Filter

- manage_pages_columns

- manage_posts_columns
- manage_{$post_type}_posts_columns

미디어 사이즈 관리

- 워드프레스는 이미지를 업로드하면 곧장 리사이즈해서 저장함

- 동적 리사이즈를 기본 지원하지는 않음 - 성능, 이미지 서버

반응형 적용

- CSS minify 풀려면 다음 설정 필요

define('SCRIPT_DEBUG', true);

- 워드프레스 관리자 목록은 1100px, 782px, 480px에서 분기. 주된 것은 782px 분기에 있음.

워드프레스 개발 지식 정리 1

_김도연 — Wed, 8 Nov 2023 14:01:22 +0900

기초 개념

- funtions.php : 워드프레스가 기본으로 include 하는 php 파일

- register_post_type : 새 포스트 타입을 등록하는 함수

- add_action : 특정 순간에 함수를 실행할 수 있도록 시점과 함수를 주입하는 함수

https://developer.wordpress.org/reference/functions/register_post_type/

WordPress Developer Resources | Official WordPress Developer Resources

Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme development, block editor), and more.

developer.wordpress.org

- have_posts : $wp_post에서 더 표시할 post가 있는지 검사. 있으면 true, 없으면 false 리턴

- the_post : template tag를 사용할 수 있게 $wp_post의 현재 post를 세팅. 현재 포스트를 한 칸 뒤로 이동한다.

메뉴에 사용가능한 아이콘 모음

https://developer.wordpress.org/resource/dashicons/#pets

WordPress Developer Resources | Official WordPress Developer Resources

Official WordPress developer resources including a code reference, handbooks (for APIs, plugin and theme development, block editor), and more.

developer.wordpress.org

싱글 페이지

- post, custom post type : single.php

- page : page.php

- 둘다 : singular.php

Taxonomy

- 카테고리, 태그 등을 추가할 때 사용하는 개념

- 등록 순서에 따라 목록의 컬럼 순서가 정해짐

Metabox

- post 편집 화면에서 한 영역을 뜻하는 용어.

- html의 필드셋 개념으로 생각하면 됨. 필드를 추가할 때 사용

- add_meta_boxes

- add_meta_boxes_{post-type}

갤럭시 에뮬레이터 다운받는 사이트

_김도연 — Wed, 11 Jan 2023 15:03:47 +0900

삼성 개발자 홈페이지가 업데이트 되며 구글링으로 나온 블로그의 방법으로 찾을 수 없게 되었다.

Galaxy Emulator Skin | Samsung Developers

Galaxy Emulator Skin gives developers and testers the closest possible look and feel to a Samsung Galaxy device.

developer.samsung.com

저처럼 헤매고 있을 개발자들을 위해 링크 남깁니다.

여기서 다운받으시면 됩니당

SVG 애니매이션을 도와주는 도구 - Chrome Animation Tool

_김도연 — Sat, 23 Apr 2022 22:49:26 +0900

Chrome Animation Tool

Chorme의 개발자 도구에서 애니메이션을 상세하게 볼 수 있는 기능이 있습니다.

해당 기능을 통해 코드 편집기에서 코드를 수정하지 않고, Chorme에서 쉽게 애니메이션 타이밍을 조절할 수 있습니다.

우선 크롬 개발자도구에서 애니메이션 탭을 열어줍니다.

애니메이션 탭을 활용하기 위해서는 탭이 열린 채로 페이지가 로드되어야 합니다.

중간에 열게 되면 비어있는 탭이 나타나는 경우가 있는데 이때 새로고침하여 애니메이션 정보를 불러올 수 있습니다.

생성된 애니메이션 썸네일 바를 클릭하여 애니메이션 상세 정보를 볼 수 있습니다.

- 색상이 진한 부분 : 애니메이션

- 색상이 연한 부분 : 반복되는 애니메이션

- 색상이 채워진 원 : 애니메이션의 시작/끝

- 비어있는 원 : 애니메이션 중간의 키프레임

애니메이션 탭의 상단에서 재생 여부, 재생 속도(1배, 0.25배, 0.1배)를 조절할 수 있습니다.

애니메이션 영역을 마우스로 클릭하고 수평으로 끌어 애니메이션 위치를 변경할 수도 있습니다.

원을 클릭하고 좌우로 끌어 애니메이션 실행시간을 변경할 수도 있습니다.

예제 출처

https://codepen.io/fixcl/pen/eYpmYj

Sovog 404 page

Sovog has a configuration problem... - Svg animation path (antennae, eyes, mouth) - Animation limbs css transform. - NO JS !!! ...

codepen.io

테스트용 mp4 url

_김도연 — Wed, 16 Feb 2022 12:45:58 +0900

https://gist.github.com/jsturgis/3b19447b304616f18657

public test videos

public test videos. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com