일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- devtools
- Cypress
- vue3
- e2e
- CSS
- QUIC
- csr
- 선택자
- ViTE
- web vital
- 비동기
- svelte
- ts error
- custom command
- TLS
- CloudFlare
- https
- caching
- vue-cli
- JavaScript
- http3
- msw
- Testing
- aws
- import.meta.env
- SSR
- rendering
- api test
- typeScript
- vue
- Today
- Total
목록분류 전체보기 (82)
Develop Note by J.S.
1. Function Pipelineconst addFive = (x) => x + 5;const double = (x) => x * 2;const minusOne = (x) => x - 1;const result = minusOne(addFive(double(10)));특정 값을 여러 함수에 순차적으로 전달하여 결과를 사용하는 코드는 가독성이 떨어집니다. Pipe를 정의하고 이를 사용해 코드 리팩토링 시 가독성이 좋아질 것입니다. 1) 코드 정의 // common.tsexport const _ = { filter(predicate) { return (array) => array.filter(predicate); }, sort(compareFn) { return ..

1. 개요- 프로그래밍 언어는 실행 방법에 따라 컴파일 언어와 인터프리터 언어로 구분할 수 있습니다.- 컴파일러(Compiler)는 개발자가 작성한 고급언어를 기계가 이해할 수 있는 저급언어로 번역하는 프로그램을 뜻합니다. - 어느 시점에 기계어로 번역이 되어 실행되는 지에 따라 컴파일 언어, 인터프리터 언어로 나뉘게 됩니다.1) 컴파일 언어 (정적 컴파일러)원시코드(개발자가 작성한 코드)를 컴파일 타임에 모든 소스를 기계어로 변환하여 실행파일로 만들고 컴파일은 단 한번 수행됩니다. 런타임 시점에는 이미 기계어로 변경된 소스코드를 수행할 뿐입니다. - 컴파일 언어 : C, C++, C#, JAVA 등2) 인터프리터 언어컴파일 언어와 반대로 컴파일 과정없이 런타임에 소스코드를 한줄씩 해석하며 즉시 실행하는..

1. EC2 (Elastic Compute Cloud)- 문자 그대로 유연한 컴퓨터 클라우드 서비스 입니다. 디스크 용량, CPU, GPU, RAM 등의 서버 스펙을 사용자가 원하는 성능으로 맞추어 사용할 수 있도록 서비스를 제공합니다. 2. EC2 지불방법- On-demand : 시간단위 가격, 개발 및 테스트 환경에서 최소한의 비용을 지불하여 사용하는 경우에 가장 적합- Reserved : 미리 지정하여 1~3년동안 시간별로 할인 적용- Spot : 입찰가격 적용, 가장 큰 할인률을 적용3. EBS (Elastic Block Storage)- 저장공간이 생성되어지며 EC2 인스턴스에 부착된다.- 특정 *Availability Zone에 생성된다*AZ - 장해 발생 시 AZ백업을 통해 복구..

1. IAM (Indentity and Access Management)- IAM은 Root 계정내의 여러 계정 및 그룹을 만들고, 역할(Role)과 정책(Policy)를 부여하여 각 계정별 AWS 서비스 이용 권한을 관리하는 하는 것입니다. 2. IAM 시뮬레이션- 하위 계정을 만들고 정책을 연결하여 생성된 계정이 정말로 그 권한을 가지고 있는지에대 대한 시뮬레이션 기능을 제공 합니다. - 아래는 DynamoDB의 Read/Write 권한을 부여한 정책을 생성하고 생성한 계정으로 시뮬레이션을 돌려보는 테스트 입니다. - 시뮬레이션을 진행하면 해당 계정이, 선택한 Service와 Action에 대한 Permission 결과를 allowed / denied로 결과를 알려줍니다.

웹 사이트의 개선에 가장 중요한 핵심은? - 더 나은 웹 사이트 성능을 달성하기 위한 핵심 키워드는 크기와 순서 입니다. - 리소스 전송 파일의 크기를 줄일 수 있다면 더욱 빠르게 전송하여 시간을 단축 시킬 수 있고, 우선 순위에 따라 로드되는 순서를 조작 할 수 있다면 웹 바이탈 측정 결과가 더욱 향상 될 수 있습니다. 1. 호스팅 및 파일 전송 - 웹 성능은 웹 사이트의 파일을 전달하는 서버의 품질에서 시작됩니다. 서버 품질은 빠른 *TTFB(Time to First Byte)의 핵심이 되며 이는 더나은 FCP(First Contnentful Paint)로 연결 됩니다. - 또한 CDN을 활용하여 사용자의 위치에서 물리적으로 가까운 지역에 있는 CDN 서버를 둔다면 리소스 전달 속도를 향상 시킬 수 ..

웹 바이탈은 6개의 성능 측정 지표가 있습니다. 6개중 5개는 밀리초 또는 초 단위로 측정되며, 일반적으로 2초 이내 측정된 결과를 빠르다고 표현합니다. 1. First Contentful Paint - FCP는 브라우저가 첫번째 중요한 콘텐츠(텍스트 또는 이미지/애니메이션 등)를 표시하는 첫 번째 시점까지의 소요시간입니다. - 브라우저에 첫번째로 픽셀이 로드되는 First Paint(FP)와 FCP는 다릅니다. - FCP는 로딩 프로세스 초기에 발생하므로 백엔드 성능을 나타내는 좋은 지표가 되며 목표 FCP는 0~2초 범위입니다. - 요점 : FCP 이전에 발생되는 속도 저하 요소 감지 2. Time to Interactive - TTI는 페이지가 사용자와 완전히 상호작용할 때 까지의 소요시간입니다. ..

1. 개요 - 웹 바이탈은 페이지의 로딩속도, 응답성, 안정성 등의 평가 항목을 측정하는 것으로 더 나은 사용자 경험을 제공하기 위한 웹의 필수적인 품질 요소를 말합니다. 웹 바이탈은 사용자의 경험 뿐 만 아니라, 검색 엔진 최적화(SEO) 전략의 많은 영향을 주기 때문에 관리가 필요합니다. 2. Web Speed - Steve Souders(전 google 수석 성능 엔지니어, 전 Yahoo 최고 성능 책임자)는 클라이언트/서버가 8:2 비중으로 웹 성능에 영향을 준다고 말합니다. 웹은 클라이언트 측에서 대부분의 최적화 작업이 이루어진다고 볼 수 있습니다. - 웹 성능을 측정하는 여러가지 도구가 있는데, 접근성이 좋은 크롬 개발자 도구외에도 다양한 웹 측정 서비스들이 있습니다. [측정 방법] 1) Ch..

1. 브라우저 - HTTP(하이퍼 텍스트 전송 프로토콜)를 사용하여 텍스트, 이미지, 비디오 등의 콘텐츠를 송수신하여 브라우저를 통해 사용자와의 Interation 및 사용자가 원하는 정보를 제공합니다. - 브라우저는 대표적으로 Mozilla Firefox, Google Chrome, Microsoft Edge, Apple Safari가 있어 서로 다른 다양한 기능을 제공하지만, 브라우저에 관계없이 사용자에게 동일한 경험을 제공할 수 있도록 웹 표준이 있습니다. 2. 브라우저의 기본 구조 1) 사용자 인터페이지 : 주소창, 뒤로가기, 새로고침, 북마크 등의 기능을 포함하며, 웹 페이지의 표시부분 (Document)를 제외한 모든 것을 뜻합니다. 2) 브라우저 엔진 : 렌더링 엔진과 상호작용을 하며 조작하..