자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API

Intersection Observer API Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다. 예시 let observer = new IntersectionObserver((e) => { e.forEach((el) => { console.log(el.intersectionRatio); // 화면에 포함된 퍼센트 if (el.isIntersecting) { console.log(el.intersectionRatio); el.target.style.opacity = el.intersectionRatio; } else { el.target.style.opacit..

[npm/yarn] 다운로드 가능한 패키지 버전별 확인 방법

// npm npm view 패키지이름 versions --json npm show 패키지이름 versions // yarn yarn info 패키지이름 versions

[Svelte] 스벨트 라우팅 컨벤션

스벨트 라우팅 컨벤션 Route은 src 폴더 안의 routes 폴더 안에 작성 (/src/routes) Route 파일은 +page.svelte 식의 이름으로 작성 /Routes 폴더 내 폴더는 URL 주소에서 경로 segment를 결정 동적 라우팅은 segmemt 폴더 아래 [somethingId] 식으로 폴더를 생성하여 그 안에 +page.svelte를 작성

[Svelte] 스벨트, 스벨트킷이란?

Svelte란? UI를 만들기 위한 컴포넌트 프레임워크 브라우저에서 UI를 그리고 처리하는 React 또는 Vue와는 다르게, 빌드 타임에 앱을 자바스크립트 코드로 변경 즉, Virtual DOM을 기반으로 작동하지 않고, 앱의 상태가 바뀔 때 DOM을 직접 바꾸는 기존의 바닐라 자바스크립트처럼 작동 SvelteKit이란? Svelte를 이용하여 고성능 웹앱을 만드는 프레임워크 Routing, SSR, 인증, 번들 최적화 등의 기능 제공 Backend 기능이 합쳐진 풀스택 웹 프레임워크 SvelteKit의 특징 File-based routing: 파일 자체가 라우터 기능을 함 Pre-rendering: SEO에 유리 API routes Data fetching Optimized production bui..

dialog 태그로 손쉽게 모달창 만들기

HTML의 dialog 태그를 이용하면 많은 스크립트를 작성하지 않고 손쉽게 모달창을 만들 수 있다. 모달 열기 버튼 모달창 내용 모달 닫기 버튼

리액트 JSX/TSX에서 switch 문법 사용하기

function HelloWorld() { const [state, setState] = useState(0); return ( {(() => { switch (state) { case 0: return ; case 1: return ; case 2: return ; default: } })()} ); }

[regex] 전화번호, 이메일 정규표현식

전화번호 -는 있어도 되고 없어도 됨이 기준 /^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/ 이메일 /^[A-Z0-9._%+]+@[A-Z0-9.]+\.[A-Z]{2,4}$/ 0 이상의 정수 /^[0-9]\d*$/

[React.ts] props로 setState 넘길 때 타입 지정하는 방법

Dispatch 형태로 타입을 지정한다. import { Dispatch, SetStateAction, useState } from "react"; interface IExample { state: boolean; setState: Dispatch; } const [state, setState] = useState(false);

앞으로 써먹어야 할 2022 CSS 최신 기술 모음

CSS 최신 기술들을 모아보았다. 2022년 11월 현재 기준으로, 브라우저 호환성이 떨어지는 기술일 수록 아래 쪽에 작성했다. :has() 특정한 자식을 가진 부모 요소를 선택할 수 있다. /** 포인터가 올라가 있는 img를 가진 부모 a 태그 **/ a:has(> img:hover) { ... } accent-color 라디오 버튼, 체크 박스, 범위 슬라이더 등 HTML 요소의 기본 강조 색상을 변경한다. input { accent-color: purple; } dvh, lvh, svh dvh: Dynamic Viewport Height - 동적 뷰포트 높이 (네비게이션 여부에 따라 달라짐) lvh: Largest Viewport Height - 가장 큰 뷰포트 높이 (네비게이션이 없을 때) sv..

PWA - RAIL 모델

RAIL 모델이란? 성능에 대해 생각할 수 있는 구조를 제공하는 사용자 중심의 성능 모델로, 사용자 경험을 주요 작업으로 분류하고 각각에 대한 성능 목표를 정의하도록 돕는다. RAIL은 아래와 같은 웹 앱 수명 주기의 4가지 뚜렷한 측면을 말한다 Response (응답) Animation (애니메이션) Idle (유휴 상태) Load (로드) 참조 https://web.dev/i18n/ko/rail/ RAIL 모델을 사용한 성능 측정 RAIL 모델을 통해 디자이너와 개발자는 사용자 경험에 가장 큰 영향을 미치는 성능 최적화 작업을 안정적으로 목표로 삼을 수 있습니다. RAIL 모델이 설정한 목표와 지침, 그리고 이를 달성하기 위 web.dev