[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

PWA - PRPL 패턴

PRPL 패턴이란? PRPL은 웹 페이지를 인터랙티브하고 더 빠르게 로드하는 패턴으로 Google Chrome 팀이 고안했다. 오프라인이거나 데이터 절약 모드에서 네트워크 지연이 높은 모바일 기기를 위한 것이다. PRPL은 다음을 함축하고 있는 약어다. Preload the most important resources. 가장 중요한 리소스를 미리 로드해라. Render the initial route as soon as possible. 최초 라우팅을 가능한 빨리 렌더링해라. Pre-cache remaining assets. 남은 assets를 미리 캐싱하라. Lazy load other routes and non-critical assets. 다른 라우팅과 덜 중요한 assets를 레이지로딩해라. Pr..