Develop Note by J.S.

웹 사이트의 개선에 가장 중요한 핵심은? - 더 나은 웹 사이트 성능을 달성하기 위한 핵심 키워드는 크기와 순서 입니다. - 리소스 전송 파일의 크기를 줄일 수 있다면 더욱 빠르게 전송하여 시간을 단축 시킬 수 있고, 우선 순위에 따라 로드되는 순서를 조작 할 수 있다면 웹 바이탈 측정 결과가 더욱 향상 될 수 있습니다. 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..

스벨트란? 스벨트는 2016년 출시된 오픈소스 프론트엔드 프레임워크 입니다. 스벨트는 Vue, React와 동일한 기능을 가진 코드를 작성하였을 때 가장 적은양의 코드라인으로 작성이 가능하며, 가상돔 (Virtual Dom)을 사용하지 않는다는 특징이 있습니다. * 동일 로직 비교 // svelte {a} + {b} = {a + b} // react import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setA] = useState(2); function handleChangeA(event) { setA(+event.target.value); } function handl..

1. 개요 Svelte 프레임워크 자체는 Routing 기능을 제공하지 않습니다. 따라서 Svelte를 사용하여 SPA를 구현하고자 한다면 별도의 라이브러리를 설치하여야 하지만 SvelteKit 프레임워크의 경우 Routing 기능이 내장되어 있습니다. 2. Svelte Routing (Feat. svelte-spa-router) // router 모듈 설치 $ npm i svelte-spa-router // route/index.js import Home from './routes/Home.svelte' import Author from './routes/Author.svelte' import Book from './routes/Book.svelte' import NotFound from './rout..

1. Context Api Svelte에서 데이터를 다른 컴포넌트의 공유하는 방법에는 Props, Store, Context Api 를 이용하는 방법이 있습니다. - Props는 상위 컴포넌트에서 하위 컴포넌트로의 데이터 전달 - Store는 별도의 저장소를 두어 다양한 위치에서 해당 저장소에 접근하여 데이터를 핸들링을 할 수 있는 기능입니다. - Context는 특정 컴포넌트 위치에서 Context를 생성하면 해당 컴포넌트 위치 기준 자식, 자손 컴포넌트 범위로 데이터를 공유하는 기능입니다. - 상기 이미지와 같은 컴포넌트 구조에서는 Props를 사용한다면 반복하여 자손 컴포넌트로 Props를 전달하는 번거로움이 발생됩니다. 이때 Context Api를 활용하면 간단하게 원하는 데이터를 공유할 수 있습..

1. 소개 - Svelte 키워드로 구글링을 하는 경우 Svelte, SvelteKit 두 프레임워크에 대한 내용을 접할 수 있습니다. 일반적으로 Svelte라고 하면 프론트엔드 개발을 위한 오픈소스 프레임워크를 뜻하며, SvelteKit은 Svelte를 베이스로한 SSR 기반 프레임워크를 뜻합니다. - Svelte 공식 문서에서의 설치 가이드는 오직 SvelteKit(SSR) 프레임워크 프로젝트 구축에 대한 내용만을 제공하고 있습니다. Svelte에서는 공식적으로 SvelteKit(SSR)을 권장하는 듯 합니다. - 만일 SvelteKit 프로젝트에 SSR 관련된 코드들이 불필요하여 Svelte 프레임워크만을 사용하고 싶다면, Vite 빌드도구에서 프로젝트를 생성하는 방법이 있습니다. 하지만 Svelt..

Lifecycle Svelte Component의 Lifecycle(생명주기)은 BeforeUpdate, onMount, afterUpdate, onDestroy 순서로 동작됩니다. 각 생명주기가 동작되는 시점에, 해당 Hook Methods 내부에서 동작시킬 코드를 정의하여 사용합니다. 1. Lifecycle Hook 1) beforeUpdate - Component 생성 최초, Mount가 실행되기 전에 먼저 실행 - 이후 Component의 변경이 감지되면 beforeUpdate -> afterUpdate 순서로 실행 - 반응성이 있는 데이터를 beforeUpdate Hook 내부에서 사용하면 무한루프에 빠질 수 있기 때문에, 사용해야 한다면 동작 조건을 필히 입력 2) onMount - Compo..